Bootstrap reboot, Hero-background, accent color tweaks, etc

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "paper-houses-theme/assets/styles/bootstrap"]
+	path = paper-houses-theme/assets/styles/bootstrap
+	url = https://github.com/twbs/bootstrap.git

paper-houses-theme/assets/styles/bootstrap

@@ -0,0 +1 @@
+Subproject commit 787dfea8a29db138d5ff6100fc894f457ccd4169

paper-houses-theme/assets/styles/main.scss

@@ -1,41 +1,80 @@
-//@import url('https://fonts.googleapis.com/css2?family=Inter&family=Inter:wght@700&family=PT+Serif:wght@700&display=swap');
+@use "sass:color";
 
-* {
-    box-sizing: border-box;
-}
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+@import "bootstrap/scss/reboot";
+
+$light-accent: #394aa5; // Light
+$dark-accent: #648ebe; // Dark
 
 :root {
-    --background: hsl(15, 15.4%, 98.9%);
-    --section-bg: rgb(254, 249, 245);
-    --accent-border: rgb(170, 170, 170);
-    --shadow: rgb(227, 227, 227);
+    --body-background: #fdfcfc;
+    --body-background-foreground: #e6ebfb;
+    // Downloaded the topography background from https://heropatterns.com/; replaced the `fill="#000"` on the first line with the color above
+    --body-background-url: url("/assets/images/topography-light.svg");
+
+    --section-background: rgb(254, 249, 245);
+    --border: #{color.adjust($light-accent, $lightness: +15%, $saturation: -25%)};
+
     --text: rgb(25, 25, 25);
-    --accent: hsl(234, 82%, 60%);
+    --shadow: rgb(227, 227, 227);
+    --accent: #{$light-accent}; // Used for links, section handles, etc.
+    --accent-2: #{color.adjust($light-accent, $lightness: +20%)}; // The accent, but 20% towards the background color
+    --header-logo: #4556ed;
+
     --code-background: white;
     --code-color: black;
 
     @media (prefers-color-scheme: dark) {
-        --background: hsl(192, 16%, 6%);
-        --section-bg: rgb(31, 30, 39);
-        --accent-border: hsl(198, 6%, 78%);
-        --text: hsl(240, 1%, 68%);
+        --body-background: hsl(192, 16%, 6%);
+        --body-background-foreground: #2b2f45;
+        --body-background-url: url("/assets/images/topography-dark.svg");
+
+        --section-background: rgb(31, 30, 39);
+        --border: #{color.adjust($dark-accent, $lightness: +25%)};
+
+        --text: hsl(240, 1%, 83%);
         --shadow: hsl(198, 92%, 12%);
-        --accent: hsl(212, 41%, 57%);
+        --accent: #{$dark-accent};
+        --accent-2: #{color.adjust($dark-accent, $lightness: -20%)};
+        --header-logo: #418ee1;
+
         --code-background: rgba(0, 0, 0, 0.45);
         --code-color: #d2d2d2;
     }
 
+    // Paul Graham is 435, Daring Fireball is 425, both around 70 chars
     --section-width: 600px;
 
-    font-family: 'Inter', Arial, sans-serif;
+    font-family: Arial, sans-serif;
     font-size: 16px;
     line-height: 1.5;
     color: var(--text);
 }
 
+@font-face {
+    font-family: "PT Root UI";
+    src:
+        url('/assets/fonts/PT-Root-UI_Medium.woff2') format('woff2'),
+        url('/assets/fonts/PT-Root-UI_Medium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "PT Root UI";
+    src:
+        url('/assets/fonts/PT-Root-UI_Bold.woff2') format('woff2'),
+        url('/assets/fonts/PT-Root-UI_Bold.woff') format('woff');
+    font-weight: 700;
+    font-style: bold;
+}
+
 a, a:visited {
+    font-family: "PT Root UI", sans-serif;
     color: var(--text);
-    opacity: 85%;
+    opacity: 90%;
     text-decoration: none;
     padding-bottom: 2px;
     border-bottom: 1px solid var(--accent);
@@ -44,6 +83,7 @@ a, a:visited {
     &:hover {
         color: var(--accent);
         opacity: 95%;
+        font-weight: 700;
     }
 }
 html, body {
@@ -51,20 +91,25 @@ html, body {
     padding: 0;
     min-width: 100%;
     min-height: 100%;
-    background: var(--background);
+}
+
+body {
+    background-color: var(--body-background);
+    background-image: var(--body-background-url);
 }
 
 blockquote {
-    border-left: 4px var(--accent) solid;
+    border-left: 2px var(--accent) solid;
+    border-bottom: 4px var(--accent) solid;
     padding-left: 17px;
-    margin-left: 20px;
-    border-bottom: 3px var(--accent) solid;
     padding-bottom: 12px;
-    margin-block: 1em;
+    margin-left: 20px;
+    margin-block: 2.5em;
 }
 
 code {
     background: var(--code-background);
+    font-family: monospace;
     border-radius: 3px;
     padding: 2px 5px;
     font-size: 0.9em;
@@ -83,7 +128,7 @@ pre {
     overflow: auto;
     background: var(--code-background);
     border-radius: 5px;
-    border: 1px solid var(--accent-border);
+    border: 1px solid var(--border);
     code {
         background: none;
         padding: 10px;
@@ -98,11 +143,18 @@ pre {
 
 // These rules handle laying out all sections other than the first one, the nav bar, which is styled as .nav
 section {
-    border: solid 1px var(--accent-border);
-    box-shadow: -8px 0px 0 -4px var(--accent);;
+    // The number of pixels from the top before the handle starts
+    --handle-padding: 3px;
+    &.footer {
+        --handle-padding: 3px;
+    }
+    --handle-width: 6px;
+    box-shadow: calc(var(--handle-width) * -0.5 - var(--handle-padding)) 0px 0 calc(-1 * var(--handle-padding)) var(--accent);
+
+    border: solid 1px var(--border);
     padding: 35px;
     max-width: var(--section-width);
-    background: var(--section-bg);
+    background: var(--section-background);
     margin: 5vw;
     margin-left: 25vw;
 
@@ -141,6 +193,12 @@ h3 {
     font-size: 1em;
 }
 
+p {
+    a::before {
+        content: "➤ ";
+    }
+}
+
 .footer {
     padding: 25px;
     font-style: italic;
@@ -166,7 +224,7 @@ h3 {
             margin-right: 0.75em;
 
             path {
-                fill: var(--accent) !important;
+                fill: var(--header-logo) !important;
             }
         }
     }
@@ -226,7 +284,6 @@ ul.links-list {
         padding-bottom: 0;
 
         &::before {
-            //content: "\279A  "
             content: "➤ ";
         }
     }
@@ -299,5 +356,5 @@ ul.links-list {
 }
 
 .kg-width-wide, .kg-width-full {
-    /* Supress invalid theme warnings */
+    /* Suppress invalid theme warnings */
 }

paper-houses-theme/default.hbs

@@ -13,8 +13,14 @@
     {{!-- TODO: Do I need this? --}}
     <link rel="stylesheet" type="text/css" href="{{asset "assets/built/main.css"}}" />
 
+    {{!-- comment --}}
     <script src="{{asset "assets/scripts/smartquotes.js"}}"></script>
+
+    {{!-- comment --}}
     <script>smartquotes();</script>
+    {{!-- comment --}}
+
+
 
     {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
     it should always be the last tag before the closing head tag --}}