engineering blog at https://blog.tangled.sh

add dark mode to site

Changed files
+23 -21
pages
blog
templates
-1
input.css
··· 42 42 43 43 ::selection { 44 44 @apply bg-yellow-400; 45 - @apply text-black; 46 45 @apply bg-opacity-30; 47 46 } 48 47
+5 -2
pages/blog/pulls.md
··· 176 176 together and track them across multiple commits, and to 177 177 provide "history" for each change. This works great with [Jujutsu][jj]. 178 178 179 - Oh and lastly, we have a [Discord](https://discord.gg/W7SRR4xHhd). We'll 180 - see you there! 179 + Join us on [Discord](https://discord.gg/W7SRR4xHhd) or 180 + `#tangled` on libera.chat (the two are bridged, so we will 181 + never miss a message!). We are always available to help 182 + setup knots, listen to feedback on features, or even 183 + shepherd contributions! 181 184 182 185 [jj]: https://jj-vcs.github.io/jj/latest/
+1 -1
tailwind.config.js
··· 40 40 "@apply font-normal text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border": {}, 41 41 }, 42 42 code: { 43 - "@apply font-normal font-mono p-1 rounded text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700": {}, 43 + "@apply font-normal font-mono px-1 rounded text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700": {}, 44 44 }, 45 45 "code::before": { 46 46 content: '""',
+9 -9
templates/index.html
··· 10 10 {{ .Meta.title }} 11 11 </title> 12 12 13 - <body class="bg-slate-100"> 14 - <div class="prose mx-auto px-1 pt-4 min-h-screen flex flex-col container"> 13 + <body class="bg-slate-100 dark:bg-gray-900"> 14 + <div class="prose dark:prose-invert mx-auto px-1 pt-4 min-h-screen flex flex-col container"> 15 15 <main> 16 16 <header class="px-12"> 17 17 <h1 class="mb-0">{{ index .Meta "title" }}</h1> ··· 21 21 {{ .Body }} 22 22 23 23 <section class="py-4"> 24 - <ul class="px-6"> 24 + <ul class="px-2"> 25 25 {{ $posts := .Extra.blog }} 26 26 {{ range $posts }} 27 - <li class="mt-5 bg-white py-4 px-6 rounded drop-shadow-sm list-none"> 27 + <li class="mt-5 bg-white dark:bg-gray-800 py-4 px-6 rounded drop-shadow-sm list-none"> 28 + {{ $dateStr := .Meta.date }} 29 + {{ $date := parsedate $dateStr }} 30 + <div class="post-date py-1 mb-0 text-sm">{{ $date.Format "02 Jan, 2006" }}</div> 28 31 <div> 29 - <a class="title mb-0 text-lg" href="/{{ .Meta.slug }}.html">{{ .Meta.title }}</a> 32 + <a class="title mb-0 text-xl no-underline font-bold" href="/{{ .Meta.slug }}.html">{{ .Meta.title }}</a> 30 33 {{ if .Meta.draft }} 31 34 <span class="text-red-500">[draft]</span> 32 35 {{ end }} 33 36 <p class="italic mt-1 mb-0">{{ .Meta.subtitle }}</p> 34 37 </div> 35 - {{ $dateStr := .Meta.date }} 36 - {{ $date := parsedate $dateStr }} 37 - <div class="post-date py-1 mb-0 text-sm">{{ $date.Format "02 Jan, 2006" }}</div> 38 38 </li> 39 39 {{ end }} 40 40 </ul> 41 41 </section> 42 42 </main> 43 - <footer class="px-6"> 43 + <footer class="px-2"> 44 44 {{ template "partials/footer.html" }} 45 45 </footer> 46 46 </div>
+2 -2
templates/partials/nav.html
··· 1 1 <nav> 2 2 <div> 3 - <a href="/"> 4 - back to all posts 3 + <a href="/" class="no-underline"> 4 + ← back to all posts 5 5 </a> 6 6 7 7 <a class="font-bold italic float-right no-underline hover:no-underline" href="https://tangled.sh">
+6 -6
templates/text.html
··· 12 12 <title> 13 13 {{ index .Meta "title" }} 14 14 </title> 15 - <body class="bg-slate-100"> 16 - <div class="prose mx-auto px-1 pt-4 min-h-screen flex flex-col"> 15 + <body class="bg-slate-100 dark:bg-gray-900"> 16 + <div class="prose dark:prose-invert mx-auto px-1 pt-4 min-h-screen flex flex-col"> 17 17 <main> 18 18 <div class="sidenav px-6"> 19 19 {{ template "partials/nav.html" }} ··· 30 30 by 31 31 {{ $authors := index .Meta "authors" }} 32 32 {{ if eq (len $authors) 2 }} 33 - <a href="https://bsky.app/profile/{{ (index $authors 0).handle }}">{{ (index $authors 0).name }}</a> 33 + <a href="https://bsky.app/profile/{{ (index $authors 0).handle }}" class="no-underline">{{ (index $authors 0).name }}</a> 34 34 & 35 - <a href="https://bsky.app/profile/{{ (index $authors 1).handle }}"> 35 + <a href="https://bsky.app/profile/{{ (index $authors 1).handle }}" class="no-underline"> 36 36 {{ (index $authors 1).name }} 37 37 </a> 38 38 {{ else }} 39 39 {{ range $author := $authors }} 40 - <a href="https://bsky.app/profile/{{ $author.handle }}"> 40 + <a href="https://bsky.app/profile/{{ $author.handle }}" class="no-underline"> 41 41 {{ $author.name }} 42 42 </a> 43 43 {{ end }} ··· 53 53 <p class="italic px-6 mt-1 mb-0 text-lg">{{ index .Meta "subtitle" }}</p> 54 54 </header> 55 55 56 - <article class="mt-5 bg-white px-6 py-2 rounded drop-shadow-sm"> 56 + <article class="mt-5 bg-white dark:bg-gray-800 px-6 py-2 rounded drop-shadow-sm"> 57 57 {{ .Body }} 58 58 </article> 59 59 </main>