From b60c6c0100c45dcac8a665504dd591cb63788b7a Mon Sep 17 00:00:00 2001 From: hk-2029 Date: Tue, 17 Mar 2026 12:53:43 +0000 Subject: [PATCH 1/4] docs: redesign homepage feature cards and polish header/tab bar --- documentation/wiki/assets/css/extra.css | 220 ++++++++++++++++++------ documentation/wiki/index.md | 106 ++++++------ 2 files changed, 220 insertions(+), 106 deletions(-) diff --git a/documentation/wiki/assets/css/extra.css b/documentation/wiki/assets/css/extra.css index 94ee99161..86366873e 100644 --- a/documentation/wiki/assets/css/extra.css +++ b/documentation/wiki/assets/css/extra.css @@ -143,24 +143,63 @@ .md-header { background: var(--sp-gradient) !important; - box-shadow: 0 2px 16px rgba(20,40,70,0.35); + box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(10,20,40,0.4); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); } +/* ── Tab bar ── */ .md-tabs { - background: rgba(255,255,255,0.05) !important; - border-top: 1px solid rgba(255,255,255,0.08); + background: rgba(8,16,32,0.45) !important; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-top: 1px solid rgba(255,255,255,0.06); + border-bottom: 1px solid rgba(255,255,255,0.04); } .md-tabs__link { font-weight: 500; - font-size: 0.79rem; - letter-spacing: 0.02em; - opacity: 0.78; - transition: opacity 0.15s ease; + font-size: 0.76rem; + letter-spacing: 0.03em; + opacity: 0.65; + transition: opacity 0.2s ease, color 0.2s ease; +} + +.md-tabs__link:hover { + opacity: 0.95; +} + +/* ── Tab underline via the parent item (::after on .md-tabs__item) ── */ +.md-tabs .md-tabs__list .md-tabs__item { + position: relative !important; } -.md-tabs__link:hover, -.md-tabs__link--active { + +.md-tabs__item::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background: var(--sp-accent-bright, #4fb3f0); + border-radius: 3px; + transition: width 0.25s cubic-bezier(0.22,1,0.36,1), left 0.25s cubic-bezier(0.22,1,0.36,1); +} + +.md-tabs__item:hover::after { + width: 60%; + left: 20%; +} + +.md-tabs__item--active .md-tabs__link { opacity: 1; + color: #fff !important; +} + +.md-tabs__item--active::after { + width: 100%; + left: 0; + background: linear-gradient(90deg, var(--sp-accent-bright, #4fb3f0), var(--sp-accent-light, #3b9ede)); } /* ═══════════════════════════════════════════════ @@ -468,87 +507,164 @@ transform: translateY(-1px); } +/* ═══════════════════════════════════════════════ + SECTION HEADING +═══════════════════════════════════════════════ */ + +.md-typeset .section-heading { + font-size: 1.25rem; + font-weight: 600; + color: var(--sp-primary); + margin-bottom: 1.2rem; +} + +[data-md-color-scheme="slate"] .md-typeset .section-heading { + color: #a8c8e8; +} + /* ═══════════════════════════════════════════════ FEATURE CARDS (homepage) ═══════════════════════════════════════════════ */ .md-typeset .card-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 1rem; + grid-template-columns: repeat(3, 1fr); + gap: 1.1rem; margin: 1.2rem 0; } -.md-typeset .feature-card { +.md-typeset a.feature-card { + display: block; background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest); - border-radius: 10px; - padding: 1.2rem 1.3rem 1rem; - transition: var(--sp-transition); + border-radius: 12px; + padding: 1.4rem 1.4rem 1.2rem; + transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), + box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), + border-color 0.25s ease; position: relative; overflow: hidden; + text-decoration: none !important; + border-bottom: none !important; + color: inherit !important; + cursor: pointer; } -.md-typeset .feature-card::before { +/* Gradient top-border reveal on hover */ +.md-typeset a.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--sp-gradient); opacity: 0; - transition: opacity 0.2s ease; + transition: opacity 0.25s ease; } -.md-typeset .feature-card:hover { - transform: translateY(-3px); - box-shadow: var(--sp-card-shadow); - border-color: rgba(36,120,181,0.25); +.md-typeset a.feature-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 30px rgba(20,40,70,0.12), 0 2px 8px rgba(36,120,181,0.08); + border-color: rgba(36,120,181,0.2); } -.md-typeset .feature-card:hover::before { +.md-typeset a.feature-card:hover::before { opacity: 1; } -.md-typeset .feature-card .card-icon { - font-size: 1.3rem; - margin-bottom: 0.35rem; - display: block; - line-height: 1; +/* ── Icon containers ── */ +.md-typeset .card-icon-wrap { + width: 42px; + height: 42px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.8rem; + transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); } -.md-typeset .feature-card h3 { - font-size: 0.9rem !important; +.md-typeset a.feature-card:hover .card-icon-wrap { + transform: scale(1.08); +} + +.md-typeset .card-icon-wrap svg { + width: 20px; + height: 20px; +} + +/* Per-card icon colours */ +.card-icon--overview { background: rgba(36,120,181,0.10); color: #2478b5; } +.card-icon--start { background: rgba(16,163,100,0.10); color: #10a364; } +.card-icon--user { background: rgba(139,92,214,0.10); color: #8b5cd6; } +.card-icon--dev { background: rgba(220,120,30,0.10); color: #dc781e; } +.card-icon--ref { background: rgba(36,120,181,0.10); color: #1e6ca8; } +.card-icon--research { background: rgba(200,60,80,0.10); color: #c83c50; } + +/* ── Card text ── */ +.md-typeset a.feature-card h3 { + font-size: 0.88rem !important; font-weight: 600; - margin: 0 0 0.25rem !important; + margin: 0 0 0.3rem !important; padding: 0 !important; color: var(--md-default-fg-color) !important; border: none !important; } -.md-typeset .feature-card p { - font-size: 0.72rem; +.md-typeset a.feature-card p { + font-size: 0.73rem; color: var(--md-default-fg-color--light); - margin: 0 0 0.4rem; - line-height: 1.5; + margin: 0 0 0.6rem; + line-height: 1.55; text-align: left; } -.md-typeset .feature-card a { - font-size: 0.73rem; +.md-typeset a.feature-card .card-link { + font-size: 0.72rem; font-weight: 600; - color: var(--sp-accent) !important; - text-decoration: none !important; - border-bottom: none !important; + color: var(--sp-accent); display: inline-flex; align-items: center; gap: 0.15rem; - margin-top: 0.2rem; - transition: color 0.12s ease, gap 0.12s ease; + transition: gap 0.2s ease, color 0.15s ease; } -.md-typeset .feature-card a:hover { - color: var(--sp-primary) !important; - gap: 0.25rem; +.md-typeset a.feature-card:hover .card-link { + gap: 0.3rem; + color: var(--sp-accent-light); +} + +/* ── Dark-mode card overrides ── */ +[data-md-color-scheme="slate"] .md-typeset a.feature-card { + background: #1a2940; + border-color: rgba(255,255,255,0.06); +} + +[data-md-color-scheme="slate"] .md-typeset a.feature-card:hover { + border-color: rgba(92,184,240,0.2); + box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 0 15px rgba(36,120,181,0.08); +} + +[data-md-color-scheme="slate"] .md-typeset a.feature-card .card-link { + color: #5cb8f0; +} + +[data-md-color-scheme="slate"] .card-icon--overview { background: rgba(36,120,181,0.15); color: #5cb8f0; } +[data-md-color-scheme="slate"] .card-icon--start { background: rgba(16,163,100,0.15); color: #34d399; } +[data-md-color-scheme="slate"] .card-icon--user { background: rgba(139,92,214,0.15); color: #a78bfa; } +[data-md-color-scheme="slate"] .card-icon--dev { background: rgba(220,120,30,0.15); color: #f0a050; } +[data-md-color-scheme="slate"] .card-icon--ref { background: rgba(36,120,181,0.15); color: #7cc4f0; } +[data-md-color-scheme="slate"] .card-icon--research { background: rgba(200,60,80,0.15); color: #f06080; } + +/* ── Responsive ── */ +@media (max-width: 700px) { + .md-typeset .card-grid { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 420px) { + .md-typeset .card-grid { + grid-template-columns: 1fr; + } } /* ═══════════════════════════════════════════════ @@ -596,12 +712,19 @@ ═══════════════════════════════════════════════ */ .md-search__form { - border-radius: 8px; - background: rgba(255,255,255,0.10) !important; - transition: background 0.15s ease; + border-radius: 20px; + background: rgba(255,255,255,0.08) !important; + border: 1px solid rgba(255,255,255,0.08); + transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} +.md-search__form:hover { + background: rgba(255,255,255,0.12) !important; + border-color: rgba(255,255,255,0.12); } .md-search__form:focus-within { background: rgba(255,255,255,0.16) !important; + border-color: rgba(79,179,240,0.3); + box-shadow: 0 0 0 3px rgba(79,179,240,0.08); } /* ═══════════════════════════════════════════════ @@ -633,7 +756,4 @@ .md-typeset .hero h1 { font-size: 1.6rem; } - .md-typeset .card-grid { - grid-template-columns: 1fr; - } } diff --git a/documentation/wiki/index.md b/documentation/wiki/index.md index 6e350a1b3..5a6d5222e 100644 --- a/documentation/wiki/index.md +++ b/documentation/wiki/index.md @@ -41,69 +41,63 @@ SimPaths builds upon **JAS-mine**, an open-source Java platform designed for dis --- -## Explore the Documentation +

Explore the Documentation

-
+
-
-🗺 - -### Overview - -What SimPaths models and why — architecture, modules, parameterisation, and country variants. - -[Explore Overview →](overview/) + +
+
- -
-▶ - -### Getting Started - -Set up your environment, load input data, and run your first simulation in minutes. - -[Get Started →](getting-started/) +

Overview

+

What SimPaths models and why — architecture, modules, and parameterisation.

+Explore → + + + +
+
- -
-⚙ - -### User Guide - -Single and multi-run simulations, the graphical interface, parameter editing, and uncertainty analysis. - -[View User Guide →](user-guide/) +

Getting Started

+

Set up your environment, load input data, and run your first simulation.

+Get Started → + + + +
+
- -
-💻 - -### Developer Guide - -JAS-mine architecture, SimPaths internals, and step-by-step how-to guides for extending the model. - -[Developer Guide →](developer-guide/) +

User Guide

+

Single and multi-run simulations, GUI, parameter editing, and uncertainty analysis.

+View Guide → + + + +
+
- -
-📚 - -### JAS-mine Reference - -Statistical packages, alignment and matching libraries, regression tools, and database utilities. - -[JAS-mine Reference →](jasmine-reference/) +

Developer Guide

+

JAS-mine architecture, SimPaths internals, and how-to guides for extending the model.

+Developer Guide → + + + +
+
- -
-📊 - -### Research & Validation - -Published papers, working papers, and model validation results. - -[Research →](research/) +

JAS-mine Reference

+

Statistical packages, alignment and matching libraries, regression tools, and database utilities.

+Reference → + + + +
+
+

Research & Validation

+

Published papers, working papers, and model validation results.

+Research → +
@@ -112,4 +106,4 @@ Published papers, working papers, and model validation results. !!! tip "New to SimPaths?" Start with the [Overview](overview/) to understand what the model does, then follow the [Getting Started](getting-started/) guide to run your first simulation. -For papers using SimPaths, see the [Research](research/) page. For European country variants, visit the [SimPathsEU](https://github.com/centreformicrosimulation/SimPaths) repository. +For papers using SimPaths, see the [Research](research/) page. From 950f2d1e1d09d865b0e1b49a27a4930dffd5dbe6 Mon Sep 17 00:00:00 2001 From: hk-2029 Date: Tue, 17 Mar 2026 13:48:10 +0000 Subject: [PATCH 2/4] docs: add animated S-curve logo and refine header styling --- documentation/wiki/assets/css/extra.css | 29 ++++++++++++++++++ documentation/wiki/assets/images/logo.svg | 36 +++++++++++++++++++++++ mkdocs.yml | 2 +- 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 documentation/wiki/assets/images/logo.svg diff --git a/documentation/wiki/assets/css/extra.css b/documentation/wiki/assets/css/extra.css index 86366873e..ef893ad19 100644 --- a/documentation/wiki/assets/css/extra.css +++ b/documentation/wiki/assets/css/extra.css @@ -146,6 +146,35 @@ box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(10,20,40,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); + height: 3rem; +} + +/* ── Logo ── */ +.md-header__button.md-logo { + padding: 0.3rem 0.4rem; + margin-right: 0.1rem; +} + +.md-header__button.md-logo img { + width: 26px; + height: 26px; + filter: drop-shadow(0 0 6px rgba(126,206,244,0.55)) drop-shadow(0 0 14px rgba(79,179,240,0.25)); + transition: filter 0.3s ease; +} + +.md-header__button.md-logo:hover img { + filter: drop-shadow(0 0 9px rgba(126,206,244,0.8)) drop-shadow(0 0 22px rgba(79,179,240,0.4)); +} + +/* ── Header title ── */ +.md-header__title { + font-size: 0.88rem !important; + font-weight: 600 !important; + letter-spacing: -0.01em; +} + +.md-header__title .md-header__topic { + align-items: center; } /* ── Tab bar ── */ diff --git a/documentation/wiki/assets/images/logo.svg b/documentation/wiki/assets/images/logo.svg new file mode 100644 index 000000000..9a68c0e43 --- /dev/null +++ b/documentation/wiki/assets/images/logo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/mkdocs.yml b/mkdocs.yml index 31873be04..76a189813 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -28,9 +28,9 @@ theme: icon: material/weather-sunny name: Switch to light mode font: false + logo: assets/images/logo.svg icon: repo: fontawesome/brands/github - logo: material/chart-timeline-variant-shimmer features: - navigation.tabs - navigation.tabs.sticky From d56057e2738d9f6af1a8b88b3fe65226b8f82f35 Mon Sep 17 00:00:00 2001 From: hk-2029 Date: Tue, 17 Mar 2026 15:37:22 +0000 Subject: [PATCH 3/4] docs: fix broken relative link in file-organisation.md causing strict build failure --- .../wiki/developer-guide/internals/file-organisation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/wiki/developer-guide/internals/file-organisation.md b/documentation/wiki/developer-guide/internals/file-organisation.md index 0720bb9d1..2bbfc1864 100644 --- a/documentation/wiki/developer-guide/internals/file-organisation.md +++ b/documentation/wiki/developer-guide/internals/file-organisation.md @@ -118,7 +118,7 @@ When IO is enabled, this package creates projected income paths for birth cohort CSV filenames follow the pattern `.csv`. With a single run the suffix is `1`; with multiple runs each run produces its own numbered file. -For a description of the variables in output CSV files, see `documentation/SimPaths_Variable_Codebook.xlsx`. For a description of each `reg_*`, `align_*`, and `scenario_*` input file, see [Model Parameterisation](../documentation/wiki/overview/parameterisation.md) on the website. +For a description of the variables in output CSV files, see `documentation/SimPaths_Variable_Codebook.xlsx`. For a description of each `reg_*`, `align_*`, and `scenario_*` input file, see [Model Parameterisation](../../overview/parameterisation.md) on the website. ## Setup-generated artifacts From 9a70c091c1e3fea4fc9219eb6aa0fea9eda65a31 Mon Sep 17 00:00:00 2001 From: hk-2029 Date: Tue, 17 Mar 2026 16:18:27 +0000 Subject: [PATCH 4/4] Revert "docs: fix broken relative link in file-organisation.md causing strict build failure" This reverts commit d56057e2738d9f6af1a8b88b3fe65226b8f82f35. --- .../wiki/developer-guide/internals/file-organisation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/wiki/developer-guide/internals/file-organisation.md b/documentation/wiki/developer-guide/internals/file-organisation.md index 2bbfc1864..0720bb9d1 100644 --- a/documentation/wiki/developer-guide/internals/file-organisation.md +++ b/documentation/wiki/developer-guide/internals/file-organisation.md @@ -118,7 +118,7 @@ When IO is enabled, this package creates projected income paths for birth cohort CSV filenames follow the pattern `.csv`. With a single run the suffix is `1`; with multiple runs each run produces its own numbered file. -For a description of the variables in output CSV files, see `documentation/SimPaths_Variable_Codebook.xlsx`. For a description of each `reg_*`, `align_*`, and `scenario_*` input file, see [Model Parameterisation](../../overview/parameterisation.md) on the website. +For a description of the variables in output CSV files, see `documentation/SimPaths_Variable_Codebook.xlsx`. For a description of each `reg_*`, `align_*`, and `scenario_*` input file, see [Model Parameterisation](../documentation/wiki/overview/parameterisation.md) on the website. ## Setup-generated artifacts