Visual overhaul: dark modern theme

css/main.css

@@ -1,5 +1,24 @@
+/* ============================================================
+   krisforbes.ca — Dark Modern Theme
+   One stylesheet for the whole site; content untouched.
+   ============================================================ */
+
+:root {
+  --bg: #0d1117;
+  --bg-raised: #161b22;
+  --bg-hover: #1c2330;
+  --border: #2d333b;
+  --text: #e6edf3;
+  --text-muted: #8b949e;
+  --accent: #58a6ff;
+  --accent-strong: #79c0ff;
+  --accent-glow: rgba(88, 166, 255, 0.25);
+  --code-bg: #1a2129;
+  --radius: 10px;
+}
+
 /**
- * Reset some basic elements
+ * Reset
  */
 body, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, hr,
@@ -8,111 +27,153 @@ dl, dd, ol, ul, figure {
   padding: 0; }
 
 /**
- * Basic styling
+ * Base — dark modern
  */
+* {
+  box-sizing: border-box; }
+
+html {
+  scroll-behavior: smooth; }
+
 body {
-  font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-  color: #111;
+    "Helvetica Neue", Arial, sans-serif;
-  background-color: #fdfdfd;
+  font-size: 17px;
+  line-height: 1.7;
+  color: var(--text);
+  background-color: var(--bg);
   -webkit-text-size-adjust: 100%;
-  -webkit-font-feature-settings: "kern" 1;
+  font-kerning: normal;
-  -moz-font-feature-settings: "kern" 1;
+  transition: background-color 0.3s ease; }
-  -o-font-feature-settings: "kern" 1;
+
-  font-feature-settings: "kern" 1;
+::selection {
-  font-kerning: normal; }
+  background: var(--accent-glow);
+  color: #fff; }
 
 /**
- * Set `margin-bottom` to maintain vertical rhythm
+ * Vertical rhythm
  */
 h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure,
 .highlight {
-  margin-bottom: 15px; }
+  margin-bottom: 16px; }
-
-/**
- * Images
- */
-img {
-  max-width: 100%;
-  vertical-align: middle; }
-
-/**
- * Figures
- */
-figure > img {
-  display: block; }
-
-figcaption {
-  font-size: 14px; }
-
-/**
- * Lists
- */
-ul, ol {
-  margin-left: 30px; }
-
-li > ul,
-li > ol {
-  margin-bottom: 0; }
 
 /**
  * Headings
  */
 h1, h2, h3, h4, h5, h6 {
-  font-weight: 400; }
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+  color: var(--text); }
+
+h1 { font-size: 2.2em; }
+h2 { font-size: 1.55em; margin-top: 1.4em; }
+h3 { font-size: 1.28em; margin-top: 1.3em; }
+h4 { font-size: 1.08em; margin-top: 1.2em; }
 
 /**
  * Links
  */
 a {
-  color: #2a7ae2;
+  color: var(--accent);
-  text-decoration: none; }
+  text-decoration: none;
-  a:visited {
+  transition: color 0.15s ease; }
-    color: #1756a9; }
+
 a:hover {
-    color: #111;
+  color: var(--accent-strong);
-    text-decoration: underline; }
+  text-decoration: underline;
+  text-underline-offset: 3px; }
+
+/**
+ * Images / figures
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+  border-radius: var(--radius); }
+
+figure > img {
+  display: block; }
+
+figcaption {
+  font-size: 14px;
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 8px; }
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: 28px; }
+
+li > ul,
+li > ol {
+  margin-bottom: 0; }
+
+li::marker {
+  color: var(--text-muted); }
 
 /**
  * Blockquotes
  */
 blockquote {
-  color: #828282;
+  color: var(--text-muted);
-  border-left: 4px solid #e8e8e8;
+  border-left: 3px solid var(--accent);
-  padding-left: 15px;
+  background: var(--bg-raised);
-  font-size: 18px;
+  padding: 12px 20px;
-  letter-spacing: -1px;
+  border-radius: 0 var(--radius) var(--radius) 0;
-  font-style: italic; }
+  font-size: 1.05em; }
   blockquote > :last-child {
     margin-bottom: 0; }
 
+/**
+ * Horizontal rule
+ */
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--border);
+  margin: 32px 0; }
+
 /**
  * Code formatting
  */
