From d686efceb132e1a86e036c5d3d02f0edb420b0cd Mon Sep 17 00:00:00 2001 From: Jakob Meier Date: Mon, 22 May 2023 18:16:55 +0200 Subject: [PATCH] Migrated from emacs --batch to pandoc --- build.sh | 3 +- el/html.template | 1 + el/pub.el | 69 ---------------------- res/base.css | 150 ++++++++++++++++++++++++++++++----------------- 4 files changed, 99 insertions(+), 124 deletions(-) delete mode 100644 el/pub.el diff --git a/build.sh b/build.sh index 08ca4d5..f87e40a 100755 --- a/build.sh +++ b/build.sh @@ -7,7 +7,7 @@ assetdir="$root/res" builddir="$root/build" # pandoc syntax highlighting theme -pandocTheme="espresso" +pandocTheme="./el/gruvbox.theme" # pandoc export target pandocTarget="html5" pandocTargetExtension="html" @@ -23,6 +23,7 @@ function convertOrg() { -f org \ -t $pandocTarget \ -c '/base.css' \ + --toc --toc-depth=1 \ --template ./el/html.template \ --highlight-style="$pandocTheme" \ - | diff --git a/el/html.template b/el/html.template index 135372f..7421fd6 100644 --- a/el/html.template +++ b/el/html.template @@ -2,6 +2,7 @@ + $for(author-meta)$ diff --git a/el/pub.el b/el/pub.el deleted file mode 100644 index 656d0f0..0000000 --- a/el/pub.el +++ /dev/null @@ -1,69 +0,0 @@ -(require 'ox-publish) - -(global-font-lock-mode 1) - -(setq package-list '(htmlize gruvbox-theme)) -(package-initialize) -; fetch the list of packages available -(unless package-archive-contents - (package-refresh-contents)) - -; install the missing packages -(dolist (package package-list) - (unless (package-installed-p package) - (package-install package))) - -;;(require 'cl-lib) -;;(require 'ob-tangle) -(require 'gruvbox-theme) -(require 'htmlize) -(setq org-src-fontify-natively t) -(setq org-html-htmlize-output-type 'css-inline) -(setq org-src-preserve-indentation t) -(setq org-html-html5-fancy t) -(setq rainbow-delimiters-mode t) - -;; function run before the website is generated -(defun before (n)) -;; function run after website has been generated -(defun after (n)) - -;; configure the project -(setq org-publish-project-alist - '( - ;; build the blog source - ("src" - :base-directory "./src" - :base-file "index.org" - :recursive t - :publishing-directory "./build" - :auto-sitemap nil - :preparation-function before - :complete-function after) - - ;; bundle the assets - ("res" - :base-directory "./res" - :base-extension "css\\|js\\|png\\|jpg\\|ttf" - :publishing-directory "./build/res" - :recursive t - :publishing-function org-publish-attachment - ) - - ;; bundle media used by blog posts - ("media" - :base-directory "./src" - :base-extension "jpeg\\|png\\|jpg" - :publishing-directory "./build" - :recursive t - :publishing-function org-publish-attachment - ) - - ;; combine the individual components into one - ("ccw.icu" :components ("src" "res" "media")) - )) - -;; dynamic build -;; force rebuild if "build" does not exist -;; or updated changed files if build does exist -(org-publish "ccw.icu" (not (file-directory-p "./build/"))) diff --git a/res/base.css b/res/base.css index bc8230e..18842f5 100644 --- a/res/base.css +++ b/res/base.css @@ -1,3 +1,4 @@ +/* VARIABLES */ :root { --color-purple: #b16286; --color-white: #ebdbb2; @@ -15,38 +16,68 @@ --color-link: var(--color-purple); --color-link-hv: #d3869b; } - +/* CUSTOM FONT */ @font-face { font-family: "Bitstream Vera"; src: url("./font/Vera.ttf"); } +/* GLOBAL STYLE */ html { padding: 0; margin: 0; + /* Apply the font to the whole website */ font-family: "Bitstream Vera"; + + /* We use the tag as a wrapper for the whole body */ + /* and limit the body width */ + display: flex; + justify-content: center; + background: var(--color-box-light); } body { background: var(--color-bg); background-size: cover; - position: absolute; + position: relative; + /* ensures the hover animations work properly */ + z-index: -1; margin: 0; - padding: 0.8rem; + + /* limit the body width */ min-height: calc(100vh - 0.8rem * 2); width: calc(100vw - 0.8rem * 2); display: flex; flex-direction: column; align-items: center; - color: var(--color-text) + color: var(--color-text); + max-width: 70rem; + width: calc(100% - 3rem * 2); + padding: 3rem; } -#content { - display: flex; - flex-direction: column; +body > p { + width: 100%; + margin: 0.4rem; +} +nav { + width: 100%; } -#content > figure { - align-self: center; +ul { width: 100% } + +/* HEADER */ +header { + width: 100%; +} +header > h1 { + font-size: 3rem; +} +header > h3 { + opacity: 0.8; +} + +/* QUOTES */ +/* adds a vertical white line in front of quotes */ blockquote { opacity: 0.9; position: relative; @@ -60,48 +91,47 @@ blockquote::before { margin-left: -1rem; border-radius: 8px; } -h1 { + +/* Make sure all headlines are on the left hand side */ +h1,h2,h3,h4,h5,h6 { color: var(--color-headline); + width: 100%; + margin-bottom: 0; } + +/* LINKS */ a { color: var(--color-link); - text-decoration: none; margin: 0.2rem; transition: color .4s; + text-decoration: underline; } a:hover { color: var(--color-link-hv); } + +/* IMAGES */ figure { margin: 0; padding: 0.4rem; max-width: 80%; + + /* add a background to the figure (same as code block, but with smaller margins) */ + border-radius: 0.4rem; + background: var(--color-box); + width: calc(100% - 2 * 0.4rem); + height: calc(100% - 2 * 0.4rem); + border: none; + padding: 0.4rem; + margin-top: 1rem; + overflow: auto; } img { border-radius: 1rem; max-width: 100%; } -.outline-2 { - margin: 0.8rem; - padding: 0.8rem 1.2rem; - display: flex; - flex-direction: column; - position: relative; -} -.outline-2::before { - z-index: -1; - content: ""; - left:0; - top:0; - position: absolute; - height: 100%; - width: 100%; - opacity: 0.85; - background: var(--color-box); - border-radius: 1rem; -} - +/* TABLES (untested) */ table { background: var(--color-bg); border-radius: 0.4rem; @@ -121,7 +151,6 @@ table tr:hover { table tr:nth-child(2n) { background: var(--color-text-dark2); } - .horizontal-table ~ table { display: flex flex-wrap: wrap; @@ -137,44 +166,54 @@ table tr:nth-child(2n) { border-radius: 0.4rem; } -.org-src-container { - border-radius: 8px; - background: var(--color-base); - border: 4px solid var(--color-base); - position: relative; - overflow: hidden; - max-height: 40vh; +/* CAPTIONS */ +div.captioned-content { + width: 100%; } -.org-src-container > label { +div.captioned-content > div.caption { display: flex; opacity: 0.8; font-size: 0.8rem; justify-content: right; padding: 0.1rem; + /* places the caption above the source code block header */ + z-index: 2; + position: relative; + margin-right: 0.2rem; } -.org-src-container > label > .listing-number { - margin-right: 0.2rem + +/* SOURCE CODE BLOCKS */ +div.sourceCode { + width: 100%; + border-radius: 0.4rem; + background: var(--color-base); + border: 4px solid var(--color-base); + position: relative; + overflow: hidden; } -.src { +pre.sourceCode { + border-radius: 0.4rem; background: var(--color-box-light); width: calc(100% - 2 * 0.4rem); - height: calc(100% - 2 * 0.4rem); border: none; padding: 0.4rem; margin: 0; margin-top: 1rem; overflow: auto; } -label ~ .src { - margin-top: 0; +div.caption ~ div.sourceCode { + /* moves caption into the source code block header*/ + margin-top: -1.25rem; } -.example { +pre.example { background: var(--color-box-light); border-radius: 8px; position: relative; border: none; + width: calc(100% - 0.8rem * 2); + padding: 0.8rem; } -.example::before { +pre.example::before { content: '> '; color: var(--color-blue); background: transparent; @@ -182,14 +221,17 @@ label ~ .src { position: sticky; left: 0 } +div.sourceCode ~ pre.example, div.captioned-content ~ pre.example { + /* move examples closer to the block above */ + margin-top: 0; +} -.org-src-container, .example, figure { +/* TRANS HOVER ANIMATION */ +div.sourceCode, pre.example, figure { position: relative !important; overflow: inherit; } - - -.org-src-container::after,.example::after, figure::after { +div.sourceCode::after,pre.example::after, figure::after { --offset: 0.4rem; content: ''; @@ -208,14 +250,14 @@ label ~ .src { opacity: 0; animation: none; } -.example::after { +pre.example::after { --offset: 0.2rem; } figure::after { --offset: 0.1rem; border-radius: 1rem; } -.org-src-container:hover::after,.example:hover::after, figure:hover::after { +div.sourceCode:hover::after,pre.example:hover::after, figure:hover::after { opacity: 0.8; animation: trans-rotate 10s both 0s linear infinite; } -- 2.38.5