New blog design 2022

assets/js/main.js

@@ -60,56 +60,25 @@ const listen = (ele, e, callback) => {
  * Functions
  */
 
-// Auto Hide Header
-//
-let header = document.getElementById('site-header');
-let lastScrollPosition = window.pageYOffset;
-
-const autoHideHeader = () => {
-  let currentScrollPosition = window.pageYOffset;
-  if (currentScrollPosition > lastScrollPosition) {
-    header.classList.remove('slideInUp');
-    header.classList.add('slideOutDown');
-  } else {
-    header.classList.remove('slideOutDown');
-    header.classList.add('slideInUp');
-  }
-  lastScrollPosition = currentScrollPosition;
-}
-
-// Mobile Menu Toggle
-//
-let mobileMenuVisible = false;
-
-const toggleMobileMenu = () => {
-  let mobileMenu = document.getElementById('mobile-menu');
-  if (mobileMenuVisible == false) {
-    mobileMenu.style.animationName = 'bounceInRight';
-    mobileMenu.style.webkitAnimationName = 'bounceInRight';
-    mobileMenu.style.display = 'block';
-    mobileMenuVisible = true;
+const toggleToc = () => {
+  const toc = document.getElementById('toc');
+  if (toc.style.display === 'block') {
+    toc.style.display = 'none';
   } else {
-    mobileMenu.style.animationName = 'bounceOutRight';
-    mobileMenu.style.webkitAnimationName = 'bounceOutRight'
-    mobileMenuVisible = false;
-  }
+    toc.style.display = 'block';
+  };
 }
 
-// Featured Image Toggle
-//
-const showImg = () => {
-  document.querySelector('.bg-img').classList.add('show-bg-img');
-}
+listen ("#toc-btn", "click", toggleToc);
 
-const hideImg = () => {
-  document.querySelector('.bg-img').classList.remove('show-bg-img');
-}
 
-// ToC Toggle
+// Anchor points for list page
 //
-const toggleToc = () => {
-  document.getElementById('toc').classList.toggle('show-toc');
-}
+document.querySelectorAll('.post-year').forEach((ele)=> {
+  ele.addEventListener('click', () => {
+    window.location.hash = '#' + ele.id;
+  });
+});
 
 // Load Comments
 //
@@ -117,8 +86,7 @@ let commentsLoaded = false;
 let comments = document.getElementById('comments');
 let commentsLoader = document.getElementById('comments-loader');
 
-// const avJsUrl = '//cdn.jsdelivr.net/npm/leancloud-storage@3.11.1/dist/av-min.js';
-const valineJsUrl = 'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js';
+const valineJsUrl = 'https://cdn.jsdelivr.net/npm/valine@1.4.18/dist/Valine.min.js';
 
 const loadComments = () => {
   loadScript(valineJsUrl).then(() => {
@@ -134,38 +102,19 @@ const loadComments = () => {
   });
 }
 
-
-if (header !== null) {
-  listen('#menu-btn', "click", toggleMobileMenu);
-  listen('#toc-btn', "click", toggleToc);
-  listen('#img-btn', "click", showImg);
-  listen('.bg-img', "click", hideImg);
-
-  // Load comments if the window is not scrollable
-  if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
-    commentsLoader.style.display = 'block';
-    loadComments();
-    commentsLoaded = true;
-  }
-
-  document.querySelectorAll('.post-year').forEach((ele) => {
-    ele.addEventListener('click', () => {
-      window.location.hash = '#' + ele.id;
-    });
-  });
-
-  window.addEventListener('scroll', throttle(() => {
-    autoHideHeader();
-    if (mobileMenuVisible == true) {
-      toggleMobileMenu();
+window.addEventListener('scroll', throttle(() => {
+  if ((comments !== null) && (commentsLoaded == false)) {
+    if (window.pageYOffset + window.innerHeight > comments.offsetTop) {
+      commentsLoader.style.display = 'block';
+      loadComments();
+      commentsLoaded = true;
     }
+  }
+}, 250));
 
-    if ((comments !== null) && (commentsLoaded == false)) {
-      if (window.pageYOffset + window.innerHeight > comments.offsetTop) {
-        commentsLoader.style.display = 'block';
-        loadComments();
-        commentsLoaded = true;
-      }
-    }
-  }, 250));
-}
+// Load comments if the window is not scrollable
+if ((comments !== null) && (comments.offsetTop < window.innerHeight)) {
+  commentsLoader.style.display = 'block';
+  loadComments();
+  commentsLoaded = true;
+};

assets/js/quicklink.umd.js

@@ -1 +0,0 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.quicklink=n()}(this,function(){var e={};function n(e){return new Promise(function(n,t){var r=new XMLHttpRequest;r.open("GET",e,r.withCredentials=!0),r.onload=function(){200===r.status?n():t()},r.send()})}var t,r,i=(t="prefetch",((r=document.createElement("link")).relList||{}).supports&&r.relList.supports(t)?function(e){return new Promise(function(n,t){var r=document.createElement("link");r.rel="prefetch",r.href=e,r.onload=n,r.onerror=t,document.head.appendChild(r)})}:n);function o(t,r,o){if(!(e[t]||(o=navigator.connection)&&((o.effectiveType||"").includes("2g")||o.saveData)))return(r?function(e){return null==self.fetch?n(e):fetch(e,{credentials:"include"})}:i)(t).then(function(){e[t]=!0})}var u=u||function(e){var n=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-n))}})},1)},c=new Set,f=new IntersectionObserver(function(e){e.forEach(function(e){if(e.isIntersecting){var n=e.target.href;c.has(n)&&a(n)}})});function a(e){c.delete(e),o(new URL(e,location.href).toString(),f.priority)}return function(e){e=Object.assign({timeout:2e3,priority:!1,timeoutFn:u,el:document},e),f.priority=e.priority;var n=e.origins||[location.hostname],t=e.ignores||[];e.timeoutFn(function(){e.urls?e.urls.forEach(a):Array.from(e.el.querySelectorAll("a"),function(e){f.observe(e),n.length&&!n.includes(e.hostname)||function e(n,t){return Array.isArray(t)?t.some(function(t){return e(n,t)}):(t.test||t).call(t,n.href,n)}(e,t)||c.add(e.href)})},{timeout:e.timeout})}});

assets/scss/_modern-normalize.scss

@@ -0,0 +1,298 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/**
+Use a more readable tab size (opinionated).
+*/
+
+html {
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+	margin: 0;
+}
+
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+	font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+	text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+
+button,
+select { /* 1 */
+	text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+	box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}

assets/scss/_normalize.scss

@@ -1,341 +0,0 @@
-/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

assets/scss/_predefined.scss

@@ -1,33 +1,26 @@
 // Colors
 //
-$theme: #018574;
-$text: #c6cddb;
-$light-grey: #494f5c;
-$dark-grey: #3B3E48;
-$highlight-grey: #7d828a;
-$midnightblue: #2c3e50;
+$accent: #54bab9;
 
 // Fonts
 //
