style: add top border to selected menu item

assets/css/base.css

@@ -20,5 +20,5 @@
 }
 
 a:hover {
-    @apply text-eureka;
+    @apply text-eureka transition duration-300 ease-in-out;
 }

assets/css/site.css

@@ -48,4 +48,10 @@
 
 .pagination .page-item:not(.disabled):hover {
   @apply text-eureka;
+}
+
+.selected-menu-item {
+  @apply text-eureka;
+  border-top-color: var(--color-eureka);
+  border-bottom-color: transparent;
 }

assets/css/tailwind.config.js

@@ -18,17 +18,21 @@ module.exports = {
     },
     extend: {
       height: {
-        '(screen-16)': 'calc(100vh - 4rem)',
-        '96': '24rem',
-        '128': '32rem',
-        '160': '40rem',
+          '(screen-16)': 'calc(100vh - 4rem)',
+          '(16-4px)': 'calc(4rem - 4px)',
+          '96': '24rem',
+          '128': '32rem',
+          '160': '40rem',
       },
       minHeight: {
         '16': '4rem',
       },
       maxHeight: {
         'doc-sidebar': 'calc(100vh - 4rem - var(--height-doc-title, 4rem))',
       },
+      lineHeight: {
+        '(16-4px)': 'calc(4rem - 4px)',
+      },
       inset: {
         '16': '4rem',
         '32': '8rem',

data/eureka.toml

@@ -1 +1 @@
-version = "0.4.0"
+version = "0.5.0"

layouts/partials/header.html

@@ -14,20 +14,19 @@
     }
     {{- end }}
 </script>
-<nav class="flex items-center justify-between flex-wrap p-4">
+<nav class="flex items-center justify-between flex-wrap px-4 py-4 md:py-0">
     <a href="{{ "/" | relLangURL }}" class="mr-6 text-primary-text text-xl font-bold">{{ .Site.Title }}</a>
     <button id="navbar-btn" class="md:hidden flex items-center px-3 py-2" aria-label="Open Navbar">
         <i class="fas fa-bars"></i>
     </button>
 
     <div id="target"
         class="hidden block md:flex md:flex-grow md:justify-between md:items-center w-full md:w-auto text-primary-text z-20">
-        <div class="text-sm md:flex-grow pb-4 md:pb-0 border-b md:border-b-0">
+        <div class="md:flex md:h-16 text-sm md:flex-grow pb-4 md:pb-0 border-b md:border-b-0">
             {{- $relPermalink := .RelPermalink }}
             {{- range .Site.Menus.main }}
             {{- $url := .URL | relLangURL }}
-            <a href="{{ $url }}"
-                class="block mt-4 md:inline-block md:mt-0 {{ if hasPrefix $relPermalink $url }} text-eureka {{ end }} hover:text-eureka mr-4">{{ .Name }}</a>
+            <a href="{{ $url }}" class="block mt-4 md:inline-block md:mt-0 md:h-(16-4px) md:leading-(16-4px) box-border md:border-t-2 md:border-b-2 {{ if hasPrefix $relPermalink $url }} selected-menu-item {{ else }} border-transparent {{ end }} mr-4">{{ .Name }}</a>
             {{- end }}
         </div>