Files
reground-gift-guide/style.css
T
will 039323ec44 Trim intro copy and give it a supporting image
The intro was the only slide/page without a graphic. Shortened it to two
sentences and added a matching photo, and dropped the CSS rule that let
Step 1 share a print page with the intro (needed now that the intro has
its own image and deserves a full page like every other section).
2026-08-06 19:22:34 -04:00

103 lines
2.0 KiB
CSS

/* Matches reground.org's dark theme tokens, read from
reground-site/assets/css/main.css + extended/custom.css */
@page {
size: Letter;
margin: 0.75in;
background: #1c1917;
}
html, body {
background: #1c1917;
color: #f0ebe3;
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.6;
margin: 0;
}
h1, h2, h3 {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: #8fa8d1;
line-height: 1.25;
}
a {
color: #8fa8d1;
}
/* Cover block, generated by template.html from the document title/author */
.cover {
background: #4a6fa5;
color: #f0ebe3;
margin: -0.75in -0.75in 0;
padding: 2in 0.75in 1in;
page-break-after: always;
}
.cover-title {
color: #ffffff;
font-size: 2.4rem;
margin: 0 0 1rem;
}
.cover-byline {
color: #f0ebe3;
opacity: 0.9;
font-size: 1.1rem;
}
.cover .author-photo {
width: 90px;
border-radius: 50%;
margin: 1.5rem 0 0;
}
/* One Step per page, like the original PDF. The intro (before Step 1) now
carries its own image too, so it gets a full page like every other
section instead of sharing Step 1's page. */
h2 {
page-break-before: always;
font-size: 1.5rem;
}
img {
max-width: 100%;
border-radius: 0.5rem;
display: block;
margin: 1.5rem 0;
}
.closing {
page-break-before: always;
text-align: center;
}
/* .closing is also a pandoc "columns" div (photo | text) so its image
survives in slide exports -- neutralize the side-by-side layout here so
the PDF still renders it as a centered stack. */
.closing .column {
width: auto !important;
}
.closing .author-photo {
width: 100px;
border-radius: 50%;
margin: 0 auto 1rem;
}
.closing p {
margin: 0.5rem 0;
}
/* CTA link styled as a button, matching the site's .btn */
.cta-button {
display: inline-block;
margin-top: 1.5rem;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
background: #2dd4c4;
color: #0f1115;
font-weight: 600;
text-decoration: none;
}