/* ========================================================================== The Digital Dr. Stone — restoration stylesheet Reproduces the last live digitaldrstone.org (docs/LEGACY-DESIGN.md): cream page, black default-serif text, gold links, a centred masthead over an etched frame holding a narrow left column and the content column. Fluid instead of the fixed 940/790 grid; one column under 900 px. ========================================================================== */ :root { --bg: #f7f4ee; /* */ --ink: #000; /* */ --link: #a97b2a; /* */ --link-visited: #cd8d30; /* */ --tip-border: #0cf; /* Support tooltip */ --tip-bg: #cff; --award-border: #291f1f; --etch-light: #fdfcfa; /* the HTML `border` attribute's outset/inset greys */ --etch-dark: #a8a397; --etch: #c9c4b8; --muted: #444; --font-body: "Times New Roman", Times, Georgia, serif; --font-ui: Arial, Helvetica, sans-serif; --frame-width: 842px; /* what the 790 px bordered table grew to */ --side-width: 170px; /* 150 + 2 × 10 cellpadding */ color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0 1rem 2rem; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.3; } a { color: var(--link); } a:visited { color: var(--link-visited); } a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* Legacy crops carry width/height attributes that are their declared sizes; keep them. Only images declaring both get an auto height, so the max-width cap cannot distort them. */ img { max-width: 100%; } img[width][height] { height: auto; } p { margin: 0 0 1em; } h1, h2, h3 { font-size: 1em; font-weight: bold; line-height: 1.3; margin: 1em 0 0.5em; } sup { line-height: 0; } table { border-collapse: separate; max-width: 100%; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } a.visually-hidden:focus { position: static; width: auto; height: auto; clip: auto; display: inline-block; padding: 0.25em 0.5em; background: #fff; } /* -------------------------------------------------------------------------- Shell: masthead, frame, columns -------------------------------------------------------------------------- */ .page { max-width: var(--frame-width); margin: 0 auto; } .masthead { text-align: center; padding: 8px 0 25px; } .masthead a { display: inline-block; } .masthead img { display: block; width: 685px; max-width: 100%; height: auto; } .frame { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); grid-template-areas: "side content" "footer footer"; gap: 1px; padding: 1px; border: 2px outset var(--etch); } .sidebar { grid-area: side; } .content { grid-area: content; } .site-footer { grid-area: footer; } .sidebar, .content, .site-footer { border: 1px inset var(--etch); padding: 10px; } .content { min-width: 0; overflow-x: auto; } /* Under 900 px: one column. The two halves of the sidebar become grid items of their own so the navigation sits under the masthead and the support/award block after the content. */ @media (max-width: 899px) { .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "content" "extra" "footer"; } .sidebar { display: contents; } .sidebar-nav { grid-area: nav; } .sidebar-extra { grid-area: extra; } .sidebar-nav, .sidebar-extra { border: 1px inset var(--etch); padding: 10px; } } /* -------------------------------------------------------------------------- Left column -------------------------------------------------------------------------- */ .sidebar { text-align: center; } .sidebar p { margin: 0 0 1em; } .context { margin: 0 0 1.5em; } .context-thumb img { display: block; margin: 0 auto 1em; width: 130px; height: auto; } .context-thumb p { margin: 0; } .caption { font-size: 18px; margin: 0.75em 0 1.5em; } .sidebar-search { display: inline-block; margin: 4px auto 1.25em; padding: 6px; border: 1px solid #000; border-radius: 4px; font-family: var(--font-ui); } .sidebar-search__row { display: inline-flex; align-items: center; gap: 2px; } .sidebar-search input { width: 86px; font: 13px var(--font-ui); padding: 2px 3px; border: 1px solid #767676; background: #fff; color: var(--ink); } .sidebar-search button { width: 23px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; } .sidebar-search button img { display: block; } .sidebar-search__help { display: block; padding-top: 4px; font-size: 9pt; text-decoration: none; } .sidebar-search__help:hover, .sidebar-search__help:focus { text-decoration: underline; } .sidebar-links p { margin: 0 0 1em; } .support { margin: 0.5em 0 1em; } .support-button { display: flex; align-items: center; justify-content: center; width: 164px; height: 36px; margin: 0 auto; padding: 2px 10px; background: url("/assets/img/button.gif") no-repeat center center; border-radius: 8px; color: var(--ink); font-weight: bold; font-style: italic; font-size: 15px; line-height: 1.05; text-decoration: none; } .support-button:visited { color: var(--ink); } .support-button:hover, .support-button:focus { text-decoration: underline; } .support-line { display: block; margin: 0.6em auto 0; max-width: 150px; padding: 6px 8px; border: 1px solid var(--tip-border); border-radius: 8px; background: var(--tip-bg); font-size: 12px; line-height: 1.25; } .support-line a { color: var(--ink); } .paypal { margin: 0 0 1.25em; } .paypal input[type="image"] { max-width: 100%; } .award { margin: 0; } .award a { display: inline-block; } .award img { display: block; width: 151px; height: auto; border: 1px solid var(--award-border); border-radius: 4px; } .award em { display: block; margin-top: 4px; } @media (max-width: 899px) { .sidebar-nav { padding-bottom: 4px; } .context { margin-bottom: 0.75em; } .caption { margin: 0.25em 0 0.75em; } .sidebar-search { margin-bottom: 0.75em; } .sidebar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25em 1.25em; } .sidebar-links p { margin: 0 0 0.5em; } .sidebar-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5em 2em; } .sidebar-extra > * { margin: 0.5em 0; } } /* -------------------------------------------------------------------------- Content column — shared -------------------------------------------------------------------------- */ .page-heading { font-size: 24px; font-weight: bold; margin: 0.35em 0 0.6em; } .page-heading--small { font-size: 18px; } .page-heading--text { font-size: 16px; margin: 0 0 1em; } .page-heading__subtitle { font-size: 18px; font-weight: normal; } .note { color: var(--muted); } .book-list, .contents-list { margin: 0 0 1em; padding-left: 1.4em; } .book-list li, .contents-list li { margin: 0 0 0.35em; } .book-list__subtitle, .book-list__counts, .book-list__note { color: var(--muted); } .book-list__counts { font-size: 14px; } .book-list__note { display: block; font-size: 14px; } .contents-list__gap { color: var(--muted); list-style: none; margin-left: -1.4em; padding-left: 1.4em; } .contents-list--charts { columns: 2; column-gap: 2em; } .contents-list--charts li { break-inside: avoid; } @media (max-width: 599px) { .contents-list--charts { columns: 1; } } /* Legacy tables carry width=630/600 and align=left; let them fill the column and flow. */ .content table[width] { width: auto; max-width: 100%; } .content table[align] { float: none; } .content td, .content th { vertical-align: top; } /* The crops float at their declared side (align=left|right, hspace=10). */ .content img[align="left"] { float: left; margin: 0 10px 4px 0; } .content img[align="right"] { float: right; margin: 0 0 4px 10px; } @media (max-width: 599px) { .content img[align] { float: none; display: block; margin: 0 auto 1em; } } /* -------------------------------------------------------------------------- Home -------------------------------------------------------------------------- */ .home-quote { margin: 0.5em 40px 1.25em; } .home-quote__attribution { text-align: right; } .home-story::after { content: ""; display: block; clear: both; } .home-story img[align="left"] { width: auto; height: 250px; margin: 1px 10px 1px 0; border: 1px solid var(--ink); } .home-books { margin: 1.5em 0; } .home-volume { margin: 0.75em 0 0.25em; } .home-search { margin: 1.5em 0 0.5em; } .home-search label { display: block; margin-bottom: 0.35em; } .home-search__row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 0.75em; } .home-search input { font: 15px var(--font-ui); padding: 3px 5px; border: 1px solid #767676; background: #fff; color: var(--ink); max-width: 100%; } .home-search button { font: 14px var(--font-ui); padding: 3px 10px; } @media (max-width: 499px) { .home-quote { margin-left: 1em; margin-right: 1em; } } /* -------------------------------------------------------------------------- Chart pages -------------------------------------------------------------------------- */ .chart-title { font-size: 24px; font-weight: bold; margin: 0.35em 0 0.75em; } .chart-title__book, .chart-title__number { display: block; } .chart-title__number { margin-top: 0.75em; } .chart-title__subtitle { font-size: 18px; } .figures { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; margin: 0 0 1.25em; } .figure { margin: 0; width: min-content; min-width: 130px; max-width: 100%; } .figure figcaption { margin: 0 0 0.75em; } .figure img { display: block; max-width: 100%; height: auto; } .figure-missing { color: var(--muted); } .transcription::after { content: ""; display: block; clear: both; } .transcription img { height: auto; } .keywords { margin-top: 1em; } .chart-nav { text-align: center; margin: 2em 0 1em; } .chart-nav p { margin: 0 0 1.25em; } .chart-nav .nav-target { color: var(--muted); font-size: 14px; } .chart-nav__back { font-size: 14px; } /* -------------------------------------------------------------------------- Text and front-matter pages -------------------------------------------------------------------------- */ .page-grid { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; grid-template-areas: "prev body next"; align-items: center; } .page-body { grid-area: body; align-self: start; padding: 0 10px; min-width: 0; } .page-body::after { content: ""; display: block; clear: both; } .page-arrow { text-align: center; } .page-arrow--prev { grid-area: prev; } .page-arrow--next { grid-area: next; } .page-arrow a { display: inline-block; line-height: 0; } .page-arrow img { width: 50px; height: 50px; } .page-label { text-align: center; margin: 1em 0; } .text-page--front .page-body { text-align: center; } .text-page--front .page-body p { margin: 1em 0; } .explained-by { text-align: center; color: var(--muted); } .page-nav { text-align: center; margin: 1.5em 0 0.5em; font-size: 14px; } .page-nav p { margin: 0 0 0.75em; } @media (max-width: 599px) { .page-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "body body" "prev next"; } .page-body { padding: 0; } .page-arrow--prev { text-align: left; } .page-arrow--next { text-align: right; } } /* -------------------------------------------------------------------------- Book landing pages, charts hub -------------------------------------------------------------------------- */ .book-title-page { text-align: center; margin: 0.5em auto 1.5em; padding: 0.5em 1em 1em; border-top: 1px solid var(--etch); border-bottom: 1px solid var(--etch); } .book-title-page p { margin: 0.75em 0; } .book-back { margin-top: 1.5em; font-size: 14px; } .charts-book { margin: 0 0 1.5em; } .charts-book__heading { font-size: 16px; margin: 1.25em 0 0.5em; } .charts-book__text { margin: 0 0 0.75em; } .chart-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 14px; } .chart-grid li { margin: 0; } .chart-grid__subtitle { display: block; font-size: 13px; color: var(--muted); line-height: 1.25; } /* -------------------------------------------------------------------------- Essays, quotes, acknowledgements, search -------------------------------------------------------------------------- */ .essay-body table { margin: 0 0 1em; } .essay-body td { padding: 4px 8px 4px 0; } .essay-entry { margin: 0 0 1em; } .essay-back { margin-top: 1.5em; font-size: 14px; } .quotes .quote { margin: 0 0 1em; } .name-grid { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; } .award-section { margin-top: 1.5em; } .award-figure { margin: 0; } .award-figure img { display: block; width: 240px; max-width: 100%; border: 1px solid var(--award-border); border-radius: 4px; } .award-figure figcaption { margin-top: 0.5em; } .support-donate { margin: 1em 0; } .search-intro { margin: 0.5em 0 1em; } .drop-cap { float: left; font-family: Georgia, "Times New Roman", serif; font-size: 3.571em; line-height: 0.8; padding: 0.05em 0.1em 0 0; } .search-ui { margin: 0 0 1.5em; } .search-ui, .search-ui .pagefind-ui { --pagefind-ui-scale: 0.85; --pagefind-ui-primary: var(--link); --pagefind-ui-text: var(--ink); --pagefind-ui-background: #fff; --pagefind-ui-border: var(--etch-dark); --pagefind-ui-tag: var(--bg); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 4px; --pagefind-ui-font: var(--font-body); } .search-ui .pagefind-ui__result-link { color: var(--link); } .search-tips { margin-top: 1.5em; } .tips dt { font-weight: bold; margin: 0.75em 0 0.15em; } .tips dd { margin: 0 0 0.25em 1.25em; } .tips__example { display: block; color: var(--muted); font-size: 14px; } .tips code { font-size: 14px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { font-size: 13px; } .site-footer p { margin: 0 0 1em; } .site-footer__rights p { margin: 0 0 1em; } .site-footer__apta { text-align: center; } .site-footer__rebuilt { margin: 0; color: var(--muted); } @media print { .sidebar, .site-footer__rebuilt, .page-nav, .chart-nav__back { display: none; } .frame { display: block; border: 0; } .content { border: 0; padding: 0; } }