💄 Minor style tweaks to improve consistency

assets/css/compiled/main.css

@@ -959,7 +959,7 @@ body a, body button {
 
 .article-pagination a:hover .article-pagination-direction {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-600), var(--tw-text-opacity));
 }
 
 .dark .article-pagination a:hover .article-pagination-direction {
@@ -1449,20 +1449,12 @@ body a, body button {
   left: 0px;
 }
 
-.top-\[100vh\] {
-  top: 100vh;
+.top-\[110vh\] {
+  top: 110vh;
 }
 
-.right-0 {
-  right: 0px;
-}
-
-.bottom-16 {
-  bottom: 4rem;
-}
-
-.-bottom-4 {
-  bottom: -1rem;
+.bottom-\[-5\.5rem\] {
+  bottom: -5.5rem;
 }
 
 .top-\[calc\(100vh-5rem\)\] {
@@ -1859,11 +1851,6 @@ body a, body button {
   border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
 }
 
-.border-neutral-700 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
-}
-
 .bg-neutral {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral), var(--tw-bg-opacity));
@@ -1969,16 +1956,16 @@ body a, body button {
   padding-bottom: 2.5rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2115,16 +2102,16 @@ body a, body button {
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
 }
 
-.text-neutral-500 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
 .text-neutral-700 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
 }
 
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
+}
+
 .text-primary-500 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity));
@@ -2140,11 +2127,6 @@ body a, body button {
   color: rgba(var(--color-primary-700), var(--tw-text-opacity));
 }
 
-.text-neutral-600 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
-}
-
 .text-primary-400 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
@@ -2202,16 +2184,6 @@ body a, body button {
   border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
 }
 
-.hover\:border-primary-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
-}
-
-.hover\:border-primary-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-primary-500), var(--tw-border-opacity));
-}
-
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
@@ -2232,9 +2204,9 @@ body a, body button {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
 }
 
-.hover\:text-primary-500:hover {
+.hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-600), var(--tw-text-opacity));
 }
 
 .hover\:text-primary-700:hover {
@@ -2242,14 +2214,9 @@ body a, body button {
   color: rgba(var(--color-primary-700), var(--tw-text-opacity));
 }
 
-.hover\:text-primary-400:hover {
+.hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-600:hover {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
 }
 
 .hover\:text-neutral:hover {
@@ -2307,6 +2274,10 @@ body a, body button {
   outline-color: transparent;
 }
 
+[dir="ltr"] .ltr\:right-0 {
+  right: 0px;
+}
+
 [dir="ltr"] .ltr\:-left-6 {
   left: -1.5rem;
 }
@@ -2323,6 +2294,10 @@ body a, body button {
   margin-left: 0.25rem;
 }
 
+[dir="ltr"] .ltr\:mr-14 {
+  margin-right: 3.5rem;
+}
+
 [dir="ltr"] .ltr\:-ml-5 {
   margin-left: -1.25rem;
 }
@@ -2359,6 +2334,10 @@ body a, body button {
   text-align: right;
 }
 
+[dir="rtl"] .rtl\:left-0 {
+  left: 0px;
+}
+
 [dir="rtl"] .rtl\:-right-6 {
   right: -1.5rem;
 }
@@ -2375,6 +2354,10 @@ body a, body button {
   margin-right: 0.25rem;
 }
 
+[dir="rtl"] .rtl\:ml-14 {
+  margin-left: 3.5rem;
+}
+
 [dir="rtl"] .rtl\:-mr-5 {
   margin-right: -1.25rem;
 }
@@ -2477,6 +2460,10 @@ body a, body button {
   background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-neutral-800\/50 {
+  background-color: rgba(var(--color-neutral-800), 0.5);
+}
+
 .dark .dark\:bg-primary-400 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity));
@@ -2561,11 +2548,6 @@ body a, body button {
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-neutral-300:hover {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-neutral-800:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-800), var(--tw-text-opacity));

assets/css/main.css

@@ -38,7 +38,7 @@ body button {
   @apply underline decoration-primary-500;
 }
 .article-pagination a:hover .article-pagination-direction {
-  @apply text-primary-700 dark:text-primary-400;
+  @apply text-primary-600 dark:text-primary-400;
 }
 
 /* RTL support */

config/_default/params.toml

@@ -7,12 +7,12 @@
 
 colorScheme = "congo"
 enableSearch = false
-# darkMode = "auto"
-# darkToggle = false
+darkMode = "auto"
 # logo = "img/logo.jpg"
 # description = "My awesome website"
 # mainSections = ["section1", "section2"]
 # robots = ""
+showDarkToggle = false
 showScrollToTop = true
 
 [homepage]

exampleSite/config/_default/params.toml

@@ -7,12 +7,12 @@
 
 colorScheme = "congo"
 enableSearch = true
-# darkMode = "auto"
-# darkToggle = false
+darkMode = "auto"
 # logo = "img/logo.jpg"
 # description = "My awesome website"
 mainSections = ["samples"]
 # robots = ""
+showDarkToggle = false
 showScrollToTop = true
 
 [homepage]

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>