iss101 Adjusting the header, WIP

ivoa · Dec 3, 2024 · ca58160 · ca58160
1 parent a08bd40
commit ca58160
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 67 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "themes/ananke"]
+	path = themes/ananke
+	url = https://github.com/theNewDynamic/gohugo-theme-ananke.git
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -1,3 +1,4 @@
 @tailwind base;
+@tailwind colors;
 @tailwind components;
 @tailwind utilities;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -2,7 +2,7 @@
 <html lang="en">
     {{- partial "head.html" . -}}
     {{- .Scratch.Set "canBeIndexed" (or (or (eq .BundleType "branch") (hasPrefix .Type "_")) (or (eq .Kind "term") (eq .Kind "taxonomy"))) }}
-    <body{{- if (.Scratch.Get "canBeIndexed") }} data-pagefind-ignore{{- end }}>
+    <body class="mx-auto max-w-6xl" {{- if (.Scratch.Get "canBeIndexed") }} data-pagefind-ignore{{- end }}>
         {{- partial "header.html" . -}}
         <main {{- if not (.Scratch.Get "canBeIndexed") }} data-pagefind-body data-pagefind-meta="date:{{- .Date.Format "2006-01-02" }}"{{- end }}>
         {{- block "main" . }}{{- end }}

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -2,9 +2,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+<!--
     <link rel="stylesheet" href="{{ .Site.Home.Permalink}}/css/fa.min.css">
+-->
+    <link rel="stylesheet" href="{{ .Site.Home.Permalink}}/css/layout.css">
+<!--
     <link rel="stylesheet" href="{{ .Site.Home.Permalink}}/css/ivoa.css">
+-->
     <link href="{{ "css/tailwind.css" | resources.Get | css.PostCSS | resources.Minify | relURL }}" rel="stylesheet">
-
+    <script src="{{ .Site.Home.Permalink}}/js/layout.js" defer></script>
     <title>IVOA.net - International Virtual Observatory Alliance</title>
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,14 +1,57 @@
-<header>
-    <a class="header-logo" href="{{ .Site.Home.RelPermalink}}">
-        <img src="/images/ivoa_logo.png">
-        <span>International Virtual<br/>Observatory Alliance</span>
-    </a>
-    <nav>
-        <a href="{{ .Site.Home.Permalink}}">Home</a>
-        <a href="{{ .Site.Home.Permalink}}astronomers/">Astronomers</a>
-        <a href="{{ .Site.Home.Permalink}}deployers/">Deployers</a>
-        <a href="{{ .Site.Home.Permalink}}members/">Members</a>
-        <a href="{{ .Site.Home.Permalink}}about/">About</a>
-        <a class="search" href="{{ .Site.Home.Permalink}}search/">Search</a>
-    </nav>
-</header>
+<header class="bg-primary w-full">
+    <div class="max-w-[2560px] mx-auto px-6">
+        <!-- Desktop & Tablet (768px+) -->
+        <div class="hidden md:flex flex-col">
+            <!-- First Row -->
+            <div class="flex items-center h-20">
+                <img src="/images/ivoa_logo.png" alt="IVOA Logo" class="h-12 w-auto mr-4">
+                <span class="text-white text-xl lg:text-2xl">International Virtual Observatory Alliance</span>
+            </div>
+
+            <!-- Second Row -->
+            <div class="flex justify-end pb-4">
+                <div class="flex gap-8">
+                    <a href="{{ .Site.Home.Permalink}}" class="text-white hover:text-gray-300">Home</a>
+                    <a href="{{ .Site.Home.Permalink}}astronomers/" class="text-white hover:text-gray-300">Astronomers</a>
+                    <a href="{{ .Site.Home.Permalink}}deployers/" class="text-white hover:text-gray-300">Deployers</a>
+                    <a href="{{ .Site.Home.Permalink}}members/" class="text-white hover:text-gray-300">Members</a>
+                    <a href="{{ .Site.Home.Permalink}}about/" class="text-white hover:text-gray-300">About</a>
+                    <a href="{{ .Site.Home.Permalink}}search/" class="text-white hover:text-gray-300">Search</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mobile (<768px) -->
+        <div class="md:hidden">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center space-x-3">
+                    <img src="/images/ivoa_logo.png" alt="IVOA Logo" class="h-10 w-auto">
+                    <span class="text-white text-xs">International Virtual Observatory Alliance</span>
+                </div>
+                <button
+                        type="button"
+                        class="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+                        onclick="toggleMobileMenu()"
+                        aria-expanded="false"
+                        aria-controls="mobile-menu"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg class="w-6 h-6" 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>
+                </button>
+            </div>
+
+            <div id="mobile-menu" class="hidden mt-2 border-t border-white/10">
+                <nav class="py-2">
+                    <a href="{{ .Site.Home.Permalink}}" class="block text-white hover:bg-white/10 text-sm px-4 py-2 transition-colors">Home</a>
+                    <a href="{{ .Site.Home.Permalink}}astronomers/" class="block text-white hover:bg-white/10 text-sm px-4 py-2 transition-colors">Astronomers</a>
+                    <a href="{{ .Site.Home.Permalink}}deployers/" class="block text-white hover:bg-white/10 text-sm px-4 py-2 transition-colors">Deployers</a>
+                    <a href="{{ .Site.Home.Permalink}}members/" class="block text-white hover:bg-white/10 text-sm px-4 py-2 transition-colors">Members</a>
+                    <a href="{{ .Site.Home.Permalink}}about/" class="block text-white hover:bg-white/10 text-sm px-4 py-2 transition-colors">About</a>
+                    <a href="{{ .Site.Home.Permalink}}search/" class="block text-white hover:bg-white/10 text-sm px-4 py-2 transition-colors">Search</a>
+                </nav>
+            </div>
+        </div>
+    </div>
+</header>
diff --git a/static/css/layout.css b/static/css/layout.css
@@ -0,0 +1,6 @@
+.bg-primary-dark {
+    background-color: color-mix(in srgb, var(--color-primary) 80%, black);
+}
+.bg-primary-darker {
+    background-color: color-mix(in srgb, var(--color-primary) 60%, black);
+}