From 1f7ef6f7f77ab3e1f42bf917d9694439682a66ce Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Fri, 9 Apr 2021 14:08:05 -0400
Subject: [PATCH] switched to source serif pro as main font, fixed some other
 styling

---
 assets/css/_bs-custom.scss                    | 13 ++--
 assets/css/_fonts.scss                        | 25 ++++----
 assets/css/_nav-bar-help.scss                 | 59 ++++++++++---------
 assets/css/app.scss                           | 12 ++--
 assets/package-lock.json                      | 11 ++++
 assets/package.json                           |  1 +
 .../templates/layout/root.html.leex           |  4 +-
 7 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss
index 54e72e3..a950ad1 100644
--- a/assets/css/_bs-custom.scss
+++ b/assets/css/_bs-custom.scss
@@ -1,14 +1,11 @@
 /* Bootstrap custom variable overrides */
 
 // Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
 $font-size-base: 1.125rem;
-$font-family-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
-  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
-$font-family-base: $font-family-sans-serif;
+
+$font-family-serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
+  Baskerville, "Times New Roman", "Droid Serif", Times, serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
 
 $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto,
   "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
@@ -17,6 +14,8 @@ $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto,
 $font-family-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas,
   "Liberation Mono", "Courier New", monospace !important;
 
+$font-family-base: $font-family-serif;
+
 // Features
 $enable-shadows: true;
 $enable-negative-margins: true;
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
index 8429604..60962e2 100644
--- a/assets/css/_fonts.scss
+++ b/assets/css/_fonts.scss
@@ -11,14 +11,17 @@
 @import "../node_modules/@fontsource/jetbrains-mono/700.css"; /* bold | normal */
 @import "../node_modules/@fontsource/jetbrains-mono/800.css"; /* bolder | normal */
 
