Numerous improvements and bug fixes.

- Refactored themes to always load with just a single file. This avoids
  a round trip on each request.
- Locally load font when available on the system, then try to
  load the woff2 file, then fall back to regular woff.
- Update markup to use relative urls where it is safe. RSS feeds still
  use absolute URLs.
- Only set og:image:(height/width) when using the standard color icon.
- Fixed styles on the pagination buttons.
- Added ability to switch font to Source Code Pro (useSourceCodePro).
- Added yellow theme.
- Added grey theme.
- Bold and remove underline for active page in header.
- Removed markdownify on summary.
- Only display date if present.

assets/css/buttons.css

@@ -91,4 +91,4 @@ a.read-more:active {
     cursor: pointer;
     outline: none;
   }
-}
+}

assets/css/color/blue-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #23B0FF;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/blue.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #23B0FF;

assets/css/color/green-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #78E2A0;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/green.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #78E2A0;

assets/css/color/grey-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: lightgrey;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/grey.css

@@ -0,0 +1,8 @@
+@import '../style.css';
+
+:root {
+  --accent: lightgrey;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/orange-scp.css

@@ -0,0 +1 @@
+@import '../style-scp.css';

assets/css/color/orange.css

@@ -0,0 +1 @@
+@import '../style.css';

assets/css/color/pink-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #EE72F1;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/pink.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #EE72F1;

assets/css/color/red-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #FF6266;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/red.css

@@ -1,10 +1,4 @@
-@import '../main.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
+@import '../style.css';
 
 :root {
   --accent: #FF6266;

assets/css/color/yellow-scp.css

@@ -0,0 +1,8 @@
+@import '../style-scp.css';
+
+:root {
+  --accent: #ffe658;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/yellow.css

@@ -0,0 +1,8 @@
+@import '../style.css';
+
+:root {
+  --accent: #ffe658;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/font-scp.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-display: swap;
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Light.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Light.otf.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Regular.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Regular.otf.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local("Source Code Pro") url("/assets/fonts/SourceCodePro-Bold.otf.woff2") format("woff2") url("/assets/fonts/SourceCodePro-Bold.otf.woff") format("woff");
+  font-display: swap;
+}
+
+body {
+  font-family: 'Source Code Pro', Monaco, Consolas, Ubuntu Mono, monospace;
+}
+
+code,
+kbd {
+  font-family: 'Source Code Pro', Monaco, Consolas, Ubuntu Mono, monospace !important;
+}
+
+.post-content {
+  font-weight: 300;
+}

assets/css/font.css

@@ -1,17 +1,26 @@
 @font-face {
   font-display: swap;
   font-family: 'Fira Code';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 400;
-  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  src: local("Fira Code") url("/assets/fonts/FiraCode-Regular.woff2") format("woff2") url("/assets/fonts/FiraCode-Regular.woff") format("woff");
   font-display: swap;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Fira Code';
-  font-style:  normal;
-  font-weight: 800;
-  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  font-style: normal;
+  font-weight: 700;
+  src: local("Fira Code") url("/assets/fonts/FiraCode-Bold.woff2") format("woff2") url("/assets/fonts/FiraCode-Bold.woff") format("woff");
   font-display: swap;
 }
+
+body {
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+}
+
+code,
+kbd {
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
+}

assets/css/header.css

@@ -49,6 +49,11 @@
     --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
     margin: 20px 1px;
 
+    a.active {
+      font-weight: bold;
+      text-decoration: none;
+    }
+
     @media (--phone) {
       @mixin menu;
       top: 50px;
@@ -159,4 +164,4 @@
       position: relative;
     }
   }
-}
+}

assets/css/main.css

@@ -11,10 +11,9 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
   font-size: 1rem;
   line-height: 1.54;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   background-color: color-mod(var(--accent) blend(#1D1E28 98%));
   color: var(--color);
   text-rendering: optimizeLegibility;
@@ -128,7 +127,6 @@ figure {
 }
 
 code, kbd {
-  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
   background: color-mod(var(--accent) a(20%));
   color: var(--accent);

assets/css/pagination.css

@@ -42,45 +42,54 @@
       text-decoration: none;
     }
   }
-}
 
-.button {
-  position: relative;
-  display: inline-flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  border-radius: 8px;
-  padding: 0;
-  cursor: pointer;
-  appearance: none;
-  overflow: hidden;
-
-  + .button {
-    margin-left: 10px;
+  .button:hover, a.button:hover, button:hover {
+    background: none;
   }
 
-  a {
-    display: flex;
-    padding: 8px 16px;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .button {
+    border: none;
+    color: var(--accent);
+    background: none;
+    position: relative;
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    border-radius: 0;
+    padding: 0;
+    cursor: pointer;
+    appearance: none;
     overflow: hidden;
-  }
 
-  &__text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
+    +.button {
+      margin-left: 10px;
+    }
 
-  &.next .button__icon {
-    margin-left: 8px;
-  }
+    a, a:hover {
+      display: flex;
+      padding: 8px 16px;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      background: none !important;
+      border: none;
+    }
 
-  &.previous .button__icon {
-    margin-right: 8px;
+    &__text {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    &.next .button__icon {
+      margin-left: 8px;
+    }
+
+    &.previous .button__icon {
+      margin-right: 8px;
+    }
   }
-}
+}

assets/css/style-scp.css

@@ -0,0 +1,18 @@
+@import 'variables.css';
+
+@import 'font-scp.css';
+@import 'buttons.css';
+@import 'form.css';
+
+@import 'header.css';
+@import 'logo.css';
+@import 'main.css';
+@import 'post.css';
+@import 'pagination.css';
+@import 'footer.css';
+
+@import 'prism.css';
+@import 'syntax.css';
+@import 'code.css';
+@import 'terms.css';
+@import 'gist.css';