Skip to content

theme: Improve layout #283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xmnlab wants to merge 1 commit into
base: main
Choose a base branch
from
Open

theme: Improve layout #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion pages/about/sponsorship/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: >
pathways.
date: "2026-06-17"
authors: ["OSL Team"]
template: main.html
template: single-sidebar.html
---

# Sponsorship
Expand Down
133 changes: 56 additions & 77 deletions theme/blog-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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") %}

<div class="blog-article">
<h1 class="post-title">
<a href="{{ page.canonical_url or url }}" title="{{ page.meta['title'] }}" target="_self">
{{ page.meta["title"] }}
</a>
</h1>
<article class="blog-article blog-article--feature">
<header class="blog-hero">
<div class="blog-hero__content">
<p class="blog-hero__kicker">Open Science Labs Blog</p>
<h1>{{ title }}</h1>

<!-- Meta row -->
<div class="post_meta">
<span class="meta_item">
<svg class="icon" aria-hidden="true"><use xlink:href="#author"/></svg>
<span class="author_name">
{{ ", ".join(page.meta["authors"]) if "authors" in page.meta else "" }}
</span>
</span>
<div class="post_meta">
{% if "authors" in page.meta %}
<span class="meta_item">
<svg class="icon" aria-hidden="true"><use xlink:href="#author"/></svg>
<span class="author_name">{{ ", ".join(page.meta["authors"]) }}</span>
</span>
{% endif %}

{% if "date" in page.meta %}
<span class="meta_item">
<svg class="icon" aria-hidden="true"><use xlink:href="#calendar"/></svg>
<time class="post_date">{{ page.meta["date"].strftime('%b %-d, %Y') }}</time>
</span>
{% if "date" in page.meta %}
<span class="meta_item">
<svg class="icon" aria-hidden="true"><use xlink:href="#calendar"/></svg>
<time class="post_date" datetime="{{ page.meta["date"].strftime('%Y-%m-%d') }}">
{{ page.meta["date"].strftime('%b %-d, %Y') }}
</time>
</span>
{% endif %}
</div>

{% if show_tags and "tags" in page.meta %}
<div class="post_tags">
{% for tag in page.meta["tags"] %}
<a href="#{{ tag }}" title="{{ tag }}" class="post_tag button button_translucent">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
</div>

{% if slug and thumbnail %}
<figure class="blog-hero__media">
<img loading="lazy" decoding="async"
src="/blog/{{ slug }}{{ thumbnail }}"
alt="{{ title }}">
</figure>
{% endif %}
</header>

<!-- Share -->
<div class="post_share">
<span class="share_label">Share it:</span>
<a href="https://twitter.com/intent/tweet?text={{ page.meta['title'] }}&url={{ page.canonical_url or url }}&tw_p=tweetbutton"
class="twitter" title="Share on X / Twitter" target="_blank" rel="nofollow">
<div class="blog-article__shell">
<aside class="blog-share-panel" aria-label="Share this post">
<span>Share</span>
<a href="https://twitter.com/intent/tweet?text={{ title }}&url={{ page.canonical_url or url }}&tw_p=tweetbutton"
class="twitter" title="Share on X / Twitter" target="_blank" rel="nofollow noopener">
<svg class="icon" aria-hidden="true"><use xlink:href="#twitter"/></svg>
</a>
<a href="https://www.facebook.com/sharer.php?u={{ page.canonical_url or url }}&t={{ page.meta['title'] }}"
class="facebook" title="Share on Facebook" target="_blank" rel="nofollow">
<a href="https://www.facebook.com/sharer.php?u={{ page.canonical_url or url }}&t={{ title }}"
class="facebook" title="Share on Facebook" target="_blank" rel="nofollow noopener">
<svg class="icon" aria-hidden="true"><use xlink:href="#facebook"/></svg>
</a>
<a href="#linkedinshare" id="linkedinshare" class="linkedin" title="Share on LinkedIn" rel="nofollow">
Expand All @@ -42,54 +64,11 @@ <h1 class="post-title">
<a href="{{ page.canonical_url or url }}" title="Copy link" class="link link_yank">
<svg class="icon" aria-hidden="true"><use xlink:href="#copy"/></svg>
</a>
</div>
</aside>

{% if show_tags and "tags" in page.meta %}
<div class="post_tags">
{% for tag in page.meta["tags"] %}
<a href="#{{ tag }}" title="{{ tag }}" class="post_tag button button_translucent">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
</div>

<!-- Hero image -->
<div class="excerpt_thumbnail my-3">
<figure class="mb-3">
<picture>
<img loading="lazy" decoding="async"
class="image_figure image_thumbnail image_internal image_unprocessed"
src="/blog/{{ page.meta['slug'] }}{{ page.meta['thumbnail'] }}"
alt="{{ page.meta['title'] }}">
</picture>
</figure>
</div>

<!-- Article body -->
<div class="post_body">
{{ page.content }}
</div>
</div>

{# Related: show other blog pages #}
{% for nav_item in nav %}
{% if nav_item.title == "Blog" and nav_item.children %}
<div class="posts mt-5">
{% for sub_nav_item in nav_item.children if sub_nav_item.title != "main" %}
<article>
<a href="{{ sub_nav_item.url|url }}" class="image">
<img src="https://picsum.photos/id/{{ loop.index }}/400/200"
alt="{{ sub_nav_item.title }}" loading="lazy" decoding="async" width="400" height="200" />
</a>
<h3>{{ sub_nav_item.title }}</h3>
<p>{{ sub_nav_item.summary }}</p>
<ul class="actions">
<li><a href="{{ sub_nav_item.url|url }}" class="button">Read</a></li>
</ul>
</article>
{% endfor %}
<div class="post_body osl-markdown">
{{ page.content }}
</div>
{% endif %}
{% endfor %}

{% endblock content_inner %}
</div>
</article>
{% endblock content %}
47 changes: 43 additions & 4 deletions theme/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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; }
Expand Down
Loading
Loading