Stylying updates

app/assets/index.css

@@ -13,10 +13,28 @@
     src: url("/assets/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
 }
 
+@font-face {
+    font-family: "Karla";
+    src: url("/assets/Karla-VariableFont_wght.ttf") format("truetype");
+}
+
 * {
+    font-family: "Karla", Helvetica, Arial, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     font-family: "Rubik", Helvetica, Arial, sans-serif;
 }
 
+.prose h1 a {
+    border-bottom: none;
+    text-decoration: none;
+}
+
+.prose h1 a:hover {
+    opacity: 0.8;
+}
+
 .gist tr {
     border-bottom: none;
 }

app/content/pages/about.md

@@ -1,6 +1,6 @@
 # About
 
-Hi, I'm _Daniel_. 
+Hi, I'm _Dan!_ 
 
 I've been in the software / web industry for around 10 years. I'm currently a technical lead at [Culture Amp](https://cultureamp.com), where I lead a small team working in a Rails monolith and across many microservices. Previously I worked with the wonderful humans of [Icelab](https://icelab.com.au) on a wide range of interesting and valuable projects.
 

app/templates/bookmarks/index.html.slim

@@ -3,7 +3,7 @@ div class="flex justify-between  mb-12 prose dark:prose-invert max-w-prose mx-au
     h1 Bookmarks
 
   form class="basis-2/5" method="GET" action="/bookmarks"
-    input class="w-48 border-blue-400 border-2 rounded mr-2 px-2" id="seach" type="text" name="q" value=q
+    input class="w-36 border-blue-400 border-2 rounded mr-2 px-2" id="seach" type="text" name="q" value=q
     button class="w-16 border-blue-400 border-2 rounded bg-blue-400 hover:bg-blue-800 hover:border-blue-800 hover:text-blue-100 px-1 text-gray-200" type="submit" Search
 
 div class="mb-12 max-w-prose mx-auto"

app/templates/posts/show.html.slim

@@ -1,13 +1,14 @@
 article class="h-entry"
   div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
-    a class="u-url" href=post.permalink
-      h1 class="p-name" = post.display_title
+    h1 class="p-name" 
+      a class="u-url" href=post.permalink
+        = post.display_title
 
     article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
       - if post.photos?
         - post.photos.each do |photo|
           figure
-            img class="u-photo shadow-solid mb-4" src=photo["value"] alt=photo["alt"]
+            img class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
             figcaption
               = photo["alt"]
       div class="e-content"

public/assets/index.css

@@ -1060,6 +1060,18 @@ video {
   width: 1rem;
 }
 
+.w-44 {
+  width: 11rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-36 {
+  width: 9rem;
+}
+
 .max-w-prose {
   max-width: 65ch;
 }
@@ -1084,6 +1096,10 @@ video {
   flex-basis: 40%;
 }
 
+.basis-3\/5 {
+  flex-basis: 60%;
+}
+
 .-rotate-45 {
   --tw-rotate: -45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1272,11 +1288,16 @@ video {
 }
 
 .shadow-solid {
-  --tw-shadow: 10px 10px 1px 2px #fce7f3;
+  --tw-shadow: 10px 10px 1px 2px;
   --tw-shadow-colored: 10px 10px 1px 2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-pink-100 {
+  --tw-shadow-color: #fce7f3;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 @tailwind typography;
 
 @font-face {
@@ -1291,10 +1312,29 @@ video {
   src: url("/assets/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
 }
 
+@font-face {
+  font-family: "Karla";
+
+  src: url("/assets/Karla-VariableFont_wght.ttf") format("truetype");
+}
+
 * {
+  font-family: "Karla", Helvetica, Arial, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   font-family: "Rubik", Helvetica, Arial, sans-serif;
 }
 
+.prose h1 a {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.prose h1 a:hover {
+  opacity: 0.8;
+}
+
 .gist tr {
   border-bottom: none;
 }
@@ -1538,6 +1578,21 @@ video {
     color: rgb(133 77 14 / var(--tw-text-opacity));
   }
 
+  .dark\:shadow-pink-200 {
+    --tw-shadow-color: #fbcfe8;
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+
+  .dark\:shadow-pink-400 {
+    --tw-shadow-color: #f472b6;
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+
+  .dark\:shadow-pink-600 {
+    --tw-shadow-color: #db2777;
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+
   .dark\:selection\:bg-blue-600 *::-moz-selection {
     --tw-bg-opacity: 1;
     background-color: rgb(37 99 235 / var(--tw-bg-opacity));

tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
     },
     extend: {
       boxShadow: {
-        'solid': '10px 10px 1px 2px #fce7f3'
+        'solid': `10px 10px 1px 2px`
       },
       typograpgy: {
         emphasis: {