OpenAI/labyricorn-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add editorial layout for blog posts

Browse Source
This commit is contained in:
Labyricorn Deployment
2026-08-11 20:22:29 -07:00
parent 2699afd560
commit 6c7836a5fb
4 changed files with 109 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/static/style.css
+58 -1
View File
@@ -65,6 +65,54 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.button-link { display: inline-block; margin-top: 20px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.blog-post-layout {
display: grid;
grid-template-columns: minmax(0, 640px) minmax(230px, 280px);
grid-template-areas:
"header info"
"body info";
gap: 34px clamp(54px, 7vw, 92px);
align-items: start;
padding-block: 68px 90px;
}
.blog-entry-header { grid-area: header; }
.blog-entry-header h1 { font-style: normal; }
.blog-entry-header .dek { margin-bottom: 0; }
.blog-entry-body { grid-area: body; width: 100%; }
.post-info {
grid-area: info;
border: 1px solid var(--rule);
background: var(--panel);
padding: 24px;
}
.post-info-title {
margin: 0 0 8px;
color: var(--magenta);
font: 500 10px var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
}
.post-info dl { margin: 0; }
.post-info-row { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.post-info-row:last-child { padding-bottom: 0; border-bottom: 0; }
.post-info dt {
margin-bottom: 7px;
color: var(--dim);
font: 500 9px var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
}
.post-info dd { margin: 0; color: var(--ink); font-size: 14px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.post-tags span {
border: 1px solid var(--teal);
padding: 3px 7px;
color: var(--teal);
font: 500 9px var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
}
.site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 9px; }
.footer-inner { min-height: 105px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.site-footer nav { display: flex; gap: 22px; }
@@ -79,7 +127,16 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
.hero, .hero.compact { padding-block: 44px; }
h1 { font-size: 30px; }
.card-grid { grid-template-columns: 1fr; }
.blog-post-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"info"
"body";
gap: 30px;
padding-block: 44px 65px;
}
.post-info { padding: 20px; }
.footer-inner { align-items: flex-start; flex-direction: column; padding-block: 28px; }
.site-footer nav { flex-wrap: wrap; }
}