kortirion.uk/style.css

92 lines
1.7 KiB
CSS

@font-face {
font-family: "EB Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./EBGaramond-Regular.woff2) format("woff2");
}
@font-face {
font-family: "EB Garamond";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(./EBGaramond-Italic.woff2) format("woff2");
}
@font-feature-values "EB Garamond" {
@swash {
fancy: 1;
}
}
html {
font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
font-size: 1.25rem;
font-size-adjust: 0.4;
font-variant-alternates: swash(fancy);
line-height: 1.3rem;
}
body {
counter-reset: section;
margin: 7.8rem 1.3rem;
background-color: #f9f9ef;
}
h1, h2 {
text-align: center;
font-weight: normal;
margin: 1.95rem 0 0.65rem;
line-height: 2.6rem;
}
h1 {
font-size: 2.0625rem;
color: #ce5e46;
}
h2 {
font-size: 1.5625rem;
font-style: italic;
}
h2::before {
counter-increment: section;
content: counter(section, upper-roman);
display: block;
font-style: normal;
font-variant-caps: all-small-caps;
margin-bottom: 0.65rem;
}
.verse {
margin-bottom: 1.3rem;
}
.line-indented {
padding-left: 1em;
}
/* FIXME: These should be specified in ch units in case the webfont doesn't load,
* but using ch units somehow breaks the OpenType features.
* ...but only in Firefox, and not on Mac. Possibly a Gecko bug?
*/
main {
max-width: 19.2rem; /* 40ch */
margin: 0 auto;
}
@media (min-width: 33.6rem) /* 70ch */ {
main {
text-wrap: nowrap;
}
}
.line {
display: inline-block;
margin-left: 2em;
text-indent: -2em;
}