ivoa · szautkin · Dec 2, 2024 · Dec 3, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/.github/workflows/deploy_version.yaml b/.github/workflows/deploy_version.yaml
@@ -26,6 +26,16 @@ jobs:
         shell: bash
         run: echo "BRANCH_NAME=${{ env.BRANCH_NAME }}"
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: |
+          npm install
+          npm install -D postcss postcss-cli autoprefixer tailwindcss
+
       - name: Setup Hugo
         uses: ./.github/actions/setup-hugo
 
@@ -43,4 +53,4 @@ jobs:
           port: ${{ secrets.SFTP_PORT }}
           key: ${{ secrets.STAGE_ID }}
           uploads: |
-            ./public/ => ./ivoa-web-stage/v/${{ env.BRANCH_NAME }}
+            ./public/ => ./ivoa-web-stage/v/${{ env.BRANCH_NAME }}
diff --git a/.gitignore b/.gitignore
@@ -20,4 +20,8 @@ hugo_stats.json
 # ignore PageFind in case you have installed it in the project directory
 /pagefind-bin/
 /pagefind-bin_old/
-/pagefind*.tar.gz
+/pagefind*.tar.gz
+
+.idea
+node_modules
+/dist
diff --git a/.gitmodules b/.gitmodules
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html {
+        font-family: "Inter", sans-serif;
+    }
+    a {
+        @apply text-secondary hover:text-secondary/80 hover:underline hover:decoration-1;
+    }
+    h1 {
+        @apply text-primary text-xl font-bold leading-tight mb-3 mt-3 text-center;
+    }
+    h3 {
+        @apply text-primary text-lg font-bold leading-tight mb-3 mt-3 text-center;
+    }
+    hr {
+        @apply border-primary;
+    }
+    p {
+        @apply text-justify mb-3;
+    }
+    ul {
+        @apply list-disc ml-6;
+    }
+    ul.menu {
+        @apply list-none;  /* or directly use: list-style-type: none; */
+    }
+}
+
diff --git a/hugo.toml b/hugo.toml
@@ -2,3 +2,15 @@ baseURL = "https://webtest.ivoa.info"
 languageCode = "en-us"
 title = "International Virtual Observatory Alliance"
 author = "IVOA.net"
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+
+[build]
+  writeStats = true
+  useResourceCacheWhen = "fallback"
+
+[minify]
+  disableJS = true
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -2,9 +2,9 @@
 <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="min-h-screen mx-auto lg:max-w-6xl bg-white" {{- 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 }}>
+        <main class="m-4" {{- if not (.Scratch.Get "canBeIndexed") }} data-pagefind-body data-pagefind-meta="date:{{- .Date.Format "2006-01-02" }}"{{- end }}>
         {{- block "main" . }}{{- end }}
         </main>
         {{- partial "sitemap.html" . -}}

diff --git a/layouts/newsletter/single.html b/layouts/newsletter/single.html
@@ -2,9 +2,9 @@
 
 {{- $pdf := printf "newsletter_pdf/%s.pdf" .File.BaseFileName }}
 
-<article class="newsletter">
+<article>
     <header>
-        <h1>
+        <h1 class="text-primary text-xl font-bold leading-tight text-center m-4">
             {{- .Title }}
             {{- with resources.Get $pdf }} (<a href="{{ .RelPermalink }}">pdf</a>){{- end }}
         </h1>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,3 +1,3 @@
-<footer>
-    &copy; IVOA.net. Contact the <a href="mailto:[email protected]">IVOA Webmaster</a>
+<footer class="text-md block bg-primary text-white text-right pb-2">
+    &copy; IVOA.net. Contact the <a class="text-accent hover:text-accent-hover" href="mailto:[email protected]">IVOA Webmaster</a>
 </footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -1,9 +1,7 @@
 <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" href="{{ .Site.Home.Permalink}}/css/fa.min.css">
-    <link rel="stylesheet" href="{{ .Site.Home.Permalink}}/css/ivoa.css">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ $css := resources.Get "css/tailwind.css" | postCSS (dict "config" "postcss.config.js") | minify }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}">
     <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-14 w-auto mr-4">
