Skip to content

News page#22

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

Merged
enatario merged 10 commits into from
Jun 26, 2026
Merged

News page #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c9d1990
news feed basic wip
enatario Jun 26, 2026
a12f0b5
design out post article
enatario Jun 26, 2026
94c10e9
update toc style and architecture
enatario Jun 26, 2026
a28da9e
featured news
enatario Jun 26, 2026
e948dc6
pagination styling
enatario Jun 26, 2026
d2c49fd
more featured items
enatario Jun 26, 2026
f2c0b50
tagging
enatario Jun 26, 2026
199d0df
lint
enatario Jun 26, 2026
0390323
typography update
enatario Jun 26, 2026
35a17d2
finesse tag logic
enatario Jun 26, 2026
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
42 changes: 33 additions & 9 deletions index.hbs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
{{#foreach posts}}
<article class="post__list__item">
<a href="{{url}}">{{title}}</a>
<p>{{date published_at format="MMMM DD, YYYY"}}</p>
</article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
{{#foreach pages}}
<section class="hero">
<div class="hero__inner u-container u-grid">
<div class="hero__content u-grid-span-4">
{{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
{{content}}
</div>
</div>
</section>
{{/foreach}}
{{/get}}

<div class="news-list u-container">
{{#is "tag"}}{{else}}
{{#get "posts" filter="tag:hash-featured" limit="1"}}
{{#foreach posts}}
{{> "components/news-featured"}}
{{/foreach}}
{{/get}}
{{/is}}

{{> "components/news-tag-nav"}}

{{pagination}}
<div class="news-latest">
{{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
{{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
<ul class="news-teases">
{{#foreach posts}}
{{> "components/news-tease"}}
{{/foreach}}
</ul>
{{pagination}}
</div>
</div>
13 changes: 13 additions & 0 deletions partials/components/news-featured.hbs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
{{#if feature_image}}
<div class="news-featured__image">
{{> "components/image" src=feature_image alt=feature_image_alt}}
</div>
{{/if}}
<div class="news-featured__content">
<p class="heading-overline news-featured__label">Featured news</p>
<p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
<h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
<p class="news-featured__excerpt">{{excerpt words="40"}}</p>
</div>
</article>
11 changes: 11 additions & 0 deletions partials/components/news-tag-nav.hbs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
<a href="/news/" class="news-tag-nav__link">All</a>
<a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
<a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
<a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
<a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
<a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
<a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
<a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
<a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>
14 changes: 14 additions & 0 deletions partials/components/news-tease.hbs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
<p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
<a href="{{url}}">
<h3 class="news-teases__title">{{title}}</h3>
</a>
<p class="news-teases__excerpt">{{excerpt words="25"}}</p>
{{#if tags}}
<ul class="news-teases__tags">
{{#foreach tags}}
<li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
{{/foreach}}
</ul>
{{/if}}
</li>
10 changes: 5 additions & 5 deletions partials/pagination.hbs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
{{#if prev}}
<a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
<a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
{{else}}
<a href="/">&larr; Back Home</a>
{{/if}}
<span class="page-number">Page {{page}} of {{pages}}</span>
<p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
{{#if next}}
<a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
<a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
{{/if}}
</nav>
</nav>
28 changes: 10 additions & 18 deletions post.hbs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
{{#if feature_image}}
<img src="{{img_url feature_image size="m"}}" class="profile-image">
{{/if}}
<h1>{{title}}</h1>
<br>

<aside class="gh-sidebar"><div class="gh-toc"></div></aside>
<div class="post-content">
{{content}}
<header class="post-header">
<div class="post-header__inner u-container">
{{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
<h1 class="post-header__title">{{title}}</h1>
</div>
<p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
<br>
</header>
<div class="u-grid u-container">
<article class="post u-grid-span-5" data-post-content>
{{content}}
</article>
<aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
<a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
<script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}
4 changes: 3 additions & 1 deletion src/css/app.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);
14 changes: 13 additions & 1 deletion src/css/base/_layout.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
gap: var(--space--xxx-large);
grid-template-columns: minmax(0, 1fr);
margin-block-end: var(--space--xx-large);
padding-inline: var(--space--page);
}

body:has(.hero--home) {
background-color: var(--color--background-secondary);
}


body.page-template {
--color--theme-background: var(--color--background-secondary);
}
body.page-about {
--color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
--color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
--color--theme-background: var(--color--accent-red-background);
}

body.post-template {
--color--theme-background: var(--color--background-secondary);
}
5 changes: 5 additions & 0 deletions src/css/base/_typography.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
color: var(--color--link);
text-decoration-color: var(--color--link-accent);
text-decoration-thickness: 10%;
transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

&:hover {
text-decoration-color: var(--color--link);
}

u {
text-decoration: none;
}
}

label {
Expand Down
9 changes: 7 additions & 2 deletions src/css/base/_variables.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
--color--black-base: #292e37;
--color--blue-base: #4581d6;
--color--blue-light: #edf5ff;
--color--gray-base: #eff4f8;
--color--gray-base: #e4eaf5;
--color--gray-light: #eff4f8;
--color--green-base: #59c899;
--color--green-light: #f2fff9;
--color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
--color--purple-light: #fcf4ff;
--color--red-base: #ff3b32;
--color--red-dark: #cf2821;
--color--red-light: #ffeeed;
--color--white-base: #ffffff;
--color--yellow-base: #fec233;
--color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
--color--accent-orange-background: var(--color--orange-light);
--color--accent-purple: var(--color--purple-base);
--color--accent-purple-background: var(--color--purple-light);
--color--accent-red: var(--color--red-base);
--color--accent-red-background: var(--color--red-light);
--color--accent-yellow: var(--color--yellow-base);
--color--accent-yellow-background: var(--color--yellow-light);

--color--background-base: var(--color--white-base);
--color--background-secondary: var(--color--gray-base);
--color--background-secondary: var(--color--gray-light);
--color--background-dark: var(--color--navy-dark);

--color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

/* Container sizing */
--container--base: 85rem;
--container--narrow: 48rem;


/* Spacing */
Expand Down
1 change: 0 additions & 1 deletion src/css/components/_hero.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
background-color: var(--color--theme-background);
margin-inline: calc(-1 * var(--space--medium));
min-width: 0;
padding-block: var(--space--x-large);
}
Expand Down
106 changes: 106 additions & 0 deletions src/css/components/_news.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
display: grid;
gap: var(--space--x-large);
}

.news-teases {
--gutter: var(--space--large);

display: grid;
gap: var(--gutter);
}

.news-teases__item {
border-bottom: var(--border--light);
display: grid;
gap: var(--space--small);
padding-block-end: var(--gutter);

h3, p {
margin: 0;
}
}

.news-teases__date {
font-size: var(--font-size--body-small);
}

.news-teases__title {
font-size: var(--font-size--heading-subsection);
}


.news-featured {
display: grid;
gap: var(--space--large);
padding-block-end: var(--space--large);

@media (min-width: 55em) {
&:has(.news-featured__image) {
grid-template-columns: 1fr 1fr;
}
}
}

.news-featured__content {
align-content: start;
display: grid;
gap: var(--space--small);

p {
margin: 0;
}
}

.news-featured__date {
font-size: var(--font-size--body-small);
}

.news-featured__title {
font-family: var(--font-family--heading);
font-size: var(--font-size--heading-section);
line-height: var(--line-height--tight);
margin: 0;
}

.news-latest {
display: grid;
gap: var(--space--large);
}

.news-latest__heading {
margin: 0;
}

.news-tag-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space--x-small);
}

.news-tag-nav__link {
border: var(--border--dark);
border-radius: var(--border-radius--base);
color: var(--color--text-base);
font-size: var(--font-size--body-small);
font-weight: var(--font-weight--bold);
padding: var(--space--xx-small) var(--space--small);
text-decoration: none;
transition-property: background-color, border-color;

&:hover {
background-color: var(--color--secondary-base);
border-color: transparent;
}
}

.news-tag-nav__link[aria-current] {
background-color: var(--color--secondary-base);
border-color: transparent;
}

.news-teases__tags {
display: flex;
font-size: var(--font-size--body-small);
gap: var(--space--small);
}
13 changes: 13 additions & 0 deletions src/css/components/_pagination.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
display: flex;
justify-content: space-between;
}

.pagination__number {
font-size: var(--font-size--body-small);
margin: 0;
}

.pagination__number-current {
font-weight: var(--font-weight--bold);
}
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
News page by enatario · Pull Request #22 · RubyGemsOrg/rubycentral-theme · GitHub
Skip to content
News page#22

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

 Merged

enatario
merged 10 commits into

from

Jun 26, 2026
 Merged


News page
#22
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
c9d1990

news feed basic wip


enatario Jun 26, 2026
a12f0b5

design out post article


enatario Jun 26, 2026
94c10e9

update toc style and architecture


enatario Jun 26, 2026
a28da9e

featured news


enatario Jun 26, 2026
e948dc6

pagination styling


enatario Jun 26, 2026
d2c49fd

more featured items


enatario Jun 26, 2026
f2c0b50

tagging


enatario Jun 26, 2026
199d0df

lint


enatario Jun 26, 2026
0390323

typography update


enatario Jun 26, 2026
35a17d2

finesse tag logic


enatario Jun 26, 2026

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


42 changes: 33 additions & 9 deletions
index.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
{{!< default}}
{{> "components/hero" copy="title:'News::Hero - Body'"}}

<div class="static-content post__list u-container">
 {{#foreach posts}}
 <article class="post__list__item">
 <a href="{{url}}">{{title}}</a>
 <p>{{date published_at format="MMMM DD, YYYY"}}</p>
 </article>

{{#get "pages" filter="title:'News::Hero - Body'" limit="1"}}
 {{#foreach pages}}
 <section class="hero">
 <div class="hero__inner u-container u-grid">
 <div class="hero__content u-grid-span-4">
 {{#is "tag"}}<h1>{{@root.tag.name}} from Ruby Central</h1>{{else}}<h1>News from Ruby Central</h1>{{/is}}
 {{content}}
 </div>
 </div>
 </section>
 {{/foreach}}
{{/get}}

<div class="news-list u-container">
 {{#is "tag"}}{{else}}
 {{#get "posts" filter="tag:hash-featured" limit="1"}}
 {{#foreach posts}}
 {{> "components/news-featured"}}
 {{/foreach}}
 {{/get}}
 {{/is}}

 {{> "components/news-tag-nav"}}

 {{pagination}}
 <div class="news-latest">
 {{#is "tag"}}<h2 class="heading-overline news-latest__heading">Latest {{tag.name}}</h2>{{/is}}
 {{#is "index"}}<h2 class="heading-overline news-latest__heading">Latest News</h2>{{/is}}
 <ul class="news-teases">
 {{#foreach posts}}
 {{> "components/news-tease"}}
 {{/foreach}}
 </ul>
 {{pagination}}
 </div>
</div>

13 changes: 13 additions & 0 deletions
partials/components/news-featured.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
<article class="news-featured">
 {{#if feature_image}}
 <div class="news-featured__image">
 {{> "components/image" src=feature_image alt=feature_image_alt}}
 </div>
 {{/if}}
 <div class="news-featured__content">
 <p class="heading-overline news-featured__label">Featured news</p>
 <p class="news-featured__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <h2 class="news-featured__title"><a href="{{url}}">{{title}}</a></h2>
 <p class="news-featured__excerpt">{{excerpt words="40"}}</p>
 </div>
</article>

11 changes: 11 additions & 0 deletions
partials/components/news-tag-nav.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
<nav class="news-tag-nav" aria-label="Filter by topic" data-tag-nav>
 <a href="/news/" class="news-tag-nav__link">All</a>
 <a href="/news/tag/announcements/" class="news-tag-nav__link">Announcements</a>
 <a href="/news/tag/conferences-2/" class="news-tag-nav__link">Conferences</a>
 <a href="/news/tag/community/" class="news-tag-nav__link">Community</a>
 <a href="/news/tag/company-spotlight/" class="news-tag-nav__link">Company Spotlight</a>
 <a href="/news/tag/governance/" class="news-tag-nav__link">Governance</a>
 <a href="/news/tag/newsletter-2/" class="news-tag-nav__link">Newsletter</a>
 <a href="/news/tag/open-source-2/" class="news-tag-nav__link">Open Source</a>
 <a href="/news/tag/sponsorships/" class="news-tag-nav__link">Sponsorships</a>
</nav>

14 changes: 14 additions & 0 deletions
partials/components/news-tease.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
<li class="news-teases__item">
 <p class="news-teases__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>
 <a href="{{url}}">
 <h3 class="news-teases__title">{{title}}</h3>
 </a>
 <p class="news-teases__excerpt">{{excerpt words="25"}}</p>
 {{#if tags}}
 <ul class="news-teases__tags">
 {{#foreach tags}}
 <li><a href="{{url}}" class="news-teases__tag">{{name}}</a></li>
 {{/foreach}}
 </ul>
 {{/if}}
</li>

10 changes: 5 additions & 5 deletions
partials/pagination.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="News pagination">
 {{#if prev}}
 <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
 <a class="pagination__link" href="{{page_url prev}}">&larr; Newer Posts</a>
 {{else}}
 <a href="/">&larr; Back Home</a>
 {{/if}}
 <span class="page-number">Page {{page}} of {{pages}}</span>
 <p class="pagination__number">Page <span class="pagination__number-current">{{page}}</span> of {{pages}}</p>
 {{#if next}}
 <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
 <a class="pagination__link" href="{{page_url next}}">Older Posts &rarr;</a>
 {{/if}}
</nav>
</nav>

28 changes: 10 additions & 18 deletions
post.hbs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
{{!< default}}

{{#post}}

<div class="{{post_class}}">
 {{#if feature_image}}
 <img src="{{img_url feature_image size="m"}}" class="profile-image">
 {{/if}}
 <h1>{{title}}</h1>
 <br>

 <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
 <div class="post-content">
 {{content}}
<header class="post-header">
 <div class="post-header__inner u-container">
 {{#has tag="announcements,conferences-2,open-source-2,sponsorships,governance,newsletter-2,company-spotlight,community"}}<p class="post-header__date"><time datetime="{{date published_at format="YYYY-MM-DD"}}">{{date published_at format="MMMM D, YYYY"}}</time></p>{{/has}}
 <h1 class="post-header__title">{{title}}</h1>
 </div>
 <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
 <br>
</header>
<div class="u-grid u-container">
 <article class="post u-grid-span-5" data-post-content>
 {{content}}
 </article>
 <aside class="post-toc u-grid-span-2" data-toc></aside>
</div>

{{/post}}

<div class="static-content">
 <a href="/" class="back">← Back Home</a>
</div>

{{#contentFor 'scripts'}}
 <script src="{{asset 'dist/post.js'}}" defer></script>
{{/contentFor}}

4 changes: 3 additions & 1 deletion
src/css/app.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,6 +31,9 @@
@import "components/_info-block.css" layer(components);
@import "components/_info-block-feature.css" layer(components);
@import "components/_link-list.css" layer(components);
@import "components/_news.css" layer(components);
@import "components/_pagination.css" layer(components);
@import "components/_post.css" layer(components);
@import "components/_section.css" layer(components);
@import "components/_sponsor-group.css" layer(components);
@import "components/_sponsor-logo.css" layer(components);
Expand All@@ -44,4 +47,3 @@

/* Vendors */
@import "vendors/ghost.css" layer(vendors);
@import "../../node_modules/tocbot/dist/tocbot.css" layer(vendors);

14 changes: 13 additions & 1 deletion
src/css/base/_layout.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,13 +14,16 @@ main {
 gap: var(--space--xxx-large);
 grid-template-columns: minmax(0, 1fr);
 margin-block-end: var(--space--xx-large);
 padding-inline: var(--space--page);
}

body:has(.hero--home) {
 background-color: var(--color--background-secondary);
}


body.page-template {
 --color--theme-background: var(--color--background-secondary);
}
body.page-about {
 --color--theme-background: var(--color--accent-purple-background);
}
Expand All@@ -40,3 +43,12 @@ body.page-events {
body.page-sponsors {
 --color--theme-background: var(--color--accent-yellow-background);
}

body.page-news,
body.tag-template {
 --color--theme-background: var(--color--accent-red-background);
}

body.post-template {
 --color--theme-background: var(--color--background-secondary);
}

5 changes: 5 additions & 0 deletions
src/css/base/_typography.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,11 +30,16 @@ h2 {
a {
 color: var(--color--link);
 text-decoration-color: var(--color--link-accent);
 text-decoration-thickness: 10%;
 transition: var(--transition-duration--base) text-decoration-color var(--transition-timing--base);

 &:hover {
 text-decoration-color: var(--color--link);
 }

 u {
 text-decoration: none;
 }
}

label {
Expand Down

9 changes: 7 additions & 2 deletions
src/css/base/_variables.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
 --color--black-base: #292e37;
 --color--blue-base: #4581d6;
 --color--blue-light: #edf5ff;
 --color--gray-base: #eff4f8;
 --color--gray-base: #e4eaf5;
 --color--gray-light: #eff4f8;
 --color--green-base: #59c899;
 --color--green-light: #f2fff9;
 --color--navy-base: #36435e;
Expand All@@ -18,6 +19,7 @@
 --color--purple-light: #fcf4ff;
 --color--red-base: #ff3b32;
 --color--red-dark: #cf2821;
 --color--red-light: #ffeeed;
 --color--white-base: #ffffff;
 --color--yellow-base: #fec233;
 --color--yellow-light: #fff8ec;
Expand All@@ -41,11 +43,13 @@
 --color--accent-orange-background: var(--color--orange-light);
 --color--accent-purple: var(--color--purple-base);
 --color--accent-purple-background: var(--color--purple-light);
 --color--accent-red: var(--color--red-base);
 --color--accent-red-background: var(--color--red-light);
 --color--accent-yellow: var(--color--yellow-base);
 --color--accent-yellow-background: var(--color--yellow-light);

 --color--background-base: var(--color--white-base);
 --color--background-secondary: var(--color--gray-base);
 --color--background-secondary: var(--color--gray-light);
 --color--background-dark: var(--color--navy-dark);

 --color--button-primary: var(--color--accent-yellow);
Expand DownExpand Up@@ -108,6 +112,7 @@

 /* Container sizing */
 --container--base: 85rem;
 --container--narrow: 48rem;


 /* Spacing */
Expand Down

1 change: 0 additions & 1 deletion
src/css/components/_hero.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
.hero {
 background-color: var(--color--theme-background);
 margin-inline: calc(-1 * var(--space--medium));
 min-width: 0;
 padding-block: var(--space--x-large);
}
Expand Down

106 changes: 106 additions & 0 deletions
src/css/components/_news.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
.news-list {
 display: grid;
 gap: var(--space--x-large);
}

.news-teases {
 --gutter: var(--space--large);

 display: grid;
 gap: var(--gutter);
}

.news-teases__item {
 border-bottom: var(--border--light);
 display: grid;
 gap: var(--space--small);
 padding-block-end: var(--gutter);

 h3, p {
 margin: 0;
 }
}

.news-teases__date {
 font-size: var(--font-size--body-small);
}

.news-teases__title {
 font-size: var(--font-size--heading-subsection);
}


.news-featured {
 display: grid;
 gap: var(--space--large);
 padding-block-end: var(--space--large);

 @media (min-width: 55em) {
 &:has(.news-featured__image) {
 grid-template-columns: 1fr 1fr;
 }
 }
}

.news-featured__content {
 align-content: start;
 display: grid;
 gap: var(--space--small);

 p {
 margin: 0;
 }
}

.news-featured__date {
 font-size: var(--font-size--body-small);
}

.news-featured__title {
 font-family: var(--font-family--heading);
 font-size: var(--font-size--heading-section);
 line-height: var(--line-height--tight);
 margin: 0;
}

.news-latest {
 display: grid;
 gap: var(--space--large);
}

.news-latest__heading {
 margin: 0;
}

.news-tag-nav {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space--x-small);
}

.news-tag-nav__link {
 border: var(--border--dark);
 border-radius: var(--border-radius--base);
 color: var(--color--text-base);
 font-size: var(--font-size--body-small);
 font-weight: var(--font-weight--bold);
 padding: var(--space--xx-small) var(--space--small);
 text-decoration: none;
 transition-property: background-color, border-color;

 &:hover {
 background-color: var(--color--secondary-base);
 border-color: transparent;
 }
}

.news-tag-nav__link[aria-current] {
 background-color: var(--color--secondary-base);
 border-color: transparent;
}

.news-teases__tags {
 display: flex;
 font-size: var(--font-size--body-small);
 gap: var(--space--small);
}

13 changes: 13 additions & 0 deletions
src/css/components/_pagination.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
.pagination {
 display: flex;
 justify-content: space-between;
}

.pagination__number {
 font-size: var(--font-size--body-small);
 margin: 0;
}

.pagination__number-current {
 font-weight: var(--font-weight--bold);
}
Loading