diff --git a/app/assets/index.css b/app/assets/index.css index f18b239..6fda006 100644 --- a/app/assets/index.css +++ b/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; } diff --git a/app/content/pages/about.md b/app/content/pages/about.md index d103594..fe4a744 100644 --- a/app/content/pages/about.md +++ b/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. diff --git a/app/templates/bookmarks/index.html.slim b/app/templates/bookmarks/index.html.slim index 753c3ab..f30d5b9 100644 --- a/app/templates/bookmarks/index.html.slim +++ b/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" diff --git a/app/templates/posts/show.html.slim b/app/templates/posts/show.html.slim index d46da88..0816ae7 100644 --- a/app/templates/posts/show.html.slim +++ b/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" diff --git a/public/assets/Karla-VariableFont_wght.ttf b/public/assets/Karla-VariableFont_wght.ttf new file mode 100644 index 0000000..e5bf896 Binary files /dev/null and b/public/assets/Karla-VariableFont_wght.ttf differ diff --git a/public/assets/index.css b/public/assets/index.css index 1c1abd3..f25f640 100644 --- a/public/assets/index.css +++ b/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)); diff --git a/tailwind.config.js b/tailwind.config.js index 67364e3..9453cdd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,7 @@ module.exports = { }, extend: { boxShadow: { - 'solid': '10px 10px 1px 2px #fce7f3' + 'solid': `10px 10px 1px 2px` }, typograpgy: { emphasis: {