💄 Minor style tweaks to improve consistency

layouts/_default/baseof.html

@@ -24,23 +24,20 @@
       >
     </div>
     {{- partial "header.html" . -}}
-    <main id="main-content" class="relative grow">
+    <main id="main-content" class="relative">
       {{- block "main" . }}{{- end }}
-      {{ if .Site.Params.showScrollToTop | default true }}
+      {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }}
         <div
-          class="absolute top-[100vh] right-0 w-12 pointer-events-none {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
-            bottom-16
-          {{ else }}
-            -bottom-4
-          {{ end }}"
+          class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-[-5.5rem]"
         >
           <a
             href="#the-top"
-            class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] text-neutral-500 bg-neutral/50 backdrop-blur rounded-full text-xl flex items-center justify-center hover:text-primary-500"
+            class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] bg-neutral/50 dark:bg-neutral-800/50 backdrop-blur rounded-full text-xl flex items-center justify-center text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400"
             aria-label="{{ i18n "nav.scroll_to_top_title" }}"
             title="{{ i18n "nav.scroll_to_top_title" }}"
-            >&uarr;</a
           >
+            &uarr;
+          </a>
         </div>
       {{ end }}
     </main>

layouts/_default/single.html

@@ -19,7 +19,7 @@
           </div>
         </div>
       {{ end }}
-      <div class="max-w-prose">
+      <div class="overflow-auto max-w-prose">
         {{ .Content | emojify }}
       </div>
     </section>

layouts/partials/article-pagination.html

@@ -6,8 +6,14 @@
         <span>
           {{ if .NextInSection }}
             <a class="flex" href="{{ .NextInSection.RelPermalink }}">
-              <span class="mr-3 ltr:inline rtl:hidden article-pagination-direction">&larr;</span>
-              <span class="ml-3 ltr:hidden rtl:inline article-pagination-direction">&rarr;</span>
+              <span
+                class="mr-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
+                >&larr;</span
+              >
+              <span
+                class="ml-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
+                >&rarr;</span
+              >
               <span class="flex flex-col">
                 <span class="article-pagination-title mt-[0.1rem] leading-6"
                   >{{ .NextInSection.Title | emojify }}</span
@@ -34,8 +40,14 @@
                   {{ end }}
                 </span>
               </span>
-              <span class="ml-3 ltr:inline rtl:hidden article-pagination-direction">&rarr;</span>
-              <span class="mr-3 ltr:hidden rtl:inline article-pagination-direction">&larr;</span>
+              <span
+                class="ml-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
+                >&rarr;</span
+              >
+              <span
+                class="mr-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
+                >&larr;</span
+              >
             </a>
           {{ end }}
         </span>

layouts/partials/footer.html

@@ -40,18 +40,22 @@
       {{ end }}
     </div>
     {{/* Dark mode toggle */}}
-    {{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }}
-      <div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
+    {{ if and (.Site.Params.showDarkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }}
+      <div
+        class="text-sm cursor-pointer text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400 {{ if .Site.Params.showScrollToTop | default true -}}
+          ltr:mr-14 rtl:ml-14
+        {{- end }}"
+      >
         <button
           id="dark-toggle"
-          class="inline px-3 py-2 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
+          class="inline w-12 h-12 dark:hidden"
           title="{{ i18n "footer.dark_appearance" }}"
         >
           {{ partial "icon.html" "moon" }}
         </button>
         <button
           id="light-toggle"
-          class="hidden px-3 py-2 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
+          class="hidden w-12 h-12 cursor-pointer dark:inline"
           title="{{ i18n "footer.light_appearance" }}"
         >
           {{ partial "icon.html" "sun" }}

layouts/partials/header.html

@@ -48,7 +48,7 @@
           >
             <button
               id="search-button"
-              class="text-base hover:text-neutral-600 dark:hover:text-neutral-300"
+              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
               title="{{ i18n "search.open_button_title" }}"
             >
               {{ partial "icon.html" "search" }}

layouts/partials/search.html

@@ -27,7 +27,7 @@
       </form>
       <button
         id="close-search-button"
-        class="flex items-center justify-center w-8 h-8 text-neutral-600"
+        class="flex items-center justify-center w-8 h-8 text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400"
         title="{{ i18n "search.close_button_title" }}"
       >
         {{ partial "icon.html" "times" }}

layouts/shortcodes/lead.html

@@ -1,3 +1,3 @@
-<div class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
+<div class="!mb-9 text-xl lead">
   {{ .Inner | markdownify }}
 </div>