From 2a9d10af216d4c006d00f70d959cce5a6b742c10 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Thu, 1 Feb 2024 20:08:51 +0000 Subject: [PATCH] Changes per end of "Stop over-engineering your CSS" video --- projects/random/minimal-styling/index.html | 66 +++++++++++----------- projects/random/minimal-styling/style.css | 39 +++++++++++++ 2 files changed, 72 insertions(+), 33 deletions(-) diff --git a/projects/random/minimal-styling/index.html b/projects/random/minimal-styling/index.html index 7f52d55..2f45b5d 100644 --- a/projects/random/minimal-styling/index.html +++ b/projects/random/minimal-styling/index.html @@ -9,39 +9,39 @@ -

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.css b/projects/random/minimal-styling/style.css index e69de29..3e87a16 100644 --- a/projects/random/minimal-styling/style.css +++ b/projects/random/minimal-styling/style.css @@ -0,0 +1,39 @@ +/* * { + margin: 0; +} */ + +/* img, svg, video { + width: 100%; + display: block; +} */ + +html { + color-scheme: light dark; +} + +body { + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Open Sans", + "Helvetica Neue", + sans-serif; + font-size: 1.125rem; + line-height: 1.5; +} + +main { + width: min(65ch, 100% - 4rem); + margin-inline: auto; +} + +:where(img, svg, video) { + width: 100%; + display: block; +}