Caching and styling

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;
 }
 
 * {

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"
+  h3 class="text-xl font-bold text-blue-600 mb-2"
-    a href="#{bookmark.url}"
+    a class="u-url border-b-2 border-transparent hover:border-blue-600 hover:border-b-2" href="#{bookmark.url}"
-      = "🔖 #{bookmark.name} "
+      = "#{bookmark.name} "
       == render("link_arrow")
   p class="e-content leading-relaxed md:text-lg text-gray-800 dark:text-gray-200"
     = bookmark.content

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"
+  h3 class="text-xl font-semibold text-blue-600 mb-2"
-    a class="u-url" href="/post/#{post.slug}"
+    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

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;
   }

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));