/* Simplicity - main layout and style */ /* Created 2020-2025 by Jan / gosimplicity.org */ /* */ /* */ /* last update: 2025-07-24 */ :root { /* CSS: A px is not a pixel. A px is not a pixel. A px is not a pixel. A px is not a pixel. Not on screen and not in print. It is a misnomer. */ /* CSS: A px is an unfathomable entity; an ever-changing magic number that, in mysterious ways, tends to produce workable results. Hopefully. */ /* keep lines of text short for readability. goal: 55 - 75 characters */ --content-font: var(--main-font, serif); --content-font-sc: var(--main-font-sc, sans-serif); --line-height: 1.6em; /* 3.2ex, 2.32rem - about 1.5 */ /* needs to be relative unit for scaling */ /* headings may need extra room */ /* --content-margin: 0em; */ /* inline-margin for main content. Use grid columns instead. */ --content-padding-inline-start: 0em; /* fixme: use? */ --content-padding-inline-end: var(--content-padding-inline-start); --inside-margin: 1.8em; /* used for first-line-indent, blockquote, lesser headings */ --nav-font: var(--header-font, sans-serif); --intro-animation-duration: 3.5s; --nav-ol-block-padding: 0.6rem; /* set default values */ /* for hamburger menu, keep background the same color */ --body-bg-color-real: var(--content-bg-color); --main-list-style-position: inside; --main-list-style-position-wide: outside; --main-margin-block-start: var(--show-header, clamp( 0.2rem, calc( 0.6em + 10vh ), 5.5em ) ); --space-between-main-and-footer: 3.6em; --main-margin-block-end: 0em; --footer-padding-block-start: var(--space-between-main-and-footer); --menu-block-end-padding: var(--nav-ol-block-padding); /* this is used in navigation.css */ --main-padding-block-start: 0.9em; /* this can be used in case sidebars needs to go all the way to the top (inset-block-start) */ --main-padding-block-end: 3.6em; /* note that the menus always open down, even if they are at the bottom of the screen. */ /* This can give the impression of broken menus, and is certainly annoying. */ /* Since there are no built-in menus in HTML, we have to do the menus in CSS, and in CSS there is no way to way fix this. */ /* Therefore, you may only want to push the main menu to the bottom of the screen */ /* if your navigation has only direct links, without menus. Do note that the language menu */ /* is also a menu, and it is the most important menu. So maybe avoid pushing the navigation to the bottom on multi-language sites. */ /* Having said that, a value of ~85vh will place the main navigation at the bottom of the screen. */ /* --space-between-menu-and-main: calc( var(--menu-block-end-padding) + var(--main-margin-block-start) ); */ --none: none; /* only so it can be used below */ --no: var(--none, 0); /* set to 'none', fallback to 0 */ /* could be called 'none-or-zero', but 'no' is easier to work with for most people */ /* some properties require 0, others 'none' to be hidden. */ /* '--no' allows the use of one single variable to switch both kinds of properties. */ /* '--show-header' can be set by custom site css. */ /* If set, '--show-header' will evaluate to 'none' and fallback to zero for properties that don't work with 'none' */ /* If '--show-header' is not set, the value will become 'undefined' and result in a no-op */ /* '--show-header' can be thought of as '--zero-or-none-if-header-disabled', */ /* but '--show-header' is a more intuitive name for people to change site layout */ --bg-image-background-attachment: fixed; } /* vertical text rhythm: use multiples of body text line-height for header line-heights, top- and bottom margins */ @font-face { font-family: "URWPalladioL"; src: local("URWPalladioL-Roma"), local("TeXGyrePagella-Regular"), local("PalatinoLinotype-Roman"), local("PalatinoLTStd-Roman"), local("PalatinoNova-Regular"), url("/.simplicity/.skeleton/font/URWPalladioL-Roma.woff2") format("woff2"); font-weight: normal; font-style: normal; } @font-face { font-family: "URWPalladioL"; src: local("URWPalladioL-Ital"), local("TeXGyrePagella-Italic"), local("PalatinoLinotype-Italic"), local("PalatinoNova-Italic"), url("/.simplicity/.skeleton/font/URWPalladioL-Ital-temp.woff2") format("woff2"); font-weight: normal; font-style: italic; } @font-face { font-family: "URWPalladioL"; src: local("URWPalladioL-Bold"), local("TeXGyrePagella-Bold"), local("PalatinoLinotype-Bold"), local("PalatinoNova-Bold"), url("/.simplicity/.skeleton/font/URWPalladioL-Bold-temp.woff2") format("woff2"); font-weight: bold; font-style: normal; } @font-face { font-family: "URWPalladioL"; src: local("URWPalladioL-BoldItal"), local("TeXGyrePagella-BoldItalic"), local("PalatinoLinotype-BoldItalic"), local("PalatinoNova-BoldItalic"), url("/.simplicity/.skeleton/font/URWPalladioL-BoldItal-temp.woff2") format("woff2"); font-weight: bold; font-style: italic; } @font-face { font-family: "TeXPalladioL-SC"; src: local("TeXPalladioL-SC"), local("TeXGyrePagella-Regular"), local("PalatinoLinotype-Roman"), local("PalatinoNova-Imperial"), url("/.simplicity/.skeleton/font/TeXPalladioL-SC.woff2") format("woff2"); /* observation: TeXGyrePagella's small caps raise the baseline? The text is set too high. */ font-weight: normal; font-feature-settings: "smcp" 1; /* font-synthesis: none; */ /* can this be used here? */ /* font-style: normal; */ /* font-variant: small-caps */ /* does this work? this way? */ } html { height: 100%; } /* ///////////////////////////////////////////////////// */ /* //////////// HERO TEXT :: BEGIN ///////// */ /* ///////////////////////////////////////////////////// */ /* this works with no hero item, text only, img/video only or text+img or video */ #heroTitle { position: relative; display: inline-block; --hero-text-width: 95; /* Naked number, will be interpreted in vw unit. This is read by javascript */ inline-size: 100vw; /* 100% causes the image to not push main content down, */ /* i.e., causes the image to go below the main content, depending on viewport size. */ /* can be a neat effect, but we have no control, as it depends on viewport size. */ max-block-size: max-content; margin-left: 50%; transform: translateX(-50%); font-size: min( 2.3em, 6vw ); /* fallback for no javascript */ /* can't set max-width, otherwise javascript calculation of max font-size to fit width won't work */ /* similar for max-height: it would not push content down and overlap */ user-select: none; /* prevent hero from cluttering copy/paste */ } #heroTitle img, #heroTitle video { display: block; width: auto; max-width: 100vw; height: auto; max-height: 100vmax; margin-inline-start: 50%; transform: translateX(-50%); } :root { --hero-text-bg-color-dark-opaque: #000000aa; --hero-text-bg-color-dark-translucent: #00000033; --hero-text-bg-color-light-opaque: #ffffffaa; --hero-text-bg-color-light-translucent: #ffffff33; } #heroTitle .heroTitleTextWrapper { position: relative; inset-block-start: 20vh; inline-size: max-content; max-inline-size: 100vw; max-block-size: max-content; background-color: var(--hero-text-bg-color); border-color: #00000077; /* medium grey works for 'everything' */ border-width: 0.06em; border-style: solid; border-radius: 0.15em; padding-inline-start: 0.2em; padding-inline-end: 0.2em; margin-inline-start: 50%; /* careful: if --show-header is not set, --main-margin-block-start will be 0 */ margin-block-end: max( calc( var(--main-margin-block-start) * 2 ), 40vh ); transform: translateX(-50%); } /* for text + visual media hero text (as opposed to text-only) */ #heroTitle img:not([hidden]) + .heroTitleTextWrapper, #heroTitle video:not([hidden]) + .heroTitleTextWrapper { position: absolute; inline-size: 100%; } #heroTitle .heroTitleText { position: relative; color: var(--hero-text-color); text-shadow: 3px 3px 2px var(--hero-text-shadow-color); inline-size: max-content; block-size: max-content; inset-inline-start: 50%; padding-block-start: 0.1em; padding-block-end: 0.1em; transform: translateX(-50%); z-index: 20; } /* ///////////////////////////////////////////////////// */ /* //////////// HERO TEXT :: END ///////// */ /* ///////////////////////////////////////////////////// */ /* ///////////////////////////////////////////////////// */ /* //////////// beforeContent :: BEGIN ///////// */ /* ///////////////////////////////////////////////////// */ /* The beforeContent element is a three-item grid. */ /* For narrow screens, the cells stack in block direction. */ .beforeContentWrapper { /* we set --max-beforeContent-item-size fix here, because we can't use dynamic media queries. */ /* so we set a reasonable content-width for reading text, and take this here and in the media query. */ --max-beforeContent-item-size: 32em; position: relative; display: grid; grid-template-rows: 100%; inline-size: 100%; margin-inline-start: 0em; } .beforeContentItemStart:empty, .beforeContentItemMiddle:empty, .beforeContentItemEnd:empty { display: none; } /* make sure text stays readable with a minimum width */ .beforeContentWrapper > div { min-width: min( 15em, 100% ); } .beforeContentItemStart, .beforeContentItemEnd { max-width: calc( ( 100vw - var(--max-beforeContent-item-size) ) / 2 ); } .beforeContentItemMiddle { /* background-color: palevioletred; */ max-width: var(--max-beforeContent-item-size); justify-self: center; } /* ensure it doesn't take up space if not used (some child elements have display: set, overriding the 'hidden' attribute) */ .beforeContentWrapper[hidden] { display: none; } /* We assume: * - max-beforeContent-item-size = 32em (set on .beforeContentWrapper), * - minimum useful width for -start/ -end items = 15em * This lets us do an independent media query with these fixed numbers. * Centering of the middle item will (should?) still work, but the breakpoint may be different from the page content. */ /* This is a stand-alone media query */ @media ( min-width: calc( 15em + 32em + 15em ) ) { .beforeContentWrapper { grid-template-columns: repeat( 3, minmax( 0, auto ) ); justify-content: start; } } .beforeContentWrapper img, .beforeContentWrapper video { max-inline-size: 100%; /* keep media within flexbox */ block-size: auto; /* keep aspect ratio */ } /* ///////////////////////////////////////////////////// */ /* //////////// beforeContent :: END ///////// */ /* ///////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////// */ /* //////// BEGIN: Content and Sidebar Layout ////////// */ /* //////////////////////////////////////////////////////////// */ /* Woo-hoo Layout */ :root { --sidebar-start-display-narrow: none; --sidebar-end-display-narrow: none; /* --sidebar-start-display-wide: none; */ /* --sidebar-end-display-wide: none; */ /* default for narrow displays */ --sidebar-start-display: var( --sidebar-start-display-narrow); --sidebar-end-display: var(--sidebar-end-display-narrow); /* on narrow screens, sidebars will always be 100% as per grid-template columns. */ --sidebar-start-inline-size: 0px; --content-width-normal: 32em; --content-width-fullwidth: 100%; --content-width-used: var(--content-width-normal); /* on narrow screens, sidebars will always be 100% as per grid-template columns. */ --sidebar-end-inline-size: 0px; --content-margin-narrow: 0.5em; --content-margin-normal: 2em; --content-margin-used: var(--content-margin-narrow); --content-margin-start-size: var(--content-margin-used); --content-margin-end-size: var(--content-margin-start-size); --content-margin-start-size-inverted: calc( var(--content-margin-start-size) * -1 ); --content-margin-end-size-inverted: calc( var(--content-margin-end-size) * -1 ); --sidebars-margin-inline-start-wide: 0px; --sidebars-margin-inline-end-wide: 0px; --sidebars-margin-inline-start: var(--content-margin-start-size-inverted); --sidebars-margin-inline-end: var(--content-margin-end-size-inverted); --sidebars-spacers-size: 2em; /* gap between sidebar and main. */ --sidebars-spacers-size-wide: 0em; --sidebar-start-bg-color: var(--main-bg-color); --sidebar-end-bg-color: var(--sidebar-start-bg-color); } :root.content-xwide { --content-width-used: var( --content-width-xwide, var(--content-width-normal) ); } /* this needs to be after all other definitions, so it can override. */ :root[data-hasgallery], :root.content-fullwidth { --content-width-used: var(--content-width-fullwidth); } /* -------------- BEGIN: outsideSidebars: center content relative to viewport ------------------- */ /* For outside sidebars: center content relative to viewport */ /* (otherwise it would be centered between one side of the viewport and the sidebar at the other side). */ /* Actually, I don't like it. When there's only little autofill-space, it looks weird. */ /* And once the screen is narrow enough so the sidebar hits the content, it's all just one-sided with emptyness on the other side, */ /* until we get narrow enough to display the sidebars top/bottom. */ /* And even if there's enough autofill-space on a wide display, it's weird to have it viewport-centered. */ /* It also creates too much of a void on the other side. */ /* But if you want it, put these in your site.css file. */ /* Note however, that .poster images will also be centered, and thus overlap the sidebar. You'll have to fix this. */ /* For the case of both sidebars and .sidebarsOutside, leave it as-is, */ /* as it is not clear that viewport-centering is always or even often wanted, and centering between both sidebars seems more desirable. */ :root { --content-and-margins-width: calc( var(--content-margin-start-size) + var(--content-width-used) + var(--content-margin-end-size) ); } :root.sidebarsOutside.hasSidebarStart:not(.hasSidebarEnd) { /* note: this fails as soon as content width becomes smaller than content-width-used. Although at that point, autofills are 0px */ /* max() to prevent negative values */ /* --autofill-start-inline-size: max( ( ( 100% - var(--content-and-margins-width) ) * 0.5 ) - var(--sidebar-start-inline-size) ); */ } :root.sidebarsOutside.hasSidebarEnd:not(.hasSidebarStart) { /* max() to prevent negative values */ /* --autofill-end-inline-size: max( ( ( 100% - var(--content-and-margins-width) ) * 0.5 ) - var(--sidebar-end-inline-size) ); */ } /* -------------- END: outsideSidebars: center content relative to viewport ------------------- */ main { display: grid; grid-template-columns: var(--main-grid-template-columns); justify-content: center; inline-size: 100%; row-gap: var(--sidebars-spacers-size); /* only used for narrow screens, to separate sidebars from content */ } /* make borders work properly */ main > * { box-sizing: border-box; } :root { /* for narrow displays, 3 column: margins on both side, and content in the middle */ --main-grid-template-columns-narrow: var(--content-margin-start-size) minmax( auto, var(--content-width-used) ) var(--content-margin-end-size); /* for 'normal' (wider) displays: */ /* autofill-start | sidebar-start | content-margin-start | content | content-margin-end | sidebar-end | autofill-end */ --main-grid-template-columns-wide: 1fr var(--sidebar-start-inline-size) var(--content-margin-start-size) minmax( auto, var(--content-width-used) ) var(--content-margin-end-size) var(--sidebar-end-inline-size) 1fr; /* for 'normal' (wider) displays, with .sidebarsOutside */ /* autofill and sidebars swapped, otherwise same layout as -wide above. */ --main-grid-template-columns-wide-outside: var(--sidebar-start-inline-size) var(--autofill-start-inline-size) var(--content-margin-start-size) minmax( auto, var(--content-width-used) ) var(--content-margin-end-size) var(--autofill-end-inline-size) var(--sidebar-end-inline-size); /* Narrow screen layout columns */ /* For narrow screens, sidebars need to collapse/stack into content column. */ --main-grid-template-columns: var(--main-grid-template-columns-narrow); --content-grid-column: 2; --autofill-start-grid-column: var(--content-grid-column); --sidebarStart-grid-column: var(--content-grid-column); --content-margin-inline-start-grid-column: 1; --mainContentWrapper-grid-column: var(--content-grid-column); --content-margin-inline-end-grid-column: 3; --sidebarEnd-grid-column: var(--content-grid-column); --autofill-end-grid-column: var(--content-grid-column); /* Widescreen layout columns */ /* These exist only so the media query can be valueless. */ /* This allows us to introduce additional columns without breaking existing sites. */ /* Assuming the new columns default to 0px. */ --autofill-start-grid-column-wide: 1; --sidebarStart-grid-column-wide: 2; --content-margin-inline-start-grid-column-wide: 3; --mainContentWrapper-grid-column-wide: 4; --content-margin-inline-end-grid-column-wide: 5; --sidebarEnd-grid-column-wide: 6; --autofill-end-grid-column-wide: 7; /* Widescreen layout with outside sidebars */ --autofill-start-inline-size-outside: 1fr; --autofill-end-inline-size-outside: 1fr; --autofill-start-grid-column-wide-outside: 2; --sidebarStart-grid-column-wide-outside: 1; --sidebarEnd-grid-column-wide-outside: 7; --autofill-end-grid-column-wide-outside: 6; } .autofill-start { grid-column: var(--autofill-start-grid-column); } :root:not(.hasSidebarStart) { --sidebar-start-display: none; --sidebar-start-inline-size: 0px; } .sidebarStart { display: var(--sidebar-start-display); grid-column: var(--sidebarStart-grid-column); /* expand to into margins on narrow screens */ /* we can't expand to full-width, as this would expand the content as well. */ /* what would work is using margins, but we can't calculate them as content may be smaller than --content-width-used */ margin-inline-start: var(--sidebars-margin-inline-start); margin-inline-end: var(--sidebars-margin-inline-end); } .content-margin-inline-start { grid-column: var(--content-margin-inline-start-grid-column); inline-size: var(--content-margin-start-size); } /* note: We can't bunch up and nest (.minContentWrapper + margins) into a .contentAndMarginsWrapper, */ /* as this would make it IMPOSSIBE to inline-center poster images (wider than .mainContentWrapper) (other than ruining the page by position: absolue). */ /* That would be a cleaner design, though, and otherwise works really nicely: Less code, no grid-template-columns re-declaration in media query, /* and simper grid-template-columns (auto) / less calc(). */ .mainContentWrapper { grid-column: var(--mainContentWrapper-grid-column); } .content-margin-inline-end { grid-column: var(--content-margin-inline-end-grid-column); inline-size: var(--content-margin-end-size); } :root:not(.hasSidebarEnd) { --sidebar-end-display: none; --sidebar-end-inline-size: 0px; } .sidebarEnd { display: var(--sidebar-end-display); grid-column: var(--sidebarEnd-grid-column); /* expand to into margins on narrow screens */ /* we can't expand to full-width, as this would expand the content as well. */ /* what would work is using margins, but we can't calculate them as content may be smaller than --content-width-used */ margin-inline-start: var(--sidebars-margin-inline-start); margin-inline-end: var(--sidebars-margin-inline-end); } .autofill-end { grid-column: var(--autofill-end-grid-column); } /* */ .sidebarStart { background-color: var(--sidebar-start-bg-color); } .content-margin-inline-start { background-color: var(--content-margin-start-bg-color); } .content-margin-inline-end { background-color: var(--content-margin-end-bg-color); } .sidebarEnd { background-color: var(--sidebar-end-bg-color); } .autofill-start, .autofill-end { /* use --autofill-bg-color if defined, --body-bg-color otherwise */ background-color: var(--autofill-bg-color, --body-bg-color-real); } /* Only print sidebars if requested. */ @media print { .sidebarStart { --sidebar-start-display: var( --sidebar-start-display-print, none ); } .sidebarEnd { --sidebar-end-display: var( --sidebar-end-display-print, none ); } } /* This is not needed anymore, right? */ /* .sidebarStart:empty, .sidebarEnd:empty { display: none; } */ /* //////////////////////////////////////////////////////////// */ /* //////// END: Content and Sidebar Layout ////////// */ /* //////////////////////////////////////////////////////////// */ /* BEGIN: apply content corner radii */ /* it's not perfect. with all the combinations of -normal/-wide width, sidebars, sidebarsOutside and screen width, */ /* it quickly gets messy to set sane defaults. */ /* for now, leave sidebarsOutside alone. */ /* Also, in defaultLook, we only deal with: */ /* ( narrow = 0px ), normal-noSidebars, xwide-noSidebars, normal-bothSidebars, xwide-bothSidebars */ /* Any other combination, has to be copy-pasted manually. */ /* for narrow screens */ :root { --main-border-radius-used: 0em; } /* it's not perfect. with all the combinations of -normal/-wide width, sidebars, sidebarsOutside and screen width, */ /* it quickly gets messy to set sane defaults. */ /* for now, leave sidebarsOutside alone. */ /* for wide layout */ :root:not(.content-fullwidth):not(.sidebarsOutside):not(.hasSidebarStart) .content-margin-inline-start, :root:not(.content-fullwidth):not(.sidebarsOutside).hasSidebarStart .sidebarStart { border-start-start-radius: var(--main-border-radius-used); border-end-start-radius: var(--main-border-radius-used); } :root:not(.content-fullwidth):not(.sidebarsOutside):not(.hasSidebarEnd) .content-margin-inline-end, :root:not(.content-fullwidth):not(.sidebarsOutside).hasSidebarEnd .sidebarEnd { border-start-end-radius: var(--main-border-radius-used); border-end-end-radius: var(--main-border-radius-used); } /* END: apply content corner radii */ :root { overflow-x: hidden; /* hack: prevent horizontal scrollbars in small-screen view */ overflow-y: scroll; /* always show scrollbar. Prevents non-full pages from centering menu off-center */ } body { block-size: 100%; /* should this be on :root? */ display: flex; /* to enable sticky footer */ flex-direction: column; /* background-color: #3f0220; */ /* background-color: var(--main-bg-color); */ background-color: var(--body-bg-color-real); /* background-image: var(--intro-bg-image); background-repeat: no-repeat; background-size: 95vmin; background-position: center 55%; background-attachment: var(--bg-image-background-attachment); */ font-family: var(--content-font); font-size: var(--main-font-size); color: var(--main-text-color); caret-color: var(--main-contrast-color); margin-block-start: 0rem; margin-block-end: 0rem; margin-inline-start: 0rem; margin-inline-end: 0rem; } body::before { content: ""; /* With hamburger menu, a band of body-background shines through right below the menu. */ /* Let's fix this. */ /* For small screens, make it the same color as content, (as there are no margins). */ /* For wide screens, we can make it the same color as the margins. */ background-color: var(--body-bg-color-real); background-image: var(--body-bg-image); background-blend-mode: luminosity; filter: var(--body-bg-filter); background-attachment: var(--bg-image-background-attachment); background-repeat: var(--bg-repeat); background-size: var(--bg-size); background-position-x: center; background-position-y: var(--bg-position-y); /* display: block; */ position: fixed; inline-size: inherit; block-size: inherit; left: 0rem; right: 0rem; z-index: -1; } /* fixme later: this is a crux. Make background colors work properly on default config, with narrow and wide screens. */ /* if somehow someone manages to define a content-width of wider than 32em (the default), they'd need to write an */ /* extra media query with min-width: 32em to set the background right for the transitional sizes. */ /* Same deal if using different margins, or sidebars. */ /* Even so, and with default values, it is STILL off, although the numbers add up. */ /* The background-color kicks in too early, before the widescreen layout starts. */ /* Oh why is web layout so primitive. */ @media ( min-width: calc( 2em + 0px + 32em + 0px + 2em ) ) { :root { /* set proper background color for wide screens */ --body-bg-color-real: var(--body-bg-color); } } ::selection { /* text-shadow: 1px 1px 1px var(--main-bg-color); */ background-color: var(--main-contrast-color); color: var(--content-bg-color); } @keyframes openingOld { 0% { opacity: 0; z-index: 40; } 36% { opacity: 1; z-index: 40; } 54% { opacity: 1; z-index: 40; } 90% { opacity: .15; z-index: 40; } 100% { opacity: 0.00; z-index: -210; /* 'initial' breaks some clients (old firefox, no js) */ } } @keyframes opening { 0% { background-color: black; opacity: 0; z-index: 40; } 9% { opacity: 1; z-index: 40; } 64% { background-color: var(--main-bg-color); opacity: 1; z-index: 40; } 91% { opacity: 1; z-index: 40; } 99% { opacity: .15; z-index: 40; } 100% { opacity: 0.00; z-index: -210; /* 'initial' breaks some clients (old firefox, no js) */ } } .introImage, .introImage::after { background-image: var(--intro-bg-image); /* opacity: 0; */ /* opacity: 0.05; */ /* display: none; */ /* enabled via JavaScript */ /* transition: opacity 1.5s ease-in-out; */ content: ""; top: 0; left: 0; right: 0; bottom: 0; z-index: -210; position: fixed; background-color: var(--main-bg-color); /* to overlay background image and make animation visible */ background-repeat: no-repeat; background-size: 96vmin; background-position: center 55%; /* animation-name for *main* is set via JavaScript the first time for each session. */ /* animation-name for *this* is set to 'opening' via JavaScript. */ animation-name: none; /* if you change timing here, change delay for animation on main to match */ animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 1; animation-duration: var(--intro-animation-duration); animation-direction: normal; animation-fill-mode: both; } @keyframes content { 0% { opacity: 0; } 36% { opacity: 1; } 54% { opacity: 1; } } .bgimage-static, .bgimage-static::after { background-image: var(--intro-bg-image); opacity: 1; transition: opacity 1.5s ease-in-out; content: ""; top: 0; left: 0; right: 0; bottom: 0; z-index: -200; position: fixed; background-repeat: no-repeat; background-size: 95vmin; background-position: center 55%; background-attachment: fixed; } header { color: var(--header-text-color); min-height: var(--show-header); /* allow main content to start at the top of the page if no header is shown */ /* testme: how to do this only if header is 'empty'? Probably easiest to overwrite in site css */ /* height: 2.8rem; */ /* prevent rounded corners from creating artifacts interacting with nav / .breadCrumbs */ /* border-start-start-radius: 3rem; */ /* -start- values need to be equal to nav > ul values in navigation.css */ /* border-start-end-radius: 3rem; */ /* border-end-start-radius: 1.6rem; */ /* border-end-end-radius: 1.6rem; */ margin: 0rem; padding-block-start: 0rem; /* padding-block-end: var(--nav-ol-block-padding); */ /* is this really nav-ol-block-padding or independent number? */ /* background-color: var(--header-bg-color); */ } header a { color: var(--header-link-color); } main { position: relative; font-family: var(--content-font); /* is this redundant? */ text-align: justify; hyphens: auto; /* not yet supported by all browsers */ word-break: break-word; /* required for text not inside paragraphs */ hanging-punctuation: first allow-end last; /* not yet supported by most browsers */ line-height: var(--line-height); /* border-radius: var(--main-border-radius); */ /* for narrow screens without margins, borders don't make sense for most pages. */ /* --main-border-style-real: none; */ /* border-style: var(--main-border-style-real); */ /* border-color: var(--main-border-color); */ /* border-width: var(--main-border-width); */ /* border-inline-start: 2rem solid var(--main-border-color); border-inline-end: 2rem solid var(--main-border-color); */ /* border-block-start: 1.24rem solid var(--main-border-color); */ /* golden ratio */ /* border-block-end: 1.24rem solid var(--main-border-color); */ /* min-height: max-content; */ z-index: 0; /* auto makes things weird (blockquote disappearing) */ animation-name: none; /* this is set to 'content' via JavaScript the first time for each session */ animation-timing-function: ease-out; /* animation-delay is set via JavaScript. */ /* animation-delay: var(--intro-animation-duration); */ animation-iteration-count: 1; animation-duration: 3s; animation-direction: normal; animation-fill-mode: both; /* margin-block-start: 3.6rem; */ /* larger than collapsed nav menu */ /* 3.6rem is the desired top-margin. the others are calculated from 0, since the header is set to 0 height. */ /* this is very fragile if visible header height changes... */ /* margin-block-start: 0.2rem; */ /* 4.5rem is desired for large screens */ /* margin-block-start: var(--show-header, clamp( 0.2rem, 10vh, 4.5rem ) ); /1* allow content to start from the top if header is hidden *1/ */ /* allow content to start from the top if header is hidden */ margin-block-start: var(--main-margin-block-start); /* for narrow screens, we use start-padding on the footer instead, to match footer color */ margin-block-end: var(--main-margin-block-end); } /* simplify at least some of the --main-border */ /* the rest (which borders / style) we can only do with dynamic media queries */ /* for now, need to manually set the relevant -start / -end border styles to activate */ main > div { border-width: var(--main-border-width); border-color: var(--main-border-color); } main:focus { outline:none; } /* for background image */ /* main, #pageFooter, footer .websiteInfo { */ main, main > div, footer { background-image: var(--content-bg-image); /* background-color: inherit; */ /* background-color: var(--content-bg-color); */ background-color: var(--body-bg-color-real); background-blend-mode: multiply; background-attachment: var(--bg-image-background-attachment); background-repeat: var(--bg-repeat); background-size: var(--bg-size); background-position-x: center; background-position-y: var(--bg-position-y); } .autofill-start, .autofill-end { background-blend-mode: luminosity; } /* this is needed for .draft */ .mainContentWrapper { background-image: inherit; /* background-color: inherit; */ background-color: var(--content-bg-color); background-blend-mode: inherit; background-attachment: inherit; background-repeat: inherit; background-size: inherit; background-position-x: center; background-position-y: inherit; } #main + * { /* first element after anchor - any element */ /* margin-block-start: 4ex; */ /* position "skip to content" / #main anchor so that top/beginning of text is not cut off */ /* doesn't seem to be necessary anymore - if enabled, need to revert for printing */ } /* for background image */ /* footer .contactinfo, footer .websiteInfo { */ /* footer .contactinfo { */ footer .contactinfo, #pageFooter, footer .websiteInfo { background-image: var(--footer-bg-image); background-color: var(--footer-bg-color); background-blend-mode: multiply; background-attachment: var(--bg-image-background-attachment); background-repeat: var(--bg-repeat); background-size: var(--bg-size); background-position-x: center; background-position-y: var(--bg-position-y); } footer { /* position: absolute; */ right: 0; left: 0; bottom: 0; color: var(--footer-text-color); background-color: var(--footer-bg-color); /* padding-block-start: 0rem; */ /* padding-inline-end: 2rem; */ /* padding-block-end: 1.5rem; */ padding-block-start: var(--footer-padding-block-start); margin-block-start: 1rem; margin-block-end: 1.5rem; /* fixme: gives too much margin on non-full pages */ margin-inline-start: 0rem; margin-inline-end: 0rem; } footer a:hover, footer a:focus { box-shadow: 0px 0px 7px 1px var(--header-contrast-color); } footer a, footer a:hover, footer a:focus { color: var(--footer-link-color); text-decoration-color: var(--header-contrast-color); } .websiteInfo { display: inline-block; font-size: 0.88em; color: var(--footer-text-color); /* was: --nav-link-empty-color */ vertical-align: baseline; text-align: end; min-width: min-content; /* should be max-content, but with line-breaks if it doesn't fit */ border-start-start-radius: 1rem; border-end-start-radius: 1rem; user-select: none; padding-block-start: 0.25rem; padding-block-end: 0.4rem; padding-inline-start: 1.5rem; padding-inline-end: 1.5em; margin-block-end: 0.8em; } footer .websiteInfoInner { padding-inline-end: 0.8em; /* align with contactinfo. Only needed when websiteInfo comes after #pageFooter. */ } /* some overwrites if footer is shown to make .websiteInfo aligned with #pageFooter */ /* (instead of as a separate float-out) */ #pageFooter:not(:empty) + .websiteInfoWrapper > .websiteInfo { width: 100%; border-start-start-radius: 0rem; border-end-start-radius: 0rem; padding-block-start: 1.2em; padding-block-end: 1.2em; padding-inline-start: 0rem; margin-block-end: 0em; } /* only have bottom margin if websiteInfo is disabled */ #pageFooter:not(:empty) + .websiteInfoWrapper, #pageFooter:not(:empty) + .websiteInfoWrapper > .websiteInfo { margin-block-end: 0em; } em { font-style: italic; /* italics may not be default UA style */ } /* Style phasized text bold if it is already italic. */ /* Otherwise it would not be distinguishible/emphasized from its surrounding text. */ /* The alternative would be to, in these cases, use instead of , but this has problems: */ /* a) you need to know the style while writing text (it is not semantic) /* /* b) if the text is moved/surrounding element changes, you need to remember to change to/from and */ /* NOTE: Unfortunately, there's no selector based on style, so THIS IS a FRAGILE attempt. e.g. (:style["font-style: italic;"]) */ /* */ /* NOTE: This depends on knowing which elements are styled italics, whether by UA default or by our own styles. */ /* If someone changes the font-style for any of these for a particular site or part thereof, */ /* this _will_ break (since we're forced to select by element, not style). */ /* NOTE: some languages don't use italics, so we need to include them all here. Example: arabic */ /* FIXME: are there other elements that are styled italic by default? */ /* FIXME: are there UAs that don't style these italic by default? If so, this is probably futile to begin with. */ /* should we just “give up” for now and resort to using in these cases? */ :is( blockquote, blockquote + cite, i, a, q, :lang(ar) ) > em { font-weight: bold; } strong { font-weight: bold; } pre { white-space: pre-wrap; /* prevent lines from running longer than content box */ } hr { color: var(--main-contrast-color); } .websiteInfoWrapper { display: block; } .websiteInfoInner { display: inline; /* disable by default as it can be too much and glow. */ /* text-shadow: 0px 0px 10px var(--main-contrast-color); */ /* increase contrast */ } #pageFooter:not(:empty) + .websiteInfoWrapper .websiteInfoInner { margin-inline-end: calc( 0.8em + 1.5em ); } .contactinfoWrapper, .websiteInfoWrapper { /* display: block; */ /* ATTN: if you change this, also change display for .contactinfoWrapper below! */ box-sizing: border-box; text-align: end; margin-inline-start: 0rem; /* 1.5rem for 'floating' effect */ margin-inline-end: 0rem; /* width: 100%; */ } .contactinfo, .websiteInfoInner { text-shadow: 0px 0px 5px var(--nav-text-shadow-color); /* enhance contrast */ } .websiteInfo a { /* padding-inline-end: 1rem; */ /* line up with contactinfo label above */ } #pageFooter:empty + .websiteInfoWrapper .websiteInfoInner { padding-inline-end: 0.8rem; /* account for dot, line up end of text with contactinfo label above */ } .contactinfoWrapper { display: block; margin-block-end: 3.8em; /* fixme: gives too much margin on non-full pages */ } main h1, main h2, main h3, main h4, main h5, main h6 { line-height: calc( var(--line-height) * 1 ); /* to ignore height set via x-height by main */ letter-spacing: 0.07em; hyphens: none; text-indent: 0em; /* do not indent headings, even if they are inside a paragraph */ text-align: start; word-wrap: break-word; /* don't cut off words that are wider than the viewport of narrow screens */ word-break: break-word; page-break-after: avoid; /* old browsers */ break-after: avoid; /* margin-inline-start: 1.75rem; */ /* left-hanging headings */ /* margin-inline-end: 1.75rem; */ margin-block-start: calc( var(--line-height) * 1 ); /* multiple of line height for vertical alignment */ margin-block-end: calc( var(--line-height) * 0 ); } /* firefox (sometimes?) doesn't honor headings' break-after, leaving the heading at the end of the page */ /* to 'fix' this uglyness, allow break after heading. Makes no sense, but produces the desired result. */ h1 + .paragraph, h2 + .paragraph, h3 + .paragraph, h4 + .paragraph, h5 + .paragraph, h6 + .paragraph { page-break-inside: initial; /* old browsers */ break-inside: initial; } main h1 { font-size: 1.6em; letter-spacing: 0.02em; margin-block-start: calc( var(--line-height) * 0.8 ); margin-block-end: calc( var(--line-height) * 0.2 ); } main h1:first-of-type { margin-block-start: calc( var(--line-height) * 0.5 ); } main h1:first-of-type + * { /* fixme: do this without not */ margin-block-start: calc( var(--line-height) * 1 ); } main h2 { font-size: 1.2em; } main h3 { font-family: var(--content-font-sc); font-size: 1.1em; font-weight: normal; /* font doesn't have bold small caps */ /* text-decoration: dotted underline; */ /* border-block-start: 1px solid var(--main-text-color); */ /* nice, but moves text down by border-width */ /* border-inline-start: 1px solid var(--main-text-color); */ /* nice in combination with padding-inline-start */ /* padding-inline-start: 0.8em; */ } main h4 { font-size: 1em; text-indent: var(--inside-margin); } main h5 { font-family: var(--content-font-sc); font-size: 0.9em; font-weight: normal; text-indent: var(--inside-margin); } main h6 { font-size: 0.9em; font-weight: normal; text-indent: var(--inside-margin); } /* general classes */ .width-percent-45 { width: 45%; } .width-percent-100 { width: 100%; } /* Same value as when hamburger menu starts to be shown. Remember to keep in sync. */ /* FIXME: this is a temporary hack that needs to go away. */ /* since there is no way to 'dynamicize' the hamburger menu media query yet, */ /* this media query is ok for now. */ @media ( max-width: 1279px ) { .navContactHighlight .tooltip-em:hover::before, .navContactHighlight .tooltip-em:focus-within::before { /* display: none; */ /* fixme: temporarily, until position fix is in (it only shows cut-off border as it is now) */ /* fixme: this makes it show at the top of the screen. Not optimal, but working. Note however that it may cover the link! */ width: 75%; /* ensure em.add breaks before edge of screen on narrow screens. */ top: calc( var(--line-height) * -5 ); inset-inline-start: 0.2em; } } /* Eschew the 'p' paragraph element, for it is weird and unwieldy. */ /* Also see https://css-tricks.com/some-html-is-optional/#comment-1751388 */ /* instead, use a div to create proper 'logical' paragraphs */ /* html default: display: block, margin-block-*: 1em; */ .paragraph { /* display: block; */ /* keep lines readable. */ /* max-inline-size: var(--max-paragraph-width); */ /* center. Needed for max-inline-size to make sense. */ /* fixme: is this a good idea? Will this break stuff? */ /* margin-inline-start: auto; */ /* margin-inline-end: auto; */ word-break: break-word; /* needed for overly long words on narrow screens. Otherwise, long words push the content area width off-screen, cutting off text. */ hyphens: auto; page-break-inside: avoid; /* old browsers */ break-inside: avoid; orphans: 2; /* minimum number of lines for new paragraph on old page. Otherwise start on new page. */ widows: 3; /* minimum number of lines for current paragraph on new page. otherwise start on new page. */ margin-block-start: 0rem; margin-block-end: 0ex; /* margin-block-start: 1em; */ /* default html paragraph style */ /* margin-block-end: 1em; */ } .paragraph + .paragraph { text-indent: var(--inside-margin); /* either indent successive paragraphs ... */ /* margin-block-start: calc( var(--line-height) * 1 ); */ /* ... or give them margin */ margin-block-end: 0rem; } /* to manually choose paragraph style with block margin instead of first-line-indent */ /* although, there are only automatic paragraphs in Simplicity... */ .paragraph + .paragraph.paragraphStyleMargin { text-indent: 0em; margin-block-start: calc( var(--line-height) * 1 ); } .paragraph.paragraphStyleMargin { text-indent: 0em; } main ul, main ol { text-indent: 0em; /* reset indent from 2nd and successive paragraphs */ /* margin-block-start: calc( var(--line-height) * 1.5 ); */ /* set lists apart a little */ /* this breaks the 'line grid'... */ /* margin-block-end: calc( var(--line-height) * 1.5 ); */ /* visual synchronicity aids the reader */ } /* do not indent first level */ main ul > li > ul, main ol > li > ol { margin-block-start: 0em; margin-block-end: 0em; } /* some space for 2nd level lists */ main ul > li > ul li:first-of-type { margin-block-start: calc( var(--line-height) * 0.5 ); } main ul > li > ul li:last-of-type{ margin-block-end: calc( var(--line-height) * 0.5 ); } /* have some breathing room between top-level list items */ main li + li { margin-block-start: calc( var(--line-height) * 0.5 ); /* was -end */ /* this breaks the 'line grid', though... */ } /* remove extraneous space between 2nd and deeper level li items */ main li li + li { margin-block-start: 0em; } /* hanging bullets (but only for narrow screens) */ main li { list-style-position: var(--main-list-style-position); } :lang(ar) { font-style: normal; /* arabic does not use italics */ } main li:lang(ar) { list-style-type: arabic-indic; } /* fixme: support for other number systems */ /* do not indent first level lists */ main ul, main ol { padding-inline-start: 0em; } /* indent 2nd and deeper levels */ main ul ul, main ol ol { padding-inline-start: 1em; } .mainContentWrapper { position: relative; /* needed for z-index, and also a really good idea to be able to position children. */ z-index: inherit; /* auto makes blockquote disappear */ /* For small screens, minimize margins. But leave enough space for hanging bullets. */ /* margin-inline-start: var(--content-margin-narrow); */ /* this should be enough for up to 3-digit hanging bullet items. */ /* There's no bullet points at the end of the line, so we can minimize the margin. */ /* margin-inline-end: 1.2em; */ /* More space for content is paramount, even if -end-margin is uneven. */ /* BUT: both inline sides still need to have equal margin, or block-images will be off-center. */ /* and the only way to prevent or fix this off-centering is with the _still_ unimplemented parent selector (:has). */ /* Sacrifice hanging bullets for narrow screens? (i.e, barely any margin, and list-style-position: inside) */ /* margin-inline-end: var(--content-margin-narrow); */ padding-block-start: var(--main-padding-block-start); padding-block-end: var(--main-padding-block-end); /* the intended margins for larger screens. Obsolete, we use --content-margin-inline-{start,end} now */ /* margin-inline-start: var(--content-margin); */ /* margin-inline-end: var(--content-margin); */ padding-inline-start: var(--content-padding-inline-start); padding-inline-end: var(--content-padding-inline-end); } .mainContentWrapperInner { /* fixme: not used anymore with new layout. Delete after 2021-09-15. */ /* inline-center. When is this used? */ /* margin-inline-start: auto; */ /* margin-inline-end: auto; */ } a { color: var(--link-color); hyphens: none; /* avoid confusion of urls, as they can contain dashes */ text-decoration-color: var(--main-contrast-color); font-style: italic; /* box-shadow: 0px 3px 3px violet; */ /* text-shadow: 1px 0px 3px #ca6036, -1px 0px 3px #ca6036; */ transition: box-shadow ease-out 0.2s; padding-block-end: 2px; } main :not(.citeref) a:visited { text-decoration-color: var(--nav-selected-highlight-color); /* is this too bright? */ } main :not(.citeref) a:visited:focus, main :not(.citeref) a:visited:hover { text-decoration-color: inherit; /* when using a link, it should be styled the same, whether visited or not */ } main .citeref a:visited { /* text-decoration-color: var(--main-contrast-color); */ } /* fix browser jumping too far below target */ a.anchor { display: block; visibility: hidden; padding-block-start: 0em; /* is this necessary? */ padding-block-end: 0em; /* don't create extra space */ } a.anchor::before { content: ""; display: block; visibility: hidden; height: 2em; margin-block-start: -2em; } /* ////// begin: show link target ////// */ /* * screen, normal: show ↗ for external links, ✉ for mailto: links * .showTargetOnly: always show pure target url * print, normal: show target url in [] * * about mailto: / data-link: * data-link HTML attribute is set empty for links that are mailto: links. * This is only needed for obfuscated mailto: links. * Therefore, wherever data-link is used, an equivalent mailto: selector must also be used. * If only using :mailto and not data-link, these would shift on first hover, as the proper target will then be set. * * * .showTargetOnly: * (slight misnomer, as it does not actually hide the link text) * this is ONLY useful for obscured mailto: links that have NO text * (the link does not contain any text: '') * In other words: for obscured mailto: links that should display the target address instead of some text and an icon. * I.e., obfuscated mailto: links that look like normal mailto: links. * shows ONLY ::after, using the de-obfuscated mailto: * * .plainLink: * 1) useful for print for local links where the link destination is not needed. To produce cleaner printouts. * 2) useful if the link text 'this' or 'this@example.com' equals the href. * i.e., links with text such as 'www.example.com' and not-obscured mailto: links. * -- will show the link normally, without any ::after text * */ /* all http/https (external) and mailto: links */ a[href^="http://"]::after, a[href^="https://"]::after, main a[data-link=""]::after, /* == means it is a mailto: */ main a[href^="mailto:"]::after { display: inline-block; /* text-decoration doesn't work in ::after. inline-block removes underlining. */ padding-inline-start: 0.5ch; padding-inline-end: 0.4ch; font-style: normal; /* don't distort icon from italics */ top: -0.3em; /* superscript */ font-size: 0.83em; line-height: 1em; /* prevent line-height from becoming larger */ position: relative; /* make line-height work */ } /* external links - for ltr pages */ a[href^="http://"]:dir(ltr)::after, a[href^="https://"]:dir(ltr)::after { content: "↗"; } /* external links - for rtl pages */ a[href^="http://"]:dir(rtl)::after, a[href^="https://"]:dir(rtl)::after { content: "↖"; } /* mailto links */ main a[data-link=""]::after, /* == means it is a mailto: */ main a[href^="mailto:"]::after { content: "✉"; } /* note: this is for ALL links, includes mailto: */ /* show link target, always, pure */ /* main a.showTargetOnly[href^="mailto:"]::after */ main a.showTargetOnly[href]::after { content: attr(href); /* show pure link, do not enclose in [] */ /* show these links pure, no padding, no change in position, no change in font */ padding-inline-start: inherit; padding-inline-end: inherit; font-style: inherit; top: inherit; font-size: 1em; font-weight: inherit; text-decoration: inherit; } main a.showme.showTargetOnly[data-link=""]::after { content: attr(data-who) "@" attr(data-where) "." attr(data-end) ''; } main a.showTargetOnly[href]:dir(ltr)::after, main a.showTargetOnly[href]:dir(ltr)::after { padding-inline-start: inherit; margin-inline-start: inherit; } /* note: only ever do this if the link shown is equal to the href, to prevent repeated links (especially in print) */ /* or possibly in select cases for local links to keep the printout clean */ main a.plainLink[href="mailto:"]:dir(ltr)::after, main a.plainLink[href="mailto:"]:dir(rtl)::after { content: ""; } @media print { main a.plainLink[href]:dir(ltr)::after, main a.plainLink[href]:dir(rtl)::after { content: ""; padding-inline-start: inherit; padding-inline-end: inherit; margin-inline-start: inherit; font-style: inherit; top: inherit; font-size: 1em; font-weight: inherit; } } /* show link verbatim if it is any other type of URI */ /* note: noscript is for the unavailable.html page */ /* main a.showme > noscript:not([href^="mailto:"])::after, */ /* footer a.showme:not([href^="mailto:"])::after { */ main a.showme > noscript::after, footer a.showme::after { content: attr(data-link); margin-inline-start: calc( 1em * 0.5 ); } /* assemble em.add from parts - IF link is an em address */ /* */ /* link is an email address, if data-link is empty string */ main a.showme > noscript[data-link=""]::after, main a.showme[data-link=""]::after, footer a.showme[data-link=""]::after, main a.showme > noscript[href^="mailto:"]::after, main a.showme[href^="mailto:"]::after, footer a.showme[href^="mailto:"]::after { content: attr(data-who) "@" attr(data-where) "." attr(data-end) ''; top: initial; font-size: 1em; /* use margin instead of a prefixed space to prevent box-shadow from extending to previous line in case of break. */ margin-inline-start: calc( 1em * 0.5 ); } main a.showme > noscript::after { /* display: none; */ opacity: 0; /* display: inline-block; */ /* would remove underline */ white-space: pre; /* keep leading space */ /* content: ' (' attr(data-who) '@' attr(data-where) '.' attr(data-end) ')'; */ /* show link target */ } main a.showme:hover > noscript::after, main a.showme:focus noscript::after { /* showing inline on hover is not optimal (content shift), but tooltips are not possible to position correctly in css */ /* and it is important to show link destination */ /* changing display (= inserting and removing content) for 'text-align: justify' elements, */ /* causes jumping and impossibility to make hover work, depending on the content */ /* so, we use opacity to show/hide. */ /* display: inline-block; */ opacity: 1; } @media print { /* assemble em.add. from parts. href-attribute is matched against original in-html value */ /* main a.showme[href^="#"]::after { */ /* main a.showme[data-who][data-link=""]::after { */ main a.showme[data-link=""]::after, main a.showme[href^="mailto:"]::after { display: inline-block; content: "[" attr(data-who) "@" attr(data-where) "." attr(data-end) "]"; } } @media print { main a[href]::after { display: inline-block; /* text-decoration doesn't work in ::after. inline-block removes underlining. */ padding-inline-start: 0.5ch; padding-inline-end: 0.4ch; font-style: normal; /* don't distort icon from italics */ top: -0.3em; /* superscript */ font-size: 0.83em; line-height: 1em; /* prevent line-height from becoming larger */ position: relative; /* make line-height work */ } /* show link destination after link text */ /* a[href^="http"]:not( [href*="gosimplicity.org"] )::after { */ /* a[href^="http://"]::after, a[href^="https://"]::after { */ /* only external links */ /* we need to include the :dir part to override mailto: links */ /* fixme: how to exclude images? */ main a[href]:dir(ltr)::after, main a[href]:dir(rtl)::after { content: "[" attr(href) "]"; /* unicode nbsp: \0000a0, ' ' doesn't work in css */ /* display: inline-block; */ /* text-decoration does not work for ::after elements. This stops underlining. */ opacity: 1; padding-inline-start: 0.6ch; padding-inline-end: 0ch; /* this and below: reset from @screen */ /* top: initial; */ /* font-size: 1em; */ font-weight: normal; } main a[data-link=""]:dir(ltr)::after, main a[data-link=""]:dir(rtl)::after, main a[href^="mailto:"]:dir(ltr)::after, main a[href^="mailto:"]:dir(rtl)::after { content: "[" attr(data-who) "@" attr(data-where) "." attr(data-end) "]"; } main a[href^="#"]:not([data-link=""]):not(.showTargetOnly):dir(ltr)::after, main a[href^="#"]:not([data-link=""]):not(.showTargetOnly):dir(rtl)::after { display: none; /* do not show link target for page-internal links */ } } /* ////// end: show link target ////// */ /* make empty 'links' non-responsive */ a.nolink, a.nolink:hover, a.nolink:active, a.nolink:focus { color: var(--link-empty-color); cursor: default; /* font-style: normal; */ background-color: inherit; outline-style: none; outline-width: 0rem; box-shadow: none; } header nav { user-select: none; /* prevent bullet points on copy/paste (rich text) of whole page */ } header nav, header nav a { font-family: var(--nav-font); font-style: normal; } main form { padding-inline-start: 0rem; /* use whole content width for narrow screens */ margin-inline-start: 0rem; margin-inline-end: 0rem; } main form label, main form input, main form textarea { width: 100%; /* for narrow screens, make form elements use available width */ } main form input, main form textarea { padding-inline-start: 0.2em; /* don't squish text to border */ padding-inline-end: 0.2em; } input, textarea { caret-color: black; /* otherwise it may be hard to see */ } .footerMembrane { min-height: 4em; /* inline-size: 100vw; */ /* only do this if using a border. If using an image, it would be squished to nothingness. */ min-inline-size: 100vw; /* border-block-end: 1px solid black; */ /* border line between content and footer. Can use empty div for this. */ user-select: none; /* fixme: no idea why we have to use * -2 instead of just -1 */ margin-inline-start: calc( var(--pageFooter-padding-inline) * -2 ); margin-inline-end: calc( var(--pageFooter-padding-inline) * -2 ); /* inline-size: 100vw; */ /* only do this if using a border. If using an image, it would be squished to nothingness. */ /* margin-inline-start: 50%; */ /* inline-center */ /* transform: translateX(-50%); */ } @media screen and ( min-width: 1280px ) { .footerMembrane { /* width: 100vw; */ /* avoid tiny gap between viewport edge and margin */ } } #pageFooter .footerMembrane + * { margin-block-start: 2.3em; /* in case there is footer content, give it some space */ } @media print { #pageFooter .footerMembrane { display: block; /* can't do absoute: it paints over text. */ /* position: absolute; */ /* expand to full width of printing area (override footer inline-margins) */ filter: saturate( 0% ); /* print in greyscale */ min-inline-size: 100%; /* otherwise it is huge */ width: 100%; /* needed to make margins work properly */ /* inset-inline-start: 0em; */ margin-inline-start: 0em; margin-inline-end: 0em; transform: none; } } footer .contactinfo input[type="submit"] { /* position: absolute; */ /* width: 90%; */ /* font-size: 1.5rem; */ /* top: 100%; */ /* bottom: 1rem; */ /* inset-inline-end: 2rem; */ /* height: 3.5rem; */ } footer .contactinfo { display: inline-block; box-sizing: border-box; vertical-align: baseline; text-align: start; min-width: min-content; /* should be max-content, but with line-breaks if it doesn't fit */ /* width: 80.9%; */ /* prevent linebreak when there's enough space */ /* height: 2.5rem; */ /* disable by default as it can be too much and glow. */ /* text-shadow: 0px 0px 10px var(--main-contrast-color); */ /* increase contrast */ border-start-start-radius: 1rem; border-end-start-radius: 1rem; user-select: none; padding-block-start: 0.25rem; padding-block-end: 0.3em; padding-inline-start: 1.5rem; /* padding-inline-start: 0rem; */ /* if width: 100% and parent text-align: end or center. hacky. */ padding-inline-end: 1.5rem; margin-inline-start: 0rem; /* if width: 100% and parent text-align is start or center */ /* Why is this needed? And why is this limited? Why doesn't -inline-end work? */ /* margin-inline-start: -1.5rem; */ /* if width: 100% and parent text-align: end. hacky. */ /* inset-inline-end: 1.5rem; */ /* margin-inline-start: auto; */ /* margin-inline-end: 1.5rem; */ } /* On narrow displays, long addresses will overflow without breaking. Let's fix this */ /* Not that somehow the box-shadow on hover only applies to second (last?) line if broken, although the whole link works. */ footer .contactinfo > a::after { /* display: inline-block; */ /* This is a magic number to keep text from running off screen. Some value is needed for word-wrap to take effect. */ max-width: 75vw; word-wrap: break-word; } footer .contactinfo input { box-shadow: none; } footer .contactinfo a, footer .contactinfo input { padding-inline-start: 0.8em; padding-inline-end: 0.8em; border-radius: var(--nav-border-radius); /* make this the same as the menu borders for consistency */ } footer .contactinfo a:hover, footer .contactinfo a:focus { outline-style: none; } footer .contactinfo[hidden] { display: none; /* prevent duplicate links with js disabled (display: above makes it visible) */ } footer .contactinfo input[type="submit"] { color: var(--link-color); text-decoration-line: underline; text-decoration-color: var(--main-contrast-color); font-style: italic; } :root { --pageFooter-padding-inline: 2.3em; } #pageFooter:not(:empty) { /* background-color: darkolivegreen; */ font-size: 0.88em; text-align: justify; padding-block-start: 1.5em; padding-block-end: 1em; padding-inline-start: var(--pageFooter-padding-inline); padding-inline-end: var(--pageFooter-padding-inline); margin-block-start: 1.9em; margin-block-end: 0em; /* 1.8em */ } /* can't use #pageFooterInner, as there's not css selector for empty-or-only-empty-childs */ /* and we need to select depending on whether the footer is shown or not */ /* #pageFooter > #pageFooterInner { padding-inline-start: 1.5em; padding-inline-end: 0.8em; } */ input[type="submit"], button[type="submit"] { background-color: initial; color: inherit; cursor: pointer; font-family: var(--content-font); font-style: normal; font-size: 1.5rem; text-decoration: none; border-radius: 1rem; outline-style: none; outline-width: 1px; border: none; } /* not for header/footer */ main input[type="submit"], main button[type="submit"] { box-shadow: 0px 0px 2px 1px var(--main-contrast-color); margin-block-start: 1em; /* not sure this is always wanted, but seems like sane default */ margin-block-end: 1em; } .navContactHighlight input[type="submit"] { font-family: var(--nav-font); /* font-size: 1.3rem; */ } main input[type="submit"]::before, main button[type="submit"]::before { font-size: 1.5em; white-space: pre; content: "⤷ "; } main form *:invalid { box-shadow: 0px 0px 2px 4px var(--main-contrast-color-louder); } main input[type="submit"]:dir(rtl)::before, main button[type="submit"]:dir(rtl)::before { content: "⤶ "; } main input[type="submit"]::after, main button[type="submit"]::after { font-size: 1.5em; white-space: pre; /* display: inline-block; transform: rotateY(-180deg); */ content: " ⤶"; } main input[type="submit"]:dir(rtl)::after, main button[type="submit"]:dir(rtl)::after { content: " ⤷"; /* :dir(rtl) - only working in firefox, apr-2020 */ /* workaround: [dir="rtl"], but needs dir attribute on the tags, does not inherit */ } /* for keyboard navigation */ input[type="submit"]:focus, input[type="submit"]:hover, button[type="submit"]:focus, button[type="submit"]:hover, a:focus, a:hover, video:hover, video:focus, audio:hover, audio:focus { color: var(--main-contrast-color); outline-style: none; outline-width: 2px; outline-color: var(--main-contrast-color); box-shadow: 0px 0px 7px 1px var(--main-contrast-color); /* filter: drop-shadow( 0px 0px 7px var(--main-contrast-color) ); */ /* box-shadow doesn't respect box outline */ /* drop-shadow is annoying for text */ } /* As anchor's box-shadow doesn't respect child's box outline, we need to set the box-shadow on the child directly. */ /* img can't receive focus, so select on anchor's focus. */ /* note that this still leaves the UGLY misplaced box-shadow of the , which _can't_ be fixed until :has is supported. */ a:focus img:not(.inline), a:hover img:not(.inline) { box-shadow: 0px 0px 7px 1px var(--main-contrast-color); } main div a { /* should only apply to a's with an img child. Not possibly in css, so don't put img's within divs. */ /* display: block; */ /* fixes 'random long clickable block' below image. Now the block is around the image (still too large though). */ /* padding-block-end: inherit; */ /* needed to prevent jumping content below upon hover */ } main a { padding-inline-start: 1px; /* only for screen. give box-shadow a little breathing room so text won't touch border. */ padding-inline-end: 1px; } main a, footer a { /* not in navigation, as this creates ugly artifacts with rounded menu corners */ border-radius: 0.2rem; } a:focus, a:hover { /* outline-style: none; */ } a:hover { outline-style: none; /* outline only on focus */ } body input[type="submit"]:active, body input[type="submit"]:focus, body input[type="submit"]:hover, button[type="submit"]:active, button[type="submit"]:focus, button[type="submit"]:hover, body header nav a:active, a:active { /* outline-style: dotted; */ /* groove */ outline-width: 8px; } input[type="submit"]:active, button[type="submit"]:active, body header nav a:active, a:active { /* outline-style: dotted; */ /* outline-width: 24px; */ box-shadow: 0px 0px 7px 4px var(--nav-selected-highlight-color); } div.debug { color: #cacaca; background-color: #000000a0; } .hideScrollbars { scrollbar-width: none; } /* infobox */ .infobox { display: block; /* if inline, border will be drawn per line, not for the .infobox */ line-height: var(--line-height); /* only needed if font-size is changed and infobox spans more than one line */ border: 6px double var(--infobox-border-color); padding-block-start: 0.2em; padding-block-end: 0.2em; padding-inline-start: 0.3em; padding-inline-end: 0.3em; margin-block-start: var(--line-height); margin-block-end: var(--line-height); } main div.templateTitle { /* the 'main div' here is to override '+ *' for margin-block-start */ display: inline-block; /* make vertical margin work */ font-family: var(--content-font-sc); letter-spacing: 0.06em; /* margin-inline-start: 1.75rem; */ /* same as headings */ margin-block-start: inherit; /* template title does not need extra margin */ margin-block-end: calc( var(--line-height) * 3 ); } main div.templateTitle:not(.lastModified) { margin-block-end: inherit; /* ensure .lastModified stays close */ } .templateTitle + .lastModified { /* add space after lastModified date, but only if it is at the beginning of the page. */ /* i.e. not in directoryIndex or in content text, for example */ margin-block-end: calc( var(--line-height) * 3 ); } /* blockquote and cite in html need to be
, with NO WHITESPACE INSIDE each element. (As opposed to the more logical cite wrapped inside blockquote) This is so that templates can include blockquotes that, if not used on any particular page, will be made invisible via css. Otherwise, the blockquote's block margin would always occupy space, as it's impossible to select an empty-or-only-empty-children element in css. */ blockquote { --blockquote-margin-block-start: calc( var(--line-height) * 1 ); } blockquote + cite { --blockquote-margin-block-end: calc( var(--line-height) * 1 ); } blockquote { font-style: italic; letter-spacing: 0.1em; position: relative; page-break-inside: avoid; /* sad old browsers */ break-inside: avoid; /* works, but needs extra top-margin to not cut off giant quotes */ margin-inline-start: var(--inside-margin); margin-inline-end: 0em; /* 1em */ /* for narrow screens, make quote text as wide as possible while still having distinct margins. */ margin-block-start: var(--blockquote-margin-block-start); /* Only small margin to keep blockquote visually connected to following cite elemement */ /* Actually, giving it a full line-height of breathing room, instead of 0.5lh, looks more pleasing. */ margin-block-end: calc( var(--blockquote-margin-block-start) * 1 ); } blockquote, cite { text-indent: 0; /* do not inherit indent if inside a paragraph */ font-size: 94%; /* balancing act: adjust line-height in accordance with font-size, or maintain line spacing? (especially important for two facing pages) */ /* For online pageless text, proper line-height in relation to text is more important. */ /* For printed text, maintaining line spacing may be more important. So for print, maybe just leave font-size and line-height as is. */ line-height: calc( var(--line-height) * 0.95 ); } blockquote:empty, cite:empty { display: none; /* for when a template includes blockquote, but the actual page doesn't use it */ } blockquote:not(:empty)::before { --quote-sign-font-size: 12; /* needs to be a unitless number to be useable in the a calc() division denominator below */ content: "”"; /* display: block; */ position: absolute; color: var(--quote-mark-color); font-size: calc( var(--quote-sign-font-size) * 1em ); /* to make the unitless number ems, multiply by 1 */ line-height: 0em; /* do not mess with line height */ /* inset-inline-start: calc( -1em / 12 * 1 ); */ /* fixme: use inset-inline-start once supported by browsers */ /* normal quote mark in front of text: font-size: 3em; top: 1em; */ /* put quote sign on line. Make it 4x size of parent font-size. */ top: calc( ( 1em / var(--quote-sign-font-size) ) * 4 ); /* At least one number must have a unit (em). */ z-index: -10; /* margin-inline-start: -2.2rem; */ /* ??? */ } blockquote + cite { display: block; color: var(--quote-cite-color); font-style: italic; /* font-size: 92%; */ line-height: 0rem; margin-inline-start: var(--inside-margin); margin-block-start: calc( var(--blockquote-margin-block-start) * 0.5 ); margin-block-end: calc( var(--blockquote-margin-block-end) * 1.5 ); } blockquote + cite::before { content: "\00000a— "; } sub, sup { line-height: 1em; /* do not allow sub and sup to make line higher */ } .poetry { white-space: pre; } code { word-break: break-all; /* don't justify text, don't break long e.g. paths before line ends. */ hyphens: none } .bold { font-weight: bold; } /* center horizontally */ .center { position: relative; /* fixme: does this need to be left and not inset-inline-start? Does it matter in combination with translateX? */ left: 50%; transform: translateX(-50%); } .tooltip-em::before { display: none; position: absolute; word-wrap: anywhere; font-family: var(--content-font-sc); background-color: var(--main-contrast-color); color: var(--main-bg-color); text-shadow: none; border-radius: 1em; padding-block-start: 0.3em; padding-block-end: 0.3em; padding-inline-start: 0.8em; padding-inline-end: 0.8em; margin-block-start: calc( var(--line-height) * -2.4 ); /* more distance for tooltip to accomodate for possible wrapping */ z-index: 5; /* prevent menu items from overlapping tooltip */ } /* for elements too close to the top, tooltip must go below */ /* fixme: how can I do this automatically, without an extra class? */ nav .tooltip-em::before { width: max-content; /* do not break on wide screens */ margin-block-start: calc( var(--line-height) * 1.4 ); } .tooltip-em:hover::before, .tooltip-em:focus-within::before { display: inline-block; inset-inline-end: 1em; /* prevents tooltip from covering link and word-wrapping too eagerly in no-js footer */ } /* display tooltip for link generated from 'data-' attributes, for em.add. */ /* assemble em.add from parts - IF link is an em address */ .tooltip-em[data-link=""]::before { content: attr(data-who) "@" attr(data-where) "." attr(data-end); } /* show link verbatim if it is any other type of URI */ .tooltip-em:not([data-link=""])::before { content: attr(data-link); } .c_nojs input.c_url { display: none; /* hide field */ } /***** OLD LEADERS IMPLEMENTATION: BEGIN ******/ /* these do not end-align large numbers (4 digits) properly */ .dottedList { display: block; } .dottedList dl { width: 100%; margin-inline-start: inherit; /* doesn't inherit it from parent? It's too wide */ margin-inline-end: inherit; margin-block-start: 0rem; } .dottedList dt { display: inline-block; width: 89%; overflow: hidden; /* white-space: nowrap; */ /* max-width: 76%; */ /* hack to fix right column going off screen when screen is narrow */ max-block-size: var(--line-height); } .dottedList dd { width: 11%; display: inline-block; text-align: end; vertical-align: top; /* put text back onto its baseline (it is below, otherwise) */ /* overflow: hidden; */ white-space: nowrap; margin-inline-start: 0rem; /* should be 0rem - larger because of hack for small displays */ } .dottedList dt::after { content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; margin-inline-start: 1rem; margin-inline-end: 0.6rem; } /***** OLD LEADERS IMPLEMENTATION: END ******/ /* ////////// DOT LEADERS: BEGIN ////////// */ :root { --leaders-inline-padding: 0.5em; /* space before and after leaders */ } .leaders { padding-inline-start: 0; padding-inline-end: 0; /* margin-block-start: var(--line-height); margin-block-end: var(--line-height); */ } .leaders li { display: table; } .leaders li div { display: table-cell; } .leaders li div:first-child { /* text before leaders */ position: relative; overflow: hidden; /* prevent underrunning the end item */ } .leaders li div:first-child:after { /* the actual leaders */ content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; position: absolute; margin-inline-start: var(--leaders-inline-padding); inline-size: 100%; } .leaders li div + div { /* text after leaders */ text-align: end; inline-size: 0.01%; /* hacky trick. Needed to make the leaders work. */ word-break: normal; /* override from paragraph style, to prevent every. singe. character. from being wrapped. */ vertical-align: bottom; /* keep text aligned in case text before leaders gets broken into multiple lines. */ padding-inline-start: var(--leaders-inline-padding); } /* ////////// DOT LEADERS: END ////////// */ /* typography: raised first letter*/ /* p::first-letter { font-size: 3em; vertical-align: baseline; margin-inline-end: 0.05em; } */ /* fancy style for raised first letter */ /* p::first-letter { background-color: var(--main-bg-color); background-image: linear-gradient( transparent 69%, var(--main-contrast-color) 69%, var(--main-contrast-color) 81%, transparent 81% ); background-blend-mode: luminosity; border-start-start-radius: 1em; border-end-end-radius: 1em; } */ /* hide elements visually but not for screen readers */ .UNUSED-hidden { position: absolute; left: -100000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .noBlockStartMargin { margin-block-start: 0rem; } .priceList dd { font-family: var(--content-font-sc); letter-spacing: 2px; } .citeref > a { page-break-before: avoid; /* old browsers */ break-before: avoid; /* keep cite reference on same line as preceeding word */ font-style: normal; /* remove italics */ } .citeref > a { /* display: inline-block; */ /* make min-inline-size have effect */ /* Fixme: this can lead to huge spaces before a reference mark */ min-inline-size: 1em; /* tiny links are pointless */ } /* insert comma between consecutive citerefs */ .citeref + .citeref::before { /* content: ','; */ /* can't do this :(. The web has a tendency to prevent simplicity. */ /* Need adjacent sibling selector that works as adjacent sibling selector instead of adjacent-or-separated-by-text sibling selector. */ } /* and a hacky attempt... */ .citerefSeparator::before { display: inline-block; /* this causes text-decoration to be set to none. */ /* Note that it's still part of the link (hover etc), but normal appearance of separator is proper, not underlined. */ content: '\002009,'; /* 002009 is 'thin space' */ } .references { display: block; margin-block-start: calc( var(--line-height) * 3 ); } /* .references:empty { display: none; } */ .references cite { display: block; font-style: normal; /* don't print references in all italics */ } /* automatically number references */ /* this _would_ be useful, if there were a way to populate a references list at the end of the document */ /* main { counter-reset: references; } .citeref > a { counter-increment; } references cite { content: counter( references ) ') '; } */ .sequence { position: relative; /* display: block; */ text-align: end; /* prevent tearing-open of words */ margin-block-start: calc( var(--line-height) * 2 ); /* margin-inline-end: 1.6rem; */ /* align with main */ /* margin-inline-end: 1.75rem; */ /* align with h1 within main */ /* margin-block-start: -2rem; margin-block-end: 1rem; */ float: inline-end; /* fixme: don't use float! */ user-select: none; } .sequencePrev { /* position: absolute; inset-inline-start: 0rem; */ } .sequencePrev + .sequenceNext { margin-inline-start: 1.2rem; /* only add margin if both links are present*/ } .sequenceNext { /* position: absolute; inset-inline-end: 0rem; */ } .sequencePrev::before { content: "<\0000a0"; /* non-breaking space to 'glue' sign to same line */ } .sequenceNext::after { content: "\0000a0>"; } .directoryIndex > li { break-inside: avoid; /* keep entries and their lastModified info on the same page */ } .directoryIndexLastModified, .lastModified { /* text-align: start; */ /* why did I add this? Seems unnecessary */ font-size: 0.82em; color: var(--main-text-faded-color); font-style: italic; /* margin-inline-start: 0.74em; */ } .draft { /* content: "✍\00fe0e \000020DRAFT ✍\00fe0e"; */ display: block; /* with position: sticky, inline disables transforms, making putting text inline and not rotated */ position: sticky; /* absolute or sticky */ font-weight: bold; font-size: 1.1em; letter-spacing: 0.2em; /* line-height: min-content; */ text-align: center; word-wrap: break-word; color: var(--main-contrast-color); background-color: var(--main-bg-color); /* inset-inline-end: min( 3rem, 3vw ); */ /* keep close to edge on narrow displays */ /* top: -2.1rem; */ /* this and rotateZ below are approximate values to connect the borders to borders of main */ top: 0em; /* needed for sticky */ /* width: fit-content; */ /* block-size: calc( var(--line-height ) * 1 ); */ max-block-size: calc( var(--line-height ) * 2 ); /* this & overflow: prevent filling the whole height if draft message spans more than one line */ text-overflow: ellipsis; /* show ellipsis if text is too long */ overflow-y: hidden; /* make ellipsis show */ white-space: nowrap; /* make ellipsis show */ /* height: fit-content; */ /* 2em */ border-block-start: 0.4rem solid #d05252; border-inline-end: 0.4rem solid #950c39; border-block-end: 0.4rem solid #950c39; border-inline-start: 0.4rem solid #d05252; /* transform: rotateZ(167deg) rotateX(180deg) rotateY(180deg); */ pointer-events: none; user-select: none; z-index: 10; padding-inline-start: 0.2em; /* increase chance of long text fitting in one line */ padding-inline-end: 0.2em; /* margin-inline-start: calc( var(--inside-margin) + 0.1em ); */ margin-block-start: 0em; /* for narrow screens, don't move it up into the bredcrumbs. Leave it in content area. */ margin-block-end: 2.6em; } /* ////// BEGIN fix draft link and selection colors ////// */ /* these can all go away if I decide to not change text color for drafts (only keep header) */ @MEDIA DISABLED { /* How can I do this only if .draft is present? Need parent selector... */ .draft ~ * { /* ok, this is a start */ color: var(--main-bg-color); /* background: inherit; */ /* when bg filters are used, this may produce low contrast */ background-blend-mode: inherit; background-color: var(--main-contrast-color); padding-inline-start: 0.3em; padding-inline-end: 0.3em; border-inline: 0.5rem solid var(--main-bg-color); } .draft ~ *::selection { color: var(--main-contrast-color); background-color: var(--main-bg-color); } .draft ~ * a { color: inherit; /* make link color different from background color */ text-decoration-color: inherit; } .draft ~ * a:hover, .draft ~ * a:focus { box-shadow: 0px 0px 7px 1px var(--main-bg-color); /* this apparently gets overwritten */ } .draft ~ * a::selection { color: var(--main-contrast-color); /* do not let text disappear in background while selected */ background-color: var(--main-bg-color); } .draft ~ div.sequence { background-color: var(--content-bg-color); /* restore to normal color */ border-width: 0em; /* no need for draft borders */ } .draft ~ div.sequence a { color: var(--link-color); } .draft ~ div.sequence a:hover, .draft ~ div.sequence a:focus { box-shadow: 0px 0px 7px 1px var(--main-contrast-color); } } /* ////// END fix draft link and selection colors ////// */ /* tinted background for lightbox */ #fullscreenShade::before { content: ''; display: block; position: fixed; inset-block-start: 0; inset-inline-start: 0; background-color: hsl( 0deg 0% 0% / 90% ); width: 100vw; height: 100vh; } /* allow header to be covered by lightbox */ .preserve3d { transform-style: preserve-3d; } /* lightbox item: makes the element cover the whole screen (maintaining aspect) */ main img.lightboxItem, main video.lightboxItem:not(:fullscreen), main audio.lightboxItem, main .lightboxitem { display: block; /* to center images that are normally inline */ position: fixed; max-width: 100vw; max-height: 100vh; /* inset-block-start: 50%; */ inset-inline-start: 50%; transform: translateY( -50% ); /* translateX( -50%) */ border-style: none; /* was !important */ margin-block-start: 0em; margin-block-end: 0em; z-index: 40; } /* hide visually, without moving it off-screen, and keep it available for keyboard and sceen readers */ .visuallyhidden { position: absolute; /* !important */ height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); /* deprecated, only fallback for old browsers */ clip-path: inset(50%); white-space: nowrap; /* added line */ /* https://a11yproject.com/posts/how-to-hide-content/ */ margin: -1px; padding: 0px; border: 0px; /* needed? */ } /* just hide. */ .hidden { display: none; } @media not print { .printOnly { display: none; /* only show when printed */ } } /* otherwise covers whole page, disabling keyboard use */ a.skipTo { height: initial; width: initial; user-select: none; } /* basically, reset .visuallyhidden */ a.skipTo:focus, a.skipTo:active { position: initial; background-color: var(--main-bg-color); /* ensure legibility, especially over image background */ background-image: var(--body-bg-image); background-blend-mode: multiply; background-attachment: var(--bg-image-background-attachment); background-repeat: var(--bg-repeat); background-size: var(--bg-size); background-position-x: center; background-position-y: var(--bg-position-y); height: max-content; width: max-content; overflow: initial; clip: initial; clip-path: initial; white-space: initial; outline-style: dotted; color: var(--header-contrast-color); outline-color: var(--header-contrast-color); text-decoration-color: var(--header-contrast-color); outline-offset: -1rem; /* make outline show */ box-shadow: none; border-start-start-radius: 1rem; border-start-end-radius: 1rem; border-end-start-radius: 0rem; border-end-end-radius: 0rem; padding: 1.4rem; /* arbirtary value, to make outline show*/ margin: initial; } /* if called 'scrollToTop', will be blocked by ad blocker */ a.skipToTop { display: inline-block; position: sticky; background-color: var(--main-bg-color); top: calc( 100vh - 12rem ); width: 3rem; font-size: 2.6rem; text-align: center; vertical-align: middle; text-decoration: none; user-select: none; z-index: 10; border: 1px solid var(--main-contrast-color); border-radius: 50%; } .skipToTop:focus, .skipToTop:hover { background-color: var(--main-bg-color); /* border: 1px solid var(--main-contrast-color); */ transform: scale(1.08); transition: transform ease-in-out 0.5s; } .skipToTopWrapper { display: block; display: none; /* it's broken */ /* outline: 1px solid white; */ /* show moving area */ position: absolute; /* width: 3rem; */ /* height: 100%; */ height: calc( 100% - 32vw ); /* why does this seem to 'work' ? super hacky */ /* min-height: max-content; */ /* max-height: max-content; */ inset-inline-end: 0rem; /* inset-inline-start: 70%; */ /* same as body. hacky, and will not work when main starts to shrink */ top: 100vh; overflow-y: visible; margin-inline-end: 1rem; } /* ////////////////// */ img, video, audio { /* hmm, not sure about audio? */ display: block; /* assume most visual media will be given its own space, i.e. non-inline */ /* margin-inline-end: 3.2rem; */ /* fix to center images in rtl documents. Not sure why they go off-center in the first place. */ } img.inline, video.inline, audio.inline { /* make inline media work like characters, on the baseline and without space around them. */ padding-block-start: 0; padding-block-end: 0; margin-block-start: 0; margin-block-end: 0; } /* fixme: should '.poster foo' be foo.poster? I don't think we ever wrap an img or video inside a ...div?.poster ? */ /* .poster img, main img, .poster video, main video { */ main img, main video { /* Ensure *tall* images don't become uncomfortably tall. */ /* There is no general solution possible. */ /* Super tall but narrow images, such as infographics, need to be allowed to be as 100% width allows. Even if that means many times vw. */ /* these need to be dealt with separately, with class 'fullheight'. */ max-height: 100vh; width: auto; /* needed to keep aspect ratio */ /* fixme: remove this? or make it max-width: 100%?*/ } /* main img:not(.inline), main video:not(.inline):not(:fullscreen) { */ /* fixme: this is too convoluted. Need more simplicity here! */ .mainContentWrapper img:not(.inline):not(.poster), .mainContentWrapper video:not(.inline):not(.poster):not(:fullscreen) { border: var(--image-border-width) outset var(--main-contrast-color); padding: 3px; box-sizing: border-box; /* keep image within main content margin */ } /* why would anyone want borders or margins around their fullscreen elements applied by default? */ /* fimxe: do these selectors all really belong together? and the padding? */ .mainContentWrapper img:not(.inline), main video:not(.inline):not(:fullscreen), .mainContentWrapper audio:not(.inline) { /* fixme: some magic numbers... but seems to work allright */ /* max-width: calc( 100% - ( 2 * 4vw ) - 1rem ); */ /* was disabled on aug-29. Remove if no issue after sept-1. */ max-width: 100%; /* border: var(--image-border-width) outset var(--main-contrast-color); */ padding: 1px; margin-inline-start: 0rem; margin-inline-end: 0rem; } /* we need to exclude .galleryItem – otherwise, the first column will be offset block-wise by the margin */ .mainContentWrapper img:not(.inline):not(.galleryItem), main video:not(.inline):not(.galleryItem):not(:fullscreen), .mainContentWrapper audio:not(.inline):not(.galleryItem) { margin-block-start: 1.25rem; margin-block-end: 1.25rem; } .mainContentWrapper img:not(.inline), .mainContentWrapper video:not(.inline), .mainContentWrapper audio:not(.inline) { /* center horizontally */ /* let's not do this automatically. Turns out there are too many instances where content images need not be centered. */ position: relative; /* fixme: does this need to be left and not inset-inline-start? Does it matter in combination with translateX? */ /* left: 50%; */ /* transform: translateX(-50%); */ } /* limit to height of viewport. Useful if default is to limit images and videos to viewport height. */ main .fullheight { width: auto; max-height: 100%; } /* limit to height of viewport. Useful if default is to allow images and videos to be as tall as needed. */ main .screenheight { width: auto; max-height: 100vh; } /* -------------- BEGIN: poster ------------------- */ :root { /* There's trouble with css... */ /* :root needs to be inline-size: 100%, as with 100vw content would get cut off under the scrollbar. */ /* Posters need to be 100vw to fill the width, but if they are 100vw they get cut off underneath the scrollbar.... */ /* because of course, css thinks 100vw = 100vw + freakin' scrollbar */ /* So the only thing that would 'work' is a JavaScript hack... but we can't have JavaScript for _basic page layout_ ! */ /* Seriously, this is ridiculous. Nobody wants to paint under the scrollbars. Can we get a 'vw-actual-viewport-width' unit? */ /* then set --vw100-used to --vw100 and fallback to ~97vw if not set (no JavaScript), */ /* and use vw100-used to calculate poster sizes. */ /* --vw100: calc( 100vw - env(scrollbar-width) ); */ /* maybe one day possible hack? */ /* Also, it's (quite) impossible to test... firefox dev tools have 'hiding' scrollbars that just overlay, so there it's ok! */ /* fixme: as soon as a css solution is available, fix this! */ /* 100vw... is the crux of the problem. With 97vw, we should avoid the scrollbars and not cut off the image. */ /* --vw100 is set via JavaScript ... :( */ --vw100-used: var( --vw100, 97vw ); } :root { /* The calc – instead of a straight XXvw – is to ensure image does not push out margins on narrow displays. */ /* Plus, it seems appropriate to use the same margins as for the content. */ /* this is for narrow displays */ --poster-max-inline-size: calc( 100vw - ( var(--content-margin-start-size) + var(--content-margin-end-size) ) ); } :root.content-fullwidth .poster { /* go full-out to the very sides on fullwidth pages */ --poster-max-inline-size: calc( 100% + var(--content-margin-start-size) + var(--content-margin-end-size) ); } :root { /* no sidebars */ --poster-max-inline-size-wide-no-sidebars: calc( 100vw - ( var(--content-margin-start-size) + var(--content-margin-end-size) ) ); /* with sidebars: */ --poster-max-inline-size-wide-with-sidebars: calc( 100% + var(--content-margin-start-size) + var(--content-margin-end-size) ); /* set default to without sidebars */ --poster-max-inline-size-wide: var(--poster-max-inline-size-wide-no-sidebars); } :root.sidebarsOutside.hasSidebarStart:not(.hasSidebarEnd) { --poster-max-inline-size-wide-with-sidebars: calc( var(--vw100-used) - var(--sidebar-start-inline-size) ); } :root.sidebarsOutside.hasSidebarEnd:not(.hasSidebarStart) { --poster-max-inline-size-wide-with-sidebars: calc( var(--vw100-used) - var(--sidebar-end-inline-size) ); } :root.sidebarsOutside.hasSidebarStart.hasSidebarEnd { --poster-max-inline-size-wide-with-sidebars: calc( var(--vw100-used) - var(--sidebar-start-inline-size) - var(--sidebar-end-inline-size) ); } :root.hasSidebarStart, :root.hasSidebarEnd { /* we need the max 100% to prevent -start sidebar from being pushed offscreen with .sidebarsOutside */ /* Though I'm not sure what's going on? I mean, the the poster stays the same size, */ /* what changes is if the content-margins are inside the poster or outside. */ --poster-max-inline-size-wide: max( var(--poster-max-inline-size-wide-with-sidebars), 100% ); } /* the 'not fullscreen' part is to override video styles */ .poster, .poster:not(:fullscreen) { position: relative; max-inline-size: var(--poster-max-inline-size); block-size: auto; left: 50%; /* center */ transform: translateX(-50%); border: none; /* centering */ direction: ltr; /* fix to center images in rtl documents */ /* is this needed for non-postered images and videos? Is this even a good idea? */ margin-inline-start: 0; margin-inline-end: 0; } .poster:focus, .poster:hover { box-shadow: none; } /* -------------- END: poster --------------------- */ main a:not(:empty) { /* should be 'main a:has(> img)', but is not implemnted yet */ margin-inline-start: 0rem; /* keep image centered, even if inside a link */ } main form textarea { /* max-width: 15rem; */ display: flex; /* what's this? Do we want this? */ flex-direction: column; white-space: pre; /* for sane behaviour */ } form label { /* this needs to include only labels within a form to not break navigation */ /* max-width: 15rem; */ float: inline-start; margin-inline-end: 1rem; text-align: start; } input[type="text"] { display: block; margin-block-start: 0.1rem; margin-block-end: 0.6rem; width: 100%; /* This may (will?) not always be desirable, but will at least ensure they stay within main. max-width does not work? */ /* also, width is having a weird base - it's not taken from parent? */ } form input[type="text"], form textarea { font-size: 1em; line-height: calc( var(--line-height) * 1 ); max-width: 100%; /* allow form input fields to use the whole content area width */ background-color: var(--main-text-color); } /* Make distinction between summary and content clear for opened details elements. */ details[open] > summary { font-weight: bold; } .inline { display: inline; /* to override default media display mode */ } .inline-block { display: inline-block; /* to specify display mode */ } .block { display: block; /* to specify display mode */ } .strikethrough { text-decoration: line-through; } /* ////////// MEDIA-GRID WITH COLUMNS: BEGIN ////////// */ /* Note: We want to keep the media items orientation, regarless of writing-mode (e.g. top-down rtl). Even if text and navigation adapt to the writing mode, people still want to see images without having to tilt their head. And media controls. Fixme: So, for the gallery, use left/right, width/height instead of logical properties where it makes sense. */ main .gallery .lightboxItemLinkActive { position: fixed; /* absolute doesn't work well for images close to bottom */ max-width: max-content; /* needed to not extend image href outside of image, to allow clicking beside image to close lightbox */ inset-inline-start: 50%; inset-block-start: 50%; /* box-shadow: none !important; */ outline: none; /* prevent unsightly 'ants' from default style */ transform: translateX( -50% ) translateY( -50% ); z-index: 40; } /* begin 'nice frame' */ /* a nice, subtle frame. Only for videos. */ main .gallery video.lightboxItemLinkActive { box-shadow: 0px 0px 6px 0px grey; padding-inline-start: 5px; padding-inline-end: 5px; padding-block-start: 5px; padding-block-end: 5px; } main .gallery video.lightboxItem { max-height: 96vh; /* needed for 'frame' to show on block-edges */ } /* only if 'nice frame' is shown */ /* main .gallery video.lightboxItem { margin-block-start: var(--lightbox-wrapper-margin); margin-block-end: var(--lightbox-wrapper-margin); } */ /* end 'nice frame' */ /* .gallery .lightboxItem:hover, .gallery .lightboxItemLinkActive:focus */ .gallery .galleryItemLinkWrapper .lightboxItem, .gallery .lightboxItem { box-shadow: none; } /* need to use :not(.inline) for img to override earlier style */ .gallery img:not(.inline).lightboxItem, .gallery .lightboxItem { border: none; } .gallery video:not(.inline):not(.poster):not(:fullscreen) { /* border: none; */ } main .gallery audio.lightboxItemLinkActive { max-width: 100vw; /* audio element seems not to have a working max-content, so need to set this separately */ background-color: black; border-style: solid; /* make the player size (padding) visible */ border-color: var(--main-contrast-color); border-radius: 1em; padding-block-start: 2em; /* make the player large enough to not accidentally dismiss */ padding-block-end: 2em; } main .gallery audio.lightboxItemLinkActive { max-width: 100vw; /* audio element seems not to have a working max-content, so need to set this separately */ } main .mainContentWrapper video.lightboxItemLinkActive, audio.lightboxItemLinkActive { width: auto; /* confine time seeker to video width */ transform: translateX( -50% ) translateY( -50% ); } /* :root { --lightbox-wrapper-margin: 1em; } */ /* only for video, compensate for block margin. Let images be completely fullscreen. */ /* used when video is 'framed', i.e. box-shadow or border */ /* main .mainContentWrapper video.lightboxItemLinkActive { transform: translateX( -50% ) translateY( calc( -50% - var(--lightbox-wrapper-margin) ) ); } */ .gallery .lightboxItemLinkActive img { inset-inline-start: auto; margin-inline-start: auto; margin-inline-end: auto; transform: none; } .gallery { /* column-count: 1; */ /* set more columns in media queries */ /* column-width: 250px; */ column-width: max( 180px, max( 200px, 16vw ) ); /* the last max value of the last max indicates the maximum number of columns (100vw / value) */ /* column-width: clamp( max( 100px, 2vw ), max( 450px, 20vw ), max( 200px, 25vw) ); */ /* inset-inline-start: 0; */ /* was this needed? */ background-color: var(--gallery-background-color); } .gallery > * { width: 100%; } .gallery > a.galleryItemLinkWrapper { display: block; /* align column start */ box-shadow: none; /* remove phantom box shadow before / after link */ padding-inline-start: 0em; padding-inline-end: 0em; padding-block-start: 0em; padding-block-end: 0em; margin-block-end: 1em; } .gallery audio.galleryItem { margin-block-end: 1em; /* for narrow displays */ } .gallery img, .gallery video:not(:fullscreen), .gallery audio { border-width: 2px !important; max-width: 100%; /* was !important */ padding-block-start: 0em; padding-block-end: 0em; margin-block-start: 0em; margin-block-end: 0em; } .gallery .galleryItemLinkWrapper img.lightboxItem { padding-inline-start: 0em; padding-inline-end: 0em; padding-block-start: 0em; padding-block-end: 0em; } .gallery audio { width: 96vw; } /* new breakpoints, when leaving margin as-is (i.e., not filling whole screen ) */ .gallery { --gallery-column-count: 1; } @media ( min-width: 400px ) { .gallery { --gallery-column-count: 2; } } @media ( min-width: 828px ) { .gallery { --gallery-column-count: 3; } } @media ( min-width: 1280px ) { .gallery { --gallery-column-count: 4; } } @media ( min-width: 2600px ) { .gallery { --gallery-column-count: 5; } } /* on small screens, rotate video */ @media ( orientation: portrait ) { .gallery video.lightboxItem.lightboxItemLinkActive:not(:fullscreen) { transform: translateX(-50%) translateY(-50%) rotateZ(270deg); /* vh is physical device height, vw is physical device width */ /* when rotated, this does not change. But width is width of element, which is rotated. */ /* max-width: 100vh; */ max-width: calc( 100vh - 1.4em ); /* 96vh */ /* because of rotate, use vh for width */ max-height: calc( 100vw - 1.4em ); /* 96vw */ /* because of rotate, use wv for height */ /* box-shadow: none; */ } } /* ////////// MEDIA-GRID WITH COLUMNS: END ////////// */ /* Begin Error 404 Not Found */ #errorNotfoundPlayerControls { margin-inline-start: revert; /* center */ margin-inline-end: revert; width: 100%; text-align: center; } .errorNotfoundPlayerToggle { color: black; background-color: inherit; font-size: 6em; cursor: pointer; border-color: var(--main-contrast-color); border: 0px; transition: transform 0.9s ease; } .errorNotfoundPlayerToggle:only-child { left: inherit; margin-inline-start: auto; /* inline-center if there is only one dancer */ margin-inline-end: auto; } #errorNotfoundPlayerControls img.errorNotfoundPlayerToggle { border-style: none; width: 15vmax; } .errorNotfoundPlayerToggle:nth-child(odd) { color: var(--link-color); transform: rotateY(180deg); } .errorNotfoundPlayerToggle:nth-last-child(1) { /* transform: rotateX(180deg); */ } .errorNotfoundPlayerToggle:nth-child(3n+1) { color: var(--main-contrast-color); } @media print { #errorNotfoundPlayerControls .errorNotfoundPlayerToggle { color: initial; } .errorNotfoundPlayerToggle { filter: saturate(0%); /* text-shadow trick above doesn't work with emojis? */ } } /* End Error 404 Not Found */ /* This media query should be OK also without syncing. */ /* Otherwise, should coincide with --content-width-normal, but is not essential. */ @media ( min-width: 40em ) { main form label, main form input, main form textarea { /* fixme: use flexbox or grid or something instead of media queries */ width: revert; /* for narrow screens, make form elements use available width */ } .tooltip::before, .tooltip-em::before { margin-block-start: calc( var(--line-height) * -1.5 ); /* we have enough space to not wrap, so minimize the distance */ } } /* this media query is ok. */ /* No need to sync with anything, it just needs to have enough space. */ @media ( min-width: 32em ) { .draft { line-height: calc( var(--line-height ) * 2 ); /* if same as height, it will center text vertically */ padding-inline-start: 1em; padding-inline-end: 1em; margin-block-start: -1.6em; } } @media print { :root body { /* --main-font-size: 1rem; */ --main-font-size: 18px; } header { background-image: none; line-height: 1rem; /* larger than 1rem introduces page-break after header?! */ } body { /* display: flex; */ /* otherwise, only first page is printable in firefox */ /* block: everything prints, but only header on first page, main starts on 2nd page*/ /* - see header's line-height above for workaround */ display: block; color: black; background-image: none; } body::before { display: none; /* do not print background */ } #heroTitle img, #heroTitle video { display: none; } #heroTitle { display: none; /* heroes are not for printing */ /* though the text probably should (as below) - but it's using up space even if not using a hero at all. So disable for now. */ block-size: 40%; max-inline-size: 100%; } #heroTitle .heroTitleTextWrapper { max-inline-size: 92%; /* don't box the text, put between two lines */ border-start-start-radius: 0em; border-start-end-radius: 0em; border-end-start-radius: 0em; border-end-end-radius: 0em; border-inline-start-style: none; border-inline-end-style: none; } #heroTitle .heroTitleText { color: black; font-size: larger !important; /* important to override javascript-generated inline style */ max-inline-size: 100%; } main { display: block; /* for some reason, grid cuts off everything that doesn't fit onto one page... */ border-style: none; padding-block-start: 0em; /* If we can't print it at bottom of last sheet, eliminate space before footer */ padding-block-end: 0em; margin-block-end: 0em; margin-block-start: 0em; /* inline-center text / content */ /* fixme: once grid works for printing, this should become unnecessary */ display: flex; justify-content: center; } .mainContentWrapper { /* fixme: once grid works for printing, this should become unnecessary */ /* ensure we have the margin for hanging bullets */ margin-inline-start: var(--content-margin-normal); margin-inline-end: var(--content-margin-normal); /* ensure content stays inside margin */ /* inline-size: auto; */ max-inline-size: var(--content-width-normal); } :root.content-xxwide .mainContentWrapper { /* fixme: once grid works for printing, this should become unnecessary */ max-inline-size: var(--content-width-xwide); } main img, main video { max-width: 100%; /* ensure images do not get cut off */ } main img:not(.inline), main video:not(.inline) { /* video? Maybe it'll show the poster frame. */ display: inline-grid; /* hacky, inline-grid to make break-inside work */ /* block *should* also work */ page-break-inside: avoid; /* old browsers */ break-inside: avoid; /* only works with inline-grid? */ } /* we really want all media without borders - but we need to override :not, and .inline images should not have a border to begin with. */ main img:not(.inline), main video:not(.inline), main audio:not(.inline) { border: none; } main .poster { margin-inline-start: 0rem; /* otherwise, images are not centered */ } main .fullheight { max-height: 100vh; } header a, main a, footer a { color: black; } .draft { color: black; border-color: black; border-width: 0em; margin-block-start: 2em; /* prevent squished top by reverting negative margin */ margin-block-end: var(--line-height); /* keep connected to heading */ } /* .draft ~ * { border-color: grey; border-width: 0.1em; } */ .sequence { display: none; } .infobox { border-color: black; border-width: 5px; /* border looks very heavy otherwise */ } footer .contactinfo, footer .websiteInfo * { text-shadow: none; } footer, footer .contactinfoWrapper { margin-block-end: 0rem; /* avoid empty page after footer */ } footer::after { /* content: "\0000a0Happy dancing!"; */ /* disable for now */ display: block; width: max-content; break-before: avoid; /* only print if it wouldn't cause an extra page to be printed..? how? */ break-inside: avoid; break-after: avoid; padding-block-end: 0rem; margin-inline-start: calc( var(--inside-margin) * 2 ); margin-inline-end: 100%; margin-block-start: 2rem; margin-block-end: 0rem; } footer .contactinfo { display: none; /* hide for print? */ font-size: inherit; min-width: max-content; padding-inline-end: var(--content-margin-start-end); /* align with body text */ } /* #pageFooter { display: none; } */ /* hide all footer elements except those with class 'doNotHideForPrint' */ /* Note: this assumes all footer text that should print to be within some element (div) */ #pageFooter > #pageFooterInner > *:not(.doNotHideForPrint) { display: none; } #pageFooter:not(:empty) { margin-inline-start: var(--content-margin-inline-start); /* for print, make footer align with main text */ margin-inline-end: var(--content-margin-inline-end); padding-inline-start: 0em; padding-inline-end: 0em; } footer .websiteInfo { display: none; } .citeref > a { min-inline-size: initial; /* beautiful typography is important. No need for enlarged links on paper. */ } a::after { font-family: var(--content-font); /* print links unobtrusively */ /* fixme: investigate: is this desirable? */ font-weight: normal; } a[href] { text-decoration: none; } a > noscript { display: none; /* we already print the link destination from the anchor directly. Avoid duplicate. */ } main a { padding-inline-start: 0px; /* no extra space for links. It looks ugly. */ padding-inline-end: 0px; } blockquote:not(:empty)::before { color: transparent; /* hide actual text (the small quote sign) */ text-shadow: 0px 0px 0px #cacaca; /* hack to print huge quote mark in grayscale */ } .templateTitle { margin-block-end: calc( var(--line-height) * 0.25 ); /* was 0.5rem */ } .dottedList dd { width: 9%; /* FIXME: it's not pretty. Hack to not cut off right column. right Margin is not properly inherited. */ } main input[type="submit"], main button[type="submit"] { box-shadow: 0px 0px 7px 1px black; /* do not print in color */ } p::first-letter { /* no fancy initial capitals for printing */ font-size: inherit; margin-inline-end: revert; background: inherit; border-radius: inherit; margin-block-start: inherit; } :invalid { box-shadow: none; /* do not print colored markers for invalid form elements */ } } .smallcaps, .oldStyleNumerals { font-family: var(--content-font-sc); } /* ***************************************************** */ /* ***************************************************** */ /* ******* BEGIN: content styles ************ */ /* ***************************************************** */ /* ***************************************************** */ /* These styles are meant to be used within the pages and page templates, as needed. */ /* TODO: There are more above (e.g., blockquote), that should be moved here. */ /* ///////////////////////////////////////////////////// */ /* //////////// content grid :: BEGIN ///////// */ /* ///////////////////////////////////////////////////// */ :root { /* margin columns, for visual separation, */ /* when they are stacked on top of each other on narrow displays. */ --column-change-margin: 3em; } /* can be used for a display:grid element in page content */ .content-grid { display: grid; text-align: start; } /* allow mostly sane printing of the content grids */ @media print { .content-grid.grid-print-block { display: block; } .content-grid.grid-print-block > div { break-inside: avoid; margin-block-end: 3em; } } /* for content grids, this is probably most useful. */ main .content-grid img, main .content-grid video { max-inline-size: 100%; max-width: 100%; margin: 0em; } /* .grid-columns-1 { grid-template-rows: repeat( 1, auto ); grid-template-columns: auto; } */ :root { --grid-columns-2-equal-grid-template-columns: 100%; --grid-columns-2-auto-grid-template-columns: 100%; } .grid-columns-2-equal { /* grid-template-columns: 100%; */ grid-template-columns: var(--grid-columns-2-equal-grid-template-columns); } .grid-columns-2-auto { /* grid-template-columns: 100%; */ grid-template-columns: var(--grid-columns-2-auto-grid-template-columns); } .content-grid .grid-columns-2-auto { /* grid-template-columns: repeat( 2, minmax( 0, max-content ) ); */ } /* size columns according the widest item. */ /* Effect: first column is minimal size. */ .grid-columns-2-minimalFirst { grid-template-columns: repeat( 2, minmax( 0, max-content ) ); } .column-change-margin { /* visual distance between columns, when all columns are displayed as one on narrow displays */ margin-block-end: var(--column-change-margin); } .grid-gap-0-1em { grid-row-gap: 0em; grid-column-gap: 1em; } .grid-column-gap-1em { grid-column-gap: 1em; } :root { /* --grid-order-columns-grid-template-rows: ; */ /* 100% ? guaranteed invalid? not set? */ /* --grid-order-columns-grid-auto-flow: ; */ /* column? not set? */ } .grid-order-columns { /* Rows need to be 100%, not 1fr. */ /* Otherwise, all cells would have the same block-size - resulting in unexplainably huge gaps between rows. */ grid-template-rows: var(--grid-order-columns-grid-template-rows); grid-auto-flow: var(--grid-order-columns-grid-auto-flow); } /* This is a standalone media query. It just needs to match everything except the smallest screeens. */ /* Ideally – probably? – should match --content-width-xwide. */ /* Though other media queries use the same width. So it is not standalone, but viewport-independent. */ @media ( min-width: 40em ) { :root { /* needs to be fr, not %, or content will enlarge cell and make a big mess. */ /* also, needs to be minmax() with 0 as minimum width, or it will still enlarge, */ /* as default for min as well as for fr is 'auto' */ --grid-columns-2-equal-grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); --grid-columns-2-auto-grid-template-columns: repeat( 2, auto ); --column-change-margin: revert; } /* --grid-rows won't get resolved in :root, as it is defined in some class of body. */ .grid-order-columns { /* --grid-rows is set from site.css */ --grid-order-columns-grid-template-rows: repeat( var(--grid-rows), minmax( 0, 100% ) ); --grid-order-columns-grid-auto-flow: column; } } /* ///////////////////////////////////////////////////// */ /* //////////// content grid :: END ///////// */ /* ///////////////////////////////////////////////////// */