-pre,
+pre, code {
-code {
+  font-family: "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
-  font-size: 15px;
+  font-size: 0.88em; }
-  border: 1px solid #e8e8e8;
-  border-radius: 3px;
-  background-color: #eef; }
 
 code {
-  padding: 1px 5px; }
+  padding: 2px 6px;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  color: var(--accent-strong); }
 
 pre {
-  padding: 8px 12px;
+  padding: 16px;
-  overflow-x: auto; }
+  overflow-x: auto;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  line-height: 1.55; }
   pre > code {
     border: 0;
-    padding-right: 0;
+    padding: 0;
-    padding-left: 0; }
+    background: none;
+    color: var(--text); }
+  pre::-webkit-scrollbar {
+    height: 8px; }
+  pre::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px; }
 
 /**
  * Wrapper
  */
 .wrapper {
-  max-width: -webkit-calc(800px - (30px * 2));
   max-width: calc(800px - (30px * 2));
   margin-right: auto;
   margin-left: auto;
@@ -120,15 +181,11 @@ pre {
   padding-left: 30px; }
   @media screen and (max-width: 800px) {
     .wrapper {
-      max-width: -webkit-calc(800px - (30px));
       max-width: calc(800px - (30px));
       padding-right: 15px;
       padding-left: 15px; } }
 
-/**
+.wrapper:after {
- * Clearfix
- */
-.wrapper:after, .footer-col-wrapper:after {
   content: "";
   display: table;
   clear: both; }
@@ -142,46 +199,62 @@ pre {
   height: 16px;
   vertical-align: middle; }
   .icon > svg path {
-    fill: #828282; }
+    fill: var(--text-muted); }
 
 /**
- * Site header
+ * Site header — sticky glass effect
  */
 .site-header {
-  border-top: 5px solid #424242;
+  position: sticky;
-  border-bottom: 1px solid #e8e8e8;
+  top: 0;
-  min-height: 56px;
+  z-index: 100;
-  position: relative; }
+  min-height: 60px;
+  background: rgba(13, 17, 23, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border); }
 
 .site-title {
-  font-size: 26px;
+  font-size: 24px;
-  font-weight: 300;
+  font-weight: 700;
-  line-height: 56px;
+  letter-spacing: -0.02em;
-  letter-spacing: -1px;
+  line-height: 60px;
+  float: left;
   margin-bottom: 0;
-  float: left; }
+  background: linear-gradient(90deg, var(--accent), #a371f7);
-  .site-title, .site-title:visited {
+  -webkit-background-clip: text;
-    color: #424242; }
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: filter 0.15s ease; }
+
+.site-title:hover {
+  filter: brightness(1.2); }
 
 .site-nav {
   float: right;
-  line-height: 56px; }
+  line-height: 60px; }
   .site-nav .menu-icon {
     display: none; }
   .site-nav .page-link {
-    color: #111;
+    color: var(--text-muted);
-    line-height: 1.5; }
+    line-height: 1.5;
+    font-weight: 500;
+    padding: 4px 2px; }
+    .site-nav .page-link:hover {
+      color: var(--accent-strong);
+      text-decoration: none; }
     .site-nav .page-link:not(:last-child) {
-      margin-right: 20px; }
+      margin-right: 22px; }
   @media screen and (max-width: 600px) {
     .site-nav {
       position: absolute;
-      top: 9px;
+      top: 14px;
       right: 15px;
-      background-color: #fdfdfd;
+      background: var(--bg-raised);
-      border: 1px solid #e8e8e8;
+      border: 1px solid var(--border);
-      border-radius: 5px;
+      border-radius: var(--radius);
-      text-align: right; }
+      text-align: right;
+      line-height: normal; }
       .site-nav .menu-icon {
         display: block;
         float: right;
@@ -194,7 +267,7 @@ pre {
           width: 18px;
           height: 15px; }
           .site-nav .menu-icon > svg path {
-            fill: #424242; }
+            fill: var(--text); }
       .site-nav .trigger {
         clear: both;
         display: none; }
@@ -203,21 +276,114 @@ pre {
         padding-bottom: 5px; }
       .site-nav .page-link {
         display: block;
-        padding: 5px 10px;
+        padding: 6px 12px;
         margin-left: 20px; }
         .site-nav .page-link:not(:last-child) {
           margin-right: 0; } }
 
