@layer reasonable, colors, site, fonts; @layer reasonable { @charset "UTF-8"; :root { /* * measure defines the line length in characters * generally choose something between 50-75 characters * https://baymard.com/blog/line-length-readability */ --measure: 64ch; /* spacing unit set to 1rem */ --spacing-unit: 1rem; /* s for short */ --s: var(--spacing-unit); --spacing-unit-2: calc( var(--spacing-unit) / 2 ); --spacing-unit-4: calc( var(--spacing-unit) / 4 ); --spacing-unit-8: calc( var(--spacing-unit) / 8 ); --border-unit: 2px; --fontsize-large: 1.2em; --fontsize-normal: 1em; --fontsize-small: .8em; /* system font sans serif stack */ --font-stack-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* system font serif stack */ --font-stack-serif: Georgia, Baskerville, Garamond, serif; /* system font monospace stack */ --font-stack-mono: ui-monospace, 'Source Code Pro', Menlo, Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } /* give all html elements this max-inline-size */ * { max-inline-size: var(--measure); margin: 0; padding: 0; } /* */ html { /* initial document font size of 16px all later rem values are based on this 1rem = 16px */ font-size: 100%; scroll-behavior: smooth; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } @media only screen and (max-width: 32rem) { html { /* font-size: 87.5%; */ } } /* reduced motion media query */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body, div, header, footer, main, article, figure, picture, img { max-inline-size: none; } body { /* base font size (16px) */ font-size: 1rem; -webkit-font-smoothing: antialiased; line-height: 1.4; } @media only screen and (min-width: 32rem) { body { /* slightly larger font size (20px) for wider screens */ font-size: 1.25rem; } } /* 6. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } svg { } /* 7. Inherit fonts for form controls */ input, button, textarea, select { font: inherit; } /* 8. Avoid text overflows */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; line-height: 1.2; } /* adjust line wrapping for p */ p { margin-block: var(--s); /* text-wrap: pretty; */ } article > p:last-of-type { margin-block-end: 0; } h1, h2, h3, h4, h5, h6 { margin-block-start: calc(var(--spacing-unit) * 2); margin-block-end: var(--spacing-unit); } h1, h2 { margin-block-start: calc(var(--s) + 1rem); } h1 { font-size: 2.25rem; text-wrap: balance; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4, h5, h6 { font-size: 1.25rem; } aside, blockquote, details { max-inline-size: none; width: inherit; margin-block: var(--spacing-unit); /* margin-inline: calc(var(--spacing-unit) * -1); */ /* border-inline-start: var(--border-unit) var(--decoration-style) var(--decoration-color); */ } aside > p, blockquote > p { max-inline-size: none; } summary { font-size: var(--fontsize-normal); /* margin-inline-start: calc(-1 * var(--spacing-unit)); */ } details { max-inline-size: none; width: inherit; margin-block: var(--spacing-unit); } aside { font-size: var(--fontsize-small); } /* *** Some elements we want to exist outside of these rules, allowing them to use the full width. The following elements are excluded: html body div header footer main article picture img *** */ body > *:is(main, header, footer) { margin-inline: auto; max-inline-size: var(--measure); padding-inline-start: var(--spacing-unit); padding-inline-end: var(--spacing-unit); /* border: 1px solid blue; outline: 2px solid black; */ } body > .width-full:is(main, header, footer) { max-inline-size: none; padding-inline-start: 0; padding-inline-end: 0; } body > .width-full:is(main, header, footer) > div { max-inline-size: var(--measure); padding-inline-start: var(--spacing-unit); padding-inline-end: var(--spacing-unit); margin-inline: auto; } body > *:is(main, header, footer) > * + * { margin-block-start: var(--spacing-unit); } .center { box-sizing: content-box; margin-inline: auto; max-inline-size: var(--measure); padding-inline-start: var(--spacing-unit); padding-inline-end: var(--spacing-unit); } code { font-size: .75em; font-family: monospace; background-color: var(--color-primary-6); padding-inline: var(--spacing-unit-8); padding-block: var(--spacing-unit-8); } pre:has(code) code { padding-inline: var(--spacing-unit-2); background-color: transparent; } pre { border: 1px solid var(--color-primary-5); border-left: 4px solid var(--color-primary-5); overflow: scroll; line-height: 1; } // https://piccalil.li/blog/a-more-modern-css-reset/ body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin-block-end: 0; } ul[role='list'], ol[role='list'] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; } a:not([class]) { text-decoration-skip-ink: auto; } input, button, textarea, select { font-family: inherit; font-size: inherit; } textarea:not([rows]) { min-height: 10em } :target { scroll-margin-block: var(--spacing-unit); } ul, ol, dl { margin-block: var(--spacing-unit); padding-inline-start: calc(var(--spacing-unit) * 2); list-style-position: outside; } li::marker { width: 2rem; text-align: right; } ol { /* padding-inline-start: 2lh; */ } /* nested ordered lists */ ol > li > ol { margin-block: 0; } dt { } dd { color: var(--color-black-light); font-size: var(--fontsize-small); margin-block-end: var(--spacing-unit-2); } sup { /* fix sup element line height */ line-height: 100%; } a { /* add scroll margin to all anchors */ scroll-margin-block-start: var(--spacing-unit-4); } figure:has(blockquote) { /* font-size: var(--fontsize-small); */ color: var(--color-black-light); } figure:has(blockquote) > *:not(:first-child) { font-size: var(--fontsize-small); /* font-family: var(--font-stack-mono); */ } pre:has(code) { white-space: pre-wrap; tab-size: 4; overflow: auto; } pre > code { display: block; } } @layer colors { :root { /* #cae9ff */ --color-blue-1: oklch(0.92 0.046 240); /* #70c8ff */ --color-blue-2: oklch(0.8 0.12 240); --color-blue-3: oklch(0.74 0.16 240); /* #27b6ff */ --color-blue-4: oklch(0.68 0.2 240); --color-blue-5: oklch(0.57 0.17 240); /* #0080ca */ --color-blue-6: oklch(0.49 0.15 240); --color-blue-7: oklch(0.39 0.12 240); --color-blue-8: oklch(0.24 0.07 240); /* #dae4ff */ --color-purple-1: oklch(0.92 0.04 270); /* #a8beff */ --color-purple-2: oklch(0.81 0.1 270); /* #8ca8ff */ --color-purple-3: oklch(0.75 0.14 270); --color-purple-4: oklch(0.69 0.17 270); /* #4962ff */ --color-purple-5: oklch(0.58 0.24 270); --color-purple-6: oklch(0.51 0.29 270); --color-purple-7: oklch(0.4 0.26 270); --color-purple-8: oklch(0.23 0.15 270); --color-lavender-1: oklch(0.92 0.04 290); --color-lavender-2: oklch(0.82 0.11 290); --color-lavender-3: oklch(0.76 0.14 290); --color-lavender-4: oklch(0.7 0.18 290); --color-lavender-5: oklch(0.6 0.25 290); --color-lavender-6: oklch(0.51 0.3 290); --color-lavender-7: oklch(0.41 0.24 290); --color-lavender-8: oklch(0.24 0.14 290); /* #ffd8f5 */ --color-pink-1: oklch(0.93 0.64 340); /* ff9be8 */ --color-pink-2: oklch(0.83 0.17 340); /* #ff7ae0 */ --color-pink-3: oklch(0.78 0.23 340); /* #ff30d7 */ --color-pink-4: oklch(0.71 0.32 340); /* #e500b7 */ --color-pink-5: oklch(0.61 0.29 340); --color-pink-6: oklch(0.51 0.25 340); --color-pink-7: oklch(0.41 0.2 340); --color-pink-8: oklch(0.24 0.11 340); } } @layer site { :root { /* color-scheme: light dark; &[data-color-scheme="light"] { color-scheme: light; } &[data-color-scheme="dark"] { color-scheme: dark; } */ --color-highlight: var(--color-black); --decoration-color: var(--color-lavender); --decoration-style: solid; /* #f3f5fc */ --color-white: oklch(0.97 0.01 274); /* --color-gray: oklch(0.5 0 0); */ /* #e4e4e4 */ /* --color-gray-light: oklch(0.92 0 0); */ /* #1f1f1f */ /* --color-gray-dark: oklch(0.24 0 0); */ /* #060606 */ --color-black: oklch(0.12 0 0); --color-black-light: oklch(0.4 0 0); --background-height: 16px; --font-stack-sans: plex-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --asset-endmark: url('/_assets/images/end-mark.svg'); --page-color-transition: background .1s ease-in-out, color .1s ease-in-out; } :root[data-theme="dark"] { --color-foreground: var(--color-white); --color-background: var(--color-black); --color-primary-6: var(--color-purple-8); --color-primary-5: var(--color-purple-7); --color-primary-4: var(--color-purple-6); --color-primary-3: var(--color-purple-5); --color-primary-2: var(--color-purple-2); --color-primary-1: var(--color-purple-1); --color-secondary-6: var(--color-blue-8); --color-secondary-5: var(--color-blue-6); --color-secondary-4: var(--color-blue-4); --color-secondary-3: var(--color-blue-3); --color-secondary-2: var(--color-blue-2); --color-secondary-1: var(--color-blue-1); --color-tertiary-6: var(--color-pink-8); --color-tertiary-5: var(--color-pink-6); --color-tertiary-4: var(--color-pink-5); --color-tertiary-3: var(--color-pink-3); --color-tertiary-2: var(--color-pink-2); --color-tertiary-1: var(--color-pink-1); --color-gray-6: var(--color-lavender-8); --color-gray-5: var(--color-lavender-6); --color-gray-4: var(--color-lavender-5); --color-gray-3: var(--color-lavender-3); --color-gray-2: var(--color-lavender-2); --color-gray-1: var(--color-lavender-1); } :root, :root[data-theme="light"] { --color-foreground: var(--color-black); --color-background: var(--color-white); --color-primary-1: var(--color-purple-8); --color-primary-2: var(--color-purple-6); --color-primary-3: var(--color-purple-5); --color-primary-4: var(--color-purple-3); --color-primary-5: var(--color-purple-2); --color-primary-6: var(--color-purple-1); --color-secondary-1: var(--color-blue-8); --color-secondary-2: var(--color-blue-6); --color-secondary-3: var(--color-blue-5); --color-secondary-4: var(--color-blue-3); --color-secondary-5: var(--color-blue-2); --color-secondary-6: var(--color-blue-1); --color-tertiary-1: var(--color-pink-8); --color-tertiary-2: var(--color-pink-6); --color-tertiary-3: var(--color-pink-5); --color-tertiary-4: var(--color-pink-3); --color-tertiary-5: var(--color-pink-2); --color-tertiary-6: var(--color-pink-1); --color-gray-1: var(--color-purple-8); --color-gray-2: var(--color-purple-6); --color-gray-3: var(--color-purple-5); --color-gray-4: var(--color-purple-3); --color-gray-5: var(--color-purple-2); --color-gray-6: var(--color-purple-1); } :root[data-colors="mono"] { } .skip-link:not(:focus), .visually-hidden { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } html { scroll-behavior: smooth; scroll-padding-top: 1rem; } body { margin: 0; padding: 0; color: var(--color-foreground); background-color: var(--color-background); /* transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; */ font-family: var(--font-stack-sans); } body:not(.page-photos) { background-image: url('/_assets/images/site-background.svg'); background-position: top left; background-size: 8px 16px; background-repeat: repeat-x; } /* remove figure margin on photos page for full width images */ body.page-photos figure { margin: 0; display: flex; justify-content: center; } body.page-photos figure figcaption { max-inline-size: var(--measure); padding-inline: var(--spacing-unit); margin-inline: auto; font-size: var(--fontsize-small); } figure > figcaption { font-size: var(--fontsize-small); } .page-photos img { /* min-width: 100%; */ object-fit: cover; max-height: 42rem; } .page-photos { h1 { color: var(--color-black); font-size: var(--fontsize-normal); } details > summary::marker, details > summary span { color: var(--color-black); } } /* main:not(.photos) { margin-inline-start: 1rem; margin-inline-end: 1rem; } */ main { position: relative; z-index: 1000; margin-block-start: calc(var(--spacing-unit) * 4); /* border: 2px solid #222; */ /* border-radius: 8px; */ } @media not (prefers-reduced-motion: reduce) { /* main { view-transition-name: main-slide; } */ } body > header { /* border: 2px solid #222; */ /* border-radius: 8px; */ margin-block-start: calc( (var(--spacing-unit) * 2) + var(--background-height)); margin-block-end: calc(var(--spacing-unit) * 2); position: relative; } a { color: var(--color-primary-3); text-decoration-color: var(--color-secondary-4); text-decoration-thickness: .125em; text-underline-offset: 1.5px; text-decoration-skip-ink: auto; } a:visited { text-decoration-color: var(--color-primary-3); } a:active { text-decoration-color: var(--color-tertiary-4); text-decoration-thickness: 1px; } @media not (prefers-reduced-motion: reduce) { a:active { text-decoration-style: wavy; } } a:hover { text-decoration-color: var(--color-tertiary-4); } /* add an arrow to indicate external links */ a[href^=http i]:not([href*=".matthewhowell.net"]):not([href*="localhost"]):not([href*="127.0.0.1"])::after { font-size: var(--fontsize-small); font-weight: bold; content: '↗'; margin-inline-start: var(--spacing-unit-8); } a[href^=http i]:not([href*=".matthewhowell.net"]):not([href*="localhost"]):not([href*="127.0.0.1"]) { } a.arrow-right::after { font-size: var(--fontsize-small); font-weight: bold; content: ' →'; } nav li { } nav li { /* margin-top: 4px; */ border-bottom: 4px solid transparent; } nav li:has(a[aria-current]) { } strong, .highlight { color: var(--color-white); background-color: var(--color-primary-3); padding-inline: 2px; margin-inline: -2px; /* text-decoration-color: var(--color-purple); text-underline-offset: 1.5px; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-style: dashed; text-decoration-skip-ink: auto; */ } strong a, strong a:visited, a:has(strong), a:visited:has(strong) { color: var(--color-background); text-decoration-color: var(--color-primary-6); } a:hover:has(strong) { text-decoration-color: var(--color-tertiary-4); } .main-content-link { position: absolute; transform: translateY(-100px); /* transition: tranform 100ms ease-in; */ } .main-content-link:focus { transform: translateY(0); } small { font-size: var(--fontsize-small); /* font-weight: bold; */ /* display: inline-block; min-inline-size: 5rem; text-align: center; margin-inline-end: 4px; padding: .25rem; background-color: #EEE; border-radius: 4px; */ } time { } picture, picture > img { max-inline-size: 100%; block-size: auto; } /* photos */ .photos figure, .photos picture, .photos img { width: 100%; margin-inline-start: 0; margin-inline-end: 0; } /* work > alt-text */ .alt-text img { /* max-inline-size: 240px; */ margin-block-start: calc(var(--spacing-unit) * 2); margin-block-end: calc(var(--spacing-unit) * 1); filter: grayscale(100%) blur(4px); } .alt-text figcaption { color: var(--color-black-light); } .alt-text img.clear { filter: none; } /* everylayout cluster */ /* used for flexible rows of items, uniform spacing */ .cluster { --space: 1rem; display: flex; flex-wrap: wrap; gap: var(--spacing-unit, 1rem); justify-content: flex-start; align-items: center; } .page-positives .cluster { margin-block: calc(var(--spacing-unit) * 2); justify-content: space-between; } /* everylayout icon with text */ /* used for icon-link pairs */ /* .icon { width: 0.75em; width: 1cap; height: 0.75em; height: 1cap; } .with-icon { display: inline-flex; align-items: baseline; } .with-icon .icon { margin-inline-end: 1rem; } */ h1, h2 { color: var(--color-primary-3); font-weight: 800; } h3, h4, h5, h6 { color: var(--color-primary-3); } h1 { margin-block-start: calc(var(--spacing-unit) * 4); } .page-home header { margin-block-start: } .page-home hgroup { display: flex; flex-wrap: wrap; font-size: 1.75rem; font-weight: bold; color: var(--color-foreground); } .page-home h1 { margin-block: 0; color: var(--color-primary-3); font-size: 4rem; letter-spacing: -4px; line-height: 1; font-weight: bold; break-inside: auto; /* color: var(--color-gray-dark); */ /* background: linear-gradient(to right, var(--color-primary), var(--color-blue-dark) 20%, var(--color-pink-dark) 40%, var(--color-primary-dark) 100%); */ } .page-home hgroup p { margin-inline-start: 4px; margin-block: 0; line-height: 1.2; font-size: 1.5rem; text-wrap: balance; } section.update, section.footnotes { padding-inline-start: calc(var(--spacing-unit) - var(--border-unit)); padding-inline-end: var(--spacing-unit); border-inline-start: 4px solid var(--color-gray-6); font-size: var(--fontsize-small); } section.update h2, section.footnotes h2 { font-size: var(--fontsize-normal); } section.update p:first-of-type { margin: 0; } .only-standard-mode, .only-holiday-mode { display: none; opacity: 0; } /* standard/holiday mode toggle styles */ html[data-prefers-photo-mode='standard'] .only-standard-mode { display: initial; opacity: 1; } html[data-prefers-photo-mode='standard'] .only-holiday-mode { display: none; } html[data-prefers-photo-mode='holiday'] .only-standard-mode { display: none; } html[data-prefers-photo-mode='holiday'] .only-holiday-mode { display: initial; opacity: 1; } strong { } .tag { border-radius: 50%; height: 1.5rem; width: 1.5rem; background-color: var(--color-primary-6); /* border: 2px solid var(--color-primary-3); */ font-family: var(--font-stack-mono); font-size: var(--fontsize-small); align-content: center; font-weight: bold; } meter { width: 80px; -webkit-appearance: none; } meter::-webkit-meter-optimum-value { /* width: 0; */ background: none; background-color: var(--color-lavender); } meter::-webkit-meter-bar { /* width: 0; */ background: none; /* Required to get rid of the default background property */ background-color: gray; } article p:first-of-type { margin-block-start: 0; } article p:last-of-type { } article > footer { display: block; margin-block: calc(var(--spacing-unit) * 1);; font-size: var(--fontsize-small); ul { list-style-position: inside; margin-block: 1rem; padding: 0; } ul li::marker { color: var(--color-primary-5); font-size: var(--fontsize-small); } } hr.mid, article > hr { border: 0; height: 2px; background-image: url('/_assets/images/start-mark.svg'); background-position: 0 0; background-repeat: repeat-x; background-size: 8px 6px; /* trim pixel width to multiple of 4px to avoid clipping */ --inline-offset: mod(50%, 2px); width: calc(50% - var(--inline-offset)); margin-block: calc(var(--spacing-unit) * 3); /* margin-inline: auto; */ } hr.tiny { border: 0; height: 2px; background-image: url('/_assets/images/start-mark.svg'); background-position: 0 0; background-repeat: repeat-x; background-size: 8px 6px; /* trim pixel width to multiple of 4px to avoid clipping */ --inline-offset: mod(25%, 2px); width: calc(25% - var(--inline-offset)); } hr.full, article > header hr { border: 0; height: 2px; background-image: url('/_assets/images/start-mark.svg'); background-position: 0 0; background-repeat: repeat-x; background-size: 8px 6px; /* trim pixel width to multiple of 4px to avoid clipping */ --inline-offset: mod(100%, 2px); width: calc(100% - var(--inline-offset)); } hr.full { margin-block: calc(var(--spacing-unit) * 2); } .page-home main > header { margin-block-end: 2rem; } .page-home figure:has(#artcontainer) { margin-block: 0 2rem; } article > header, main > header { margin-block-end: 1rem; } main > footer hr, article > footer hr { border: 0; background-image: var(--asset-endmark); background-position: left; background-repeat: repeat-x; background-size: 8px 6px; height: 2px; width: 1rem; /* margin-block: calc(var(--spacing-unit) * 2); */ } body > footer { margin-block-start: calc(var(--spacing-unit) * 4); } body > footer > div { margin-block-end: var(--spacing-unit); } body > footer nav { font-size: var(--fontsize-small); display: flex; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 2); justify-content: flex-start; align-items: flex-start; } body > footer nav ul { list-style: none; padding-inline: 0; margin-block: var(--spacing-unit-4) 0; } body > footer strong { background: none; padding: none; color: var(--color-black-light); } header > nav { display: flex; flex-wrap: wrap; justify-content: flex-start; /* overflow: auto; overflow-y: hidden; */ row-gap: var(--spacing-unit); } nav svg { height: 36px; width: 36px; } @media only screen and (max-width: 32rem) { nav svg { height: 24px; width: 24px; } } header > nav > *:first-child { display: flex; flex: 1 0 auto; position: sticky; left: 0; margin-inline-end: var(--spacing-unit); z-index: 1000; } header > nav > *:last-child { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; /* overflow: auto; overflow-y: hidden; */ list-style: none; padding: 0; margin: 0; white-space: nowrap; min-height: 36px; } header > nav:last-child > ul > li { /* trim pixel width to multiple of 4px to avoid clipping */ /* --inline-offset: mod(100%, 8px); padding-inline-end: var(--inline-offset); */ margin-inline-end: var(--spacing-unit); display: inline-block; } header > nav:last-child > ul > li:last-child { margin-inline-end: 0; } ul.list-gridflex, .list-gridflex > li { list-style: none; margin: 0; padding: 0; } ul.list-gridflex { margin-block-end: calc(var(--spacing-unit) * 2); } /* book list item is a single row, two column grid */ .list-gridflex > li { display: grid; grid-template-columns: 5rem 1fr; column-gap: var(--spacing-unit); padding-block: var(--spacing-unit-4); align-items: center; justify-items: start; border-bottom: 1px solid var(--color-gray-6); } /* ul > li:last-of-type, ol > li:last-of-type, dl > li:last-of-type { border: none; } */ /* first column: star rating and library symbol */ .list-gridflex > li > *:first-child { display: grid; grid-template-columns: 3rem 2rem; align-items: center; justify-items: start; font-size: var(--fontsize-small); } .list-gridflex > li > * { } .list-gridflex > li > *:first-child > * { min-inline-size: 1rem; } /* book rating */ .list-gridflex > li > *:first-child > *:first-child { } /* book library symbol */ .list-gridflex > li > *:first-child > *:last-child { justify-self: center; text-align: center; font-weight: 900; } /* second column: book title and author */ .list-gridflex > li > *:last-child { display: flex; flex-wrap: wrap; /* flexbox container should fill entire grid column parent */ min-inline-size: 100%; /* vertically center content */ align-items: center; column-gap: var(--spacing-unit); /* outline: 1px solid blue; */ } /* book title */ .list-gridflex > li > *:last-child > *:first-child { flex-grow: 1; align-self: center; } /* book author */ .list-gridflex > li > *:last-child > *:last-child { /* flex-basis: 0; */ /* min-inline-size: 50%; */ /* font-size: var(--fontsize-small); */ flex-basis: auto; } .list-gridflex .favorite { color: var(--color-primary-3); } @media only screen and (max-width: 32rem) { header > nav > *:last-child { min-height: 24px; } /* book title and book author elements */ .list-gridflex > li > *:last-child > * { flex-basis: 0; min-inline-size: 100%; } .list-gridflex > li { padding-block: var(--spacing-unit-8); } } .heading-grid { h1, h2, h3, h4, h5, h6 { margin-block: 0; } } .heading-grid { h2, h3, h4, h5, h6 { font-size: 1.5rem; } } .heading-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; /* column-gap: var(--spacing-unit); */ padding-block: var(--spacing-unit-4); align-items: end; justify-items: start; border-bottom: 1px solid var(--color-gray-6); column-gap: var(--spacing-unit); line-height: 1.5; } .heading-grid > *:first-child { flex-grow: 1; } .heading-grid > *:last-child { flex-basis: auto; min-inline-size: 1rem; font-family: var(--font-stack-mono); font-family: monospace; justify-self: end; color: var(--color-black-light); } .list-gridtwo, .list-gridtwo > * { list-style: none; margin: 0; padding: 0; } .list-gridtwo { margin-block-end: calc(var(--spacing-unit) * 2); } .list-gridtwo > * { display: flex; flex-wrap: wrap; /* column-gap: var(--spacing-unit); */ padding-block: var(--spacing-unit-4); align-items: center; justify-items: start; border-bottom: 1px solid var(--color-gray-6); column-gap: var(--spacing-unit); row-gap: var(--spacing-unit-4); } /* first column: star rating and library symbol */ .list-gridtwo > * > * { } .list-gridtwo > * > *:first-child { flex-grow: 1; } /* second column: book title and author */ .list-gridtwo > * > *:last-child { flex-basis: auto; min-inline-size: 1rem; font-family: monospace; font-family: var(--font-stack-mono); justify-self: end; color: var(--color-black-light); } @media only screen and (max-width: 32rem) { .list-gridtwo > * > *:last-child { flex-shrink: 1; } .list-gridtwo > * > *:last-child { min-inline-size: 100%; } .list-gridtwo > * { padding-block: var(--spacing-unit-2); } } .list-flexthree, .list-flexthree > * { list-style: none; margin: 0; padding: 0; } .list-flexthree { margin-block-end: calc(var(--spacing-unit) * 2); } .list-flexthree > * { display: flex; flex-wrap: wrap; padding-block: var(--spacing-unit-4); align-items: center; justify-items: start; border-bottom: 1px solid var(--color-gray-6); column-gap: var(--spacing-unit); row-gap: var(--spacing-unit-8); } .list-flexthree > li > *:first-child { flex-grow: 1; } .list-flexthree > li > *:nth-child(2) { } .list-flexthree > li > *:last-child { flex-basis: auto; min-inline-size: 1rem; font-family: monospace; font-family: var(--font-stack-mono); justify-self: end; color: var(--color-black-light); } @media only screen and (max-width: 32rem) { .list-flexthree > li > *:last-child { flex-shrink: 1; } .list-flexthree > li > *:last-child { min-inline-size: 100%; } .list-flexthree > li > * { } } h2.description { max-inline-size: none; width: inherit; margin-block: 0; color: var(--color-primary-3); font-size: var(--fontsize-normal); } hr.blank { border: 0; height: 32px; width: 100%; margin-block: calc(var(--spacing-unit) * 2); } hr.random-rule { border: 0; height: 32px; background-position: 0 0; background-repeat: repeat-both; background-size: 8px 8px; /* trim pixel width to multiple of 4px to avoid clipping */ --inline-offset: mod(100%, 2px); width: calc(100% - var(--inline-offset)); margin-block-start: 0; margin-block: calc(var(--spacing-unit) * 1); } body > footer hr:not(.rule) { border: 0; height: 2px; background-image: url('/_assets/images/end-mark.svg'); background-position: 0 0; background-repeat: repeat-x; background-size: 8px 6px; } .rule { border: 0; height: 32px; background-position: 0 0; background-repeat: repeat; background-size: 8px 8px; width: 100%; max-inline-size: none; margin-block: 0; } header > .rule { --inline-offset: mod(100%, 2px); width: calc(100% - var(--inline-offset)); margin-block-start: 0; margin-block: calc(var(--spacing-unit) * 1); } /* .rule:first-of-type { margin-block-start: 1rem; } */ .rb0 { background-image: url('/_assets/images/rule-background-0.svg'); } .rb1 { background-image: url('/_assets/images/rule-background-1.svg'); } .rb2 { background-image: url('/_assets/images/rule-background-2.svg'); } .rb3 { background-image: url('/_assets/images/rule-background-3.svg'); } /* .rb4 { background-image: url('/_assets/images/rule-background-4.svg'); } */ .collapse > *:first-child { margin-block-end: 0; } .collapse > *:last-child { margin-block: 0; } .collapse > *:not(:first-child):not(:last-child) { margin-block: 0; } ol, ul, dl { margin-block-end: calc(var(--spacing-unit) * 2); /* padding: 0; */ /* margin-inline-start: 1.25rem; */ /* list-style-position: outside; */ } /* nested ordered lists */ li > ol, li > ul { margin-block: 0; } ul { list-style-type: square; } ol { /* margin-inline-start: 3rem; */ } ol li::marker, ul li::marker { color: var(--color-primary-3); font-size: var(--fontsize-small); } ol li::marker { font-family: var(--font-stack-mono); } ul li, ol li { font-family: var(--font-stack-sans); } ul:has(+ footer), ol:has(+ footer) { margin-block-end: 2rem; } figure:has(blockquote) { padding-inline-start: calc(var(--spacing-unit) - var(--border-unit)); padding-inline-end: var(--spacing-unit); border-inline-start: 4px solid var(--color-primary-6); } aside { padding-inline-start: calc(var(--spacing-unit) - var(--border-unit)); padding-inline-end: var(--spacing-unit); border-inline-start: 4px solid var(--color-gray-6); } details { padding-inline-end: var(--spacing-unit); border-inline-start: 4px solid var(--color-gray-6); border: none; background-size: 8px; background-position: top left; background-image: url('/_assets/images/side-mark.svg'); background-repeat: repeat-y; overflow-wrap: anywhere; } figcaption:has(details) > details { display: block; margin-block: 1rem; font-size: var(--fontsize-large); } details > *:not(summary) { font-size: var(--fontsize-small); } details { padding-inline-start: calc(var(--spacing-unit) * 1); } details > summary { padding-inline-start: calc(var(--spacing-unit) * 2 * -1); } details[open] { } summary::marker, summary::-webkit-details-marker { color: var(--color-secondary-4); } summary:hover::marker, summary:hover::-webkit-details-marker { color: var(--color-tertiary-4); } details > summary { margin-block-end: calc(var(--spacing-unit) * 0); } details[open] > summary { margin-block-end: calc(var(--spacing-unit) * 1); } details > summary > span { color: var(--color-primary-3); font-weight: bold; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--color-secondary-4); font-size: var(--fontsize-small); } details > summary:hover > span { cursor: pointer; text-decoration-color: var(--color-tertiary-4); } .frame img { border: 2px solid var(--color-gray-5); } figure:has(blockquote) { /* color: var(--color-primary-2); */ } blockquote > p:first-of-type { margin-block-start: 0; } blockquote > p:last-of-type { margin-block-end: 0; } figure > blockquote::before { color: var(--color-primary-3); font-size: calc(var(--fontsize-large) * 1.5); content: "“"; display: block; height: 2rem; } figure > blockquote::after { color: var(--color-primary-3); font-size: calc(var(--fontsize-large) * 1.5); content: "”"; display: block; height: 2rem; } figure:has(pre) > figcaption { max-inline-size: none; border: 1px solid var(--color-primary-5); border-left: 4px solid var(--color-primary-5); padding: var(--spacing-unit-2); border-bottom: 0; margin-bottom: -1px; } figure:has(pre) { box-shadow: 2px 2px 0px var(--color-primary-6); margin-block: var(--spacing-unit); } figure:has(pre) code { display: block; margin-block: 16px; } picture.only-standard-mode > img, picture.only-holiday-mode > img { border: 1px solid var(--color-black-light); padding: 4px; } /* dark theme, button toggles light theme on */ [data-theme="dark"] #button_toggle_theme { border: none; position: relative; width: 20px; height: 20px; padding: 4px; border-radius: 20px; background: var(--color-primary-3); transform-origin: center; /* transition: transform 0.1s ease-in-out, var(--page-color-transition); */ } [data-theme="dark"] #button_toggle_theme:hover, [data-theme="dark"] #button_toggle_theme:focus { background: var(--color-primary-2); } [data-theme="dark"] #button_toggle_theme::after { position: absolute; content: ''; width: 0px; height: 0px; left: 8px; bottom: 6px; border-radius: 16px; background: var(--color-background); transform-origin: center center; /* transition: transform 0.1s ease-in-out, var(--page-color-transition); */ } /* light theme, button toggles dark theme on */ [data-theme="light"] #button_toggle_theme { border: none; position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 20px; background: var(--color-primary-3); transform-origin: center center; /* transition: transform 0.1s ease-in-out, var(--page-color-transition); */ } /* circle cutout of button shape to create moon shape */ [data-theme="light"] #button_toggle_theme::after { position: absolute; content: ''; width: 16px; height: 16px; left: 8px; bottom: 6px; border-radius: 16px; background: var(--color-background); transform-origin: center center; /* transition: transform 0.1s ease-in-out, var(--page-color-transition); */ } [data-theme="light"] #button_toggle_theme:hover, [data-theme="light"] #button_toggle_theme:focus { background: var(--color-primary-4); } div#artcontainer { display: flex; justify-content: center; align-content: center; } div#artcontainer svg { display: inline-block; margin: 0 auto; width: 100%; } button { cursor: pointer; margin: 0; padding-inline: 4px; border: 1px solid var(--color-primary-5); box-shadow: 2px 2px 0 var(--color-primary-6); background: none; } button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--color-primary-6); } button:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px var(--color-primary-6); border: 1px solid var(--color-primary-4); } button.lil { border-radius: 4px; padding-inline: 4px; margin-inline: 0px; border: 1px solid var(--color-primary-5); box-shadow: 1px 1px 0 var(--color-primary-4); background-color: var(--color-background); font-weight: bold; color: var(--color-primary-3); /* font-size: var(--fontsize-small); */ /* text-transform: uppercase; */ } button.lil:hover { transform: none; box-shadow: 1px 1px 0 var(--color-primary-4); } button.lil:active { transform: translate(1px, 1px); box-shadow: 0px 0px 0px var(--color-primary-6); background-color: var(--color-background); } button[disabled] { color: var(--color-black-light); border: 1px solid var(--color-primary-6); box-shadow: none; } button[disabled]:hover, button[disabled]:active { box-shadow: none; transform: none; cursor: default; } .no-wrap { white-space: nowrap; } ul.colors > li { /* position: relative; */ } ul.colors > li > span { display: inline-block; width: clamp(4rem, 50%, 16rem); height: 2rem; } ul.colors { list-style: none; } ul.colors > li span.purple { background-color: var(--color-primary-3); } ul.colors > li span.blue { background-color: var(--color-secondary-4); } ul.colors > li span.pink { background-color: var(--color-tertiary-4); } @media only screen and (max-width: 32rem) { * { /* line-height: calc(1.25em + 0.25rem); */ } h1 { font-size: 2rem; } .page-home h1 { font-size: 2rem; letter-spacing: -2px; } .page-home hgroup { font-size: 1.5rem; } .page-home hgroup p { margin-inline-start: 2px; line-height: 1.2; } .heading-grid { h2, h3, h4, h5, h6 { font-size: 1.25rem; } } h2, h3, h4, h5, h6 { font-size: 1.25rem; } } .h-indicator { opacity: 0; } figure.factory { } figure.factory > figcaption { display: flex; flex-wrap: wrap; max-inline-size: none; font-family: var(--font-stack-mono); padding-block: 4px; padding-inline: 1rem; } figure.factory > figcaption > *:first-child { flex-grow: 1; } figure.factory > figcaption > *:last-child { flex-grow: 0; } } @layer fonts { @font-face { font-family: 'plex-sans'; font-style: italic; font-weight: normal; src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url('/_assets/fonts/IBMPlexSans-Italic-Latin1.woff2'); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02 } @font-face { font-family: 'plex-sans'; font-style: normal; font-weight: normal; src: local("IBM Plex Sans"), local("IBMPlexSans"), url('/_assets/fonts/IBMPlexSans-Regular-Latin1.woff2') format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02 } @font-face { font-family: 'plex-sans'; font-style: normal; font-weight: bold; src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url('/_assets/fonts/IBMPlexSans-Bold-Latin1.woff2') format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02 } @font-face { font-family: 'plex-sans'; font-style: italic; font-weight: bold; src: local("IBM Plex Sans Bold Italic"), local("IBMPlexSans-BoldItalic"), url('/_assets/fonts/IBMPlexSans-BoldItalic-Latin1.woff2') format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02 } }