diff --git a/mkdocs.yml b/mkdocs.yml index 82fb95a0..67a3386b 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -89,6 +89,7 @@ nav: - Governance: about/governance/index.md - Team: about/team/index.md - Fiscal Sponsor: about/fiscal-sponsor/index.md + - Sponsorship: about/sponsorship/index.md - Guidelines: - Overview: about/guidelines/index.md - Articles: about/guidelines/articles/index.md diff --git a/pages/about/sponsorship/index.md b/pages/about/sponsorship/index.md index 27f1488b..82f9fbe9 100644 --- a/pages/about/sponsorship/index.md +++ b/pages/about/sponsorship/index.md @@ -6,7 +6,10 @@ description: > pathways. date: "2026-06-17" authors: ["OSL Team"] -template: main.html +template: single-sidebar.html +section_label: "Support OSL" +page_theme: sponsorship +hero_words: ["Sponsor", "Sustain", "Scale"] --- # Sponsorship diff --git a/pages/index.md b/pages/index.md index a5e80da5..12aa3a7c 100644 --- a/pages/index.md +++ b/pages/index.md @@ -1,8 +1,7 @@ --- title: Open Science Labs authors: - - Ivan Ogasawara - - Ever Vino + - OSL Team date: 2023-10-30 template: home.html partners: diff --git a/theme/blog-post.html b/theme/blog-post.html index b2a4883b..f19f50d6 100644 --- a/theme/blog-post.html +++ b/theme/blog-post.html @@ -1,39 +1,61 @@ -{% extends "main.html" %} +{% extends "base.html" %} -{% block content_inner %} +{% block content %} +{% set title = page.meta.get("title", page.title) %} +{% set slug = page.meta.get("slug") %} +{% set thumbnail = page.meta.get("thumbnail") %} -
-

- - {{ page.meta["title"] }} - -

+
+
+
+

Open Science Labs Blog

+

{{ title }}

