diff --git a/docs/about.md b/docs/about.md deleted file mode 100644 index c7c17d9..0000000 --- a/docs/about.md +++ /dev/null @@ -1 +0,0 @@ -# Hello world \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 14181e3..084c4f4 100644 --- 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) -

GKS

+![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. -

- - GKS Video - - - - -

+[![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)**
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.

• [Documentation](https://vrs.ga4gh.org/en/latest/) and [Quick Start](https://vrs.ga4gh.org/en/latest/quickstart.html)
• [GitHub](https://github.com/ga4gh/vrs-python): vrs-python reference implementation
• [Get Involved!](https://www.ga4gh.org/product/variation-representation/) | | ![Cat-VRS](img/cat-vrs-transparent-bg.png) | **Categorical Variation Representation Specification (Cat-VRS)**
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.

• [Documentation](https://cat-vrs.ga4gh.org/en/latest/)
• [GitHub](https://github.com/ga4gh/cat-vrs): cat-vrs reference implementation
• [Get Involved!](https://www.ga4gh.org/product/categorical-variation-catvar/) | @@ -30,7 +32,7 @@ Genomic science is accelerating — but fragmented data holds us back. GKS creat ## Community -Community +![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. @@ -38,17 +40,23 @@ Ready to get involved? Join us at our monthly GKS Think Tanks, short virtual hac [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 our Work Stream Manager for any questions: **** diff --git a/docs/overrides/assets/javascripts/menu.js b/docs/overrides/assets/javascripts/menu.js new file mode 100644 index 0000000..fe99a0b --- /dev/null +++ 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 index 7eb6302..c7c7a0a 100644 --- a/docs/overrides/partials/header.html +++ b/docs/overrides/partials/header.html @@ -1,15 +1,17 @@
+
+
- - diff --git a/docs/stylesheets/center-content.css b/docs/stylesheets/center-content.css new file mode 100644 index 0000000..d6b6493 --- /dev/null +++ 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 new file mode 100644 index 0000000..fadd146 --- /dev/null +++ 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; +} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 02892cc..8beff7f 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,215 +1,15 @@ -/* Hide the default header/navigation bar */ -.md-header__inner { - display: none; +.md-typeset h1 { + font-size: 3em !important; + font-weight: bold !important; } -/* Hide the left sidebar navigation */ -.md-sidebar--primary { - display: none; -} - -/* Hide the right sidebar (table of contents) */ -.md-sidebar--secondary { - display: none; -} - -/* Hide all table of contents elements */ -.md-content__inner > .md-typeset > .md-content__toc, -.md-nav--secondary, -nav[class*="toc"], -.toc, -[data-md-component="toc"] { - display: none !important; -} - -/* Adjust main content to fill the space and center it */ -.md-main__inner { - margin-left: 0; - margin-right: 0; -} - -.md-content { - max-width: 900px; - margin: 0 auto; - padding: 2rem; -} - -.md-content__inner { - margin: 0; -} - -/* Center and bold the main title with larger font */ -.md-content h1:first-of-type { - text-align: center; - font-weight: bold; - font-size: 3rem; -} - -/* Center the subtitle (first paragraph after h1) */ -.md-content h1:first-of-type + p { - text-align: center; -} - -/* Center and bold h2 headings, italic for Why GKS */ -.md-content h2 { - text-align: center; - font-weight: bold; - font-style: italic; - clear: both; -} - -/* Style h3 headings (like Specifications) to match h2 with italic */ -.md-content h3 { - text-align: center; - font-weight: bold; - font-size: 1.5625em; /* Match h2 font size */ - font-style: italic; -} - -/* Style table images - VRS and VA keep original width, Cat-VRS and SA scaled */ -.md-content table img[alt="VRS"], -.md-content table img[alt="VA"] { - width: auto; - height: auto; -} - -.md-content table img[alt="Cat-VRS"], -.md-content table img[alt="SA"] { - height: 150px; - width: auto; -} - -/* Center images in table cells */ -.md-content table td:first-child { - text-align: center; - vertical-align: middle; -} - -/* Style paragraphs after "Why GKS?" h2 */ -.md-content h2:first-of-type + p { - text-align: center; - font-size: 1.5rem; - font-weight: bold; -} - -.md-content h2:first-of-type + p + p, -.md-content h2:first-of-type + p + p + p { - text-align: center; -} - -/* Custom header */ -.custom-header { - background-color: white; - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid #e0e0e0; - position: sticky; - top: 0; - z-index: 1000; -} - -.custom-header-logo img { - height: 50px; - width: auto; -} - -/* Hamburger menu container */ -.hamburger-menu { - position: relative; -} - -/* Hamburger button */ -.hamburger-button { - background: none; - border: none; - cursor: pointer; - padding: 0.5rem; - display: flex; - flex-direction: column; - gap: 5px; - z-index: 1001; -} - -.hamburger-button span { - display: block; - width: 25px; - height: 3px; - background-color: #333; - transition: all 0.3s; - border-radius: 2px; -} - -/* Hamburger navigation menu */ -.hamburger-nav { - position: absolute; - top: calc(100% + 1rem); - right: 0; - background-color: white; - border: 1px solid #e0e0e0; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - min-width: 250px; - opacity: 0; - visibility: hidden; - transform: translateY(-10px); - transition: all 0.3s ease; - z-index: 1000; -} - -.hamburger-nav.active { - opacity: 1; - visibility: visible; - transform: translateY(0); -} - -.hamburger-nav a { - display: block; - color: #333; - text-decoration: none; - font-weight: 500; - font-size: 1rem; - padding: 0.75rem 1.5rem; - transition: background-color 0.2s, color 0.2s; - border-bottom: 1px solid #f0f0f0; -} - -.hamburger-nav a:last-child { - border-bottom: none; -} - -.hamburger-nav a:hover { - background-color: #f5f5f5; - color: #0066cc; -} - -/* Adjust content to account for custom header */ -.md-content { - margin-top: 0; -} - -/* Dark mode adjustments */ -[data-md-color-scheme="slate"] .custom-header { - background-color: #1a1a1a; - border-bottom-color: #333; -} - -[data-md-color-scheme="slate"] .hamburger-button span { - background-color: #fff; -} - -[data-md-color-scheme="slate"] .hamburger-nav { - background-color: #2a2a2a; - border-color: #444; -} - -[data-md-color-scheme="slate"] .hamburger-nav a { - color: #fff; - border-bottom-color: #444; -} +.md-typeset h2 { + font-size: 1.75em !important; + font-weight: bold !important; + font-style: italic !important; -[data-md-color-scheme="slate"] .hamburger-nav a:hover { - background-color: #333; - color: #64b5f6; + margin-left: auto !important; + margin-right: auto !important; + text-align: center !important; + width: fit-content !important; } diff --git a/mkdocs.yml b/mkdocs.yml index dd18e4d..dbc9582 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,27 +1,37 @@ site_name: GA4GH GKS -nav: - - Home: index.md - - About: about.md + +nav: [] + theme: name: material - color_mode: dark custom_dir: docs/overrides features: + - navigation.instant + - content.code.copy - toc.integrate - palette: - - # Palette toggle for light mode - - scheme: default - toggle: - icon: material/brightness-7 - name: Switch to dark mode +extra_css: + - stylesheets/extra.css + - stylesheets/center-content.css + - stylesheets/custom-header.css - # Palette toggle for dark mode - - scheme: slate - toggle: - icon: material/brightness-4 - name: Switch to light mode +extra_javascript: + - assets/javascripts/menu.js +markdown_extensions: + - admonition + - attr_list + - md_in_html + - tables + - pymdownx.superfences + - pymdownx.details + - pymdownx.highlight + - pymdownx.inlinehilite + - pymdownx.mark + - pymdownx.tilde -extra_css: - - stylesheets/extra.css \ No newline at end of file +extra: + social: + - icon: fontawesome/brands/github + link: https://github.com/ga4gh + - icon: fontawesome/brands/twitter + link: https://twitter.com/ga4gh