/* I prefer to organise the CSS by type of effect for the most part, and otherwise by 'feature' implemented, rather than by type of element. */ /* # Page Layout */ /* Zero the surrounding spacing by default, so that only the subsequently specified spacing exists. */ * { padding: 0; border: 0; margin: 0; } body { /* Positioning of webpage on the screen. 1vw = 1% of the screen width. This ensures a reasonable horizontal padding and vertical padding equal to the horizontal padding. */ width: 90vw; padding: 5vw; /* This follows from the .date width and .speakerinfo max-width, as detailed there. But TODO the specification of 35 and 7.5 are duplication of settings. */ max-width: calc(35rem * 100 / (100 - 7.5)); /* This ensures that the is centred when the screen is wider than max-width, whereas with zero margin it would be left-aligned by default. */ margin: auto; } /* Spacing of main heading and subheading from each other and the text. The calculation for

is a hack to work around the fact that line spacing in HTML also leaves spacing above the first line and below the last line of an element's text. 1lh = height of line with spacing, and 1cap = approximate height of line, so (1lh - 1cap)/2 = height above or below. / h1 { / 0.5 lines of default font size = 0.25 lines of

's font size / margin-bottom: calc(0.5cap - (1lh - 1cap)/2); } hgroup:has(> h1) { margin-bottom: 2cap; } / Spacing for top-level sections of the webpage / section:has(> h2) { margin: 1cap 0; } h2 { margin-bottom: 0.3cap; } / Spacing between paragraphs / p, ul, ol { margin: 0.3lh 0; } h1 + p, h2 + p, p:first-child, ul:first-child, ol:first-child { margin-top: 0; } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } / The body width is made up of the date (exactly 5em) and the talk information (up to 30em), with spacing between them set equal to a pleasant-looking 7.5% of the body width. / .date { margin: 0.1rem 0; float: left; width: 5rem; margin-right: 7.5%; } .speakerinfo { / TODO this duplicates the setting in .date. / margin: 1rem 0; / TODO this fitting of .date into the margin for .speakerinfo seems like a kludge. It also duplicates settings with the .date width (including the above padding-top). They should just sit side by side. / margin-left: calc(5rem + 7.5%); max-width: 30rem; } .date:first-child + .speakerinfo { margin-top: 0.75rem; } .speakerinfo:last-child { margin-bottom: 0.5rem; } .speakerinfo > label { / TODO figure out why this is ignored. / margin: 0.5rem 0; } / # Font (family, size, bold/italics, colour, justification, etc. - anything pertaining to the text alone) / html { / By testing, it seems like the default font size of 16px renders as approximately the same physical size on a few different screens (except possibly that it starts scaling down when the screen becomes very narrow), which by measurement is given by roughly 1 inch = 12 m's = 192px. This looks a bit too small. So instead we set a default font size of 24px (or roughly 1 inch = 8 m's), and leave it to the user to zoom in more or less if that's inappropriate for them. / font-size: 24px; } h1 { font-size: 3rem; line-height: 1; } hgroup > h1 + p { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.2rem; } body { font-family: 'Crimson Text', 'Cardo', 'Sorts Mill Goudy', "Free Serif", "Georgia", serif; } h1, h2, h3 { font-weight: normal; } h1, hgroup > h1 + p { text-align: center; } / Talk information / .date { text-align: right; } h4 { font-weight: 600; } .abstract { hyphens: auto; font-size: 90%; } sup { vertical-align: text-top; font-size: 80%; } sub { vertical-align: text-bottom; font-size: 80%; } em em { font-weight: bold; } .abstract > p { text-indent: 2.5em; } .noindent { / margin-top: 0.4lh; / text-indent: 0 !important; } / # Decoration / / The section headings are underlined by a line running across the page. / h2, h3 { border-bottom: 0.05em solid black; } h2, h3, h2 ~ p { padding: 0 0.1rem; } / Display speaker-and-title in a coloured box with rounded corners. / h4 { / This keeps the edges of the box 0.4em from the edges of the text. For explanation of calculation, see similar calculation for margin-bottom of

. / padding: calc(0.4em - (1lh - 1cap)/2) 0.4em; / It looks good to have the corners round with the same radius as the padding (as was done previously). / border-radius: 0.4em; box-sizing: border-box; background-color: / #E6E6F2 / #F2E6E5; } / Hyperlink styling / a { color: maroon; text-decoration: underline; } .abstract a { text-decoration: none; border-bottom: 0.1em dotted; } / Headings for each year of talks / .year { color: maroon; } / # Miscellaneous Features or Settings / / 'Collapsible' type behaviour for years and abstracts An undisplayed input followed by a label is a 'button' to collapse/uncollapse. The collapsing is implemented by "display: none" for years and "max-height: 0" for abstracts. / input { display: none; } label { cursor: pointer; } input:checked + .year + div { display: none; } input:checked + label + .abstract { max-height: 0 } .abstract { overflow: hidden; transition: 200s; } / Just for appearance's sake / .year::after { content: " ±"; } / 'Button' for collapsible abstract / .speakerinfo > label::after { content: "Abstract ±"; color: maroon; border-bottom: 0.1em dotted; font-size: 90%; } / Custom list styling in abstracts: the bullets are 'inline', and are "• " instead of the usual, larger, bullet. / .abstract ul, .abstract ol { list-style-position: inside; } .abstract ul > li::marker { content: "• "; } footer { text-align: center; font-size: 80%; border-top: solid 0.1em #E6E6F2; margin-top: 12.5cap; / equal to 10rcap */ padding: 0.1em; }