M build.sh => build.sh +2 -1
@@ 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" \
- |
M el/html.template => el/html.template +1 -0
@@ 2,6 2,7 @@
<html$if(lang)$ lang="$lang$"$endif$>
<head>
<meta charset="utf-8">
+ <link rel="icon" href="/logo.png"/>
<meta name="generator" content="pandoc">
$for(author-meta)$
<meta name="author" content="$author-meta$">
D el/pub.el => el/pub.el +0 -69
@@ 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/")))
M res/base.css => res/base.css +96 -54
@@ 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 <html> 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;
}