+/**
+ * Page content
+ */
+.page-content {
+  padding: 40px 0 60px; }
+
+.page-heading {
+  font-size: 30px;
+  font-weight: 700;
+  letter-spacing: -0.03em; }
+
+/**
+ * Post list — card style on index
+ */
+.home {
+  animation: fadein 0.4s ease; }
+
+.post-list {
+  margin-left: 0;
+  list-style: none; }
+  .post-list > li {
+    margin-bottom: 16px;
+    padding: 18px 22px;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    transition: border-color 0.2s ease, transform 0.2s ease,
+      background-color 0.2s ease; }
+    .post-list > li:hover {
+      border-color: var(--accent);
+      background: var(--bg-hover);
+      transform: translateY(-2px); }
+
+.post-meta {
+  font-size: 14px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums; }
+
+.post-link {
+  display: inline;
+  font-size: 21px;
+  font-weight: 600;
+  letter-spacing: -0.01em; }
+
+/**
+ * Posts
+ */
+.post {
+  animation: fadein 0.4s ease; }
+
+.post-header {
+  margin-bottom: 36px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--border); }
+
+.post-title {
+  font-size: 42px;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  background: linear-gradient(120deg, var(--text) 60%, var(--accent-strong));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent; }
+  @media screen and (max-width: 800px) {
+    .post-title {
+      font-size: 32px; } }
+
+.post-content {
+  margin-bottom: 30px;
+  font-size: 1.05em; }
+  .post-content h2 {
+    font-size: 1.65em; }
+  .post-content h3 {
+    font-size: 1.32em; }
+  .post-content h4 {
+    font-size: 1.1em; }
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+    transform: translateY(6px); }
+  to {
+    opacity: 1;
+    transform: translateY(0); } }
+
 /**
  * Site footer
  */
 .site-footer {
-  border-top: 1px solid #e8e8e8;
+  border-top: 1px solid var(--border);
-  padding: 30px 0; }
+  padding: 36px 0;
+  background: var(--bg-raised);
+  color: var(--text-muted); }
+  .site-footer a {
+    color: var(--text-muted); }
+    .site-footer a:hover {
+      color: var(--accent-strong); }
 
 .footer-heading {
-  font-size: 18px;
+  font-size: 17px;
-  margin-bottom: 15px; }
+  margin-bottom: 15px;
+  color: var(--text); }
 
 .contact-list,
 .social-media-list {
@@ -226,7 +392,7 @@ pre {
 
 .footer-col-wrapper {
   font-size: 15px;
-  color: #828282;
+  color: var(--text-muted);
   margin-left: -15px; }
 
 .footer-col {
@@ -235,223 +401,87 @@ pre {
   padding-left: 15px; }
 
 .footer-col-1 {
-  width: -webkit-calc(35% - (30px / 2));
   width: calc(35% - (30px / 2)); }
 
 .footer-col-2 {
-  width: -webkit-calc(20% - (30px / 2));
   width: calc(20% - (30px / 2)); }
 
 .footer-col-3 {
-  width: -webkit-calc(45% - (30px / 2));
   width: calc(45% - (30px / 2)); }
 
 @media screen and (max-width: 800px) {
   .footer-col-1,
   .footer-col-2 {
-    width: -webkit-calc(50% - (30px / 2));
     width: calc(50% - (30px / 2)); }
-
   .footer-col-3 {
-    width: -webkit-calc(100% - (30px / 2));
     width: calc(100% - (30px / 2)); } }
+
 @media screen and (max-width: 600px) {
   .footer-col {
     float: none;
-    width: -webkit-calc(100% - (30px / 2));
     width: calc(100% - (30px / 2)); } }
-/**
- * Page content
- */
-.page-content {
-  padding: 30px 0; }
-
-.page-heading {
-  font-size: 20px; }
-
-.post-list {
-  margin-left: 0;
-  list-style: none; }
-  .post-list > li {
-    margin-bottom: 30px; }
-
-.post-meta {
-  font-size: 14px;
-  color: #828282; }
-
-.post-link {
-  display: block;
-  font-size: 24px; }
 
 /**
- * Posts
+ * Syntax highlighting — dark palette
- */
-.post-header {
-  margin-bottom: 30px; }
-
-.post-title {
-  font-size: 42px;
-  letter-spacing: -1px;
-  line-height: 1; }
-  @media screen and (max-width: 800px) {
-    .post-title {
-      font-size: 36px; } }
-
-.post-content {
-  margin-bottom: 30px; }
-  .post-content h2 {
-    font-size: 32px; }
-    @media screen and (max-width: 800px) {
-      .post-content h2 {
-        font-size: 28px; } }
-  .post-content h3 {
-    font-size: 26px; }
-    @media screen and (max-width: 800px) {
-      .post-content h3 {
-        font-size: 22px; } }
-  .post-content h4 {
-    font-size: 20px; }
-    @media screen and (max-width: 800px) {
-      .post-content h4 {
-        font-size: 18px; } }
-
-/**
- * Syntax highlighting styles
  */
 .highlight {
-  background: #fff; }
+  background: var(--code-bg);
+  border-radius: var(--radius); }
   .highlighter-rouge .highlight {
-    background: #eef; }
+    background: var(--code-bg); }
-  .highlight .c {
+  .highlight .c, .highlight .cm, .highlight .c1 {
-    color: #998;
+    color: #7d8ca3;
     font-style: italic; }
   .highlight .err {
-    color: #a61717;
+    color: #ff7b72;
-    background-color: #e3d2d2; }
+    background: none; }
-  .highlight .k {
+  .highlight .k, .highlight .o, .highlight .ow {
-    font-weight: bold; }
+    color: #ff7b72; }
-  .highlight .o {
+  .highlight .cp, .highlight .cs {
-    font-weight: bold; }
+    color: #ffa657; }
-  .highlight .cm {
-    color: #998;
-    font-style: italic; }
-  .highlight .cp {
-    color: #999;
-    font-weight: bold; }
-  .highlight .c1 {
-    color: #998;
-    font-style: italic; }
-  .highlight .cs {
-    color: #999;
-    font-weight: bold;
-    font-style: italic; }
   .highlight .gd {
-    color: #000;
+    color: var(--text);
-    background-color: #fdd; }
+    background-color: rgba(248, 81, 73, 0.15); }
-  .highlight .gd .x {
-    color: #000;
-    background-color: #faa; }
   .highlight .ge {
     font-style: italic; }
   .highlight .gr {
-    color: #a00; }
+    color: #ff7b72; }
   .highlight .gh {
-    color: #999; }
+    color: #79c0ff;
+    font-weight: bold; }
   .highlight .gi {
-    color: #000;
+    color: var(--text);
-    background-color: #dfd; }
+    background-color: rgba(63, 185, 80, 0.15); }
-  .highlight .gi .x {
-    color: #000;
-    background-color: #afa; }
   .highlight .go {
-    color: #888; }
+    color: var(--text-muted); }
   .highlight .gp {
-    color: #555; }
+    color: var(--text-muted); }
   .highlight .gs {
     font-weight: bold; }
   .highlight .gu {
-    color: #aaa; }
+    color: #d2a8ff; }
   .highlight .gt {
-    color: #a00; }
+    color: #ff7b72; }
-  .highlight .kc {
+  .highlight .kc, .highlight .kd, .highlight .kn,
-    font-weight: bold; }
+  .highlight .kp, .highlight .kr, .highlight .kt {
-  .highlight .kd {
+    color: #d2a8ff; }
-    font-weight: bold; }
+  .highlight .m, .highlight .mf, .highlight .mh,
-  .highlight .kp {
+  .highlight .mi, .highlight .mo, .highlight .il {
-    font-weight: bold; }
+    color: #79c0ff; }
-  .highlight .kr {
+  .highlight .s, .highlight .sb, .highlight .sc, .highlight .sd,
-    font-weight: bold; }
+  .highlight .s2, .highlight .se, .highlight .sh, .highlight .si,
-  .highlight .kt {
+  .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss {
-    color: #458;
+    color: #a5d6ff; }
-    font-weight: bold; }
+  .highlight .na { color: #79c0ff; }
-  .highlight .m {
+  .highlight .nb { color: #ffa657; }
-    color: #099; }
+  .highlight .nc { color: #7ee787; font-weight: bold; }
-  .highlight .s {
+  .highlight .no { color: #79c0ff; }
-    color: #d14; }
+  .highlight .ni { color: #ffa657; }
-  .highlight .na {
+  .highlight .ne { color: #ff7b72; font-weight: bold; }
-    color: #008080; }
+  .highlight .nf { color: #d2a8ff; }
-  .highlight .nb {
+  .highlight .nn { color: var(--text-muted); }
-    color: #0086B3; }
+  .highlight .nt { color: #7ee787; }
-  .highlight .nc {
+  .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi {
-    color: #458;
+    color: #79c0ff; }
-    font-weight: bold; }
+  .highlight .bp { color: var(--text-muted); }
-  .highlight .no {
+  .highlight .w { color: #484f58; }
-    color: #008080; }
-  .highlight .ni {
-    color: #800080; }
-  .highlight .ne {
-    color: #900;
-    font-weight: bold; }
-  .highlight .nf {
-    color: #900;
-    font-weight: bold; }
-  .highlight .nn {
-    color: #555; }
-  .highlight .nt {
-    color: #000080; }
-  .highlight .nv {
-    color: #008080; }
-  .highlight .ow {
-    font-weight: bold; }
-  .highlight .w {
-    color: #bbb; }
-  .highlight .mf {
-    color: #099; }
-  .highlight .mh {
-    color: #099; }
-  .highlight .mi {
-    color: #099; }
-  .highlight .mo {
-    color: #099; }
-  .highlight .sb {
-    color: #d14; }
-  .highlight .sc {
-    color: #d14; }
-  .highlight .sd {
-    color: #d14; }
-  .highlight .s2 {
-    color: #d14; }
-  .highlight .se {
-    color: #d14; }
-  .highlight .sh {
-    color: #d14; }
-  .highlight .si {
-    color: #d14; }
-  .highlight .sx {
-    color: #d14; }
-  .highlight .sr {
-    color: #009926; }
-  .highlight .s1 {
-    color: #d14; }
-  .highlight .ss {
-    color: #990073; }
-  .highlight .bp {
-    color: #999; }
-  .highlight .vc {
-    color: #008080; }
-  .highlight .vg {
-    color: #008080; }
-  .highlight .vi {
-    color: #008080; }
-  .highlight .il {
-    color: #099; }