ga4gh · korikuzma · Dec 4, 2025
diff --git a/docs/about.md b/docs/about.md
diff --git a/docs/index.md b/docs/index.md
@@ -1,25 +1,27 @@
+---
+title: GA4GH Genomic Knowledge Standards (GKS)
+hide:
+  - navigation
+  - toc
+---
+
 # GA4GH Genomic Knowledge Standards (GKS)
 
-<p style="text-align: center;"><img src="img/gks.png" alt="GKS" style="max-width: 600px; width: 100%;"></p>
+![GKS](img/gks.png)
 
-### We're building the language of genomic knowledge.
+## We're building the language of genomic knowledge.
 
 A common framework to represent, share, and interpret genomic data across borders, platforms, and disciplines. From genetic variants to clinical interpretations, our standards unlock the full power of precision medicine by ensuring data is not just accessible, but usable.
 
 Genomic science is accelerating — but fragmented data holds us back. GKS creates interoperable, open standards that connect labs, clinics, and researchers worldwide, enabling seamless exchange and trusted interpretation of genomic findings.
 
-<p style="text-align: center; margin: 30px 0;">
-  <a href="https://youtu.be/T8kXQhNvpVU" target="_blank" style="position: relative; display: inline-block; text-decoration: none;">
-    <img src="https://img.youtube.com/vi/T8kXQhNvpVU/maxresdefault.jpg" alt="GKS Video" style="max-width: 600px; width: 100%; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: block;">
-    <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(255, 0, 0, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-      <span style="width: 0; height: 0; border-left: 25px solid white; border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 8px;"></span>
-    </span>
-  </a>
-</p>
+[![Video Thumbnail](https://img.youtube.com/vi/T8kXQhNvpVU/maxresdefault.jpg)](https://youtu.be/T8kXQhNvpVU?si=CF-RkasQ5ZHfTmyd){ target=_blank }
 
-### GKS Products and Study Groups
+---
+
+## GKS Products and Study Groups
 
-|  |  |
+| | |
 |---|---|
 | ![VRS](img/VRS-1.png) | **Variation Representation Specification (VRS)**<br>VRS provides semantically precise representations of variation and leverages this design to enable federated identification of biomolecular variation with globally consistent and unique computed identifiers.<br><br>• [Documentation](https://vrs.ga4gh.org/en/latest/) and [Quick Start](https://vrs.ga4gh.org/en/latest/quickstart.html)<br>• [GitHub](https://github.com/ga4gh/vrs-python): vrs-python reference implementation<br>• [Get Involved!](https://www.ga4gh.org/product/variation-representation/) |
 | ![Cat-VRS](img/cat-vrs-transparent-bg.png) | **Categorical Variation Representation Specification (Cat-VRS)**<br>A standard for describing sets of related genetic variants in a way that computers can understand, compare, and use. Instead of focusing on individual mutations, Cat-VRS helps researchers, clinicians, and knowledgebases define broader categories — like *oncogenic KRAS mutations* or *loss-of-function variants in BRCA1* — using precise, modular building blocks called constraints.<br><br>• [Documentation](https://cat-vrs.ga4gh.org/en/latest/)<br>• [GitHub](https://github.com/ga4gh/cat-vrs): cat-vrs reference implementation<br>• [Get Involved!](https://www.ga4gh.org/product/categorical-variation-catvar/) |
@@ -30,25 +32,31 @@ Genomic science is accelerating — but fragmented data holds us back. GKS creat
 
 ## Community
 
-<img src="img/gks-think-tank.jpg" alt="Community" align="left" style="margin-right: 20px; max-width: 300px;">
+![Community](img/gks-think-tank.jpg){ width="300", align="left" }
 
 The GKS Work Stream is an open, collaborative effort driven by international experts in genomics, informatics, and clinical care. We welcome contributors of all backgrounds to help shape the standards that will define tomorrow's genomic medicine.
 
 Ready to get involved? Join us at our monthly GKS Think Tanks, short virtual hackathons that offer participants an informal, inclusive space to explore new ideas and collaborate on GKS product development. Bring your own code!
 
 [Learn more →](https://www.addevent.com/event/At26385890)
 
+---
+
 ## GKS In Action
 
-## YouTube
+### YouTube
+
+To learn more about GKS and our products, visit our [YouTube channel](https://www.youtube.com/playlist?list=PLXa1b5-MwOAaIiio-WD0ujpy1LPnT1dRq)! There you will find links to the videos of our GKS Open Houses. These Open Houses are high-level introductions to the work of GKS, presenting new products and product updates, and showcasing implementations of GKS products and standards.
 
-To learn more about GKS and our products, visit our [YouTube channel](https://www.youtube.com/playlist?list=PLXa1b5-MwOAaIiio-WD0ujpy1LPnT1dRq)!  There you will find links to the videos of our GKS Open Houses.  These Open Houses are high-level introductions to the work of GKS, presenting new products and product updates, and showcasing implementations of GKS products and standards.
+---
 
 ## Publications
 
 - [Development and application of a computable genotype model in the GA4GH Variation Representation Specification (2023)](https://europepmc.org/article/pmc/9782714)
 - [The GA4GH Variation Representation Specification (VRS): A Computational Framework for the Precise Representation and Federated Identification of Molecular Variation (2020)](https://doi.org/10.1101/2021.01.15.426843)
 
+---
+
 ## Contact
 
-Email our Work Stream Manager for any questions: <[email protected]>.
+Email our Work Stream Manager for any questions: **<[email protected]>**
diff --git a/docs/overrides/assets/javascripts/menu.js b/docs/overrides/assets/javascripts/menu.js
@@ -0,0 +1,23 @@
+function toggleMenu() {
+    const nav = document.getElementById('hamburgerNav');
+    nav.classList.toggle('active');
+}
+
+// Close menu when clicking outside
+document.addEventListener('click', function(event) {
+    const hamburgerMenu = document.querySelector('.hamburger-menu');
+    const nav = document.getElementById('hamburgerNav');
+
+    if (!hamburgerMenu.contains(event.target) && nav.classList.contains('active')) {
+        nav.classList.remove('active');
+    }
+});
+
+// Close menu when clicking a link
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.hamburger-nav a').forEach(link => {
+        link.addEventListener('click', () => {
+            document.getElementById('hamburgerNav').classList.remove('active');
+        });
+    });
+});
diff --git a/docs/overrides/partials/header.html b/docs/overrides/partials/header.html
@@ -1,15 +1,17 @@
 <header class="custom-header">
     <div class="custom-header-logo">
-        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}">
+        <a href="{{ config.site_url or nav.homepage.url | url }}">
             <img src="{{ 'img/ga4gh-logo.svg' | url }}" alt="GA4GH Logo">
         </a>
     </div>
+
     <div class="hamburger-menu">
         <button class="hamburger-button" aria-label="Menu" onclick="toggleMenu()">
             <span></span>
             <span></span>
             <span></span>
         </button>
+
         <nav class="hamburger-nav" id="hamburgerNav">
             <a href="#gks-products-and-study-groups">GKS Products and Study Groups</a>
             <a href="#community">Community</a>
@@ -20,27 +22,3 @@
         </nav>
     </div>
 </header>
-
-<script>
-function toggleMenu() {
-    const nav = document.getElementById('hamburgerNav');
-    nav.classList.toggle('active');
-}
-
-// Close menu when clicking outside
-document.addEventListener('click', function(event) {
-    const hamburgerMenu = document.querySelector('.hamburger-menu');
-    const nav = document.getElementById('hamburgerNav');
-
-    if (!hamburgerMenu.contains(event.target) && nav.classList.contains('active')) {
-        nav.classList.remove('active');
-    }
-});
-
-// Close menu when clicking on a link
-document.querySelectorAll('.hamburger-nav a').forEach(link => {
-    link.addEventListener('click', function() {
-        document.getElementById('hamburgerNav').classList.remove('active');
-    });
-});
-</script>
diff --git a/docs/stylesheets/center-content.css b/docs/stylesheets/center-content.css
@@ -0,0 +1,9 @@
+.md-main__inner {
+  max-width: 100% !important;
+  display: flex;
+  justify-content: center;
+}
+
+.md-content {
+  max-width: 900px;
+}
diff --git a/docs/stylesheets/custom-header.css b/docs/stylesheets/custom-header.css
@@ -0,0 +1,52 @@
+.custom-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background: white;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 2000;
+  width: 100%;
+}
+
+.custom-header-logo img {
+  height: 48px;
+}
+
+.hamburger-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hamburger-button span {
+  width: 24px;
+  height: 3px;
+  background: black;
+}
+
+.hamburger-nav {
+  display: none;
+  flex-direction: column;
+  background: white;
+  position: absolute;
+  top: 60px;
+  right: 10px;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  z-index: 999;
+}
+
+.hamburger-nav a {
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.hamburger-nav.active {
+  display: flex;
+}