- -
- - - - {{ ", ".join(page.meta["authors"]) if "authors" in page.meta else "" }} - - +
+ {% if "authors" in page.meta %} + + + {{ ", ".join(page.meta["authors"]) }} + + {% endif %} - {% if "date" in page.meta %} - - - - + {% if "date" in page.meta %} + + + + + {% endif %} +
+ + {% if show_tags and "tags" in page.meta %} +
+ {% for tag in page.meta["tags"] %} + {{ tag }} + {% endfor %} +
+ {% endif %} +
+ + {% if slug and thumbnail %} +
+ {{ title }} +
{% endif %} +
- -
- -
+ - {% if show_tags and "tags" in page.meta %} -
- {% for tag in page.meta["tags"] %} - {{ tag }} - {% endfor %} -
- {% endif %} -
- - -
-
- - {{ page.meta['title'] }} - -
-
- - -
- {{ page.content }} -
-
- -{# Related: show other blog pages #} -{% for nav_item in nav %} - {% if nav_item.title == "Blog" and nav_item.children %} -
- {% for sub_nav_item in nav_item.children if sub_nav_item.title != "main" %} -
- - {{ sub_nav_item.title }} - -

{{ sub_nav_item.title }}

-

{{ sub_nav_item.summary }}

- -
- {% endfor %} +
+ {{ page.content }}
- {% endif %} -{% endfor %} - -{% endblock content_inner %} +
+ +{% endblock content %} diff --git a/theme/css/base.css b/theme/css/base.css index d15fb77b..100fcf48 100644 --- a/theme/css/base.css +++ b/theme/css/base.css @@ -1,10 +1,38 @@ /* Reset & base layout */ +@font-face{ + font-family: "Metropolis"; + font-style: normal; + font-weight: 400; + src: url("../fonts/Metropolis-Regular.woff2") format("woff2"), + url("../fonts/Metropolis-Regular.woff") format("woff"); + font-display: swap; +} +@font-face{ + font-family: "Metropolis"; + font-style: normal; + font-weight: 600; + src: url("../fonts/Metropolis-SemiBold.woff2") format("woff2"), + url("../fonts/Metropolis-SemiBold.woff") format("woff"); + font-display: swap; +} +@font-face{ + font-family: "Metropolis"; + font-style: normal; + font-weight: 800; + src: url("../fonts/Metropolis-ExtraBold.woff2") format("woff2"), + url("../fonts/Metropolis-ExtraBold.woff") format("woff"); + font-display: swap; +} + * { box-sizing: border-box; -webkit-appearance: none; } html, body { min-height: 100%; } html { scroll-padding-top: 4.5rem; } body{ background: var(--bg); color: var(--fg); + font-family: "Metropolis", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-size: 1rem; + line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; @@ -24,10 +52,21 @@ body::before{ /* Typography */ a{ color: var(--brand); text-decoration: none; } a:hover{ color: var(--brand-2); } -h1,h2,h3,h4,h5,h6{ font-weight: 300; line-height: 1.35; margin: 15px 0 5px; } -h1{ font-size: 175%; font-weight: 400; } -h2{ font-size: 150%; } h3{ font-size: 130%; } h4{ font-size: 120%; } h5{ font-size: 110%; } h6{ font-size: 100%; } -p{ padding: .8rem 0 0 0; } +h1,h2,h3,h4,h5,h6{ + color: var(--heading); + font-weight: 800; + letter-spacing: -.025em; + line-height: 1.15; + margin: 1.6rem 0 .75rem; +} +h1{ font-size: clamp(2.15rem, 5vw, 4.2rem); } +h2{ font-size: clamp(1.55rem, 3vw, 2.35rem); } +h3{ font-size: clamp(1.22rem, 2vw, 1.55rem); } +h4{ font-size: 1.15rem; } +h5{ font-size: 1.05rem; } +h6{ font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; } +p{ margin: 0 0 1rem; padding: 0; } +strong{ font-weight: 800; color: color-mix(in oklab, var(--fg) 88%, var(--heading)); } /* Media */ img, svg{ max-width: 100%; height: auto; vertical-align: middle; } diff --git a/theme/css/blog.css b/theme/css/blog.css index 2cccce0d..4ca50a9c 100644 --- a/theme/css/blog.css +++ b/theme/css/blog.css @@ -42,17 +42,17 @@ .excerpt{ display: flex; /* keep thumbnail on top, body below */ flex-direction: column; - border: 1px solid rgba(255,255,255,.08); + border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: var(--radius, 16px); - background: rgba(255,255,255,.04); - box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.25)); + background: var(--surface, rgba(255,255,255,.04)); + box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,.25)); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .excerpt:hover{ transform: translateY(-2px); - border-color: rgba(255,255,255,.14); - background: rgba(255,255,255,.05); + border-color: color-mix(in oklab, var(--brand-strong, #3b82f6) 35%, var(--border)); + background: var(--surface-solid, rgba(255,255,255,.05)); } /* Thumbnail */ @@ -60,7 +60,7 @@ display: block; position: relative; aspect-ratio: 16 / 9; - background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); + background: var(--surface-muted); } .post-thumb img{ width: 100%; @@ -108,13 +108,13 @@ font-size: .8rem; padding: .25rem .5rem; border-radius: .5rem; - border: 1px solid rgba(255,255,255,.16); + border: 1px solid var(--border, rgba(255,255,255,.16)); color: var(--fg); text-decoration: none; } .post_tag:hover{ - background: rgba(255,255,255,.08); - border-color: rgba(255,255,255,.22); + background: var(--surface-muted, rgba(255,255,255,.08)); + border-color: var(--border-strong, rgba(255,255,255,.22)); } /* Description (clamp to keep cards even-ish) */ @@ -158,6 +158,155 @@ } /* ===== Blog post page ===== */ +.blog-article--feature{ + width: min(1120px, 100%); + margin: 0 auto; + --blog-accent: var(--brand-strong, #087fa8); + --blog-accent-rgb: 8, 127, 168; +} + +.blog-hero{ + overflow: hidden; + position: relative; + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); + gap: clamp(1.1rem, 3vw, 2rem); + align-items: stretch; + margin-bottom: clamp(1.2rem, 3vw, 2rem); + padding: clamp(1.1rem, 3vw, 1.45rem); + border: 1px solid var(--border); + border-radius: clamp(1.35rem, 4vw, 2.2rem); + background: + radial-gradient(circle at 14% 10%, rgba(255,170,0,.18), transparent 18rem), + radial-gradient(circle at 92% 20%, rgba(var(--blog-accent-rgb), .18), transparent 22rem), + linear-gradient(135deg, var(--surface), var(--surface-muted)); + box-shadow: var(--shadow-soft); +} + +.blog-hero::before{ + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background-image: + radial-gradient(circle at 16% 22%, rgba(var(--blog-accent-rgb), .28) 0 2px, transparent 2.8px), + radial-gradient(circle at 28% 70%, rgba(255,170,0,.28) 0 1.8px, transparent 2.6px), + radial-gradient(circle at 78% 18%, rgba(var(--blog-accent-rgb), .20) 0 2px, transparent 2.8px); + opacity: .7; +} + +.blog-hero > *{ + position: relative; + z-index: 1; +} + +.blog-hero__content{ + display: flex; + flex-direction: column; + justify-content: center; + padding: clamp(1rem, 3vw, 2rem); +} + +.blog-hero__kicker{ + display: inline-flex; + align-items: center; + gap: .5rem; + margin: 0 0 .8rem; + color: var(--blog-accent); + font-size: .78rem; + font-weight: 800; + letter-spacing: .12em; + text-transform: uppercase; +} + +.blog-hero__kicker::before{ + content: ""; + width: .55rem; + height: .55rem; + border-radius: 999px; + background: var(--blog-accent); + box-shadow: 0 0 0 6px rgba(var(--blog-accent-rgb), .16); +} + +.blog-hero h1{ + margin: 0; + font-size: clamp(2.1rem, 5vw, 4.25rem); + line-height: 1; +} + +.blog-hero .post_meta{ + margin: 1rem 0 0; +} + +.blog-hero .post_tags{ + margin-top: 1rem; +} + +.blog-hero__media{ + overflow: hidden; + min-height: 100%; + margin: 0; + border-radius: 1.45rem; + background: var(--surface-muted); +} + +.blog-hero__media img{ + display: block; + width: 100%; + height: 100%; + min-height: 320px; + margin: 0; + object-fit: cover; +} + +.blog-article__shell{ + display: grid; + grid-template-columns: 76px minmax(0, 820px); + gap: clamp(1rem, 3vw, 1.5rem); + justify-content: center; + align-items: start; +} + +.blog-share-panel{ + position: sticky; + top: 5.8rem; + display: grid; + gap: .45rem; + justify-items: center; + padding: .75rem .5rem; + border: 1px solid var(--border); + border-radius: 999px; + background: var(--surface); + box-shadow: var(--shadow-card); +} + +.blog-share-panel span{ + color: var(--muted); + font-size: .7rem; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; + writing-mode: vertical-rl; +} + +.blog-share-panel a{ + display: grid; + place-items: center; + width: 2rem; + height: 2rem; + border-radius: 999px; + color: var(--brand-strong); +} + +.blog-share-panel a:hover{ + background: var(--surface-muted); +} + +.blog-share-panel .icon{ + width: 1rem; + height: 1rem; +} + .blog-article .post-title { margin: 0 0 .25rem 0; } @@ -232,3 +381,59 @@ /* Reserve space to reduce CLS when dimensions unknown */ min-height: 1px; } + +@media (max-width: 900px){ + .blog-hero{ + grid-template-columns: 1fr; + } + + .blog-article__shell{ + grid-template-columns: 1fr; + } + + .blog-share-panel{ + position: static; + display: flex; + justify-content: flex-start; + width: fit-content; + border-radius: 999px; + } + + .blog-share-panel span{ + writing-mode: initial; + } +} + +/* Editorial redesign: sharper blog and index presentation */ +.blog-hero{ + border: 0; + border-radius: 0; + box-shadow: none; + background: + linear-gradient(90deg, var(--blog-accent) 0 .5rem, transparent .5rem), + linear-gradient(112deg, rgba(var(--blog-accent-rgb), .12) 0 34%, transparent 34.2%), + var(--surface-solid); +} + +.blog-hero__media{ + border-radius: 0; +} + +.blog-share-panel{ + border-radius: 0; + box-shadow: none; +} + +.excerpt{ + border-radius: 0; + box-shadow: none; +} + +.excerpt:hover{ + box-shadow: none; +} + +.post_tag, +.excerpt_more.button{ + border-radius: 0; +} diff --git a/theme/css/content.css b/theme/css/content.css index e2202885..a1bd2082 100644 --- a/theme/css/content.css +++ b/theme/css/content.css @@ -42,3 +42,997 @@ blockquote{ display: grid; place-items: center; } .to_top .icon { width: 24px; height: 24px; } + +/* ───────── Polished non-home page system ───────── */ +.osl-page{ + position: relative; + isolation: isolate; + --osl-accent: var(--brand-strong); + --osl-accent-rgb: 8, 127, 168; + --osl-accent-2: var(--brand-2); + --osl-accent-2-rgb: 138, 125, 255; + --osl-hero-start: #0f172a; + --osl-hero-mid: #173d60; + --osl-hero-end: #087fa8; + --osl-orbit: rgba(255,255,255,.18); +} + +.osl-page--theme-about{ + --osl-accent: #5cc8ff; + --osl-accent-rgb: 92, 200, 255; + --osl-accent-2: #8a7dff; + --osl-accent-2-rgb: 138, 125, 255; + --osl-hero-start: #111827; + --osl-hero-mid: #1d3b5b; + --osl-hero-end: #2457b8; +} + +.osl-page--theme-projects{ + --osl-accent: #ffaa00; + --osl-accent-rgb: 255, 170, 0; + --osl-accent-2: #5cc8ff; + --osl-accent-2-rgb: 92, 200, 255; + --osl-hero-start: #171923; + --osl-hero-mid: #423719; + --osl-hero-end: #9a5b00; +} + +.osl-page--theme-learning{ + --osl-accent: #20c997; + --osl-accent-rgb: 32, 201, 151; + --osl-accent-2: #5cc8ff; + --osl-accent-2-rgb: 92, 200, 255; + --osl-hero-start: #0f172a; + --osl-hero-mid: #10483f; + --osl-hero-end: #087f76; +} + +.osl-page--theme-partnership, +.osl-page--theme-sponsorship{ + --osl-accent: #ffbd3e; + --osl-accent-rgb: 255, 189, 62; + --osl-accent-2: #ff7a90; + --osl-accent-2-rgb: 255, 122, 144; + --osl-hero-start: #191724; + --osl-hero-mid: #51301c; + --osl-hero-end: #8b4d10; +} + +.osl-page--theme-opportunities{ + --osl-accent: #b794ff; + --osl-accent-rgb: 183, 148, 255; + --osl-accent-2: #5cc8ff; + --osl-accent-2-rgb: 92, 200, 255; + --osl-hero-start: #151426; + --osl-hero-mid: #38275e; + --osl-hero-end: #5f3dc4; +} + +.osl-page--theme-people{ + --osl-accent: #ff7a90; + --osl-accent-rgb: 255, 122, 144; + --osl-accent-2: #5cc8ff; + --osl-accent-2-rgb: 92, 200, 255; + --osl-hero-start: #171923; + --osl-hero-mid: #47304c; + --osl-hero-end: #8a4f7d; +} + +.osl-page-shell{ + width: min(1040px, 100%); + margin: 0 auto; +} + +.osl-page--directory .osl-page-shell, +.osl-page--events .osl-page-shell, +.osl-page--team .osl-page-shell{ + width: min(1120px, 100%); +} + +.osl-page-hero{ + overflow: hidden; + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(220px, .36fr); + gap: clamp(1rem, 4vw, 2.4rem); + align-items: center; + margin-bottom: clamp(1.2rem, 3vw, 2rem); + padding: clamp(2rem, 5vw, 3.6rem); + border: 1px solid var(--border); + border-radius: clamp(1.35rem, 4vw, 2.2rem); + color: #fff; + background: + radial-gradient(circle at 12% 20%, rgba(var(--osl-accent-rgb), .28), transparent 17rem), + radial-gradient(circle at 86% 18%, rgba(var(--osl-accent-2-rgb), .24), transparent 24rem), + radial-gradient(circle at 72% 86%, rgba(255,255,255,.10), transparent 16rem), + linear-gradient(135deg, var(--osl-hero-start) 0%, var(--osl-hero-mid) 52%, var(--osl-hero-end) 100%); + box-shadow: var(--shadow-soft); +} + +.osl-page-hero::before{ + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background-image: + radial-gradient(circle at 12% 24%, rgba(255,255,255,.85) 0 2px, transparent 2.8px), + radial-gradient(circle at 24% 62%, rgba(255,255,255,.50) 0 1.5px, transparent 2.2px), + radial-gradient(circle at 38% 34%, rgba(255,255,255,.58) 0 1.8px, transparent 2.5px), + radial-gradient(circle at 64% 22%, rgba(255,255,255,.64) 0 2px, transparent 2.8px), + radial-gradient(circle at 76% 68%, rgba(255,255,255,.42) 0 1.6px, transparent 2.4px), + linear-gradient(112deg, transparent 0 14%, rgba(255,255,255,.18) 14.2% 14.45%, transparent 14.7% 37%, rgba(255,255,255,.12) 37.2% 37.45%, transparent 37.7%), + linear-gradient(34deg, transparent 0 25%, rgba(255,255,255,.13) 25.2% 25.45%, transparent 25.7% 72%, rgba(255,255,255,.12) 72.2% 72.45%, transparent 72.7%); + opacity: .55; + mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 82%); +} + +.osl-page-hero::after{ + content: ""; + position: absolute; + right: clamp(1.2rem, 4vw, 3rem); + bottom: clamp(1rem, 3vw, 2.4rem); + width: clamp(5rem, 18vw, 11rem); + aspect-ratio: 1; + border: 1px solid rgba(255,255,255,.20); + border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%; + background: + radial-gradient(circle at 30% 30%, rgba(255,255,255,.92) 0 4px, transparent 4.8px), + radial-gradient(circle at 68% 34%, rgba(255,255,255,.68) 0 3px, transparent 3.8px), + radial-gradient(circle at 54% 72%, rgba(var(--osl-accent-rgb), .92) 0 5px, transparent 5.8px), + linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.035)); + box-shadow: + inset 0 0 0 1px rgba(255,255,255,.12), + 0 24px 70px rgba(0,0,0,.16); + opacity: .86; + transform: rotate(-10deg); +} + +.osl-page-hero__content{ + position: relative; + z-index: 1; + max-width: 820px; +} + +.osl-hero-system{ + position: relative; + z-index: 1; + min-height: 240px; +} + +.osl-hero-system__ring{ + position: absolute; + inset: 8% 2% 2% 0; + border: 1px solid rgba(255,255,255,.18); + border-radius: 44% 56% 52% 48% / 48% 42% 58% 52%; + background: + radial-gradient(circle at 32% 30%, rgba(255,255,255,.20), transparent 11rem), + radial-gradient(circle at 70% 68%, rgba(var(--osl-accent-rgb), .24), transparent 9rem); + box-shadow: + inset 0 0 0 1px rgba(255,255,255,.08), + 0 24px 80px rgba(0,0,0,.18); + transform: rotate(-7deg); +} + +.osl-hero-system__ring::before, +.osl-hero-system__ring::after{ + content: ""; + position: absolute; + inset: 18% 12%; + border: 1px dashed rgba(255,255,255,.20); + border-radius: inherit; +} + +.osl-hero-system__ring::after{ + inset: 35% 24%; + border-style: solid; + opacity: .68; + transform: rotate(20deg); +} + +.osl-hero-system__node{ + position: absolute; + width: .82rem; + height: .82rem; + border: 2px solid rgba(255,255,255,.92); + border-radius: 999px; + background: var(--osl-accent); + box-shadow: + 0 0 0 .45rem rgba(var(--osl-accent-rgb), .18), + 0 12px 28px rgba(0,0,0,.20); +} + +.osl-hero-system__node--one{ left: 24%; top: 24%; } +.osl-hero-system__node--two{ right: 20%; top: 36%; background: var(--osl-accent-2); } +.osl-hero-system__node--three{ left: 48%; bottom: 20%; } + +.osl-hero-system__label{ + position: absolute; + padding: .45rem .72rem; + border: 1px solid rgba(255,255,255,.16); + border-radius: 999px; + background: rgba(255,255,255,.12); + color: rgba(255,255,255,.92); + font-size: .78rem; + font-weight: 800; + letter-spacing: .04em; + text-transform: uppercase; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); +} + +.osl-hero-system__label--one{ left: 0; top: 10%; } +.osl-hero-system__label--two{ right: 0; top: 52%; } +.osl-hero-system__label--three{ left: 18%; bottom: 4%; } + +.osl-page-kicker, +.directory-eyebrow{ + display: inline-flex; + align-items: center; + gap: .5rem; + margin: 0 0 .8rem; + color: color-mix(in oklab, var(--osl-accent) 54%, #ffffff); + font-size: .78rem; + font-weight: 800; + letter-spacing: .12em; + line-height: 1.2; + text-transform: uppercase; +} + +.osl-page-kicker::before, +.directory-eyebrow::before{ + content: ""; + width: .55rem; + height: .55rem; + border-radius: 999px; + background: var(--osl-accent); + box-shadow: 0 0 0 6px rgba(var(--osl-accent-rgb), .16); +} + +.osl-page-kicker::after{ + content: ""; + width: 1.8rem; + height: .12rem; + border-radius: 999px; + background: linear-gradient(90deg, var(--osl-accent), transparent); +} + +.osl-page-hero h1{ + max-width: 880px; + margin: 0; + padding: 0; + color: #fff; + font-size: clamp(2.35rem, 6vw, 4.85rem); + font-weight: 800; + letter-spacing: -.065em; + line-height: .96; +} + +.osl-page-description{ + max-width: 760px; + margin: 1.1rem 0 0; + color: rgba(255,255,255,.84); + font-size: clamp(1.03rem, 1.6vw, 1.22rem); + line-height: 1.65; +} + +.osl-markdown{ + position: relative; + overflow: hidden; + color: var(--fg); + background: var(--surface); + border: 1px solid var(--border); + border-radius: clamp(1.2rem, 3vw, 1.8rem); + box-shadow: var(--shadow-card); + padding: clamp(1.25rem, 4vw, 2.65rem); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.osl-markdown::before{ + content: ""; + position: absolute; + inset: 0 auto auto clamp(1.1rem, 4vw, 2.3rem); + width: min(9rem, 42%); + height: .32rem; + border-radius: 0 0 999px 999px; + background: linear-gradient(90deg, var(--osl-accent), var(--osl-accent-2)); + opacity: .9; +} + +.osl-markdown > h1:first-child{ + display: none; +} + +.osl-markdown > .pt-5:first-child{ + display: none; +} + +.osl-markdown > :first-child{ + margin-top: 0; +} + +.osl-markdown > :last-child{ + margin-bottom: 0; +} + +.osl-markdown h2{ + margin-top: 2.25rem; + padding-top: 1.55rem; + border-top: 1px solid var(--border); +} + +.osl-markdown h2::before{ + content: ""; + display: inline-block; + width: .72rem; + height: .72rem; + margin-right: .55rem; + border-radius: 42% 58% 50% 50%; + background: linear-gradient(135deg, var(--osl-accent), var(--osl-accent-2)); + box-shadow: 0 0 0 5px rgba(var(--osl-accent-rgb), .12); + transform: translateY(-.08rem) rotate(-12deg); +} + +.osl-markdown h2:first-child, +.osl-markdown > h1:first-child + h2{ + margin-top: 0; + padding-top: 0; + border-top: 0; +} + +.osl-markdown h3{ + color: color-mix(in oklab, var(--heading) 88%, var(--osl-accent)); +} + +.osl-markdown p, +.osl-markdown li{ + color: color-mix(in oklab, var(--fg) 86%, var(--muted)); +} + +.osl-markdown p{ + font-size: 1.02rem; +} + +.osl-markdown ul, +.osl-markdown ol{ + margin: 1rem 0 1.25rem; + padding-left: 1.25rem; +} + +.osl-markdown li{ + margin: .45rem 0; + padding-left: .15rem; +} + +.osl-markdown a:not(.btn):not(.post_tag):not(.post-thumb):not(.excerpt_more):not(.icon-btn):not(.osl-inline-button){ + color: var(--osl-accent); + font-weight: 700; + text-decoration: underline; + text-decoration-color: color-mix(in oklab, var(--osl-accent) 30%, transparent); + text-underline-offset: .18em; +} + +.osl-markdown a:hover{ + text-decoration-color: currentColor; +} + +.osl-markdown .btn, +.osl-inline-button{ + display: inline-flex; + align-items: center; + justify-content: center; + gap: .45rem; + width: fit-content; + margin: .35rem .4rem .7rem 0; + padding: .68rem 1rem; + border: 1px solid color-mix(in oklab, var(--osl-accent) 35%, transparent); + border-radius: 999px; + background: linear-gradient(135deg, var(--osl-accent), var(--osl-accent-2)); + box-shadow: 0 14px 30px rgba(8,127,168,.18); + color: #fff !important; + font-weight: 800; + line-height: 1.1; + text-decoration: none !important; + transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; +} + +.osl-markdown .btn:hover, +.osl-inline-button:hover{ + transform: translateY(-1px); + box-shadow: 0 18px 38px rgba(8,127,168,.24); +} + +.osl-inline-button--subtle{ + background: var(--surface-muted); + border-color: var(--border); + box-shadow: none; + color: var(--osl-accent) !important; +} + +.osl-inline-button--subtle:hover{ + border-color: color-mix(in oklab, var(--osl-accent) 38%, var(--border)); + box-shadow: 0 12px 28px rgba(15,23,42,.08); +} + +.osl-markdown img{ + display: block; + max-width: 100%; + margin: 1.4rem auto; + border-radius: 1.1rem; + box-shadow: 0 12px 34px rgba(15,23,42,.10); +} + +.osl-markdown blockquote{ + margin: 1.4rem 0; + padding: 1rem 1.2rem; + border: 1px solid var(--border); + border-left: 5px solid var(--osl-accent); + border-radius: 1rem; + background: var(--surface-muted); + color: var(--fg); +} + +.osl-markdown table{ + overflow: hidden; + border-radius: 1rem; + box-shadow: 0 0 0 1px var(--border); +} + +.osl-markdown .post-grid{ + margin: 1rem 0 0; + padding: 0; +} + +.osl-markdown .blog-index > .blog-title{ + display: none; +} + +.osl-markdown .post-grid li{ + margin: 0; + padding: 0; +} + +/* Sidebar documentation pages */ +.osl-page-layout{ + display: grid; + grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); + gap: clamp(1rem, 2.5vw, 1.5rem); + align-items: start; +} + +.osl-side-nav{ + position: sticky; + top: 5.8rem; + display: grid; + gap: .35rem; + max-height: calc(100vh - 7rem); + overflow: auto; + padding: .9rem; + border: 1px solid var(--border); + border-radius: 1.25rem; + background: var(--surface); + box-shadow: var(--shadow-card); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.osl-side-nav__title{ + margin: 0 0 .35rem; + padding: 0 .55rem .55rem; + border-bottom: 1px solid var(--border); + color: var(--muted); + font-size: .76rem; + font-weight: 800; + letter-spacing: .1em; + text-transform: uppercase; +} + +.osl-side-nav nav, +.osl-side-nav__group{ + display: grid; + gap: .18rem; +} + +.osl-side-nav__group{ + margin-top: .25rem; +} + +.osl-side-nav__group-title{ + padding: .65rem .65rem .25rem; + color: var(--heading); + font-size: .82rem; + font-weight: 800; +} + +.osl-side-nav a{ + display: block; + padding: .56rem .68rem; + border-radius: .8rem; + color: color-mix(in oklab, var(--fg) 78%, var(--muted)); + font-size: .92rem; + font-weight: 700; + line-height: 1.25; +} + +.osl-side-nav a:hover, +.osl-side-nav a.active{ + background: var(--surface-muted); + color: var(--osl-accent); +} + +/* Directory sections */ +.directory-heading{ + margin: clamp(1.35rem, 4vw, 2.6rem) 0 1rem; +} + +.directory-heading--inside{ + margin-top: 1rem; +} + +.directory-heading .directory-eyebrow{ + color: var(--osl-accent); +} + +.directory-heading h2{ + margin: 0; + padding: 0; + border: 0; +} + +.project-grid, +.event-grid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); + gap: 1rem; +} + +.project-card, +.event-card, +.empty-state{ + overflow: hidden; + position: relative; + border: 1px solid var(--border); + border-radius: 1.35rem; + background: var(--surface); + box-shadow: var(--shadow-card); +} + +.project-card::before, +.event-card::before, +.empty-state::before{ + content: ""; + position: absolute; + inset: 0 0 auto; + height: .28rem; + background: linear-gradient(90deg, var(--osl-accent), var(--osl-accent-2)); + opacity: .86; +} + +.project-card{ + display: flex; + flex-direction: column; + min-height: 100%; + padding: 1.15rem; + transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; +} + +.project-card:hover, +.event-card:hover{ + transform: translateY(-2px); + border-color: color-mix(in oklab, var(--osl-accent) 38%, var(--border)); + box-shadow: 0 22px 52px rgba(15,23,42,.12); +} + +.project-card__top{ + display: grid; + gap: .7rem; +} + +.project-card h3{ + margin: 0; + font-size: 1.35rem; +} + +.project-card h3 a{ + color: var(--heading); +} + +.project-card h3 a:hover{ + color: var(--osl-accent); +} + +.project-badge{ + width: fit-content; + padding: .32rem .62rem; + border: 1px solid var(--border); + border-radius: 999px; + background: var(--surface-muted); + color: var(--osl-accent); + font-size: .72rem; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} + +.project-badge--incubated{ + background: var(--surface-warm); + color: #9a5b00; +} + +html[data-mode="dim"] .project-badge--incubated{ + color: #ffd166; +} + +.project-card__description{ + margin: .85rem 0 1.1rem; + color: color-mix(in oklab, var(--fg) 82%, var(--muted)); +} + +.project-meta{ + display: grid; + gap: .65rem; + margin: auto 0 1rem; +} + +.project-meta div{ + display: grid; + gap: .12rem; +} + +.project-meta dt{ + color: var(--muted); + font-size: .72rem; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} + +.project-meta dd{ + margin: 0; + color: var(--fg); + font-weight: 700; +} + +.project-card__footer{ + display: flex; + justify-content: flex-start; +} + +/* Events */ +.event-section{ + margin-top: clamp(1.4rem, 4vw, 2.8rem); +} + +.event-card{ + display: grid; + grid-template-rows: auto 1fr; + transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; +} + +.event-card__media{ + display: grid; + min-height: 180px; + background: + linear-gradient(135deg, color-mix(in oklab, var(--osl-accent) 12%, transparent), transparent), + var(--surface-muted); +} + +.event-card__media a{ + display: grid; +} + +.event-card__media img{ + width: 100%; + height: 100%; + min-height: 180px; + max-height: 250px; + object-fit: cover; +} + +.event-card__body{ + display: flex; + flex-direction: column; + padding: 1.15rem; +} + +.event-card__date{ + margin: 0 0 .45rem; + color: var(--osl-accent); + font-size: .82rem; + font-weight: 800; + letter-spacing: .04em; + text-transform: uppercase; +} + +.event-card h3{ + margin: 0 0 .55rem; + font-size: 1.3rem; +} + +.event-card__body p:not(.event-card__date){ + color: color-mix(in oklab, var(--fg) 84%, var(--muted)); +} + +.event-card__body .osl-inline-button{ + margin-top: auto; +} + +.empty-state{ + padding: clamp(1.25rem, 3vw, 2rem); + background: + radial-gradient(circle at 10% 0%, color-mix(in oklab, var(--osl-accent) 14%, transparent), transparent 16rem), + var(--surface); +} + +.empty-state h3{ + margin-top: 0; +} + +@media (max-width: 900px){ + .osl-page-hero{ + grid-template-columns: 1fr; + } + + .osl-hero-system{ + display: none; + } + + .osl-page-layout{ + grid-template-columns: 1fr; + } + + .osl-side-nav{ + position: static; + max-height: none; + } +} + +@media (max-width: 640px){ + .content-inner{ + padding-top: 1.2rem; + } + + .osl-page-hero{ + padding: 1.45rem; + } + + .osl-page-hero::after{ + display: none; + } + + .osl-markdown{ + padding: 1.1rem; + } +} + +/* ───────── Editorial redesign override: sharper, more institutional ───────── */ +.osl-page{ + margin-inline: calc(50% - 50vw); + padding-inline: max(1.25rem, calc((100vw - 1180px) / 2)); +} + +.osl-page-shell, +.osl-page--directory .osl-page-shell, +.osl-page--events .osl-page-shell, +.osl-page--team .osl-page-shell{ + width: min(1180px, 100%); +} + +.osl-page-hero{ + min-height: clamp(350px, 45vw, 520px); + border: 0; + border-radius: 0; + background: + linear-gradient(90deg, var(--osl-accent) 0 .5rem, transparent .5rem), + linear-gradient(112deg, rgba(var(--osl-accent-rgb), .14) 0 34%, transparent 34.2%), + linear-gradient(135deg, var(--surface-solid) 0%, color-mix(in oklab, var(--surface-solid) 82%, var(--surface-muted)) 100%); + box-shadow: none; + color: var(--fg); +} + +html[data-mode="dim"] .osl-page-hero{ + background: + linear-gradient(90deg, var(--osl-accent) 0 .5rem, transparent .5rem), + linear-gradient(112deg, rgba(var(--osl-accent-rgb), .18) 0 34%, transparent 34.2%), + linear-gradient(135deg, #10141d 0%, #151b28 100%); +} + +.osl-page-hero::before{ + background-image: + linear-gradient(90deg, rgba(var(--osl-accent-rgb), .25) 0 1px, transparent 1px), + linear-gradient(180deg, rgba(var(--osl-accent-rgb), .14) 0 1px, transparent 1px); + background-size: 72px 72px; + mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.52) 35%, transparent 96%); + opacity: .52; +} + +.osl-page-hero::after{ + right: 0; + bottom: 0; + width: clamp(9rem, 22vw, 18rem); + height: clamp(9rem, 22vw, 18rem); + border: 0; + border-radius: 0; + background: linear-gradient(135deg, transparent 50%, rgba(var(--osl-accent-rgb), .22) 50%); + box-shadow: none; + opacity: 1; + transform: none; +} + +.osl-page-kicker{ + color: var(--osl-accent); +} + +.osl-page-kicker::before{ + width: 2.1rem; + height: .16rem; + border-radius: 0; + box-shadow: none; +} + +.osl-page-kicker::after{ + display: none; +} + +.osl-page-hero h1{ + max-width: 780px; + color: var(--heading); + font-size: clamp(3rem, 7.2vw, 6.8rem); + letter-spacing: -.075em; +} + +.osl-page-description{ + max-width: 680px; + color: color-mix(in oklab, var(--fg) 80%, var(--muted)); + font-size: clamp(1.08rem, 1.7vw, 1.28rem); +} + +.osl-hero-system{ + align-self: stretch; + display: grid; + align-content: end; + min-height: 0; + padding: 0 0 0 clamp(1rem, 3vw, 2rem); + border-left: 1px solid var(--border); + counter-reset: hero-step; +} + +.osl-hero-system::before{ + content: "OSL pathway"; + margin-bottom: 1rem; + color: var(--muted); + font-size: .76rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; +} + +.osl-hero-system__ring, +.osl-hero-system__node{ + display: none; +} + +.osl-hero-system__label{ + position: static; + display: grid; + grid-template-columns: 3.1rem 1fr; + gap: 1rem; + align-items: center; + padding: 1rem 0; + border: 0; + border-top: 1px solid var(--border); + border-radius: 0; + background: transparent; + color: var(--heading); + font-size: clamp(.95rem, 1.2vw, 1.08rem); + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +.osl-hero-system__label::before{ + counter-increment: hero-step; + content: "0" counter(hero-step); + color: var(--osl-accent); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: .86rem; +} + +.osl-markdown{ + overflow: visible; + padding: clamp(1.5rem, 4vw, 3.2rem) 0; + border: 0; + border-top: 1px solid var(--border-strong); + border-radius: 0; + background: transparent; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +.osl-markdown::before{ + display: none; +} + +.osl-page-layout{ + grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); + gap: clamp(1.5rem, 4vw, 3.2rem); + border-top: 1px solid var(--border-strong); + padding-top: clamp(1.5rem, 4vw, 3.2rem); +} + +.osl-page-layout .osl-markdown{ + padding-top: 0; + border-top: 0; +} + +.osl-side-nav{ + padding: 0 0 0 1rem; + border: 0; + border-left: 4px solid var(--osl-accent); + border-radius: 0; + background: transparent; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +.osl-side-nav__title{ + padding-inline: 0; +} + +.osl-side-nav a{ + border-radius: 0; +} + +.osl-side-nav a:hover, +.osl-side-nav a.active{ + background: transparent; + box-shadow: inset 3px 0 0 var(--osl-accent); +} + +.project-card, +.event-card, +.empty-state{ + border-radius: 0; + background: var(--surface-solid); + box-shadow: none; +} + +.project-card::before, +.event-card::before, +.empty-state::before{ + inset: 0 auto 0 0; + width: .36rem; + height: auto; +} + +.project-card, +.event-card{ + transition: transform .18s ease, border-color .18s ease; +} + +.project-card:hover, +.event-card:hover{ + box-shadow: none; +} + +.event-card__media img{ + max-height: 300px; +} + +@media (max-width: 900px){ + .osl-page{ + margin-inline: 0; + padding-inline: 0; + } +} + +@media (max-width: 640px){ + .osl-page-hero{ + min-height: 0; + } + + .osl-markdown{ + padding: 1.25rem 0; + } +} diff --git a/theme/css/home.css b/theme/css/home.css index cae8ab4a..b4500d4f 100644 --- a/theme/css/home.css +++ b/theme/css/home.css @@ -1,169 +1,524 @@ -/* ---------- Hero ---------- */ +/* Home page — editorial, sharp, foundation-style layout */ +.home-editorial{ + --home-accent: #ffaa00; + --home-accent-2: #087fa8; + --home-ink: var(--heading, #0f172a); + --home-text: color-mix(in oklab, var(--fg) 82%, var(--muted)); + --home-line: var(--border-strong, rgba(15,23,42,.16)); + --home-paper: var(--surface-solid, #fff); + --home-soft: var(--surface-muted, #eef7fb); + + margin-inline: calc(50% - 50vw); + padding-inline: max(1.25rem, calc((100vw - 1180px) / 2)); + color: var(--home-text); +} + +.home-editorial a{ + text-decoration: none; +} + +.home-kicker{ + display: inline-flex; + align-items: center; + gap: .7rem; + margin: 0 0 1rem; + color: var(--home-accent-2); + font-size: .78rem; + font-weight: 800; + letter-spacing: .14em; + line-height: 1.2; + text-transform: uppercase; +} + +.home-kicker::before{ + content: ""; + width: 2.25rem; + height: .16rem; + background: var(--home-accent); +} + .home-hero{ position: relative; isolation: isolate; - background-image: - var(--hero-overlay, linear-gradient(to bottom right, rgba(0,0,0,.55), rgba(0,0,0,.35))), + display: grid; + grid-template-columns: 1fr; + min-height: clamp(340px, 44vh, 470px); + border-top: 1px solid var(--home-line); + border-bottom: 1px solid var(--home-line); + background: + linear-gradient(90deg, var(--home-accent) 0 .55rem, transparent .55rem), + linear-gradient(90deg, rgba(8,19,32,.90) 0%, rgba(8,19,32,.76) 46%, rgba(8,19,32,.48) 72%, rgba(8,19,32,.34) 100%), var(--hero-image); - background-size: cover; background-position: center; - color: #fff; - border-radius: var(--radius, 12px); - overflow: hidden; - margin-top: 1rem; + background-size: cover; } -[data-bs-theme="light"] .home-hero{ - --hero-overlay: linear-gradient(to bottom right, rgba(0,0,0,.55), rgba(0,0,0,.30)); + +.home-hero::before{ + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + background-image: + linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px), + linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px); + background-size: 80px 80px; + mask-image: linear-gradient(90deg, rgba(0,0,0,.48), transparent 72%); } -[data-bs-theme="dark"] .home-hero{ - --hero-overlay: linear-gradient(to bottom right, rgba(0,0,0,.60), rgba(0,0,0,.45)); + +.home-hero__copy{ + position: relative; + z-index: 1; + align-self: center; + max-width: 880px; + padding: + clamp(3rem, 7vw, 6rem) + clamp(1.25rem, 5vw, 4rem) + clamp(3rem, 7vw, 6rem) + clamp(1.75rem, 4vw, 3.5rem); } -.home-hero .eyebrow{ - letter-spacing: .08em; - text-transform: uppercase; - opacity: .85; + +.home-hero .home-kicker{ + color: color-mix(in oklab, var(--home-accent) 65%, #fff); } + .home-hero h1{ + max-width: 820px; + margin: 0; + color: #fff; + font-size: clamp(2.55rem, 5.7vw, 5.2rem); + font-weight: 800; + letter-spacing: -.08em; + line-height: .93; text-wrap: balance; } -.home-hero .lead{ - max-width: 52ch; - opacity: .9; + +.home-hero__lead{ + max-width: 650px; + margin: 1.5rem 0 0; + color: rgba(255,255,255,.88); + font-size: clamp(1.08rem, 1.6vw, 1.32rem); + line-height: 1.7; +} + +.home-actions{ + display: flex; + flex-wrap: wrap; + gap: .8rem; + margin-top: 2rem; +} + +.home-button{ + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 3.05rem; + padding: .85rem 1.1rem; + border: 1px solid var(--home-line); + color: var(--home-ink); + font-weight: 800; + line-height: 1.1; + transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; +} + +.home-button:hover{ + transform: translateY(-1px); +} + +.home-button--primary{ + border-color: var(--home-accent-2); + background: var(--home-accent-2); + color: #fff; +} + +.home-button--primary:hover{ + border-color: var(--home-accent); + background: var(--home-accent); + color: #111827; +} + +.home-button--secondary{ + background: transparent; +} + +.home-button--secondary:hover{ + border-color: var(--home-accent-2); + color: var(--home-accent-2); +} + +.home-hero .home-button--secondary{ + border-color: rgba(255,255,255,.42); + color: #fff; +} + +.home-hero .home-button--secondary:hover{ + border-color: var(--home-accent); + color: var(--home-accent); } -.hero-bullets{ - list-style: none; padding: 0; margin: 0; - display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; - opacity: .95; + +.home-facts{ + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + border-bottom: 1px solid var(--home-line); } -.hero-bullets .dot{ - display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; - background: var(--brand, #4ea1ff); margin-right: .5rem; - transform: translateY(-.1rem); + +.home-fact{ + padding: clamp(1.25rem, 3vw, 2rem); + border-right: 1px solid var(--home-line); + background: var(--home-paper); } -/* ---------- Cards / tiles ---------- */ -.home-card{ - background: var(--surface, rgba(255,255,255,.06)); - border: 1px solid var(--card-border, rgba(255,255,255,.12)); - border-radius: var(--radius, 12px); - padding: 1.25rem 1.25rem; +.home-fact:last-child{ + border-right: 0; } -[data-bs-theme="light"] .home-card{ - --surface: #fff; - --card-border: rgba(0,0,0,.08); + +.home-fact strong{ + display: block; + color: var(--home-ink); + font-size: clamp(2rem, 4vw, 3.6rem); + font-weight: 800; + letter-spacing: -.05em; + line-height: 1; } -.home-tile{ + +.home-fact span{ display: block; - text-decoration: none; + margin-top: .55rem; + color: var(--muted); + font-size: .86rem; + font-weight: 800; + letter-spacing: .06em; + text-transform: uppercase; +} + +.home-statement, +.home-focus, +.home-partners, +.home-cta{ + padding-block: clamp(3rem, 7vw, 6rem); + border-bottom: 1px solid var(--home-line); +} + +.home-statement{ + display: grid; + grid-template-columns: minmax(0, .95fr) minmax(280px, .65fr); + gap: clamp(1.5rem, 5vw, 5rem); + align-items: start; +} + +.home-section-copy{ + display: grid; + align-content: start; +} + +.home-statement h2, +.home-section-heading h2, +.home-feature-row h2, +.home-split h2, +.home-cta h2{ + margin: 0; + color: var(--home-ink); + font-size: clamp(2.2rem, 5vw, 4.6rem); + font-weight: 800; + letter-spacing: -.065em; + line-height: .98; +} + +.home-feature-row__content > p:not(.home-kicker), +.home-split p:not(.home-kicker){ + margin: 0; + color: var(--home-text); + font-size: clamp(1.05rem, 1.55vw, 1.25rem); + line-height: 1.8; +} + +.home-section-heading{ + display: grid; + grid-template-columns: minmax(0, .75fr) minmax(280px, .5fr); + gap: clamp(1.5rem, 5vw, 5rem); + align-items: stretch; + margin-bottom: clamp(1.8rem, 4vw, 3rem); +} + +.home-feature-row{ + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(260px, .66fr); + gap: clamp(1.5rem, 5vw, 5rem); + align-items: stretch; +} + +.home-feature-row--image-left{ + grid-template-columns: minmax(260px, .66fr) minmax(0, 1fr); +} + +.home-feature-row__content{ + align-self: center; +} + +.home-feature-row__image{ + min-height: clamp(260px, 30vw, 400px); + border-top: 1px solid var(--home-line); + border-right: .45rem solid var(--home-accent); + border-bottom: 1px solid var(--home-line); + background: + linear-gradient(135deg, color-mix(in oklab, var(--home-accent-2) 16%, transparent), transparent), + var(--section-image); + background-color: var(--home-soft); + background-position: center; + background-repeat: no-repeat; + background-size: min(78%, 360px) auto; +} + +.home-feature-row--image-left .home-feature-row__image{ + border-right: 0; + border-left: .45rem solid var(--home-accent); +} + +.home-focus-list{ + border-top: 1px solid var(--home-line); +} + +.home-focus-item{ + display: grid; + grid-template-columns: 6rem minmax(0, 1fr); + gap: clamp(1rem, 4vw, 3rem); + padding: clamp(1.25rem, 3vw, 2.1rem) 0; + border-bottom: 1px solid var(--home-line); color: inherit; - border-radius: var(--radius, 12px); - border: 1px solid var(--card-border, rgba(255,255,255,.12)); - background: var(--surface, rgba(255,255,255,.06)); - transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; -} -.home-tile:hover{ - transform: translateY(-2px); - box-shadow: 0 10px 24px rgba(0,0,0,.15); - border-color: var(--brand, #4ea1ff); -} -.home-tile .tile-body{ padding: 1.25rem 1.25rem; } - -/* ---------- Section title ---------- */ -.section-title{ - margin-bottom: .25rem; -} - -/* ---------- Logo grid ---------- */ -.logo-grid{ - --cols: 6; - list-style: none; padding: 0; margin: 0; - display: grid; gap: 1rem; - grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); -} -@media (max-width: 1200px){ .logo-grid{ --cols: 5; } } -@media (max-width: 992px){ .logo-grid{ --cols: 4; } } -@media (max-width: 768px){ .logo-grid{ --cols: 3; } } -@media (max-width: 576px){ .logo-grid{ --cols: 2; } } - -.logo-item{ - border: 1px solid var(--card-border, rgba(255,255,255,.12)); - background: var(--surface, rgba(255,255,255,.04)); - border-radius: var(--radius, 12px); - padding: .75rem .75rem 1rem; - text-align: center; - transition: transform .12s ease, border-color .12s ease; } -.logo-item:hover{ - transform: translateY(-2px); - border-color: var(--brand, #4ea1ff); + +.home-focus-item:hover{ + color: inherit; } -.logo-item img{ - max-width: 100%; - max-height: 52px; + +.home-focus-item__number{ + color: var(--home-accent-2); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-weight: 800; +} + +.home-focus-item__body{ + display: grid; + grid-template-columns: minmax(220px, .35fr) minmax(0, .65fr); + gap: clamp(1rem, 4vw, 3rem); + align-items: baseline; +} + +.home-focus-item strong{ + color: var(--home-ink); + font-size: clamp(1.6rem, 3vw, 2.5rem); + letter-spacing: -.045em; +} + +.home-focus-item:hover strong{ + color: var(--home-accent-2); +} + +.home-focus-item__body span{ + color: var(--home-text); + font-size: 1.05rem; + line-height: 1.65; +} + +.home-split{ + display: grid; + grid-template-columns: minmax(260px, .66fr) minmax(0, 1fr); + border-bottom: 1px solid var(--home-line); +} + +.home-split__image{ + min-height: clamp(260px, 30vw, 400px); + border-left: .45rem solid var(--home-accent); + background: + linear-gradient(135deg, color-mix(in oklab, var(--home-accent-2) 18%, transparent), transparent), + var(--split-image); + background-color: var(--home-soft); + background-position: center; + background-repeat: no-repeat; + background-size: min(78%, 360px) auto; + border-right: 1px solid var(--home-line); +} + +.home-split__content{ + align-self: center; + padding: clamp(2rem, 6vw, 5rem); +} + +.home-link{ + display: inline-flex; + margin-top: 1.25rem; + color: var(--home-accent-2); + font-weight: 800; + text-decoration: underline; + text-decoration-thickness: .12em; + text-underline-offset: .25em; +} + +.home-logo-grid{ + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + margin: 0; + padding: 0; + border-top: 1px solid var(--home-line); + border-left: 1px solid var(--home-line); + list-style: none; +} + +.home-logo-grid li{ + min-height: 150px; + border-right: 1px solid var(--home-line); + border-bottom: 1px solid var(--home-line); + background: var(--home-paper); +} + +.home-logo-grid a{ + display: grid; + height: 100%; + align-content: center; + justify-items: center; + gap: .85rem; + padding: 1.1rem; + color: var(--home-text); +} + +.home-logo-grid img{ + max-width: min(150px, 80%); + max-height: 66px; + margin: 0; object-fit: contain; filter: saturate(.95); } -.logo-caption{ - display: block; - font-size: .85rem; - opacity: .8; - margin-top: .35rem; + +.home-logo-grid span{ + color: var(--muted); + font-size: .78rem; + font-weight: 800; + letter-spacing: .06em; + text-align: center; + text-transform: uppercase; } -/* ---------- CTA banner ---------- */ -.cta-banner{ - display: flex; align-items: center; justify-content: space-between; - gap: 1rem; flex-wrap: wrap; - background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); - border: 1px solid var(--card-border, rgba(255,255,255,.12)); - border-radius: var(--radius, 12px); - padding: 1.25rem 1.25rem; +.home-cta{ + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 2rem; + align-items: center; + margin-bottom: clamp(2rem, 5vw, 4rem); + padding-inline: clamp(1.25rem, 4vw, 3rem); + background: + linear-gradient(90deg, var(--home-accent) 0 .55rem, transparent .55rem), + #10141d; } -[data-bs-theme="light"] .cta-banner{ - background: linear-gradient(180deg, #ffffff, #fafafa); + +.home-cta h2{ + max-width: 820px; + color: #fff; } -/* ---------- Fix “Back to top” button shape (site-wide safe) ---------- */ +.home-cta .home-kicker{ + color: color-mix(in oklab, var(--home-accent) 60%, #fff); +} + +.home-cta .home-button--secondary{ + border-color: rgba(255,255,255,.26); + color: #fff; +} + +/* Back-to-top only: keep functional, not part of page layout language. */ .to_top{ - width: 48px; height: 48px; - border-radius: 50%; - display: grid; place-items: center; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - background: rgba(0,0,0,.35); - box-shadow: 0 6px 20px rgba(0,0,0,.25); -} -[data-bs-theme="light"] .to_top{ background: rgba(255,255,255,.85); } + width: 48px; + height: 48px; + display: grid; + place-items: center; +} .to_top .icon{ width: 22px; height: 22px; } -/* ===================== Light-mode contrast boost ===================== */ -/* Stronger borders, solid white surfaces, and a subtle elevation */ -[data-bs-theme="light"] .home-card, -[data-bs-theme="light"] .home-tile, -[data-bs-theme="light"] .logo-item, -[data-bs-theme="light"] .cta-banner{ - --surface: #ffffff; - --card-border: rgba(0,0,0,.14); /* was ~.08 */ - background-color: #ffffff; - border-color: rgba(0,0,0,.14); - box-shadow: 0 2px 8px rgba(0,0,0,.06); -} - -/* Hover elevation + clearer edge */ -[data-bs-theme="light"] .home-tile:hover, -[data-bs-theme="light"] .home-card:hover, -[data-bs-theme="light"] .logo-item:hover{ - box-shadow: 0 10px 24px rgba(0,0,0,.12); - border-color: rgba(0,0,0,.22); -} - -/* Type color tweaks for better legibility on white */ -[data-bs-theme="light"] .section-title{ color:#111827; } /* near-black */ -[data-bs-theme="light"] .home-card, -[data-bs-theme="light"] .home-tile .tile-body{ color:#24292f; } /* body text */ -[data-bs-theme="light"] .cta-banner{ - background: linear-gradient(180deg, #ffffff, #f7f7f8); /* more contrast */ -} - -/* (optional) tone the “secondary” copy up a bit only inside home sections */ -[data-bs-theme="light"] section .text-secondary{ color:#4b5563 !important; } +html[data-mode="dim"] .home-editorial, +[data-bs-theme="dark"] .home-editorial{ + --home-paper: #10141d; + --home-soft: rgba(255,255,255,.06); + --home-line: rgba(255,255,255,.14); +} + +html[data-mode="dim"] .home-logo-grid img, +[data-bs-theme="dark"] .home-logo-grid img{ + filter: saturate(.95) brightness(1.12); +} + +@media (max-width: 1000px){ + .home-hero, + .home-statement, + .home-section-heading, + .home-split, + .home-cta{ + grid-template-columns: 1fr; + } + + .home-hero__copy{ + padding-right: 0; + } + + .home-feature-row__content{ + order: 1; + } + + .home-feature-row__image{ + order: 2; + } + + .home-facts{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .home-fact:nth-child(even){ + border-right: 0; + } + + .home-split__image{ + border-right: 0; + border-bottom: 1px solid var(--home-line); + } + + .home-logo-grid{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 680px){ + .home-editorial{ + margin-inline: 0; + padding-inline: 0; + } + + .home-hero{ + min-height: 0; + } + + .home-hero__copy, + .home-statement, + .home-focus, + .home-partners, + .home-cta{ + padding-inline: 1rem; + } + + .home-focus-item, + .home-focus-item__body{ + grid-template-columns: 1fr; + gap: .7rem; + } + + .home-facts, + .home-logo-grid{ + grid-template-columns: 1fr; + } + + .home-fact, + .home-fact:nth-child(2){ + border-right: 0; + } + + .home-cta .home-actions{ + width: 100%; + } +} diff --git a/theme/css/partners.css b/theme/css/partners.css index 3a148237..6429f643 100644 --- a/theme/css/partners.css +++ b/theme/css/partners.css @@ -2,9 +2,9 @@ :root{ --pc-text: var(--fg, #e8eaf0); - --pc-bg: rgba(16,18,27,.6); - --pc-border: rgba(255,255,255,.12); - --pc-hover: rgba(255,255,255,.06); + --pc-bg: var(--surface, rgba(16,18,27,.6)); + --pc-border: var(--border, rgba(255,255,255,.12)); + --pc-hover: var(--surface-muted, rgba(255,255,255,.06)); } [data-bs-theme="light"]{ --pc-text: #111827; @@ -16,17 +16,17 @@ .partners-grid .partner-card{ background: var(--pc-bg); border: 1px solid var(--pc-border); - border-radius: 1rem; + border-radius: 1.35rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - box-shadow: 0 10px 24px rgba(0,0,0,.08); + box-shadow: var(--shadow-card, 0 10px 24px rgba(0,0,0,.08)); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; position: relative; } .partners-grid .partner-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.16); - border-color: color-mix(in oklab, var(--pc-border) 60%, var(--brand, #3b82f6)); + border-color: color-mix(in oklab, var(--pc-border) 60%, var(--osl-accent, var(--brand, #3b82f6))); } .partners-grid .partner-body{ @@ -62,7 +62,7 @@ } .partners-grid .icon-btn:hover{ background: var(--pc-hover); - border-color: color-mix(in oklab, var(--_bd) 60%, var(--brand, #3b82f6)); + border-color: color-mix(in oklab, var(--_bd) 60%, var(--osl-accent, var(--brand, #3b82f6))); } .partners-grid .icon-btn:active{ transform: translateY(1px); } @@ -74,7 +74,7 @@ display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed var(--pc-border); background: color-mix(in oklab, var(--pc-bg) 92%, transparent); - border-top-left-radius: 1rem; border-top-right-radius: 1rem; + border-top-left-radius: 1.35rem; border-top-right-radius: 1.35rem; } /* Logos: clamp both height and width so tall/wide marks don’t dominate */ @@ -82,6 +82,9 @@ display: block; object-fit: contain; width: auto; + margin: 0; + border-radius: 0; + box-shadow: none; max-width: 80%; /* prevent super-wide brands from touching edges */ max-height: clamp(44px, 8vw, 78px); /* scale responsively but never huge */ transform: scale(var(--logo-scale, 1)); /* per-partner fine-tune (see below) */ @@ -110,3 +113,22 @@ .partner-card .stretched-link::after { z-index: 1; } /* overlay */ .partner-card .icon-btn { position: relative; z-index: 2; } /* icons above */ + +/* Editorial redesign: less rounded, more structured partner tiles */ +.partners-grid .partner-card{ + border-radius: 0; + box-shadow: none; +} + +.partners-grid .partner-card:hover{ + box-shadow: none; +} + +.partners-grid .logo-wrap{ + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.partners-grid .icon-btn{ + border-radius: 0; +} diff --git a/theme/css/team.css b/theme/css/team.css index 497bf0eb..b5b03136 100644 --- a/theme/css/team.css +++ b/theme/css/team.css @@ -1,56 +1,166 @@ -/* ===== Team page (scoped) ===== */ -.team-grid .card{ - border-radius: 1rem; - border: 1px solid var(--card-border, rgba(255,255,255,.12)); - background: var(--card-bg, rgba(20,24,33,.6)); +/* ===== Team directory ===== */ +.team-directory{ + display: grid; + gap: clamp(1.6rem, 4vw, 3rem); +} + +.team-group{ + display: grid; + gap: 1rem; +} + +.team-grid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); + gap: 1rem; +} + +.team-card{ overflow: hidden; + position: relative; + display: flex; + flex-direction: column; + min-height: 100%; + border: 1px solid var(--border); + border-radius: 1.35rem; + background: var(--surface); + box-shadow: var(--shadow-card); + transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } -[data-bs-theme="light"] .team-grid .card{ - background: #fff; - border-color: rgba(0,0,0,.08); + +.team-card::before{ + content: ""; + position: absolute; + inset: 0 0 auto; + height: .28rem; + background: linear-gradient(90deg, var(--osl-accent, var(--brand-strong)), var(--osl-accent-2, var(--brand-2))); + opacity: .86; + z-index: 1; } -.team-grid .card-img-top{ - display:block; - width:100%; - aspect-ratio: 4 / 3; /* keeps consistent header area */ - object-fit: cover; /* crops tall/wide headshots neatly */ +.team-card:hover{ + transform: translateY(-2px); + border-color: color-mix(in oklab, var(--brand-strong) 38%, var(--border)); + box-shadow: 0 22px 52px rgba(15,23,42,.12); } -.team-grid .card-title{ - font-size: 1.15rem; - margin-bottom: .25rem; +.team-card__media{ + position: relative; + overflow: hidden; + display: grid; + place-items: center; + aspect-ratio: 4 / 3; + background: + radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--osl-accent, var(--brand-strong)) 24%, transparent), transparent 16rem), + var(--surface-muted); } -/* Social icon row */ -.team-grid .social{ +.team-card__media img{ + display: block; + width: 100%; + height: 100%; + margin: 0; + object-fit: cover; +} + +.team-card__avatar{ + display: grid; + place-items: center; + width: 7rem; + height: 7rem; + border: 1px solid var(--border); + border-radius: 999px; + background: var(--surface-solid); + color: var(--osl-accent, var(--brand-strong)); + font-size: 3rem; + font-weight: 800; +} + +.team-card__body{ display: flex; - align-items: center; - gap: .5rem; + flex: 1; + flex-direction: column; + padding: 1.1rem; } -/* Tight, consistent SVG icon sizing + inherit theme color */ -.team-grid .social .icon{ - width: 22px; /* <- right here: fix HUGE icon */ - height: 22px; - display: inline-block; - vertical-align: middle; - fill: currentColor; /* ensure symbols use text color */ +.team-card__header{ + display: flex; + gap: .75rem; + align-items: flex-start; + justify-content: space-between; } -.team-grid .social a{ - color: var(--fg, #e6e9f0); - opacity: .85; - text-decoration: none; + +.team-card h3{ + margin: 0; + font-size: 1.18rem; + letter-spacing: -.02em; } -[data-bs-theme="light"] .team-grid .social a{ - color: #1f2937; + +.team-card p{ + margin: .65rem 0 0; + color: color-mix(in oklab, var(--fg) 84%, var(--muted)); + font-size: .96rem; } -.team-grid .social a:hover{ - color: var(--brand, #3b82f6); - opacity: 1; + +.team-card__social{ + display: inline-grid; + flex: 0 0 auto; + place-items: center; + width: 2.15rem; + height: 2.15rem; + border: 1px solid var(--border); + border-radius: 999px; + background: var(--surface-muted); + color: var(--osl-accent, var(--brand-strong)); +} + +.team-card__social:hover{ + background: var(--osl-accent, var(--brand-strong)); + color: #fff; +} + +.team-card__social .icon{ + width: 1.1rem; + height: 1.1rem; +} + +.team-card__sponsor{ + display: grid; + gap: .35rem; + margin-top: auto; + padding-top: 1rem; +} + +.team-card__sponsor span{ + color: var(--muted); + font-size: .75rem; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} + +/* Editorial redesign: sharper institutional team cards */ +.team-card{ + border-radius: 0; + background: var(--surface-solid); + box-shadow: none; +} + +.team-card::before{ + inset: 0 auto 0 0; + width: .36rem; + height: auto; +} + +.team-card:hover{ + box-shadow: none; +} + +.team-card__media{ + aspect-ratio: 1 / 1; } -/* Sponsor iframe wrapper spacing */ -.team-grid .sponsor{ - margin-top: .5rem; +.team-card__avatar, +.team-card__social{ + border-radius: 0; } diff --git a/theme/css/tokens.css b/theme/css/tokens.css index 431e00fb..04c41b72 100644 --- a/theme/css/tokens.css +++ b/theme/css/tokens.css @@ -4,9 +4,22 @@ --bg: #f8fafc; --fg: #101218; --muted: #5f6b7a; + --heading: #0f172a; --brand: #5cc8ff; --brand-2: #8a7dff; + --brand-strong: #087fa8; + --accent: #ffaa00; + + /* Content surfaces */ + --surface: rgba(255,255,255,.88); + --surface-solid: #ffffff; + --surface-muted: #eef7fb; + --surface-warm: #fff8e7; + --border: rgba(15,23,42,.10); + --border-strong: rgba(15,23,42,.16); + --shadow-soft: 0 18px 60px rgba(15,23,42,.10); + --shadow-card: 0 16px 38px rgba(15,23,42,.08); /* Nav / surfaces */ --nav-bg: rgba(255,255,255,.75); @@ -51,6 +64,17 @@ html[data-mode="dim"]{ --bg: #0b0d12; --fg: #e7ecf4; --muted: #a7b0c0; + --heading: #f8fafc; + --brand-strong: #76d8ff; + --accent: #ffc94a; + --surface: rgba(17,24,39,.76); + --surface-solid: #111827; + --surface-muted: rgba(255,255,255,.07); + --surface-warm: rgba(255,201,74,.10); + --border: rgba(255,255,255,.12); + --border-strong: rgba(255,255,255,.18); + --shadow-soft: 0 22px 70px rgba(0,0,0,.34); + --shadow-card: 0 18px 48px rgba(0,0,0,.28); --nav-bg: rgba(14,18,26,.55); --nav-border: rgba(255,255,255,.06); @@ -76,6 +100,17 @@ html[data-mode="dim"]{ --bg: #0b0d12; --fg: #e7ecf4; --muted: #a7b0c0; + --heading: #f8fafc; + --brand-strong: #76d8ff; + --accent: #ffc94a; + --surface: rgba(17,24,39,.76); + --surface-solid: #111827; + --surface-muted: rgba(255,255,255,.07); + --surface-warm: rgba(255,201,74,.10); + --border: rgba(255,255,255,.12); + --border-strong: rgba(255,255,255,.18); + --shadow-soft: 0 22px 70px rgba(0,0,0,.34); + --shadow-card: 0 18px 48px rgba(0,0,0,.28); --nav-bg: rgba(14,18,26,.55); --nav-border: rgba(255,255,255,.06); diff --git a/theme/events.html b/theme/events.html index 07bca23f..33633e1a 100644 --- a/theme/events.html +++ b/theme/events.html @@ -1,74 +1,124 @@ -{% extends "main.html" %} - -{% set colors=["", "bg-light"] %} +{% extends "base.html" %} {% block content %} - {{ page.content }} - -
-
- {%set upcoming_events = page.meta.get("events", {}).get("upcoming", {}) %} -

Upcoming Events

- {% for event in upcoming_events %} +{% set events = page.meta.get("events", {}) %} +{% set upcoming_events = events.get("upcoming", []) %} +{% set past_events = events.get("past_events", []) %} +{% set page_title = page.meta.get("title", page.title) %} +{% set page_description = page.meta.get("description", "Workshops, talks, study sessions, and community gatherings from Open Science Labs.") %} +{% set section_slug = page.url.split("/")[0] %} +{% if not section_slug %}{% set section_slug = "learning" %}{% endif %} +{% set page_theme = page.meta.get("page_theme", "learning") %} +{% set hero_words = page.meta.get("hero_words", ["Meet", "Practice", "Grow"]) %} -
-
- - {{ event.name }} - -
-
-

{{ event.name }}

-

{{ event.description }}

-

- From {{ event.date_start }} to - {{ event.date_end }}. -

-

- More information -

-
+
+
+
+
+

Learning together

+

{{ page_title }}

+ {% if page_description and page_description != page_title %} +

{{ page_description }}

+ {% endif %}
+ +
- {% endfor %} +
+ {{ page.content }} +
- {% if not upcoming_events %} - No upcoming events for now. - {% endif %} -
-
- -
-
-

Past Events

- {%set past_events = page.meta.get("events", {}).get("past_events", {}) %} - {% for event in past_events %} +
+
+

What's next

+

Upcoming Events

+
-
-
- - {{ event.name }} - -
-
-

{{ event.name }}

-

{{ event.description }}

-

- From {{ event.date_start }} to - {{ event.date_end }}. -

-

- More information -

-
+ {% if upcoming_events %} +
+ {% for event in upcoming_events %} +
+
+ {% if event.url %} + + {{ event.name }} + + {% else %} + {{ event.name }} + {% endif %} +
+
+

+ {{ event.date_start }}{% if event.date_end and event.date_end != event.date_start %} — {{ event.date_end }}{% endif %} +

+

{{ event.name }}

+

{{ event.description }}

+ {% if event.url %} + + More information + + {% endif %} +
+
+ {% endfor %}
+ {% else %} +
+

No upcoming events yet

+

Check back soon or join our community channels to hear about new sessions first.

+
+ {% endif %} +
- {% endfor %} +
+
+

From the archive

+

Past Events

+
- {% if not past_events %} - No past events yet. + {% if past_events %} +
+ {% for event in past_events %} +
+
+ {% if event.url %} + + {{ event.name }} + + {% else %} + {{ event.name }} + {% endif %} +
+
+

+ {{ event.date_start }}{% if event.date_end and event.date_end != event.date_start %} — {{ event.date_end }}{% endif %} +

+

{{ event.name }}

+

{{ event.description }}

+ {% if event.url %} + + More information + + {% endif %} +
+
+ {% endfor %} +
+ {% else %} +
+

No past events yet

+

Past event recordings and notes will appear here when they are available.

+
{% endif %} -
+
- + {% endblock content %} diff --git a/theme/home.html b/theme/home.html index 3361af01..ec698d0a 100644 --- a/theme/home.html +++ b/theme/home.html @@ -1,144 +1,146 @@ {% extends "base.html" %} -{% set hero_image = page.meta.hero_image or "/images/home/header.jpg" %} -{% set hero_title = page.meta.hero_title or "Open collaboration for research, education & social good." %} -{% set hero_blurb = page.meta.hero_blurb or "Open Science Labs helps people learn, build, and contribute to impactful open-source projects — mentored by a welcoming community." %} -{% set cta_primary = page.meta.cta_primary or {"label":"Explore Projects", "href":"/projects/"} %} -{% set cta_secondary= page.meta.cta_secondary or {"label":"Get Involved", "href":"/opportunities/"} %} +{% set hero_image = page.meta.hero_image or "/images/home/header.jpg" %} +{% set hero_title = page.meta.hero_title or "Open collaboration for research, education & social good." %} +{% set hero_blurb = page.meta.hero_blurb or "Open Science Labs helps people learn, build, and contribute to impactful open-source projects — mentored by a welcoming community." %} +{% set cta_primary = page.meta.cta_primary or {"label":"Explore Projects", "href":"/projects/"} %} +{% set cta_secondary = page.meta.cta_secondary or {"label":"Get Involved", "href":"/opportunities/"} %} {% block header_extra %} - {% endblock header_extra %} {% block content %} +
+
+
+

Open Science Labs

+

{{ hero_title }}

+

{{ hero_blurb }}

- -
-
-
-
-

Welcome to

-

{{ hero_title }}

-

{{ hero_blurb }}

+
+ {{ cta_primary.label }} + {{ cta_secondary.label }} +
+
+
-
- {{ cta_primary.label }} - {{ cta_secondary.label }} -
+
+
+ 1,300+ + community members +
+
+ 2018 + active since — internships, incubation, learning content +
+
+ 15 + GSoC-linked projects +
+
+ 4 yrs + participating in Google Summer of Code +
+
+ 15+ + Affiliated projects +
+
-
    -
  • Mentored OSS contributions
    • -
  • Programs & study groups
    • -
  • A supportive global community
    • -
-
+
+
+

Why OSL exists

+

A practical commons where people and open projects grow together.

+

+ We connect newcomers, mentors, maintainers, researchers, and partner + organizations so learning turns into visible work, open collaboration, + and long-term impact. +

-
- + + - -
-
-
-
-
-

Our Mission

-

- At Open Science Labs (OSL), we are dedicated to advancing the scientific - research through collaboration, innovation, and education. Our mission - is to create a more inclusive, transparent, and accessible scientific community. -

-
-
-
-
-

Our Goals

-

- To empower researchers, educators, and students by providing resources, - tools, and a collaborative platform for sharing knowledge and advancing - open science initiatives. -

-
+
+
+ +
+

What we do

+

Programs designed around real contribution.

-
-
- -
-
-

Our Main Initiatives

-

- Discover our programs spanning open-source projects, internships, and learning tracks. -

+
+ + 01 + + Projects + Incubation, affiliation, visibility, and pathways for open-source work. + + -
-
- -
-

Projects

-

Incubation, affiliation and a curated list of OSS projects.

-
- -
+ + 02 + + Opportunities + Internships, Google Summer of Code, contributor guides, and structured onboarding. + + -
- -
-

Opportunities

-

Internships (OSS, research seed, GSoC) and contributor guides.

-
- -
+ + 03 + + Learning + Study groups, events, workshops, and peer support for continuous growth. + + +
+
-
- -
-

Learning

-

Events, study groups and resources for continuous growth.

-
- -
+
+ +
+

Our approach

+

Mentorship, belonging, and public work.

+

+ OSL is not just a list of projects. It is a place where people can ask + questions, receive review, practice collaboration, and build a public + record of meaningful contributions. +

+ Learn more about OSL
-
- + - -
-
-

Our Partners

-

- We collaborate with organizations across research, education and social good. -

+
+
+
+

Partners

+

Collaborating across research, education, and open source.

+
+ +
-
-
+ - -
-
-
-
-

Ready to join the community?

-

Contribute to projects, mentor newcomers, or start a study group.

-
-
- Get Involved - Learn More -
+
+
+

Join the community

+

Bring your curiosity. Leave with real experience.

-
-
- +
+ Get involved + Join Discord +
+ +
{% endblock content %} diff --git a/theme/main.html b/theme/main.html index 94d9808c..18179b74 100644 --- a/theme/main.html +++ b/theme/main.html @@ -1 +1,40 @@ {% extends "base.html" %} + +{% block content %} +{% set page_title = page.meta.get("title", page.title) %} +{% set page_description = page.meta.get("description") %} +{% set section_label = page.meta.get("section_label", "Open Science Labs") %} +{% set section_slug = page.url.split("/")[0] %} +{% if not section_slug %}{% set section_slug = "general" %}{% endif %} +{% set page_theme = page.meta.get("page_theme", section_slug) %} +{% set hero_words = page.meta.get("hero_words", ["Learn", "Build", "Share"]) %} + +
+
+
+
+

{{ section_label }}

+

{{ page_title or config.site_name }}

+ {% if page_description and page_description != page_title %} +

{{ page_description }}

+ {% endif %} +
+ +
+ +
+ {% block content_inner %} + {{ page.content }} + {% endblock content_inner %} +
+
+
+{% endblock content %} diff --git a/theme/partners.html b/theme/partners.html index 7aa502a0..5746de7c 100644 --- a/theme/partners.html +++ b/theme/partners.html @@ -7,6 +7,12 @@ {% block content_inner %} {{ page.content }} +
+
+

{{ page.meta["partners"]|length }} partners

+

Organizations collaborating with OSL

+
+
{% for partner in page.meta["partners"] %} @@ -55,4 +61,5 @@

{% endfor %}

+
{% endblock content_inner %} diff --git a/theme/projects.html b/theme/projects.html index 6075f814..bf7b9a15 100644 --- a/theme/projects.html +++ b/theme/projects.html @@ -1,55 +1,100 @@ {% extends "base.html" %} -{% set colors=["", "bg-light"] %} -{% set text_colors=["", "text-secondary"] %} {% block content %} -
-
-
- {% block content_inner %} +{% set projects = page.meta.get("projects", []) %} +{% set page_title = page.meta.get("title", page.title) %} +{% set page_description = page.meta.get("description", "Explore the open-source projects growing with Open Science Labs.") %} +{% set section_slug = page.url.split("/")[0] %} +{% if not section_slug %}{% set section_slug = "projects" %}{% endif %} +{% set page_theme = page.meta.get("page_theme", "projects") %} +{% set hero_words = page.meta.get("hero_words", ["Incubate", "Mentor", "Ship"]) %} + +
+
+
+
+

Project directory

+

{{ page_title }}

+ {% if page_description and page_description != page_title %} +

{{ page_description }}

+ {% endif %} +
+ +
+ +
{{ page.content }} - {% endblock content_inner %} -
-
+ + +
+
+

{{ projects|length }} projects

+

Projects under the OSL umbrella

+
+ +
+ {% for project in projects %} +
+
+ + {{ project.type|default("project")|title }} + +

+ + {{ project.name }} + +

+
+ +

{{ project.description }}

+ +
+ {% if project.maintainer_name %} +
+
Maintainer
+
+ {% if project.maintainer_email %} + {{ project.maintainer_name }} + {% else %} + {{ project.maintainer_name }} + {% endif %} +
+
+ {% endif %} -
-
- - {% for project in page.meta["projects"] %} - -
-
-

- - {% if project.type == "incubated" %} - Static Badge - {% elif project.type == "affiliated" %} - Static Badge - {% endif %} - {{ project.name }} - -

-

- Maintainer: {{ project.maintainer_name }} - <{{ project.maintainer_email }}>
{% if project.communication_channel %} - Communication Channel: - {{ project.communication_channel.provider.title() }} +

+
Community
+
+ {% if project.communication_channel.url and project.communication_channel.url != "TBA" %} + + {{ project.communication_channel.provider|default("channel")|title }} + + {% else %} + {{ project.communication_channel.provider|default("Channel")|title }} + {% endif %} +
+
{% endif %} -

-

{{ project.description }}

-
+
+ +
+ + Visit project + +
+
+ {% endfor %}
- {% endfor %} -
+
{% endblock content %} diff --git a/theme/single-sidebar.html b/theme/single-sidebar.html index 97d19c49..32b673f4 100644 --- a/theme/single-sidebar.html +++ b/theme/single-sidebar.html @@ -1,54 +1,84 @@ {% extends "base.html" %} {% block content %} +{% set page_title = page.meta.get("title", page.title) %} +{% set page_description = page.meta.get("description") %} +{% set section_label = page.meta.get("section_label", "Open Science Labs") %} +{% set section_slug = page.url.split("/")[0] %} +{% if not section_slug %}{% set section_slug = "general" %}{% endif %} +{% set page_theme = page.meta.get("page_theme", section_slug) %} +{% set hero_words = page.meta.get("hero_words", ["Learn", "Build", "Share"]) %} -
-
- {% block side_menu %} +{% set sidebar = namespace(title="", items=[]) %} +{% for nav_item in nav %} + {% if nav_item.children and nav_item.active %} + {% set sidebar.title = nav_item.title %} + {% set sidebar.items = nav_item.children %} + {% endif %} +{% endfor %} - {# prepare the nav3 content inside the side block -#} - {% set nav3_selected = [] -%} - {% for nav1 in nav -%} - {% for nav2 in (nav1.children or []) -%} - {% if nav2.active %} - {% for nav3 in (nav2.children or []) -%} - {% if nav3.title != "index" -%} - {{ nav3_selected.append(nav3) or "" -}} - {% endif %} - {% endfor -%} - {% endif -%} - {% endfor -%} - {% endfor %} - -
- -
- {% for nav3_item in nav3_selected %} - - {{ nav3_item.title }} - - {% endfor %} +
+
+
+
+

{{ section_label }}

+

{{ page_title or config.site_name }}

+ {% if page_description and page_description != page_title %} +

{{ page_description }}

+ {% endif %}
- - {% if menu_3rd_level_selected %} -
- {% for menu_item_3rd_level in menu_3rd_level_selected %} -

- {{ menu_item_3rd_level.title }} -

- {% endfor %} + +
+ +
+ {% if sidebar.items %} + {% endif %} -
- {% endblock side_menu %} -
- {% block content_inner %} - {{ page.content }} - {% endblock content_inner %} + +
+ {% block content_inner %} + {{ page.content }} + {% endblock content_inner %} +
diff --git a/theme/team.html b/theme/team.html index e51af337..0273fbf1 100644 --- a/theme/team.html +++ b/theme/team.html @@ -5,49 +5,77 @@ {% endblock header_extra %} {% block content %} -
-
-
- {% block content_inner %} - {{ page.content }} - {% endblock content_inner %} -
-
+{% set groups = page.meta.get("teams", []) %} +{% set page_title = page.meta.get("title", page.title) %} +{% set page_description = page.meta.get("description", "Meet the people helping Open Science Labs grow as a caring, practical, open community.") %} +{% set section_slug = page.url.split("/")[0] %} +{% if not section_slug %}{% set section_slug = "about" %}{% endif %} +{% set page_theme = page.meta.get("page_theme", "people") %} +{% set hero_words = page.meta.get("hero_words", ["Mentor", "Review", "Care"]) %} - {% for group in page.meta["teams"] %} -
-
-

{{ group.name }}

+
+
+
+
+

People behind OSL

+

{{ page_title }}

+ {% if page_description and page_description != page_title %} +

{{ page_description }}

+ {% endif %} +
+ +
- -
- {% for member in group.members %} -
-
- {% if member.image_url %} - {{ member.name }} - {% endif %} + {% if page.content|trim %} +
+ {{ page.content }} +
+ {% endif %} -
-
-

{{ member.name }}

+
+ {% for group in groups %} +
+
+

{{ group.members|length }} members

+

{{ group.name }}

+
+
+ {% for member in group.members %} +
+
+ {% if member.image_url %} + {{ member.name }} + {% else %} + + {% endif %} +
+ +
+
+

{{ member.name }}

{% if member.github_url %} - + {% endif %}
{% if member.bio %} -

{{ member.bio }}

+

{{ member.bio }}

{% endif %} {% if "github_sponsor" in member %} -