From 825fe263e87c0b1341cfdecdd97d1dff7a430377 Mon Sep 17 00:00:00 2001 From: gravel Date: Wed, 27 Dec 2023 00:11:35 +0000 Subject: [PATCH] Footer & UI changes; authorship --- output/css/common-dark.css | 48 ++----------------- output/index.css | 81 ++++++--------------------------- sites/+components/footer.php | 15 +++++- sites/+components/page-head.php | 4 ++ sites/about/index.php | 4 +- sites/index.php | 41 +++++++++-------- 6 files changed, 61 insertions(+), 132 deletions(-) diff --git a/output/css/common-dark.css b/output/css/common-dark.css index ab537da..dc49d25 100644 --- a/output/css/common-dark.css +++ b/output/css/common-dark.css @@ -1,49 +1,11 @@ +@import url("/css/footer.css"); +@import url("/css/common.css"); + * { box-sizing: border-box; } -html { color: white; background-color: black; font-size: clamp(16px, 2vw, 24px); width: 100%; } +html { color: var(--primary-color); background-color: var(--secondary-color); font-size: clamp(16px, 2vw, 24px); width: 100%; } body { margin: 0; padding: 2rem; width: 100%; line-height: 1.5; } a { color: hsl(210, 100%, 60%); } -pre, .code { background-color: #222; font-size: 0.9rem; white-space: break-spaces; overflow: auto; } +pre, .code { background-color: var(--secondary-color-shaded); font-size: 0.9rem; white-space: break-spaces; overflow: auto; } pre { padding: 1em; } .code { padding: 0.1em 0.25em; } .hidden { display: none; } - -footer { - display: flex; - flex-direction: column; - align-items: center; - max-width: 100%; - text-align: center; -} - -footer { font-size: 0.85em; margin-top: 2em; padding-top: 2em; border-top: 1px white solid; } - -footer:last-of-type { - padding-bottom: 1em; -} - -footer p { - max-width: 40em; - margin: .5em; - text-align: center; -} - -footer nav:first-of-type { - margin-block-start: 1em; -} - -footer nav :is(a, span) { - display: inline-block; - padding: .5em; - margin-inline: .1em; - margin-block: .1em; - min-width: 3em; - white-space: nowrap; -} - -footer h2 { - margin-block: 0.5em; -} - -#more-sites-info-button { - font-size: 1.25em; -} diff --git a/output/index.css b/output/index.css index 93d8c93..09e5dc6 100644 --- a/output/index.css +++ b/output/index.css @@ -1,3 +1,6 @@ +@import url("/css/footer.css"); +@import url("/css/common.css"); + :root { --body-margin: 8px; /* Default value in browsers */ --max-font-size-unitless: 18; @@ -57,8 +60,7 @@ body { .h2-like { display: block; font-size: 1.5em; - margin-top: 0.83em; - margin-bottom: 0.83em; + padding-block: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; @@ -78,27 +80,6 @@ body { color: var(--primary-color); } -#toggle-theme-switch:not(:checked) ~ #theming-root { - --primary-color: hsl(0, 0%, 100%); - --secondary-color: hsl(0, 0%, 0%); - --secondary-color-heading: hsl(0, 0%, 17%); - --secondary-color-shaded: hsl(0, 0%, 9%); - --anchor-color: hsl(210, 100%, 60%); - --color-http: hsl(0, 0%, 17%); - --color-https: hsl(195, 53%, 21%); -} - - -#toggle-theme-switch:checked ~ #theming-root { - --primary-color: hsl(0, 0%, 0%); - --secondary-color: hsl(0, 0%, 100%); - --secondary-color-heading: hsl(0, 0%, 83%); - --secondary-color-shaded: hsl(0, 0%, 91%); - --anchor-color: hsl(210, 100%, 40%); - --color-http: hsl(0, 0%, 83%); - --color-https: hsl(195, 53%, 79%); -} - a, .anchorstyle { color: var(--anchor-color); text-decoration: underline; @@ -506,47 +487,17 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after { width: 90%; } -footer { - display: flex; - flex-direction: column; - align-items: center; - max-width: 100%; - text-align: center; - +footer, aside { + font-size: inherit !important; + border: none !important; padding-bottom: var(--body-margin); padding-inline: var(--body-margin); } -footer:last-of-type { - padding-bottom: 1em; -} - -footer p { - max-width: 40em; - margin: .5em; - text-align: center; -} - -footer nav:first-of-type { - margin-block-start: 1em; -} - .footer__nav-target { - display: inline-block; padding: .75em .5em; - margin-inline: .1em; - margin-block: .1em; - min-width: 3em; - white-space: nowrap; -} - -.footer__h2 { - margin-block: 0.5em; } -#more-sites-info-button { - font-size: 1.25em; -} /* --- QR code modals --- */ #details-modal { @@ -705,26 +656,22 @@ footer nav:first-of-type { /* Carousel */ -input.carousel-trigger { - display: none; -} - -.carousel-trigger:not(:checked) + .carousel-label + .carousel-target { - display: none; +aside > details > p { + padding: 1em 0.75em; + background-color: var(--secondary-color-shaded); } -.carousel-target { - padding: 1em 0.5em; - background-color: var(--secondary-color-shaded); +aside > details > summary { + padding-block: 0.5em !important; } -.carousel-label > label::after { +aside > details > summary::after { content: "+"; padding-inline-start: 1em; font-size: 1.5em; } -.carousel-trigger:checked + .carousel-label > label::after { +aside > details[open] > summary:after{ content: "−"; } diff --git a/sites/+components/footer.php b/sites/+components/footer.php index c0f96ed..cc83867 100644 --- a/sites/+components/footer.php +++ b/sites/+components/footer.php @@ -1,4 +1,4 @@ -