:root { --size-minute: 0.4em; --size-tiny: 0.8em; --size-small: 1.2em; --size-medium: 1.6em; --size-large: 2.4em; --size--nav-width: 10em; --size--content-width: 50em; --colour-accent: rgb(0, 110, 190); } /* Force page to be the height of the viewport. We do this so that the footer will be pressed against the bottom of the page when the page content doesn't fill out the entire height. When page content *does* fill out the entire height, this just means that the content will overflow the bottom of the html element, which should look fine to the user. */ html, body { height: 100%; } body { margin: 0; background-color: rgb(240, 240, 240); display: flex; flex-flow: column nowrap; line-height: 1.5; font-family: Verdana, Geneva, Tahoma, sans-serif; } /* Formatting applied to alternate text for images that failed to load. */ img { overflow-y: scroll; text-align: center; font-variant: small-caps; font-style: italic; } a:link, a:visited { color: inherit; } a:hover, a:active { color: var(--colour-accent); } .section { /* CSS3 solution to web-content shifting horizontally on vertical scrollbar appearance. See: [https://stackoverflow.com/a/45524215]. This needs to be applied to `.section` instead of `` so that section backgrounds aren't clipped. */ padding-left: calc(var(--size-medium) + 100vw - 100%); padding-right: var(--size-medium); display: flex; flex-flow: column nowrap; align-items: center; } .content { width: 100%; max-width: var(--size--content-width); } header#section-header { background-color: white; } #content-header { padding: var(--size-medium) 0; } #content-header>#content-header-org { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } #content-header>#content-header-org #page-title, #content-header>#content-header-org #page-subtitle { margin: 0; text-align: center; font-weight: bold; } #content-header>#content-header-org #page-subtitle { color: rgb(50, 50, 50); font-size: var(--size-tiny); } #content-header>#content-header-org>*:only-child { /* When the content-header-org flexbox only has one item, force that item to be centered. See: [https://stackoverflow.com/a/57859790]. */ margin: 0 auto; } #content-header>#content-header-nav { flex-basis: 80%; margin: var(--size-medium) auto 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: stretch; } #content-header>#content-header-nav .nav-link { max-width: var(--size--nav-width); flex-basis: 100%; flex-grow: 1; margin: 0 0.75em; border-bottom: 0.15em solid transparent; padding: 0.2em 0; display: flex; justify-content: center; align-items: center; text-decoration: none; text-align: center; font-size: 0.875em; font-weight: bold; } #content-header>#content-header-nav #nav-active, #content-header>#content-header-nav .nav-link:hover, #content-header>#content-header-nav .nav-link:active { border-bottom: 0.15em solid var(--colour-accent); color: var(--colour-accent); } #section-body { flex-basis: 100%; } #content-body { text-align: justify; } #content-body>.feature { margin: var(--size-large) auto; } #content-body>.feature>* { margin: var(--size-minute) auto; } #content-body>.feature>.splash-text { text-align: center; } #content-body>.feature>.splash-text-large { text-align: center; font-weight: bold; font-size: 140%; } #content-body>.feature>.splash-text-important { text-align: center; text-decoration: underline; font-weight: bold; } #content-body>.feature>.splash-text-emphasis { text-align: center; font-style: italic; } #content-body>.feature>.image-gallery { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; } #content-body>.feature>.image-gallery>.gallery-container { display: flex; justify-content: center; align-items: center; } #content-body>.feature>.image-gallery>.gallery-container>a { margin: 0; } #content-body>.feature>.image-gallery>.gallery-container :not(a) { margin: var(--size-small); } #content-body>.feature>.image-gallery>.gallery-container img { display: block; } #content-body>.feature>table { margin: inherit auto; } #content-body>.feature>table>th, #content-body>.feature>table>td { padding: 0; } #content-body>.feature>table.horizontal-table { text-align: left; } #section-footer { background-color: white; } #content-footer { padding: var(--size-minute) 0; } #content-footer>#content-footer-copyright { text-align: right; font-size: var(--size-tiny); }