From e69bf49e052a448016d119b70ef52706d906fc81 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Fri, 2 Feb 2024 03:03:01 +0000 Subject: [PATCH] Roughly how CSS is at end of "How to make a nice site with less CSS" Different color scheme, and fonts. Slightly different line heights for body and h3 based on how it looked. Different marker color as my li's are links --- projects/random/minimal-styling/index.html | 73 +++++++------ projects/random/minimal-styling/style-new.css | 103 ++++++++++++++++++ 2 files changed, 144 insertions(+), 32 deletions(-) create mode 100644 projects/random/minimal-styling/style-new.css diff --git a/projects/random/minimal-styling/index.html b/projects/random/minimal-styling/index.html index 2f45b5d..43e5285 100644 --- a/projects/random/minimal-styling/index.html +++ b/projects/random/minimal-styling/index.html @@ -5,42 +5,51 @@ Minimal Styling riffing off Kevin Powell - + + + + +
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?

- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem et - in - placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus - consectetur magni vero eum, autem et in placeat reiciendis doloremque. -

-

Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Lorem, ipsum dolor.

- -

-

Lorem ipsum dolor sit amet consectetur.

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium - maxime - accusamus ipsam architecto debitis expedita?

- -
-
- - - -
-
- +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem + et + in + placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus + consectetur magni vero eum, autem et in placeat reiciendis doloremque. +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem, ipsum dolor.

+ +

+

Lorem ipsum dolor sit amet consectetur.

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium + maxime + accusamus ipsam architecto debitis expedita?

+ +
+
+ + + +
+
+ +
diff --git a/projects/random/minimal-styling/style-new.css b/projects/random/minimal-styling/style-new.css new file mode 100644 index 0000000..5d2a742 --- /dev/null +++ b/projects/random/minimal-styling/style-new.css @@ -0,0 +1,103 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +:root { + --clr-text: hsl(205, 96%, 9%); + --clr-body: hsl(205, 96%, 15%); + --clr-background: hsl(203, 94%, 94%); + --clr-primary: hsl(205, 94%, 28%); + --clr-secondary: hsl(320, 94%, 68%); + --clr-accent: hsl(2, 94%, 47%); + + --ff-headings: "Nunito", sans-serif; + --ff-body: "PT Sans", sans-serif; + + --fs-300: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem); + --fs-400: clamp(1.35rem, 1.2048rem + 0.7261vi, 1.7675rem); + --fs-500: clamp(1.62rem, 1.3142rem + 1.5291vi, 2.4992rem); + --fs-600: clamp(1.944rem, 1.391rem + 2.7651vi, 3.5339rem); + --fs-700: clamp(2.3328rem, 1.4061rem + 4.6334vi, 4.997rem); + --fs-800: clamp(2.7994rem, 1.3154rem + 7.4198vi, 7.0657rem); +} + +@media (prefers-color-scheme: dark) { + :root { + --clr-text: hsl(205, 96%, 91%); + --clr-body: hsl(205, 61%, 93%); + --clr-background: hsl(203, 94%, 6%); + --clr-primary: hsl(205, 94%, 72%); + --clr-secondary: hsl(320, 94%, 32%); + --clr-accent: hsl(2, 94%, 53%); + } +} + +html { + color-scheme: light dark; +} + +:where(img, svg, video) { + width: 100%; + display: block; +} + +.flow > * + * { + margin-block-start: var(--flow-space, 1em); +} + +body { + font-family: var(--ff-body); + color: var(--clr-body); + font-size: var(--fs-400); + line-height: 1.2; +} + +h1, +h2, +h3 { + font-family: var(--ff-headings); + line-height: 1.1; + text-wrap: balance; +} + +h1 { + font-size: var(--fs-700); + color: var(--clr-primary); + --flow-space: 2em; +} + +h2 { + font-size: var(--fs-600); + color: var(--clr-primary); + --flow-space: 1.5em; +} + +h3 { + font-size: var(--fs-500); + color: var(--clr-text); + --flow-space: 0.5em; +} + +a { + color: var(--clr-primary); +} + +a:hover, +a:focus { + color: var(--clr-accent); +} + +::marker { + color: var(--clr-secondary); +} + +.wrapper { + width: min(100% - 3rem, 55ch); + margin-inline: auto; +}