styles-archive.css

:root {
    --clr-body-bg: hsl(0 0% 90%);
    --clr-card-bg: hsl(0 0% 100%);
    --clr-text: hsl(0 0% 15%);
    --clr-heading: hsl(0 0% 25%);
    --clr-card-top: hsl(0 0% 25%);
    --clr-link: hsl(0 0% 25%);
    --clr-link-focus: hsl(0, 0%, 10%);
    --clr-test-red: red;
    --clr-test-lime: hsl(104, 76%, 47%);
    --clr-test-yellow: yellow;
    /* Elegant Theme */
    --snow: #EFEDEE;
    --wheat: #9a5815;
    --forest: #272E22;
    --charcoal: #211C16;
}

/* ------------------ */
/* --- TYPOGRAPHY --- */
/* ------------------ */

body {
margin: 0;
font-family: system-ui, sans-serif;
font-size: 1.25rem;
line-height: 1.5;
background: var(--clr-body-bg);
color: var(--clr-text);
}

h1,
h2,
h3 {
color: var(--clr-heading);
line-height: 1.1;
}

a {
    text-decoration: none;
    color: var(--clr-link);
}

a:focus, a:hover {
    color: var(--clr-test-lime);
}

a:active {
    color: var(--clr-test-yellow);
}

/* -------------- */
/* --- LAYOUT --- */
/* -------------- */

.auto-grid {
--min-column-size: 225px;

display: grid;
gap: clamp(1rem, 5vmax, 1.625rem);
grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--min-column-size)), 1fr)
);
}

.wrapper {
--max-width: 55rem;
width: min(100% - 2rem, var(--max-width));
margin-inline: auto;
}

.card {
padding: 1rem;
background-color: var(--clr-card-bg);
/* CSS - love how this works when border is on top of border-block-start, but breaks when it's below! */
border: 1px solid var(--clr-card-top);
border-block-start: 0.5rem solid var(--clr-card-top); /* make this the same as headings */
border-radius: 0.5rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.card > * {
margin: 0;
}

.card > *:not(:last-child) {
margin-bottom: 0.75rem;
}

/* --- Utility Classes --- */

.emphasis--fw-600 {
    font-weight: 600;
}

.emphasis--outline {
    border: 2px, solid, var(--clr-test-red);
}

.padding--top-1 {
    padding-top: 1rem;
}
.padding--top-2 {
    padding-top: 2rem;
}

/* ---------------------------- */
/* --- COLOUR THEME PICKER ---  */
/* ---------------------------- */

/* --- Functionality --- */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

.color-picker > fieldset {
border: 0;
display: flex;
gap: 2rem;
width: -moz-fit-content;
width: fit-content;
background: #fff;
padding: 1rem 3rem;
margin-inline: auto;
border-radius: 0 0 1rem 1rem;
}

.color-picker input[type="radio"] {
appearance: none;
width: 1.5rem;
height: 1.5rem;
outline: 3px solid var(--radio-color, currentColor);
outline-offset: 3px;
border-radius: 50%;
}

.color-picker input[type="radio"]:checked {
background-color: var(--radio-color);
}

.color-picker input[type="radio"]#light {
--radio-color: gray;
}
.color-picker input[type="radio"]#pink {
--radio-color: pink;
}
.color-picker input[type="radio"]#blue {
--radio-color: blue;
}
/* .color-picker input[type="radio"]#green {
--radio-color: green;
} */
.color-picker input[type="radio"]#dark {
--radio-color: #232323;
}

.color-picker input[type="radio"]#elegant {
    --radio-color: #9a5815;
    }
/* .color-picker input[type="radio"]#test {
    --radio-color: #4e1a4b;
} */

/* -- Individual Themes -- */

.pink {
--clr-body-bg: hsl(310 50% 90%);
--clr-card-bg: hsl(310 50% 100%);
--clr-text: hsl(310 50% 15%);
--clr-card-top: hsl(310 50% 25%);
--clr-heading: hsl(310 50% 25%);
--clr-link: hsl(310, 53%, 32%);
}

.blue {
--clr-body-bg: hsl(209 50% 90%);
--clr-card-bg: hsl(209 50% 100%);
--clr-text: hsl(209 50% 15%);
--clr-card-top: hsl(209 50% 25%);
--clr-heading: hsl(209 50% 25%);
--clr-link:hsl(209, 50%, 25%);
}

.green {
--clr-body-bg: hsl(109 50% 90%);
--clr-card-bg: hsl(109 50% 100%);
--clr-text: hsl(109 50% 15%);
--clr-card-top: hsl(109 50% 25%);
--clr-heading: hsl(109 50% 25%);
--clr-link: hsl(109, 50%, 25%);
}

.dark {
--clr-body-bg: hsl(209 50% 10%);
--clr-card-bg: hsl(209 50% 5%);
--clr-text: hsl(209 50% 90%);
--clr-card-top: hsl(209 50% 80%);
--clr-heading: hsl(209 50% 80%);
--clr-link: hsl(209, 50%, 80%);
}

/* Note: Elegant theme is from: https://github.com/aylinmarie/elegant-knit She's a wonderful UI Engineer and fibre artist!
    --snow: #EFEDEE; - body-bg - grey
    --wheat: #9a5815; - heading
    --forest: #272E22; - not used
    --charcoal: #211C16; - text
    --white: #FFFFFF; - card-bg
*/
.elegant {
    --clr-card-bg: hsl(0, 0%, 100%);
    --clr-body-bg: hsl(0, 0%, 94%);
    --clr-text: hsl(95, 15%, 16%);
    --clr-card-top:var(--wheat);
    --clr-heading: var(--wheat);
    --clr-link: var(--wheat);
}

.test {
    --clr-body-bg: hsl(310 50% 90%);
    --clr-card-bg: hsl(310 50% 25%);
    --clr-text: hsl(310 50% 75%);
    --clr-card-top: hsl(310 50% 100%);
    --clr-heading: hsl(310 50% 100%);
    --clr-link: hsl(310, 50%, 100%);
    }

:root:has(#pink:checked) {
--clr-body-bg: hsl(310 50% 90%);
--clr-card-bg: hsl(310 50% 100%);
--clr-text: hsl(310 50% 15%);
--clr-heading: hsl(310 50% 25%);
}

:root:has(#blue:checked) {
--clr-body-bg: hsl(209 50% 90%);
--clr-card-bg: hsl(209 50% 100%);
--clr-text: hsl(209 50% 15%);
--clr-heading: hsl(209 50% 25%);
}

:root:has(#green:checked) {
--clr-body-bg: hsl(109 50% 90%);
--clr-card-bg: hsl(109 50% 100%);
--clr-text: hsl(109 50% 15%);
--clr-heading: hsl(109 50% 25%);
}

:root:has(#dark:checked) {
--clr-body-bg: hsl(209 50% 10%);
--clr-card-bg: hsl(209 50% 5%);
--clr-text: hsl(209 50% 90%);
--clr-heading: hsl(209 50% 80%);
}

:root:has(#elegant:checked) {
    --clr-body-bg: hsl(0, 0%, 94%);
    --clr-card-bg: hsl(0, 0%, 100%);
    --clr-text: hsl(95, 15%, 16%);
    --clr-heading: var(--wheat);
}

:root:has(#test:checked) {
    --clr-body-bg: hsl(209 50% 10%);
    --clr-card-bg: hsl(209 50% 5%);
    --clr-text: hsl(209 50% 90%);
    --clr-heading: hsl(209 50% 80%);
}