-/* Fontsource Open Sans */
-@import "../node_modules/@fontsource/open-sans/300.css"; /* light | normal */
-@import "../node_modules/@fontsource/open-sans/300-italic.css"; /* light | italic */
-@import "../node_modules/@fontsource/open-sans/400.css"; /* normal | normal */
-@import "../node_modules/@fontsource/open-sans/400-italic.css"; /* normal | italic */
-@import "../node_modules/@fontsource/open-sans/600.css"; /* heavier? | normal */
-@import "../node_modules/@fontsource/open-sans/600-italic.css"; /* heavier | italic */
-@import "../node_modules/@fontsource/open-sans/700.css"; /* bold | normal */
-@import "../node_modules/@fontsource/open-sans/700-italic.css"; /* bold | italic */
-@import "../node_modules/@fontsource/open-sans/800.css"; /* bolder? | normal */
-@import "../node_modules/@fontsource/open-sans/800-italic.css"; /* bolder? | italic */
+
+/* Fontsource Source Code Pro */
+@import "../node_modules/@fontsource/source-serif-pro/200.css"; /* light | normal */
+@import "../node_modules/@fontsource/source-serif-pro/200-italic.css"; /* light | italic */
+@import "../node_modules/@fontsource/source-serif-pro/300.css"; /* light | normal */
+@import "../node_modules/@fontsource/source-serif-pro/300-italic.css"; /* light | italic */
+@import "../node_modules/@fontsource/source-serif-pro/400.css"; /* normal | normal */
+@import "../node_modules/@fontsource/source-serif-pro/400-italic.css"; /* normal | italic */
+@import "../node_modules/@fontsource/source-serif-pro/600.css"; /* heavier? | normal */
+@import "../node_modules/@fontsource/source-serif-pro/600-italic.css"; /* heavier | italic */
+@import "../node_modules/@fontsource/source-serif-pro/700.css"; /* bold | normal */
+@import "../node_modules/@fontsource/source-serif-pro/700-italic.css"; /* bold | italic */
+@import "../node_modules/@fontsource/source-serif-pro/900.css"; /* bolder? | normal */
+@import "../node_modules/@fontsource/source-serif-pro/900-italic.css"; /* bolder? | italic */
diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss
index 8343560..2955cca 100644
--- a/assets/css/_nav-bar-help.scss
+++ b/assets/css/_nav-bar-help.scss
@@ -1,19 +1,22 @@
 .navbar-expand-lg {
   .nav-item {
     margin-left: 2px;
-    .nav-link {
-      padding: 0 0 0 6px;
-      margin: 8px 0 8px 0;
-      border-left: 6px transparent solid;
-      &.active {
-        border-left: 6px $secondary solid;
-      }
-    }
-    &:hover {
-      .nav-link {
-        color: $primary !important;
-        border-left: 6px $secondary solid;
+    a {
+      &.nav-link {
+        padding: 0 0 0 6px;
+        margin: 8px 0 8px 0;
+        border-left: 6px transparent solid;
+        &.active {
+          border-left: 6px $secondary solid;
+          border-bottom: none;
+        }
+        &:hover, &:active {
+          color: $primary !important;
+          border-left: 6px $secondary solid;
+          border-bottom: none;
+        }
       }
+  
     }
   }
 }
@@ -22,22 +25,22 @@
   .navbar-expand-lg {
     .nav-item {
       margin-left: 0;
-      .nav-link {
-        padding: 0 0 6px 0;
-        margin: 0 12px 0 12px;
-        border-left: 0;
-        border-top: 6px transparent solid;
-        border-bottom: 6px transparent solid;
-        &.active {
-          border-left: 0;
-          border-bottom: 6px $secondary solid;
-        }
-      }
-      &:hover {
-        .nav-link {
-          color: $primary !important;
-          border-left: 0;
-          border-bottom: 6px $secondary solid;
+      a {
+        &.nav-link {
+          padding: 0 0 6px 0;
+          margin: 0 12px 0 12px;
+          border-left: none;
+          border-top: 6px transparent solid;
+          border-bottom: 6px transparent solid;
+          &.active {
+            border-left: none;
+            border-bottom: 6px $secondary solid;
+          }
+          &:hover, &:active {
+            color: $primary !important;
+            border-left: none;
+            border-bottom: 6px $secondary solid;
+          }
         }
       }
     }
diff --git a/assets/css/app.scss b/assets/css/app.scss
index e2f8f35..b2669b6 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -27,6 +27,7 @@
 pre, code, .font-monospace {
   font-family: $font-family-monospace;
   font-weight: 300;
+  font-size: 15px;
 }
 pre.chroma {
   padding: 0.75rem 1rem;
@@ -49,9 +50,9 @@ body {
   height: 100%;
 }
 a {
-  color: white;
-  // border-bottom: $secondary 2px solid;
-  text-decoration: underline;
+  color: rgba($white, 0.75);
+  border-bottom: $gray-600 2px solid;
+  text-decoration: none;
   &.navbar-brand,
   &.nav-link {
     border-bottom: none;
@@ -65,7 +66,10 @@ a {
   &:hover {
     color: $primary;
     text-decoration: none;
-    border-bottom: $secondary 2px solid;
+    border-bottom: $secondary 3px solid;
+    &.navbar-brand {
+      border-bottom: none;
+    }
   }
 }
 .border-gray-900 {
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 9d4f2e3..4d7683d 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -9,6 +9,7 @@
         "@fontsource/jetbrains-mono": "^4.2.2",
         "@fontsource/open-sans": "^4.2.2",
         "@fontsource/righteous": "^4.x",
+        "@fontsource/source-serif-pro": "^4.2.3",
         "@mdi/svg": "^5.x",
         "@popperjs/core": "^2.x",
         "babel-plugin-prismjs": "^2.0.1",
@@ -1298,6 +1299,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz",
       "integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg=="
     },
+    "node_modules/@fontsource/source-serif-pro": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-serif-pro/-/source-serif-pro-4.2.3.tgz",
+      "integrity": "sha512-dIOsmjqd8LPD4DM6SddqgVVliYizgNNpKg+2vOo7Lt1trW+Pvc1Y8x7tYsRZlsetVhvJ4UcgqLRgfVl48q00Yg=="
+    },
     "node_modules/@mdi/svg": {
       "version": "5.9.55",
       "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
@@ -10974,6 +10980,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz",
       "integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg=="
     },
+    "@fontsource/source-serif-pro": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-serif-pro/-/source-serif-pro-4.2.3.tgz",
+      "integrity": "sha512-dIOsmjqd8LPD4DM6SddqgVVliYizgNNpKg+2vOo7Lt1trW+Pvc1Y8x7tYsRZlsetVhvJ4UcgqLRgfVl48q00Yg=="
+    },
     "@mdi/svg": {
       "version": "5.9.55",
       "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
diff --git a/assets/package.json b/assets/package.json
index 2ede035..8b86515 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -10,6 +10,7 @@
     "@fontsource/jetbrains-mono": "^4.2.2",
     "@fontsource/open-sans": "^4.2.2",
     "@fontsource/righteous": "^4.x",
+    "@fontsource/source-serif-pro": "^4.2.3",
     "@mdi/svg": "^5.x",
     "@popperjs/core": "^2.x",
     "babel-plugin-prismjs": "^2.0.1",
diff --git a/lib/home73k_web/templates/layout/root.html.leex b/lib/home73k_web/templates/layout/root.html.leex
index 9b869d4..542cb26 100644
--- a/lib/home73k_web/templates/layout/root.html.leex
+++ b/lib/home73k_web/templates/layout/root.html.leex
@@ -10,9 +10,9 @@
     <meta name="author" content="Adam Piontek"/>
     <link rel="alternate" type="application/rss+xml" title="73k Blog - Adam Piontek" href="<%= Routes.feed_path(@conn, :rss) %>" />
     <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/righteous-latin-400-normal.woff2") %>"  as="font" type="font/woff2" crossorigin="anonymous">
-    <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/open-sans-latin-400-normal.woff2") %>"  as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/source-serif-pro-latin-400-normal.woff2") %>"  as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/jetbrains-mono-latin-300-normal.woff2") %>"  as="font" type="font/woff2" crossorigin="anonymous">
-    <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/open-sans-latin-600-normal.woff2") %>"  as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="<%= Routes.static_path(@conn, "/fonts/source-serif-pro-latin-600-normal.woff2") %>"  as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="me" href="mailto:adam@73k.us"/>
     <link rel="me" href="sms:+16462341697"/>
     <link rel="authorization_endpoint" href="https://indieauth.com/auth"/>