Style buttons

assets/main.css

@@ -128,3 +128,14 @@ code {
 .clip-wedge {
   clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
 }
+
+/* Components */
+
+.button {
+  padding: 0.5em;
+  border-radius: 100px;
+}
+
+.button:hover {
+  background-color: theme("colors.gray.200");
+}

assets/style.css

@@ -672,14 +672,14 @@ video {
   align-items: center;
 }
 
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -732,6 +732,10 @@ video {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 500;
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -875,6 +879,17 @@ code {
           clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
 }
 
+/* Components */
+
+.button {
+  padding: 0.5em;
+  border-radius: 100px;
+}
+
+.button:hover {
+  background-color: #e5e7eb;
+}
+
 @media (min-width: 768px) {
   .md\:mr-auto {
     margin-right: auto;

layouts/_default/baseof.html

@@ -17,7 +17,7 @@
   x-bind:class="`color-scheme--${colorScheme}`"
 >
   <header class="pt-4 pb-6">
-    <div class="container mx-auto px-6 flex items-center mb-4 gap-6">
+    <div class="container mx-auto px-6 flex items-center mb-4 gap-2">
       <a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="md:mr-auto">
         <img src="{{ "/images/logo.png" | relURL }}" width="60" alt="{{ site.Title }}" />
       </a>

layouts/partials/language-selector.html

@@ -1,5 +1,5 @@
 <h2 class="sr-only">{{ i18n "lang_select_title" }}</h2>
-<nav class="flex items-center gap-2">
+<nav class="flex items-center gap-2 button">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
     <g fill="currentColor">
       <path fill="none" d="M0 0h24v24H0z"/>
@@ -10,14 +10,14 @@
     {{ if .IsTranslated -}}
     {{ range .Translations }}
       <li>
-        <a class="text-sm" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Language.Params.LanguageCode | default .Lang }}" lang="{{ .Language.Params.LanguageCode | default .Lang }}">{{ .Language.LanguageName }}</a>
+        <a class="text-sm font-semibold" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Language.Params.LanguageCode | default .Lang }}" lang="{{ .Language.Params.LanguageCode | default .Lang }}">{{ .Language.LanguageName }}</a>
       </li>
     {{ end -}}
     {{ else -}}
     {{ range site.Languages -}}
     {{ if ne site.Language.Lang .Lang }}
       <li>
-        <a class="text-sm" rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Params.LanguageCode | default .Lang }}" lang="{{ .Params.LanguageCode | default .Lang }}">{{ .LanguageName }}</a>
+        <a class="text-sm font-semibold" rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Params.LanguageCode | default .Lang }}" lang="{{ .Params.LanguageCode | default .Lang }}">{{ .LanguageName }}</a>
       </li>
     {{ end -}}
     {{ end -}}

layouts/partials/theme-selector.html

@@ -1,16 +1,16 @@
 <h2 class="sr-only">{{ i18n "theme_select_title" }}</h2>
-<button x-on:click="toggleColorScheme">
+<button x-on:click="toggleColorScheme" class="button">
   <svg class="color-scheme--icon color-scheme--light-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
-      <g>
+    <g>
-          <path fill="none" d="M0 0h24v24H0z"/>
+      <path fill="none" d="M0 0h24v24H0z"/>
-          <path fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
+      <path fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
-      </g>
+    </g>
   </svg>
   <svg class="color-scheme--icon color-scheme--dark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
-      <g>
+    <g>
-          <path fill="none" d="M0 0h24v24H0z"/>
+      <path fill="none" d="M0 0h24v24H0z"/>
-          <path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
+      <path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
-      </g>
+    </g>
   </svg>
 </button>
 

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
     },
     fontWeight: {
       bold: 700,
+      semibold: 500,
     },
     extend: {
       //