+                <span class="text-white text-2xl 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-accent-hover">Home</a>
+                    <a href="{{ .Site.Home.Permalink}}astronomers/" class="text-white hover:text-accent-hover">Astronomers</a>
+                    <a href="{{ .Site.Home.Permalink}}deployers/" class="text-white hover:text-accent-hover">Deployers</a>
+                    <a href="{{ .Site.Home.Permalink}}members/" class="text-white hover:text-accent-hover">Members</a>
+                    <a href="{{ .Site.Home.Permalink}}about/" class="text-white hover:text-accent-hover">About</a>
+                    <a href="{{ .Site.Home.Permalink}}search/" class="text-white hover:text-accent-hover">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-12 w-auto">
+                    <span class="text-white text-xlg">International Virtual Observatory Alliance</span>
+                </div>
+                <button
+                        id="mobileMenuButton"
+                        type="button"
+                        class="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+                        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:text-accent-hover 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:text-accent-hover 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:text-accent-hover 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:text-accent-hover 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:text-accent-hover 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:text-accent-hover hover:bg-white/10 text-sm px-4 py-2 transition-colors">Search</a>
+                </nav>
+            </div>
+        </div>
+    </div>
+</header>
diff --git a/layouts/partials/page-dates.html b/layouts/partials/page-dates.html
@@ -1,4 +1,4 @@
-<div class="pageDates">
+<div class="text-medium-gray italic text-right mb-5 mt-5">
     {{- with .Date }}
     <strong>Created:</strong> <span title="{{ .UTC.Format "January 02, 2006 - 15:04 MST" }}">{{ .Local.Format "January 02, 2006 - 15:04 MST" }}</span>
     <br/>

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1 +1 @@
-<script src="{{ .Site.Home.Permalink}}/js/main.js" async></script>
+<script src='{{ "js/interaction.js" | relURL }}'></script>
diff --git a/layouts/partials/sitemap.html b/layouts/partials/sitemap.html
@@ -1,70 +1,58 @@
-<div class="sitemap">
-    <div class="cards">
-
-        <div class="card">
-            <div class="card-title">About the IVOA</div>
-
-            <div class="card-list">
-                <ul>
-                    <li>
-                        <a href="{{ .Site.Home.Permalink}}about/what_is_vo/">
-                        What is the VO?
-                        </a>
-                    </li>
-                    <li><a href="{{ .Site.Home.Permalink}}about/what_is_ivoa/">What is the IVOA?</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}about/member-organizations/">Who is involved?</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}about/roadmap/">Accomplishments and future plans</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}about/contacts/">How do I contact the IVOA?</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}about/participation/">How can I participate?</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}members/working-groups/IVOA_Code_of_Conduct.pdf">Code of Conduct</a></li>
-                </ul>
-            </div>
+<div class="bg-primary text-white p-8">
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <!-- About the IVOA -->
+        <div>
+            <h2 class="text-lg font-bold mb-2">About the IVOA</h2>
+            <div class="h-2 bg-sky-blue mb-4"></div>
+            <ul class="space-y-3 menu">
+                <li><a href="{{ .Site.Home.Permalink}}about/what_is_vo/" class="text-accent hover:text-accent-hover transition-colors duration-200" >What is the VO?</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}about/what_is_ivoa/" class="text-accent hover:text-accent-hover transition-colors duration-200" >What is the IVOA?</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}about/member-organizations/" class="text-accent hover:text-accent-hover transition-colors duration-200" >Who is involved?</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}about/roadmap/" class="text-accent hover:text-accent-hover transition-colors duration-200" >Accomplishments and future plans</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}about/contacts/" class="text-accent hover:text-accent-hover transition-colors duration-200" >How do I contact the IVOA?</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}about/participation/" class="text-accent hover:text-accent-hover transition-colors duration-200" >How can I participate?</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}members/working-groups/IVOA_Code_of_Conduct.pdf" class="text-accent hover:text-accent-hover transition-colors duration-200" >Code of Conduct</a></li>
+            </ul>
         </div>
 
