initial

theme/templates/partials/footer.html

@@ -0,0 +1,30 @@
+<div
+  class="flex flex-col md:flex-row justify-between md:items-center font-medium text-xs md:text-sm text-text-alt space-y-4 md:space-y-0"
+>
+  <span
+      >Copyright &copy; {{ now(format="%Y") }}
+    {% if config.extra.footer_author_link %}
+    <a
+      href="{{ config.extra.footer_author_link }}"
+      class="text-blue hover:underline">{{ config.author }}</a
+    >.
+    {% else %}
+    {{ config.author }}.
+    {% endif %}
+    {% if config.extra.license %}
+      <br class="md:hidden" /> Licensed under {{ config.extra.license }}.
+    {% endif %}
+  </span>
+  <div class="flex flex-inline">
+    {% for name, link in config.extra.footer %}
+    <div class="mr-4 md:mr-6 lg:mr-8 last:mr-0">
+      <a
+        href="{{ link }}"
+        class="hover:text-blue"
+      >
+        <span>{{ name | title }}</span>
+      </a>
+    </div>
+    {% endfor %}
+  </div>
+</div>

theme/templates/partials/nav.html

@@ -0,0 +1,72 @@
+<nav x-data="menu" class="container mx-auto px-4 md:px-0 font-mono">
+  <div class="flex items-center justify-between h-16">
+    <!-- Logo and dark mode -->
+    <div x-data="theme" class="flex items-center shrink-0 space-x-2">
+      <a href="/" class="flex items-center space-x-2">
+        <!-- <img src="{{ config.rootUrl }}/assets/norgolith.svg" alt="Norgolith Logo" class="h-8 w-8"> -->
+        <span class="text-lg md:text-xl font-bold text-magenta">{{ config.title | title }}</span>
+      </a>
+      <button
+        @click="toggle()"
+        type="button"
+        class="rounded-lg flex items-center"
+        :aria-label="current === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
+      >
+        <i
+          :class="current === 'dark' ? 'ti-sun hover:text-yellow' : 'ti-moon hover:text-blue'"
+          class="ti text-xl md:text-2xl text-grey transition-colors duration-200 ease-in-out"
+        ></i>
+      </button>
+    </div>
+
+    <!-- Desktop Menu -->
+    <div class="hidden md:flex md:items-center md:space-x-8">
+      {% for name, link in config.extra.nav %}
+      <a
+        :class="{ 'text-magenta!': currentPage.startsWith('{{ link }}') }"
+        class="text-text-alt hover:text-blue px-3 py-2 rounded-md text-sm font-medium"
+        href="{{ link }}"
+      >{{ name | title }}</a>
+      {% endfor %}
+    </div>
+
+    <!-- Mobile Menu Button -->
+    <div class="md:hidden">
+      <button @click="toggleMobile" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-dark-grey hover:text-text-alt focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
+        <span class="sr-only">Open main menu</span>
+        <!-- Hamburger Icon -->
+        <svg x-show="!openMobile" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+        </svg>
+        <!-- Close Icon -->
+        <svg x-show="openMobile" class="h-5 w-5 text-red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile Menu -->
+  <div
+    x-show="openMobile"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-300"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    @click.outside="openMobile = false"
+    class="md:hidden"
+    id="mobile-menu"
+  >
+    <div class="flex flex-row items-center justify-between pt-2 pb-4">
+      {% for name, link in config.extra.nav %}
+      <a
+        :class="{ 'text-blue!': currentPage.startsWith('{{ link }}') }"
+        class="text-text-alt hover:text-blue px-3 py-2 rounded-md text-sm font-medium"
+        href="{{ link }}"
+      >{{ name | title }}</a>
+      {% endfor %}
+    </div>
+  </div>
+</nav>