Add article information cards
Deploy production / deploy (push) Successful in 1s

This commit is contained in:
2026-08-11 21:24:54 -07:00
parent 6b53883f21
commit ae6a143ee9
3 changed files with 97 additions and 6 deletions
+23 -6
View File
@@ -65,7 +65,8 @@ 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 {
.blog-post-layout,
.article-post-layout {
display: grid;
grid-template-columns: minmax(0, 640px) minmax(230px, 280px);
grid-template-areas:
@@ -75,10 +76,14 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
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%; }
.blog-entry-header,
.article-entry-header { grid-area: header; }
.blog-entry-header h1,
.article-entry-header h1 { font-style: normal; }
.blog-entry-header .dek,
.article-entry-header .dek { margin-bottom: 0; }
.blog-entry-body,
.article-entry-body { grid-area: body; width: 100%; }
.post-info {
grid-area: info;
border: 1px solid var(--rule);
@@ -112,6 +117,17 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
letter-spacing: .08em;
text-transform: uppercase;
}
.article-info .post-info-title { color: var(--teal); }
.publication-links { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.publication-links a {
display: block;
color: var(--teal);
font: 500 10px/1.5 var(--mono);
overflow-wrap: anywhere;
text-decoration: none;
}
.publication-links a:hover,
.publication-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.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; }
@@ -127,7 +143,8 @@ 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 {
.blog-post-layout,
.article-post-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"