-        <div class="card">
-            <div class="card-title">For Astronomers</div>
-
-            <div class="card-list">
-                <ul>
-                    <li><a href="{{ .Site.Home.Permalink}}astronomers/getting_started/">Getting Started</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}astronomers/using_the_vo/">Using the VO</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}astronomers/vo_glossary/">VO Glossary</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}astronomers/applications/">VO Applications</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}newsletter/">IVOA Newsletters</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}astronomers/vo_for_public/">VO for Students & Public</a></li>
-                </ul>
-            </div>
+        <!-- For Astronomers -->
+        <div>
+            <h2 class="text-lg font-bold mb-2">For Astronomers</h2>
+            <div class="h-2 bg-forest-green mb-4"></div>
+            <ul class="space-y-3 menu">
+                <li><a href="{{ .Site.Home.Permalink}}astronomers/getting_started/" class="text-accent hover:text-accent-hover transition-colors duration-200" >Getting Started</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}astronomers/using_the_vo/" class="text-accent hover:text-accent-hover transition-colors duration-200" >Using the VO</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}astronomers/vo_glossary/" class="text-accent hover:text-accent-hover transition-colors duration-200" >VO Glossary</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}astronomers/applications/" class="text-accent hover:text-accent-hover transition-colors duration-200" >VO Applications</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}newsletter/" class="text-accent hover:text-accent-hover transition-colors duration-200" >IVOA Newsletters</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}astronomers/vo_for_public/" class="text-accent hover:text-accent-hover transition-colors duration-200" >VO for Students & Public</a></li>
+            </ul>
         </div>
 
-        <div class="card">
-            <div class="card-title">For Developers</div>
-
-            <div class="card-list">
-                <ul>
-                    <li><a href="{{ .Site.Home.Permalink}}deployers/intro_to_vo_concepts">Intro to VO Concepts</a></li>
-                    <li><a href="https://www.ivoa.net/documents/">IVOA Standards</a></li>
-                    <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/PublishingInTheVONew">Guide to Publishing in the VO</a></li>
-                    <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/VOGlossary">Technical Glossary</a></li>
-                </ul>
-            </div>
+        <!-- For Developers -->
+        <div>
+            <h2 class="text-lg font-bold mb-2">For Developers</h2>
+            <div class="h-2 bg-brick-red mb-4"></div>
+            <ul class="space-y-3 menu">
+                <li><a href="{{ .Site.Home.Permalink}}deployers/intro_to_vo_concepts" class="text-accent hover:text-accent-hover transition-colors duration-200" >Intro to VO Concepts</a></li>
+                <li><a href="https://www.ivoa.net/documents/" class="text-accent hover:text-accent-hover transition-colors duration-200" >IVOA Standards</a></li>
+                <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/PublishingInTheVONew" class="text-accent hover:text-accent-hover transition-colors duration-200" >Guide to Publishing in the VO</a></li>
+                <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/VOGlossary" class="text-accent hover:text-accent-hover transition-colors duration-200" >Technical Glossary</a></li>
+            </ul>
         </div>
 
-        <div class="card">
-            <div class="card-title">For Members</div>
-
-            <div class="card-list">
-                <ul>
-                    <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/IvoaEvents">IVOA Calendar</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}/members/working-groups">Working Groups</a></li>
-                    <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/WebHome">Twiki</a></li>
-                    <li><a href="https://www.ivoa.net/documents/">Documents in Progress</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}/members/working-groups">Mailing Lists</a></li>
-                    <li><a href="{{ .Site.Home.Permalink}}/about/roadmap/">IVOA Roadmap</a></li>
-                </ul>
-            </div>
-
+        <!-- For Members -->
+        <div>
+            <h2 class="text-lg font-bold mb-2">For Members</h2>
+            <div class="h-2 bg-soft-gray mb-4"></div>
+            <ul class="space-y-3 menu">
+                <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/IvoaEvents" class="text-accent hover:text-accent-hover transition-colors duration-200" >IVOA Calendar</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}/members/working-groups" class="text-accent hover:text-accent-hover transition-colors duration-200" >Working Groups</a></li>
+                <li><a href="http://wiki.ivoa.net/twiki/bin/view/IVOA/WebHome" class="text-accent hover:text-accent-hover transition-colors duration-200" >Twiki</a></li>
+                <li><a href="https://www.ivoa.net/documents/" class="text-accent hover:text-accent-hover transition-colors duration-200" >Documents in Progress</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}/members/working-groups" class="text-accent hover:text-accent-hover transition-colors duration-200" >Mailing Lists</a></li>
+                <li><a href="{{ .Site.Home.Permalink}}/about/roadmap/" class="text-accent hover:text-accent-hover transition-colors duration-200" >IVOA Roadmap</a></li>
+            </ul>
         </div>
-
     </div>
-
 </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<script src="{{ .Site.Home.Permalink}}/js/main.js" async></script>
		<script src='{{ "js/interaction.js" \| relURL }}'></script>