-$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
-$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
+$fonts: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial,sans-serif;
+$mono-fonts: Consolas, Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
 
 // Mixins
 //
-@mixin dimmed {
-  opacity: .6;
-}
-
-@mixin aTag {
+@mixin stylized-link {
   a {
     word-wrap: break-word;
+    text-decoration: none;
     border: none;
-    box-shadow: inset 0 -4px 0 $theme;
+    box-shadow: inset 0 -4px 0 $accent;
     transition-property: box-shadow;
     transition-duration: .1s;
 
     &:hover {
-      box-shadow: inset 0 -1em 0 $theme;
+      box-shadow: inset 0 -1em 0 $accent;
+      color: var(--c-txt);
     }
   }
 }

assets/scss/_syntax.scss

@@ -1,59 +1,85 @@
-/* Background */ .chroma { color: #eee; background-color: $midnightblue }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* Background */ .bg { background-color: var(--c-bg-alt); }
+/* PreWrapper */ .chroma { background-color: var(--c-bg-alt); }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err {  }
+/* CodeLine */ .chroma .cl {  }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* Keyword */ .chroma .k { color: #66d9ef }
-/* KeywordConstant */ .chroma .kc { color: #66d9ef }
-/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
-/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
-/* KeywordReserved */ .chroma .kr { color: #66d9ef }
-/* KeywordType */ .chroma .kt { color: #66d9ef }
-/* NameAttribute */ .chroma .na { color: #a6e22e }
-/* NameClass */ .chroma .nc { color: #a6e22e }
-/* NameConstant */ .chroma .no { color: #66d9ef }
-/* NameDecorator */ .chroma .nd { color: #a6e22e }
-/* NameException */ .chroma .ne { color: #a6e22e }
-/* NameFunction */ .chroma .nf { color: #a6e22e }
-/* NameOther */ .chroma .nx { color: #a6e22e }
-/* NameTag */ .chroma .nt { color: #f92672 }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #e6db74 }
-/* LiteralString */ .chroma .s { color: #e6db74 }
-/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
-/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
-/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
-/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
-/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
-/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
-/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
-/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
-/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
-/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
-/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-/* GenericDeleted */ .chroma .gd { color: #f92672 }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #007020 }
+/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #902000 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #4070a0 }
+/* NameBuiltin */ .chroma .nb { color: #007020 }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #60add5 }
+/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
+/* NameException */ .chroma .ne { color: #007020 }
+/* NameFunction */ .chroma .nf { color: #06287e }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
+/* NameVariable */ .chroma .nv { color: #bb60d5 }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #4070a0 }
+/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
+/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
+/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
+/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
+/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
+/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
+/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
+/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
+/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
+/* LiteralStringRegex */ .chroma .sr { color: #235388 }
+/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
+/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
+/* LiteralNumber */ .chroma .m { color: #40a070 }
+/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
+/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
+/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
+/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
+/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
+/* Operator */ .chroma .o { color: #666666 }
+/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
+/* CommentPreproc */ .chroma .cp { color: #007020 }
+/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #a00000 }
 /* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericInserted */ .chroma .gi { color: #a6e22e }
+/* GenericError */ .chroma .gr { color: #ff0000 }
+/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #00a000 }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
 /* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #75715e }
+/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
+/* GenericTraceback */ .chroma .gt { color: #0044dd }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }

assets/scss/partials/_404.scss

@@ -0,0 +1,16 @@
+#page.error-404 {
+  justify-content: center;
+  align-items: center;
+}
+.banner-404 {
+  font-size: 1.5em;
+  padding: 1em;
+}
+.btn-404 > a {
+  display: inline-block;
+  font-size: .8em;
+  border: 1px solid;
+  border-radius: 4px;
+  padding: .2em .4em;
+  margin-bottom: .4em;
+}

assets/scss/partials/_comments.scss

@@ -0,0 +1,4 @@
+#comments {
+  margin-top: 2em;
+  font-size: 1em;
+}

assets/scss/partials/_footer.scss

@@ -0,0 +1,24 @@
+#site-footer {
+  font-size: 0.8em;
+  padding-top: 1em;
+  margin-top: 1em;
+  background-color: var(--c-bg-alt);
+}
+
+p.site-copy {
+  margin-top: 0;
+}
+
+.site-nav > span {
+  margin: 0 .2em;
+  color: var(--c-bg-alt);
+  &:last-child{
+    display: none;
+  }
+}
+
+.social-icon > .icon-link {
+  font-size: 2em;
+  margin-right: .4em;
+}
+

assets/scss/partials/_home.scss

@@ -0,0 +1,49 @@
+#home-center {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1em 10vw;
+  font-size: 1.2em;
+}
+#home-title {
+  line-height: normal;
+  margin-bottom: .3em;
+}
+#home-social > a {
+  padding-right: .5em;
+  font-size: 1.4em;
+}
+#home-nav {
+  margin: 1em 0;
+  a {
+    display: inline-block;
+    border: 1px solid;
+    border-radius: 4px;
+    padding: .2em .4em;
+    font-size: .8em;
+    margin-top: .5em;
+  }
+}
+#recent-posts {
+  margin-top: 2em;
+}
+.recent-posts-list {
+  list-style: none;
+  padding-left: 0;
+  font-size: 1rem;
+  li {
+    margin-bottom: .2em;
+  }
+  span {
+    margin-right: .5em;
+    color: var(--c-txt-alt);
+  }
+  a {
+    display: block;
+  }
+}
+#home-footer {
+  padding: 0 10vw;
+  font-size: .8em;
+}

assets/scss/partials/_list.scss

@@ -0,0 +1,38 @@
+.posts-group {
+  display: block;
+  margin-bottom: 1.9em;
+  line-height: normal;
+
+  .post-year {
+    padding-top: 6px;
+    margin-right: 1.8em;
+    font-size: 1.6em;
+    color: var(--c-txt-alt);
+    &:hover {
+      cursor: pointer;
+      color: $accent;
+    }
+  }
+
+  .posts-list {
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .post-item > a {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 12px 0;
+    border-bottom: 1px dashed;
+    font-weight: lighter;
+  }
+
+  .post-day {
+    flex-shrink: 0;
+    margin-left: 1em;
+    color: var(--c-txt-alt);
+  }
+}

assets/scss/partials/_single.scss

@@ -0,0 +1,234 @@
+
+.post-meta {
+  margin-bottom: .5em;
+  display: flex;
+}
+
+#toc-btn {
+  position: relative;
+  top: -1em;
+  border: solid 1px;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--c-txt-alt);
+  font-size: .8em;
+  &:hover {
+    color: $accent;
+  }
+}
+
+// TOC
+//
+#toc {
+  display: none;
+  color: var(--c-txt-alt);
+  padding: 1em;
+  border-radius: 4px;
+  background-color: var(--c-bg-alt);
+}
+.toc-title {
+  display: none;
+}
+
+#TableOfContents {
+  font-size: .8em;
+  line-height: 1.2em;
+  a {
+    border-bottom: none;
+    color: var(--c-txt-alt);
+    padding: .1em auto;
+    &:hover {
+      color: $accent;
+    }
+  }
+  ul {
+    margin: 0;
+  }
+}
+
+.content {
+  // text-align: justify;
+  text-justify: inter-ideograph; //For IE/Edge
+  font-weight: lighter;
+
+  @include stylized-link;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: normal;
+  }
+  figure {
+    height: auto;
+    margin: 0;
+    text-align: center;
+    p {
+      font-size: .8em;
+      font-style: italic;
+      color: var(--c-txt-alt);
+    }
+  }
+
+  figure.left {
+    float: left;
+    margin-right: 1.5em;
+    max-width: 50%;
+  }
+  figure.right {
+    float: right;
+    margin-left: 1.5em;
+    max-width: 50%;
+  }
+  figure.big {
+    width: 100vw;
+    margin-left: -1em;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: auto;
+  }
+
+  ul,
+  ol {
+    padding: 0;
+    margin-left: 1.8em;
+  }
+
+  a.anchor {
+    box-shadow: none;
+    opacity: .7;
+    font-size: 1em;
+    &:hover {
+      color: $accent;
+      opacity: 1;
+    }
+
+    .anchor-icon {
+      visibility: hidden;
+    }
+    &:focus .anchor-icon {
+      visibility: visible;
+    }
+  }
+
+  h1:hover .anchor-icon,
+  h2:hover .anchor-icon,
+  h3:hover .anchor-icon,
+  h4:hover .anchor-icon,
+  h5:hover .anchor-icon,
+  h6:hover .anchor-icon {
+    visibility: visible;
+  }
+}
+
+.footnotes {
+  font-size: .8em;
+
+  p {
+    margin: 0;
+  }
+
+  hr {
+    width: auto;
+    height: 2em;
+    border: none;
+    text-align: center;
+
+    &::after {
+      content: "* * *";
+      display: block;
+      font-size: 2em;
+    }
+
+  }
+
+  a {
+    box-shadow: none;
+    text-decoration: underline;
+    transition-property: color;
+
+    &:hover {
+      box-shadow: none;
+      color: $accent;
+    }
+
+    &.footnote-backref {
+      text-decoration: none;
+    }
+  }
+}
+
+a.footnote-ref {
+  box-shadow: none;
+  text-decoration: none;
+  padding: 1px 2px;
+  border-radius: 2px;
+  background-color: var(--c-bg-alt);
+  transition-property: background-color;
+
+  &:hover {
+    box-shadow: none;
+    background-color: $accent;
+  }
+}
+
+hr.post-end {
+  margin: 2rem auto 1rem 0;
+  width: 50%;
+}
+
+.post-info {
+  font-size: .8rem;
+  line-height: normal;
+
+  p {
+    margin: .8em 0;
+  }
+
+  svg {
+    margin-right: .7em;
+  }
+
+  a {
+    border-bottom: none;
+    text-decoration: underline;
+  }
+
+
+  .tag {
+    margin-right: .5em;
+
+    &::before {
+      content: "#"
+    }
+  }
+}
+
+// Post Navigation
+//
+.post-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.5em;
+  margin-bottom: 2em;
+  font-size: 1.2em;
+
+  a {
+    flex-basis: 50%;
+    flex-grow: 1;
+    border: none;
+  }
+
+  .next-post {text-align: left; padding-right: 5px;}
+  .prev-post {text-align: right; padding-left: 5px;}
+
+  .post-nav-label {
+    font-size: .8em;
+    opacity: .8;
+    text-transform: uppercase;
+  }
+}
+
+
+

assets/scss/style.scss

@@ -1,32 +1,28 @@
-@import "predefined.scss";
-@import "normalize.scss";
-@import "syntax.scss";
-@import "animate.scss";
-
-/* Webkit Scrollbar Customize */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  background: $midnightblue;
-}
+@import "predefined.scss", "modern-normalize.scss", "syntax.scss";
 
-::-webkit-scrollbar-thumb {
-  background: #888;
+:root {
+  --offset: 0;
+}
 
-  &:hover {
-    background: $text;
-  }
+html {
+  scroll-behavior: smooth;
+  font-size: 1rem;
 }
 
-::placeholder {
-  color: $highlight-grey;
+body {
+  --c-bg: #fafafa;
+  --c-bg-alt: #dfdfdf;
+  --c-txt: #424242;
+  --c-txt-alt: #8a8a8a;
 }
 
-html {
-  background: $light-grey;
-  line-height: 1.6;
-  letter-spacing: .06em;
-  scroll-behavior: smooth;
+@media (prefers-color-scheme: dark) {
+  body {
+    --c-bg: #201f1e;
+    --c-bg-alt: #3b3a39;
+    --c-txt: #ddd;
+    --c-txt-alt: #aaa;
+  }
 }
 
 body,
@@ -34,14 +30,19 @@ button,
 input,
 select,
 textarea {
-  color: $text;
+  color: var(--c-txt);
+  background-color: var(--c-bg);
+  line-height: 1.6em;
   font-family: $fonts;
+  letter-spacing: .06em;
+  transition: background-color .5s, color .5s;
 }
 
 pre,
 code,
 pre tt {
-  font-family: $code-fonts;
+    font-family: $mono-fonts;
+    letter-spacing: normal;
 }
 
 pre {
@@ -49,23 +50,19 @@ pre {
   overflow: auto;
   font-size: .9em;
   line-height: 1.5;
-  letter-spacing: normal;
   white-space: pre;
-  color: #eee;
-  background: $midnightblue;
+
   border-radius: 4px;
   // -webkit-overflow-scrolling: touch;
-
   code {
     padding: 0;
     margin: 0;
-    background: $midnightblue;
+    background: transparent;
   }
 }
 
 code {
-  color: #eee;
-  background: $highlight-grey;
+  background: var(--c-bg-alt);
   border-radius: 3px;
   padding: 0 3px;
   margin: 0 4px;
@@ -74,41 +71,46 @@ code {
 }
 
 blockquote {
-  border-left: .25em solid;
-  margin: 1em;
-  padding: 0 1em;
+  margin: 1.5em 1em;
   font-style: italic;
+  color: var(--c-txt-alt);
 
+  &::before {
+    content: "“ ";
+    position: absolute;
+    opacity: 0.3;
+    font-size: 80px;
+    transform: translate(-16px,5px);
+  }
+
+  p {
+    margin-left: 1.2em;
+  }
   cite {
     font-weight: bold;
     font-style: normal;
+    margin-left: 1em;
 
     &::before {
-      content: "—— ";
+    content: "—— ";
     }
   }
 }
 
 a {
-  color: $text;
+  color: var(--c-txt);
   text-decoration: none;
-  border: none;
-  transition-property: color;
-  transition-duration: .4s;
-  transition-timing-function: ease-out;
+  border-bottom: solid 1px var(--c-bg-alt);
+  transition: color .2s;
 
   &:hover {
-    color: #fff;
+    color: $accent;
+    border-bottom-color: $accent;
   }
-}
 
-hr {
-  opacity: .2;
-  border-width: 0 0 5px 0;
-  border-style: dashed;
-  background: transparent;
-  width: 50%;
-  margin: 1.8em auto;
+  &.icon-link {
+    border-bottom: none;
+  }
 }
 
 table {
@@ -130,750 +132,206 @@ table {
   }
 }
 
-.section-inner {
-  margin: 0 auto;
-  max-width: 1200px;
-  width: 93%;
-}
-
-.thin {
-  max-width: 720px;
-  margin: auto;
-}
-
-.feather {
-  display: inline-block;
-  vertical-align: -.125em;
-  width: 1em;
-  height: 1em;
-}
-
-.desktop-only, .desktop-only-ib {
-  display: none;
-}
-
-// Header & Footer
-//
-#site-header {
-  position: fixed;
-  z-index: 1;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
-  box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45);
-  background-color: $dark-grey;
-  animation-duration: .3s;
-}
-
-.hdr-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: .5em 0;
-  font-size: 1.2rem;
-
-  .site-branding {
-    display: inline-block;
-    margin-right: .8em;
-    font-size: 1.2em;
-  }
-
-  .site-nav {
-    display: inline-block;
-    font-size: 1.1em;
-    opacity: .8;
-
-    a {
-      margin-left: .8em;
-    }
-  }
-}
-
-.hdr-icons {
-  font-size: 1.2em;
-}
-
-.hdr-social {
-  display: inline-block;
-  margin-left: .6em;
-
-  &>a {
-    margin-left: .4em;
-  }
-}
-
-.hdr-btn {
-  border: none;
-  background: none;
-  padding: 0;
-  margin-left: .4em;
-  cursor: pointer;
-}
-
-#menu-btn {
-  display: none;
-  margin-left: .6em;
-  cursor: pointer;
-}
-
-#mobile-menu {
-  position: fixed;
-  bottom: 4.8em;
-  right: 1.5em;
-  display: none;
-  padding: .6em 1.8em;
-  z-index: 1;
-  box-sizing: border-box;
-  box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
-  background-color: $dark-grey;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    line-height: 2;
-    font-size: 1.2em;
-  }
-}
-
-#site-footer {
-  text-align: center;
-  font-size: .9em;
-  margin-bottom: 96px;
-  margin-top: 64px;
-
-  p {
-    margin: 0;
-  }
+hr {
+  color: var(--c-bg-alt);
+  border-top: none;
+  border-width: 3px 0 0 0;
+  border-style: dashed;
 }
 
-// Spotlight
+// Global layouts
 //
-#spotlight {
-  display: flex;
-  height: 100vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 93%;
-  margin: auto;
-  font-size: 1.5rem;
-
-  &.error-404 {
-    flex-direction: row;
-    line-height: normal;
-  }
-}
-
-p.img-404 {
-  margin: 0;
-
-  img {
-    max-width: 250px;
-    height: auto;
-  }
-}
-
-.banner-404 {
-  margin-left: 2em;
-
-  h1 {
-    font-size: 3em;
-    margin: .5rem 0 1rem;
-  }
-
-  p {
-    margin-top: 0;
-    margin-bottom: .8em;
-  }
-
-  .btn-404 {
-    font-size: .8em;
-
-    a {
-      display: inline-block;
-      border: 2px solid $text;
-      border-radius: 5px;
-      padding: 5px;
-      transition-property: color, border-color;
-      word-break: break-all;
-
-      &:first-child {
-        margin-right: 1em;
-      }
-
-      &:hover {
-        border-color: #fff;
-      }
-
-      svg {
-        margin-right: .5em;
-      }
-    }
-  }
-}
-
-#home-center {
+#page {
   display: flex;
-  flex-grow: 1;
   flex-direction: column;
-  justify-content: center;
+  min-height: 100vh;
 }
 
-#home-title {
-  margin: 0;
-  text-align: center;
-}
-
-#home-social {
-  font-size: 1.4em;
-  text-align: center;
-  opacity: .8;
-
-  a {
-    margin: 0 .2em;
-  }
-}
-
-#home-nav {
-  opacity: .8;
-
-  a {
-    display: block;
-    text-align: center;
-    margin-top: .5em;
-  }
-}
-
-#home-footer {
-  text-align: center;
-  font-size: .6em;
-  line-height: normal;
-  @include dimmed;
-
-  p {
-    margin-top: 0;
-  }
-}
-
-// list.html
-//
-.posts-group {
-  display: flex;
-  margin-bottom: 1.9em;
-  line-height: normal;
-
-  .post-year {
-    padding-top: 6px;
-    margin-right: 1.8em;
-    font-size: 1.6em;
-    @include dimmed;
-
-    &:hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-
-  .posts-list {
-    flex-grow: 1;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-  }
-
-  .post-item {
-    border-bottom: 1px $highlight-grey dashed;
-
-    a {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      padding: 12px 0;
-    }
-  }
-
-  .post-day {
-    flex-shrink: 0;
-    margin-left: 1em;
-    @include dimmed;
-  }
-}
-
-// single.html
-//
-.bg-img {
-  width: 100vw;
-  height: 100vh;
-  opacity: .03;
-  z-index: -1;
+#bg-img {
   position: fixed;
+  z-index: -1;
   top: 0;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  background-image: var(--bg-img);
   background-position: center;
-  transition: opacity .5s;
-}
-
-.show-bg-img {
-  z-index: 100;
-  opacity: 1;
-  cursor: pointer;
+  background-size: cover;
+  opacity: .05;
 }
 
-.post-header {
-  margin-top: 1.2em;
-  line-height: normal;
-
-  .post-meta {
-    font-size: .9em;
-    letter-spacing: normal;
-    @include dimmed;
-  }
-
-  h1 {
-    margin-top: .1em;
-  }
+main#site-main {
+  flex-grow: 1;
+  margin-top: 1em;
 }
 
-hr.post-end {
-  width: 50%;
-  margin-top: 1.6em;
-  margin-bottom: .8em;
-  margin-left: 0;
-  border-style: solid;
-  border-bottom-width: 4px;
+.wrapper {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 1em;
 }
 
-.content {
-  text-align: justify;
-  text-justify: inter-ideograph; //For IE/Edge
-
-  @include aTag;
-
-  figure {
-    max-width: 100%;
-    height: auto;
-    margin: 0;
-    text-align: center;
-
-    p {
-      font-size: .8em;
-      font-style: italic;
-      @include dimmed;
-    }
-  }
-
-  figure.left {
-    float: left;
-    margin-right: 1.5em;
-    max-width: 50%;
-  }
-
-  figure.right {
-    float: right;
-    margin-left: 1.5em;
-    max-width: 50%;
-  }
-
-  figure.big {
-    max-width: 100vw;
-  }
-
-  img {
-    display: block;
-    max-width: 100%;
+#home-btn {
+  border: none;
+  position: absolute;
+  &>img{
+    width: 1.5em;
     height: auto;
-    margin: auto;
-    border-radius: 4px;
-  }
-
-  ul,
-  ol {
-    padding: 0;
-    margin-left: 1.8em;
-  }
-
-  a.anchor {
-    float: left;
-    margin-left: -20px;
-    padding-right: 6px;
-    box-shadow: none;
-    opacity: .8;
-    &:hover {
-      background: none;
-      color: $theme;
-      opacity: 1;
-    }
-
-    svg {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      vertical-align: baseline;
-      visibility: hidden;
-    }
-    &:focus svg {
-      visibility: visible;
-    }
-  }
-
-  h1:hover a.anchor svg,
-  h2:hover a.anchor svg,
-  h3:hover a.anchor svg,
-  h4:hover a.anchor svg,
-  h5:hover a.anchor svg,
-  h6:hover a.anchor svg {
-    visibility: visible;
+    border-radius: 50%;
   }
 }
-
-.footnotes {
-  font-size: .85em;
-
-  a {
-    box-shadow: none;
-    text-decoration: underline;
-    transition-property: color;
-
-    &:hover {
-      background: transparent;
-    }
-
-    &.footnote-backref {
-      text-decoration: none;
-    }
-  }
-
-  ol {
-    line-height: 1.8;
-  }
-}
-
-a.footnote-ref {
-  box-shadow: none;
-  text-decoration: none;
-  padding: 2px;
-  border-radius: 2px;
-  background-color: $midnightblue;
-
-  &:hover{
-    box-shadow: none;
-    background-color: $theme;
-    transition-property: background-color;
+.title-area {
+  display: flex;
+  align-items: baseline;
+  flex-direction: row-reverse;
+  margin-bottom: 2em;
+  .title-area-l {
+    flex: 1;
   }
 }
-
-.post-info {
-  font-size: .8rem;
+h1#page-title {
+  margin: 0;
+  font-size: 2em;
+  font-weight: normal;
   line-height: normal;
-  @include dimmed;
-
-  p {
-    margin: .8em 0;
-  }
-
-  a:hover {
-    border-bottom: 2px solid $theme;
-  }
-
-  svg {
-    margin-right: .8em;
-  }
-
-  .tag {
-    margin-right: .5em;
-
-    &::before {
-      content: "#"
-    }
-  }
 }
 
-#toc {
-  position: fixed;
-  left: 50%;
-  top: 0;
-  display: none;
+.feather {
+  display: inline-block;
+  vertical-align: -.125em;
+  width: 1em;
+  height: 1em;
 }
 
-.toc-title {
-  margin-left: 1em;
-  margin-bottom: .5em;
-  font-size: .8em;
-  font-weight: bold;
-  opacity: .8;
-}
+@import "partials/home.scss", "partials/404.scss";
+@import "partials/single.scss", "partials/list.scss";
+@import "partials/footer.scss", "partials/comments.scss";
 
-#TableOfContents {
-  font-size: .8em;
-  @include dimmed;
 
-  ul {
-    padding-left: 1em;
-    margin: 0;
+@media all and (min-width: 550px) {
+  html {
+    font-size: 1.1em;
   }
-
-  &>ul {
-    list-style-type: none;
-
-    ul ul {
-      font-size: .9em;
-    }
+  .wrapper#site-footer {
+    display: flex;
+    flex-direction: row-reverse;
+    background: transparent;
   }
-
-  a:hover {
-    border-bottom: $theme 2px solid;
+  .posts-group {
+    display: flex;
   }
-}
-
-.post-nav {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 1.5em;
-  margin-bottom: 2.5em;
-  font-size: 1.2em;
-
-  a {
-    flex-basis: 50%;
-    flex-grow: 1;
+  .footer-l {
+    flex: 1;
   }
-
-  .next-post {text-align: left; padding-right: 5px;}
-  .prev-post {text-align: right; padding-left: 5px;}
-
-  .post-nav-label {
-    font-size: .8em;
-    opacity: .8;
-    text-transform: uppercase;
+  .social-icon > .icon-link {
+    margin-left: .4em;
+    margin-right: 0;
   }
-}
-
-// Comments
-//
-#comments-loader {
-  text-align: center;
-  font-size: 2.5em;
-  margin-top: 2.5em;
-
-  svg {
-    animation-duration: 1.2s;
+  .recent-posts-list a {
+    display: inline;
   }
 }
 
-#comments {
-  margin-top: 3em;
-
-  * {
-    color: $text;
-    line-height: 1.5;
-  }
-
-  .vicon {
-    fill: $text;
-  }
-
-  .vcontrol {
-    letter-spacing: normal;
-  }
-
-  .vbtn {
-    background-color: #7d828a;
-  }
-
-  .vwrap {
-    border: 2px solid $text;
-
-    input {
-      border-bottom-width: 2px;
-    }
+@media all and (min-width: 810px) {
+  main#site-main {
+    margin-top: 3em;
   }
-
-  .vsys {
-    background-color: $highlight-grey;
-    opacity: .5;
+  .wrapper {
+    max-width: 780px;
+    text-align: justify;
   }
-
-  .vat:hover {
-    color: $theme;
-  }
-
-  .vh {
-    border-bottom: none;
-
-    .vquote {
-      border-left: 3px dotted #979ca5;
-    }
+  #home-btn>img {
+    width: 2em;
   }
-
-  .vcontent {
-    padding: 0;
-
-    code {
-      margin: 0 4px;
-      color: #eee;
-      background: $highlight-grey;
-    }
-
-    pre {
-      color: #eee;
-      background: $midnightblue;
-      padding: 1em 1.5em;
-      border-radius: 5px;
-
-      code {
-        background: $midnightblue;
-      }
-    }
+  #page.error-404 {
+    flex-direction: row;
   }
-}
-
-// Media Queries
-//
-@media (min-width: 800px) {
-  .site-main {
-    margin-top: 3em;
+  .content a.anchor {
+    float: left;
+    margin-left: -1em;
   }
-
-  hr.post-end {
-    width: 40%;
+  .posts-group {
+    display: flex;
   }
-}
-
-@media (min-width: 960px) {
-  .site-main {
-    margin-top: 6em;
+  .content figure.big {
+    margin-left: calc(390px - 50vw - 1em);
   }
 }
 
-@media (min-width: 1300px) {
-  .site-main {
-    margin-top: 8em;
-  }
-
-  .desktop-only,
-  #toc.show-toc {
-    display: block;
-  }
-
-  .desktop-only-ib {
-    display: inline-block;
-  }
-
-  figure.left {
-    margin-left: -240px;
-    p {
-      text-align: left;
-    }
+@media all and (min-width: 1250px) {
+  main#site-main {
+    margin-top: 4.5em;
   }
-
-  figure.right {
-    margin-right: -240px;
-    p {
-      text-align: right;
-    }
+  .wrapper {
+    max-width: 980px;
   }
-
-  figure.big {
-    width: 1200px;
-    margin-left: -240px;
+  .content a.anchor {
+    float: left;
+    margin-left: -1em;
   }
-
-  hr.post-end {
-    width: 30%;
+  .posts-group {
+    display: flex;
   }
-
-  #toc {
-    top: 13em;
-    margin-left: 370px;
-    max-width: 220px;
+  .content figure.big {
+    margin-left: calc(490px - 50vw - 1em);
   }
 }
 
-@media (min-width: 1800px) {
-  .site-main {
-    margin-top: 10em;
+@media all and (min-width: 1590px) {
+  :root {
+    --offset: 280px;
   }
-
-  .section-inner {
-    max-width: 1600px;
-  }
-
-  .thin {
-    max-width: 960px;
-  }
-
-  figure.left {
-    max-width: 75%;
-    margin-left: -320px;
-  }
-
-  figure.right {
-    max-width: 75%;
-    margin-right: -320px;
+  html {
+    font-size: 1.2em;
   }
-
-  figure.big {
-    width: 1600px;
-    margin-left: -320px;
+  main#site-main {
+    margin-top: 6em;
   }
-
-  hr.post-end {
-    width: 30%;
+  #home-center, #home-footer {
+    padding-left: 15vw;
+    padding-right: 15vw;
   }
-
-  #toc {
-    top: 15em;
-    margin-left: 490px;
-    max-width: 300px;
+  .wrapper {
+    width: 1028px;
+    margin-left: var(--offset);
   }
-}
-
-@media (max-width: 760px) {
-
-  .hide-in-mobile,
-  .site-nav.hide-in-mobile {
+  #toc-btn {
     display: none;
   }
-
-  #menu-btn {
-    display: inline-block;
-  }
-
-  .posts-group {
-    display: block;
-
-    .post-year {
-      margin: -6px 0 4px;
+  #toc {
+    display: block!important;
+    position: sticky;
+    float: left;
+    top: 2em;
+    width: calc(var(--offset) - 2em);
+    padding: 0 0 0 1em;
+    margin-left: calc(0px - var(--offset));
+    border-right: 1px dashed;
+    border-radius: 0;
+    background: transparent;
+    text-align: right;
+    .toc-title {
+      display: block;
+      padding-right: 1em;
+      margin-top: 0;
+      font-weight: bold;
     }
   }
-
-  #spotlight.error-404 {
-    flex-direction: column;
-    text-align: center;
-
-    .banner-404 {
-      margin: 0;
+  #TableOfContents {
+    direction: rtl;
+  }
+  .content figure.big {
+    width: calc(100vw - var(--offset) - 1em);
+    margin-left: 0;
+    text-align: left;
+    &>img {
+      margin-left: 0;
     }
   }
 }
 
-@media (max-width: 520px) {
-
-  .content figure.left,
-  .content figure.right {
-    float: unset;
-    max-width: 100%;
-    margin: 0;
-  }
-
-  hr.post-end {
-    width: 60%;
-  }
-
-  #mobile-menu {
-    right: 1.2em;
+@media all and (min-width: 1800px) {
+  :root {
+    --offset: 380px;
   }
 }

config.toml

@@ -27,11 +27,13 @@ googleAnalytics = "UA-125057333-1"
 
 [params]
   dateform        = "Jan 2, 2006"
-  dateformShort   = "Jan 2"
+  dateformShort   = "Jan 02"
   dateformNum     = "2006-01-02"
   dateformNumTime = "2006-01-02 15:04"
 
+  accentColor = "#54BAB9"
   images = ["apple-touch-icon.png"]
+  # bgImg = "/img/bg.jpg"
 
   gitUrl = "https://github.com/Track3/blog/commit/"
 
@@ -52,14 +54,14 @@ googleAnalytics = "UA-125057333-1"
   [[menu.main]]
     name = "Writing"
     url = "/posts/"
-    weight = 10
+    weight = 20
 
   [[menu.main]]
     name = "Friends"
     url = "/friends/"
-    weight = 20
+    weight = 30
 
   [[menu.main]]
     name = "About"
     url = "/about/"
-    weight = 30
+    weight = 40

layouts/404.html

@@ -1,15 +1,20 @@
+{{ define "head" }}
+	{{ if .Site.Params.bgImg -}}
+	<style>:root{ --bg-img: url({{.Site.Params.bgImg | absURL}});}</style>
+	{{- end -}}
+	{{.Scratch.Set "pageClass" "error-404"}}
+{{ end }}
+
 {{ define "main" }}
-	<div id="spotlight" class="error-404 animated fadeIn">
-		<p class="img-404">
-			<img src="{{ "img/404.png" | absURL }}" alt="Nothing Found">
+	<p class="img-404">
+		<img src="{{ "img/404.png" | absURL }}" alt="Nothing Found">
+	</p>
+	<div class="banner-404">
+		<h1>404</h1>
+		<p>Oops, page not found…</p>
+		<p class="btn-404">
+			<a href="{{.Site.BaseURL}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg> Home</a>
+			<a href="{{ "posts" | absURL }}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg> Archives</a>
 		</p>
-		<div class="banner-404">
-			<h1>404</h1>
-			<p>Oops, page not found…</p>
-			<p class="btn-404">
-				<a href="{{.Site.BaseURL}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>Home</a>
-				<a href="{{ "posts" | absURL }}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>Archives</a>
-			</p>
-		</div>
 	</div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -1 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" class="anchor" aria-hidden="true"><span class="anchor-icon">#</span></a></h{{ .Level }}>

layouts/_default/baseof.html

@@ -5,8 +5,9 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<meta name="theme-color" content="#494f5c">
-	<meta name="msapplication-TileColor" content="#494f5c">
+	<meta name="color-scheme" content="dark light">
+	<meta name="theme-color" content="{{$.Site.Params.accentColor}}">
+	<meta name="msapplication-TileColor" content="{{$.Site.Params.accentColor}}">
 	{{- template "_internal/schema.html" . }}
 	{{- template "_internal/opengraph.html" . }}
 	{{- template "_internal/twitter_cards.html" . }}
@@ -14,34 +15,30 @@
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 	<link rel="manifest" href="/site.webmanifest">
-	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#494f5c">
+	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#54bab9">
 	<link rel="shortcut icon" href="/favicon.ico">
 	<title>{{.Title}}</title>
-	<link rel="dns-prefetch" href="https://assets,ojbk.im/">
 	<link rel="dns-prefetch" href="//cdn1.lncld.net">
 	<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
 	{{ range .AlternativeOutputFormats -}}
 	{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
 	{{ end -}}
-	{{ $style := resources.Get "scss/style.scss" | resources.ToCSS "css/style.css" | minify | fingerprint -}}
+	{{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "css/style.css" . | toCSS | minify | fingerprint -}}
 	<link rel="stylesheet" href="{{ $style.Permalink }}" {{ printf "integrity=%q" $style.Data.Integrity | safeHTMLAttr }}>
+	{{- .Scratch.Set "pageClass" ""}}
 	{{ block "head" . -}}{{- end }}
 </head>
 
-<body id="page">
-	{{ block "header" . -}}{{ end -}}
-	{{ block "main" . -}}{{ end -}}
-	{{ block "footer" . -}}{{ end }}
-	{{ $mainjs := resources.Get "js/main.js" -}}
-	{{ $quicklinkjs := resources.Get "js/quicklink.umd.js" -}}
-	{{ $script := slice $mainjs $quicklinkjs | resources.Concat "js/bundle.js" | minify | fingerprint -}}
+<body>
+	<div id="page" class="{{.Scratch.Get "pageClass"}}">
+		{{ block "main" . -}}{{ end -}}
+		{{ block "footer" . -}}{{ end }}
+	</div>
+	<div id="bg-img"></div>
+	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
 	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
-	<script>
-		quicklink({
-			ignores: [uri => uri.includes('index.xml')]
-		});
-	</script>
 	{{ template "_internal/google_analytics_async.html" . }}
+	<script src="/js/instant.page-5.1.0.js" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
 </body>
 
 </html>

layouts/_default/list.html

@@ -1,10 +1,9 @@
-{{ define "header" }}
-{{ partialCached "header.html" . }}
-{{ end }}
-
 {{ define "main" }}
-	<main class="site-main section-inner thin animated fadeIn faster">
-		<h1>{{ .Title }}</h1>
+	<main id="site-main" class="wrapper">
+		<div class="title-area">
+			<a id="home-btn" title="{{.Site.Title}}" href="{{.Site.BaseURL}}"><img src="/apple-touch-icon.png" alt="Logo"></a>
+			<h1 id="page-title" class="title-area-l">{{ .Title }}</h1>
+		</div>
 		{{- if .Content }}
 		<div class="content">
 			{{ .Content }}

layouts/_default/single.html

@@ -1,23 +1,19 @@
 {{ define "head" }}
 	{{ if .Params.featuredImg -}}
-	<style>.bg-img {background-image: url('{{.Params.featuredImg | absURL}}');}</style>
+	<style>:root{ --bg-img: url({{.Params.featuredImg | absURL}});}</style>
 	{{- else if .Params.images -}}
 		{{- range first 1 .Params.images -}}
-		<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
+		<style>:root{ --bg-img: url({{. | absURL}});}</style>
 		{{- end -}}
 	{{- end -}}
 {{ end }}
 
-{{ define "header" }}
-{{ partial "header.html" . }}
-{{ end }}
-
 {{ define "main" }}
-	{{- if (or .Params.images .Params.featuredImg) }}
-	<div class="bg-img"></div>
-	{{- end }}
-	<main class="site-main section-inner thin animated fadeIn faster">
-		<h1>{{ .Title }}</h1>
+	<main id="site-main" class="wrapper">
+		<div class="title-area">
+			<a id="home-btn" title="{{.Site.Title}}" href="{{.Site.BaseURL}}"><img src="/apple-touch-icon.png" alt="Logo"></a>
+			<h1 id="page-title" class="title-area-l">{{ .Title }}</h1>
+		</div>
 		<div class="content">
 			{{ .Content }}
 		</div>

layouts/index.html

@@ -1,32 +1,40 @@
 {{ define "head" }}
 	{{ if .Site.Params.bgImg -}}
-	<style>.bg-img {background-image: url('{{.Site.Params.bgImg | absURL}}');opacity: .03;}</style>
+	<style>:root{ --bg-img: url({{.Site.Params.bgImg | absURL}});}</style>
 	{{- end -}}
+	{{.Scratch.Set "pageClass" "home"}}
 {{ end }}
 
 {{ define "main" }}
-	{{- if (or .Site.Params.images .Site.Params.bgImg) }}
-	<div class="bg-img"></div>
-	{{- end }}
-	<div id="spotlight" class="animated fadeIn">
-		<div id="home-center">
-			<h1 id="home-title">Track3's Blog</h1>
-			{{- with .Site.Params.social }}
-			<div id="home-social">
-				{{ partialCached "social-icons.html" . }}
-			</div>
-			{{- end }}
-			<nav id="home-nav" class="site-nav">
-				{{- range .Site.Menus.main }}
-				<a href="{{ .URL }}">{{ .Name }}</a>
-				{{- end }}
-			</nav>
+	<div id="home-center">
+		<h1 id="home-title">{{.Site.Title}}</h1>
+		{{- with .Site.Params.social }}
+		<div id="home-social">
+			{{ partialCached "social-icons.html" . }}
 		</div>
-		<div id="home-footer">
-			<p>
-				&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>
-				{{- with (not (in (.Site.Language.Get "disableKinds") "RSS")) }} &#183; <a href="{{ "posts/index.xml" | absURL }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>{{ end }}
-			</p>
+		{{- end }}
+		<nav id="home-nav">
+			{{- range .Site.Menus.main }}
+			<a href="{{ .URL }}">{{ .Name }}</a>
+			{{- end }}
+		</nav>
+		<div id="recent-posts">
+			<div>Recent Posts</div>
+			<ul class="recent-posts-list">
+				{{ $writingList := (sort ( where site.RegularPages "Type" "in" "posts" ) "Date" "desc") -}}
+				{{ range first 3 $writingList -}}
+				<li>
+					<span>{{ .Date.Format .Site.Params.dateformNum }} </span>
+					<a href="{{.Permalink}}">{{.Title}}</a>
+				</li>
+				{{ end }}
+			</ul>
 		</div>
 	</div>
+	<div id="home-footer">
+		<p>
+			&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a>
+			{{- with (not (in (.Site.Language.Get "disableKinds") "RSS")) }} &#183; <a href="{{ "posts/index.xml" | absURL }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>{{ end }}
+		</p>
+	</div>
 {{ end }}

layouts/partials/comments.html

@@ -1,4 +1,4 @@
-		<div id="comments-loader" class="thin" style="display: none;">
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle animated infinite bounce"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+		<div id="comments-loader" style="display: none;">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle animated infinite bounce"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> 评论加载中……
 		</div>
-		<div id="comments" class="thin"></div>
+		<div id="comments"></div>

layouts/partials/footer.html

@@ -1,4 +1,16 @@
-	<footer id="site-footer" class="section-inner thin animated fadeIn faster">
-		<p>&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a> &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank" rel="noopener">CC BY-NC 4.0</a></p>
-		<p>Made with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> &#183; <a href="http://www.miitbeian.gov.cn" target="_blank" rel="noopener">鄂ICP备16022650号-1</a> &#183; <a href="{{ "posts/index.xml" | absURL }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a></p>
+	<footer id="site-footer" class="wrapper">
+		<div class="footer-r">
+			{{- with .Site.Params.social -}}
+			<p class="social-icon">{{ partialCached "social-icons.html" . }}</p>
+			{{- end -}}
+		</div>
+		<div class="footer-l">
+			<nav class="site-nav">
+				<a href="{{.Site.BaseURL}}">Home</a><span>&#47;</span>
+				{{- range .Site.Menus.main -}}
+				<a href="{{ .URL }}">{{ .Name }}</a><span>&#47;</span>
+				{{- end }}
+			</nav>
+			<p class="site-copy">&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a> &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank" rel="noopener">CC BY-NC 4.0</a> &#183; <a href="{{ "posts/index.xml" | absURL }}" target="_blank" title="RSS" class="icon-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a></p>
+		</div>
 	</footer>

layouts/partials/header.html

@@ -1,34 +0,0 @@
-	<header id="site-header" class="animated">
-		<div class="hdr-wrapper section-inner">
-			<div class="hdr-left">
-				<div class="site-branding">
-					<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a>
-				</div>
-				<nav class="site-nav hide-in-mobile">
-					{{- range .Site.Menus.main }}
-					<a href="{{ .URL }}">{{ .Name }}</a>
-					{{- end }}
-				</nav>
-			</div>
-			<div class="hdr-right hdr-icons">
-				{{ if (or .Params.images .Params.featuredImg) -}}
-				<button id="img-btn" class="hdr-btn" title="Featured Image"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
-				{{- end }}
-				{{- with .Params.toc -}}
-				<button id="toc-btn" class="hdr-btn desktop-only-ib" title="Table Of Contents"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
-				{{- end }}
-				{{- with .Site.Params.social -}}
-				<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
-				{{- end -}}
-				<button id="menu-btn" class="hdr-btn" title="Menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
-			</div>
-			</div>
-		</div>
-	</header>
-	<div id="mobile-menu" class="animated fast">
-		<ul>
-			{{- range .Site.Menus.main }}
-			<li><a href="{{ .URL }}">{{ .Name }}</a></li>
-			{{- end }}
-		</ul>
-	</div>

layouts/partials/social-icons.html

@@ -1,3 +1,3 @@
 {{ range . -}}
-<a href="{{ .url }}" target="_blank" rel="noopener" title="{{ .name | humanize }}">{{ partial "svg.html" . }}</a>
+<a href="{{ .url }}" target="_blank" rel="noopener" title="{{ .name | humanize }}" class="icon-link">{{ partial "svg.html" . }}</a>
 {{- end }}

layouts/posts/single.html

@@ -1,27 +1,34 @@
 {{ define "head" }}
 	{{ if .Params.featuredImg -}}
-	<style>.bg-img {background-image: url('{{.Params.featuredImg | absURL}}');}</style>
+	<style>:root{ --bg-img: url({{.Params.featuredImg | absURL}});}</style>
 	{{- else if .Params.images -}}
 		{{- range first 1 .Params.images -}}
-		<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
+		<style>:root{ --bg-img: url({{. | absURL}});}</style>
 		{{- end -}}
 	{{- end -}}
 {{ end }}
 
-{{ define "header" }}
-{{ partial "header.html" . }}
-{{ end }}
-
 {{ define "main" }}
-	{{- if (or .Params.images .Params.featuredImg) }}
-	<div class="bg-img"></div>
-	{{- end }}
-	<main class="site-main section-inner animated fadeIn faster">
-		<article class="thin">
+	<main id="site-main" class="wrapper">
+		<article>
 			<header class="post-header">
-				<div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
-				<h1>{{ .Title }}</h1>
+				<div class="title-area">
+					<a id="home-btn" title="{{.Site.Title}}" href="{{.Site.BaseURL}}"><img src="/apple-touch-icon.png" alt="Logo"></a>
+					<div class="title-area-l">
+						<div id="post-header-date">{{ .Date.Format .Site.Params.dateform }}</div>
+						<h1 id="page-title">{{ .Title }}</h1>
+					</div>
+				</div>
+				{{- if .Params.toc }}
+				<button id="toc-btn" title="目录"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg> 目录</button>
+				{{- end }}
 			</header>
+			{{- if .Params.toc }}
+			<div id="toc">
+				<p class="toc-title">目录</p>
+				{{ .TableOfContents }}
+			</div>
+			{{- end }}
 			<div class="content">
 				{{ .Content }}
 			</div>
@@ -42,13 +49,7 @@
 				{{- end }}
 			</footer>
 		</article>
-		{{- if .Params.toc }}
-		<aside id="toc">
-			<div class="toc-title">Table of Contents</div>
-			{{ .TableOfContents }}
-		</aside>
-		{{- end }}
-		<div class="post-nav thin">
+		<div class="post-nav">
 			{{- with .NextInSection }}
 			<a class="next-post" href="{{ .Permalink }}">
 				<span class="post-nav-label"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>&nbsp;Newer</span><br><span>{{ .Title }}</span>

static/_redirects

@@ -1,6 +0,0 @@
-# Redirect domain aliases to primary domain
-https://xxxlbox.com/* https://ojbk.im/:splat 301!
-https://www.xxxlbox.com/* https://ojbk.im/:splat 301!
-
-# Redirect default Netlify subdomain to primary domain
-https://quirky-bohr-deba40.netlify.com/* https://ojbk.im/:splat 301!

static/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#494f5c</TileColor>
+            <TileColor>#54bab9</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

static/control/index.html

@@ -1,37 +0,0 @@
-<!-- forestryio: ignore; forestryio: admin -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Admin</title>
-    <meta name="description" content=" " />
-    <meta name="author" content=" " />
-    <meta name="HandheldFriendly" content="true" />
-    <meta name="MobileOptimized" content="320" />
-    <!-- Use maximum-scale and user-scalable at your own risk. It disables pinch/zoom. Think about usability/accessibility before including.-->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-
-    <link rel="stylesheet" href="https://local.forestry.io/main.css" />
-
-    <!-- Google font -->
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
-
-    <!-- Fort awesome icon kit -->
-    <script src="https://use.fortawesome.com/b6f38602.js"></script>
-
-</head>
-<body>
-<div id="app">
-
-</div>
-<script id="admin-config-script" type="text/javascript">
-    var env = {
-        siteId: "v8nufb5pkmtuaw",
-        local: false
-    };
-</script>
-<script type="application/javascript" src="https://local.forestry.io/forestry.min.js"></script>
-
-</body>
-</html>

static/site.webmanifest

@@ -13,8 +13,8 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#494f5c",
-    "background_color": "#494f5c",
+    "theme_color": "#54bab9",
+    "background_color": "#54bab9",
     "start_url": "https://ojbk.im",
     "display": "standalone"
 }