/g,n(o))),lookbehind:!0,inside:null}],"builtin-type":{pattern:/\b(?:anyerror|bool|c_u?(?:int|long|longlong|short)|c_longdouble|c_void|comptime_(?:float|int)|f(?:16|32|64|128)|[iu](?:8|16|32|64|128|size)|noreturn|type|void)\b/,alias:"keyword"},keyword:r,function:/\b(?!\d)\w+(?=\s*\()/,number:/\b(?:0b[01]+|0o[0-7]+|0x[a-fA-F\d]+(?:\.[a-fA-F\d]*)?(?:[pP][+-]?[a-fA-F\d]+)?|\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)\b/,boolean:/\b(?:false|true)\b/,operator:/\.[*?]|\.{2,3}|[-=]>|\*\*|\+\+|\|\||(?:<<|>>|[-+*]%|[-+*/%^&|<>!=])=?|[?~]/,punctuation:/[.:,;(){}[\]]/},e.languages.zig["class-name"].forEach((function(n){null===n.inside&&(n.inside=e.languages.zig)}))}(Prism);
diff --git a/static/style.css b/static/style.css
index 2155ea1..7c9ecf7 100755
--- a/static/style.css
+++ b/static/style.css
@@ -1,14 +1,238 @@
+@import "/static/prism-base.css";
+
+/* === BEGIN color definitions === */
+/* system prefers light, or default */
+@media (prefers-color-scheme: light) {
+ body {
+ --text-color: #222;
+ --bkg-color: #fff;
+ --code-color: #c7254e;
+ --code-bkg-color: #f9f2f4;
+ --navlist-color: var(--code-color);
+ --navlist-bkg-color: var(--code-bkg-color);
+ --navlist-hover-color: #fff;
+ --navlist-bkg-hover-color: var(--anchor-hover-color);
+ --anchor-color: #222;
+ --anchor-hover-color: var(--code-color);
+ --footer-color: #444;
+ --footer-divider-color: #eee;
+ --caption-color: #888;
+
+ /* light-mode */
+ /* ========== */
+ /* colorscheme: B4T_Classic_Q by Bram de Haan */
+ /* author: Bram de Haan - https://github.com/atelierbram/Base4Tone-prism */
+ /* https://github.com/atelierbram/Base4Tone-prism/blob/master/output/prism-b4t_classic-q-light.css */
+ --code-fg: #08070d;
+ --code-bg: #f6f6f9;
+ --code-sel-bg: #d1cbfb;
+ --code-comment: #95949e;
+ --code-symbol: #8a2ac6;
+ --code-string: #175dcf;
+ --code-id: #564e53;
+ --code-operator: #8f1e66;
+ --code-operator-bg: #f6f6f980;
+ --code-variable: #bd2887;
+ --code-lineno-border: #b3b2bd;
+ --code-keyword: #5a49df;
+ --code-line-hl: #8a899454;
+ --code-line-hl-2: #8a899400;
+ --code-linno-before: #95949e;
+ --code-line-hl-meta-bg: #8a899454;
+ --code-line-hl-meta: #c8c7d1;
+ }
+
+ /* overridden to be dark */
+ body.dark-theme {
+ --text-color: #dedede;
+ --bkg-color: #0d1115;
+ --code-color: #b0bbda;
+ --code-bkg-color: #222436;
+ --anchor-color: #dedede;
+ --anchor-hover-color: #c7254e;
+ --footer-color: #bbb;
+ --footer-divider-color: #333;
+ --caption-color: #aaa;
+
+ /* dark-mode */
+ /* ========= */
+ /* colorscheme (with modified comment color): B4T_Classic_Q by Bram de Haan */
+ /* author: Bram de Haan - https://github.com/atelierbram/Base4Tone-prism */
+ /* https://github.com/atelierbram/Base4Tone-prism/blob/master/output/prism-b4t_classic-q-dark.css */
+ --code-fg: #f6f6f9;
+ --code-bg: #1d1d20;
+ --code-sel-bg: #4b38dc;
+ --code-comment: #8885a0;
+ --code-symbol: #74a8fb;
+ --code-string: #d1cbfb;
+ --code-id: #948990;
+ --code-variable: #dd40a4;
+ --code-operator: var(--code-variable);
+ --code-operator-bg: #1d1d2080;
+ --code-lineno-border: var(--code-operator-bg);
+ --code-keyword: #e0baf7;
+ --code-line-hl: #3b3a4054;
+ --code-line-hl-2: #3b3a4000;
+ --code-linno-before: #313036;
+ --code-line-hl-meta-bg: #8a899454;
+ --code-line-hl-meta: #c8c7d1;
+ }
+}
+
+/* system prefers dark */
+@media (prefers-color-scheme: dark) {
+ body {
+ --text-color: #dedede;
+ --bkg-color: #0d1115;
+ --code-color: #b0bbda;
+ --code-bkg-color: #222436;
+ --navlist-color: var(--code-color);
+ --navlist-bkg-color: var(--code-bkg-color);
+ --navlist-hover-color: #fff;
+ --navlist-bkg-hover-color: var(--anchor-hover-color);
+ --anchor-color: #dedede;
+ --anchor-hover-color: #c7254e;
+ --footer-color: #bbb;
+ --footer-divider-color: #333;
+ --caption-color: #aaa;
+
+ /* dark-mode */
+ /* ========= */
+ /* colorscheme (with modified comment color): B4T_Classic_Q by Bram de Haan */
+ /* author: Bram de Haan - https://github.com/atelierbram/Base4Tone-prism */
+ /* https://github.com/atelierbram/Base4Tone-prism/blob/master/output/prism-b4t_classic-q-dark.css */
+ --code-fg: #f6f6f9;
+ --code-bg: #1d1d20;
+ --code-sel-bg: #4b38dc;
+ --code-comment: #8885a0;
+ --code-symbol: #74a8fb;
+ --code-string: #d1cbfb;
+ --code-id: #948990;
+ --code-variable: #dd40a4;
+ --code-operator: var(--code-variable);
+ --code-operator-bg: #1d1d2080;
+ --code-lineno-border: var(--code-operator-bg);
+ --code-keyword: #e0baf7;
+ --code-line-hl: #3b3a4054;
+ --code-line-hl-2: #3b3a4000;
+ --code-linno-before: #313036;
+ --code-line-hl-meta-bg: #8a899454;
+ --code-line-hl-meta: #c8c7d1;
+ }
+
+ /* overridden to be light */
+ body.light-theme {
+ --text-color: #222;
+ --bkg-color: #fff;
+ --code-color: #c7254e;
+ --code-bkg-color: #f9f2f4;
+ --anchor-color: #222;
+ --anchor-hover-color: var(--code-color);
+ --footer-color: #444;
+ --footer-divider-color: #eee;
+ --caption-color: #888;
+
+ /* light-mode */
+ /* ========== */
+ /* colorscheme: B4T_Classic_Q by Bram de Haan */
+ /* author: Bram de Haan - https://github.com/atelierbram/Base4Tone-prism */
+ /* https://github.com/atelierbram/Base4Tone-prism/blob/master/output/prism-b4t_classic-q-light.css */
+ --code-fg: #08070d;
+ --code-bg: #f6f6f9;
+ --code-sel-bg: #d1cbfb;
+ --code-comment: #95949e;
+ --code-symbol: #8a2ac6;
+ --code-string: #175dcf;
+ --code-id: #564e53;
+ --code-operator: #8f1e66;
+ --code-operator-bg: #f6f6f980;
+ --code-variable: #bd2887;
+ --code-lineno-border: #b3b2bd;
+ --code-keyword: #5a49df;
+ --code-line-hl: #8a899454;
+ --code-line-hl-2: #8a899400;
+ --code-linno-before: #95949e;
+ --code-line-hl-meta-bg: #8a899454;
+ --code-line-hl-meta: #c8c7d1;
+ }
+}
+/* === END color definitions === */
+
+/* === BEGIN theme toggle styling === */
+#theme-toggle {
+ float: none;
+ position: fixed;
+ padding: 5px;
+ bottom: 5px;
+ right: 5px;
+ color: var(--anchor-color);
+ font-size: 1.2em;
+}
+#theme-toggle i:hover {
+ cursor: pointer;
+ color: var(--anchor-hover-color);
+}
+/* hide all theme buttons */
+#theme-toggle i::before {
+ display: none;
+}
+/* show all theme buttons on hover */
+#theme-toggle:hover i::before {
+ display: inline-block;
+}
+
+/* set theme button icons */
+#theme-toggle i[data-theme="light-theme"]::before {
+ content: '\f695'; /* white-balance-sunny */
+}
+#theme-toggle i[data-theme="dark-theme"]::before {
+ content: '\f681'; /* weather-night */
+}
+#theme-toggle i[data-theme="auto"]::before {
+ content: '\f15f';
+}
+
+/* system prefers light, or default */
+@media (prefers-color-scheme: light) {
+ /* default (not overridden), show toggle to dark */
+ body:not(.dark-theme) #theme-toggle i[data-theme="dark-theme"]::before {
+ display: inline-block;
+ }
+ /* overridden, show toggle back to light */
+ body.dark-theme #theme-toggle i[data-theme="light-theme"]::before {
+ display: inline-block;
+ }
+}
+
+/* system explicitly prefers dark */
+@media (prefers-color-scheme: dark) {
+ /* default (not overridden), show toggle to light */
+ body:not(.light-theme) #theme-toggle i[data-theme="light-theme"]::before {
+ display: inline-block !important;
+ }
+ /* overridden, show toggle back to dark */
+ body.light-theme #theme-toggle i[data-theme="dark-theme"]::before {
+ display: inline-block !important;
+ }
+}
+/* === END theme toggle styling === */
+
body {
/*font-family: 'Verdana', sans-serif;*/
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 25px 25px;
- background-color: #fff;
+ background-color: var(--bkg-color);
+ color:
+}
+
+header {
+ color: var(--anchor-color);
}
code {
padding: 2px 4px;
- color: #c7254e;
- background-color: #f9f2f4;
+ color: var(--code-color);
+ background-color: var(--code-bkg-color);
white-space: nowrap;
border-radius: 4px;
}
@@ -18,17 +242,20 @@ code, kbd, pre, samp {
font-size: 90%;
}
+pre code {
+ font-size: 16px;
+}
+
pre {
- /*border-left: solid #f54b31 3px;*/
margin-left: 10px;
}
a {
- color: #000;
+ color: var(--anchor-color);
}
a:hover {
- color: #f54b31;
+ color: var(--anchor-hover-color);
}
header, footer, div.page {
@@ -38,10 +265,9 @@ header, footer, div.page {
}
footer {
- /*background: #242424;*/
- color: #444;
+ color: var(--footer-color);
font-size: 0.85em;
- border-top: dashed #eee 2px;
+ border-top: dashed var(--footer-divider-color) 2px;
}
header {
@@ -74,7 +300,7 @@ header a {
}
div.page {
- color: #000;
+ color: var(--text-color);
}
.nav-list {
@@ -87,20 +313,24 @@ div.page {
}
.nav-list a i.mdi {
margin-bottom: -12px;
+ min-width: 1em;
+ display: inline-block;
}
.nav-list a {
font-size: 2.5em;
padding: 12px;
- color: #c7254e;
+ color: var(--navlist-color);
margin: 2px;
- background-color: #f9f2f4;
+ background-color: var(--navlist-bkg-color);
white-space: nowrap;
border-radius: 4px;
text-decoration: none;
+ line-height: 1em;
+ display: inline-block;
}
.nav-list a:hover {
- background-color: #c7254e;
- color: #fff;
+ background-color: var(--navlist-bkg-hover-color);
+ color: var(--navlist-hover-color);
}
.nav-list .nav-list-row {
display: flex;
@@ -123,7 +353,7 @@ div.page {
align-items: center;
}
.captioned-center-image .caption {
- color: #888;
+ color: var(--caption-color);
}
.image-right {
@@ -138,17 +368,21 @@ div.page {
.blog-post {
margin-bottom: 12px;
}
-.blog-post p img {
+.blog-post img {
display: block;
max-width: 100%;
max-height: 360px;
margin: auto;
+ border: 2px solid var(--anchor-color);
+}
+.blog-post img:hover {
+ border-color: var(--anchor-hover-color);
}
-.blog-post p img+em {
- display: block;
- text-align: center;
- font-size: 0.85em;
- margin-top: 0.85em;
+.blog-post img+em {
+ display: block;
+ text-align: center;
+ font-size: 0.85em;
+ margin-top: 0.85em;
}
.blog-post-header {
margin-right: 7px;
@@ -158,7 +392,7 @@ div.page {
justify-content: space-between;
}
.blog-post-header .meta {
- color: #bbb;
+ color: var(--caption-color);
margin-bottom: 0;
}
.blog-post-header h2 a {
@@ -178,8 +412,8 @@ div.page {
.projects .project:last-of-type {
margin-bottom: 0;
}
-.project .read-more {
- font-size: 0.85em;
+.blog-post .read-more {
+ font-weight: bold;
}
.project .thumbnail {
margin-right: 12px;
@@ -187,11 +421,11 @@ div.page {
line-height: 0;
}
.project .thumbnail:hover {
- border: solid #f54b31 2px;
+ border: solid var(--anchor-hover-color) 2px;
}
.project-inner {
flex-grow: 2;
- color: #333;
+ color: var(--anchor-color);
}
.project-title {
margin-right: 7px;
@@ -204,9 +438,29 @@ div.page {
text-decoration: none;
}
.project-type {
- color: #bbb;
+ color: var(--caption-color);
}
.project-year {
font-size: 0.65em;
font-weight: normal;
}
+a.anchor {
+ color: var(--caption-color);
+ text-decoration: none;
+ display: none;
+}
+a.anchor:hover {
+ color: var(--anchor-hover-color);
+}
+:is(h1, h2, h3, h4, h5, h6):hover a.anchor {
+ display: inline;
+}
+figure figcaption {
+ color: var(--caption-color);
+ text-align: center;
+ font-size: 0.95em;
+ line-height: 1em;
+}
+figcaption p {
+ margin-top: 0.7em;
+}
diff --git a/templates/blog.html b/templates/blog.html
index 6e59f3e..ef57956 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -45,7 +45,7 @@
{{ template "article-header" . }}
- {{ readmore .Content .Path }}
+ {{ readmore .Content .Path .Metadata.previewLines }}
{{ end }}
{{ end }}
diff --git a/templates/include/base.html b/templates/include/base.html
index 6bcbf99..201abeb 100644
--- a/templates/include/base.html
+++ b/templates/include/base.html
@@ -3,8 +3,9 @@
-
+
+
{{ block "title" . }}kylemtravis.com{{ end }}
@@ -13,13 +14,9 @@
~{{ block "breadcrumbs" . }}/kyle-m-travis{{ end }}
@@ -31,7 +28,26 @@ ~{{ block "breadcrumbs" . }}/kyle-m-travis{{ end }}
+
+
+
+ {{ reloader }}