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,5 +1,5 @@
 <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>
       <path fill="none" d="M0 0h24v24H0z"/>

tailwind.config.js

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