element is where all of the text-y stuff gets put. Most of the pages on my site have one of these. */ main { /* Put it in the centre of the page... */ margin: auto; /* ...give it some room to breathe... */ padding: 2ch; /* ...and don't make it too wide. If lines of text are too long, they're harder to read, but a lot of people don't seem to have caught on yet --- looking at you, Wikipedia! */ max-inline-size: 65ch; } /* Text in paragraphs is justified (i.e. spread out to cover both the left and right edges). Some people say this is bad for accessibility, but i like it --- it gives the text a more "book-y" look. */ p { text-align: justify; hyphens: auto; } /*

elements contain an element with its own styling, so they don't need any padding and margin by default. */ figure { padding: 0; margin: 0; } /* Images! I hate them so much! */ img { /* Give them a bit of breathing room on the top and bottom.*/ margin-block: 1ch; margin-inline: auto; /* Make them take up a line of their own by default. */ display: block; /* They shouldn't be wider than the element they're contained in. */ max-inline-size: 100%; } /* Headers, headers, headers. */ h1, h2, h3, h4, h5, h6 { /* Visually distinguishing them by giving them the accent colour. */ color: var(--accent); /* Since the font size is gonna be bigger, no need to have all that extra space in the line height. */ line-height: 1.1; } h1 { /* It’s gonna be at the top of the page, so centring it will make it look more balanced. */ text-align: center; /* Alll the swooshes! This only takes effect in a very particular set of circumstances, sadly. It has to be set in EB Garamond, *and in italics* --- vanishingly rare. */ font-feature-settings: "swsh", "dlig", "clig", "hlig"; } a { color: var(--accent); text-decoration: underline 1px; text-decoration-style: dotted; cursor: pointer; } /* Links outside of the site have solid underlines. Links inside of it are dotted. */ a[href^="http"], a[href^="//"], a[href^="mailto:"] { text-decoration-style: solid; } mark { color: var(--text); background-color: var(--accent_translucent); padding-block: 0.1em; padding-inline: 0.25em; } .table-container { overflow-x: auto; max-inline-size: 100%; } table { border-collapse: collapse; } b, strong, th, dt { color: var(--accent); font-weight: bold; } .sentence-case { text-transform: capitalize; } .allcaps { text-transform: uppercase; letter-spacing: var(--caps-spacing); } .uppercase { letter-spacing: var(--caps-spacing); } .centre { margin-inline: auto; display: block; text-align: center; } code, pre, .monospace { font-family: var(--typewriter); } code:not(pre code) { font-size: 0.9em; } pre { max-width: 100%; overflow-x: auto; } .serif { font-family: var(--serif); } .smallcaps { font-variant: small-caps; letter-spacing: var(--caps-spacing); } .all-sc { font-variant: all-small-caps; letter-spacing: var(--caps-spacing); } .c2sc { font-feature-settings: "c2sc"; letter-spacing: var(--caps-spacing); } blockquote { margin-block: 0.5em; font-size: max(0.8em, 0.64rem); } blockquote footer { font-style: normal; } blockquote footer::before { content: "—"; } q { font-style: italic; } li { margin: 0.1em; } hr { border-color: var(--accent); } .accent { color: var(--accent); } input[type="text"] { border: none; background-color: transparent; font-size: 14pt; color: var(--accent); font-family: inherit; padding: 10px; border-bottom: 1px solid var(--accent); margin: 5px; } button { padding-inline: 0.5rem; border: 1px solid var(--accent); background-color: transparent; color: var(--accent); font-family: inherit; transition-duration: 0.5s; font-size: 1em; font-variant-numeric: inherit; } button:hover, button:focus { cursor: pointer; } details { border: 1px solid var(--accent); } details > :not(summary) { padding: 0 1em; } summary { text-align: center; font-weight: bold; color: var(--accent); padding: 0.5em; border-bottom: 1px dotted var(--accent); cursor: pointer; } sup, sub { vertical-align: baseline; position: relative; } sup { top: -0.4em; } sub { top: 0.4em; } .shortinput { inline-size: 30px; } main > footer { text-align: center; } .tiny, footer small { font-size: var(--type-small); color: var(--accent); font-style: italic; text-align: center; line-height: 1.1; } /* Breadcrumb navigation, as seen on /words/loanwords */ .breadcrumbs { text-align: center; margin-block: 1em; margin-inline: 0; } #asciicoa, .asciicoa { width: min-content; margin: auto; font-size: var(--type-small); color: var(--accent); font-variant-ligatures: none; line-height: 1.1; } .flag { display: inline-block; margin: 0; block-size: 1.25ex; max-inline-size: none; border: 1px solid var(--text); } .flag.irregular { border: none; filter: drop-shadow(0 1px var(--text)) drop-shadow(0 -1px var(--text)) drop-shadow(1px 0 var(--text)) drop-shadow(-1px 0 var(--text)); } .theonym { font-style: normal; font-variant: small-caps; letter-spacing: var(--caps-spacing); } u.overline, .overline, .gnum { text-decoration: overline; } /* Used to style passages consisting only of numbers. */ .numbers { font-variant-numeric: normal; } nav.languages { margin-inline: auto; margin-block-end: 1rem; } nav.languages ul { margin: auto; padding: 0; text-align: center; margin-block-start: 0.5em; } nav.languages li { display: inline-block; margin-block: 0; margin-inline: 0.5em; } /* UNDER CONSTRUCTION sign for pages that are, well, under construction */ .under-construction { background-color: #FDD835; color: #000E; padding: .5rem 1rem; font-style: italic; margin-block: 1rem; margin-inline: 0; } .under-construction > strong { font-size: var(--type-larger); color: inherit; } .visually-hidden, .sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }