From c5d8e435a735cc343f10c09dbd93a4227586851b Mon Sep 17 00:00:00 2001
From: Daniel Nitsikopoulos <daniel@dnitza.com>
Date: Sun, 19 Feb 2023 15:16:39 +1100
Subject: [PATCH] Caching and styling

---
 app/assets/index.css                     |  3 +++
 app/templates/shared/_bookmark.html.slim |  6 +++---
 app/templates/shared/_post.html.slim     |  4 ++--
 config/nginx.conf                        |  2 +-
 public/assets/index.css                  | 27 ++++++++++++++++++++++++
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/assets/index.css b/app/assets/index.css
index 6fda006..2232517 100644
--- a/app/assets/index.css
+++ b/app/assets/index.css
@@ -6,16 +6,19 @@
 @font-face {
     font-family: "Rubik";
     src: url("/assets/Rubik-VariableFont_wght.ttf") format("truetype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "JetBrainsMono";
     src: url("/assets/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
+    font-display: swap;
 }
 
 @font-face {
     font-family: "Karla";
     src: url("/assets/Karla-VariableFont_wght.ttf") format("truetype");
+    font-display: swap;
 }
 
 * {
diff --git a/app/templates/shared/_bookmark.html.slim b/app/templates/shared/_bookmark.html.slim
index 2d3f7b6..041da29 100644
--- a/app/templates/shared/_bookmark.html.slim
+++ b/app/templates/shared/_bookmark.html.slim
@@ -1,7 +1,7 @@
 div class="mb-8"
-  h3 class="text-xl font-bold text-blue-600 hover:underline"
-    a href="#{bookmark.url}"
-      = "🔖 #{bookmark.name} "
+  h3 class="text-xl font-bold text-blue-600 mb-2"
+    a class="u-url border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="#{bookmark.url}"
+      = "#{bookmark.name} "
       == render("link_arrow")
   p class="e-content leading-relaxed md:text-lg text-gray-800 dark:text-gray-200"
     = bookmark.content
diff --git a/app/templates/shared/_post.html.slim b/app/templates/shared/_post.html.slim
index a9f39d5..16b7957 100644
--- a/app/templates/shared/_post.html.slim
+++ b/app/templates/shared/_post.html.slim
@@ -1,6 +1,6 @@
 div class="mb-8 h-entry"
-  h3 class="text-xl font-bold text-blue-600 hover:underline"
-    a class="u-url" href="/post/#{post.slug}"
+  h3 class="text-xl font-semibold text-blue-600 mb-2"
+    a class="u-url border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="/post/#{post.slug}"
       = post.display_title
   div class="e-content p-name text-base text-gray-800 dark:text-gray-200"
     == post.excerpt
diff --git a/config/nginx.conf b/config/nginx.conf
index f830876..8df81c1 100644
--- a/config/nginx.conf
+++ b/config/nginx.conf
@@ -63,7 +63,7 @@ server {
 
   # Now this supposedly should work as it gets the filenames with querystrings that Rails provides.
   # BUT there's a chance it could break the ajax calls.
-  location ~* \.(ico|css|gif|jpe?g|png|js)(\?[0-9]+)?$ {
+  location ~* \.(ico|css|gif|jpe?g|png|js|ttf)(\?[0-9]+)?$ {
      expires max;
      break;
   }
diff --git a/public/assets/index.css b/public/assets/index.css
index 2690659..5cb43bd 100644
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -1127,6 +1127,10 @@ video {
   border-top-width: 4px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1141,6 +1145,10 @@ video {
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -1214,6 +1222,10 @@ video {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1288,18 +1300,24 @@ video {
   font-family: "Rubik";
 
   src: url("/assets/Rubik-VariableFont_wght.ttf") format("truetype");
+
+  font-display: swap;
 }
 
 @font-face {
   font-family: "JetBrainsMono";
 
   src: url("/assets/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
+
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Karla";
 
   src: url("/assets/Karla-VariableFont_wght.ttf") format("truetype");
+
+  font-display: swap;
 }
 
 * {
@@ -1367,11 +1385,20 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+.hover\:border-b-2:hover {
+  border-bottom-width: 2px;
+}
+
 .hover\:border-blue-800:hover {
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity));
 }
 
+.hover\:border-blue-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+
 .hover\:bg-blue-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));