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
Changes per end of "Stop over-engineering your CSS" video
2024-02-02 03:03:01 +00:00 · 2024-02-01 20:08:51 +00:00 · 2024-02-01 17:28:58 +00:00 · 2024-01-29 20:56:25 +00:00 · 2024-01-29 19:14:30 +00:00
10 changed files with 395 additions and 842 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,8 +1,9 @@
-const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const Image = require("@11ty/eleventy-img");
 const CleanCSS = require("clean-css");

-module.exports = function (eleventyConfig) {
+module.exports = async function (eleventyConfig) {
+    const { EleventyRenderPlugin } = await import("@11ty/eleventy");
+
    eleventyConfig.addPassthroughCopy("./src/css");
    eleventyConfig.addPassthroughCopy("./src/fonts");
    eleventyConfig.addPassthroughCopy("./src/images");
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -17,7 +17,7 @@
  "author": "Robert McGovern",
  "license": "ISC",
  "devDependencies": {
-    "@11ty/eleventy": "^2.0.0"
+    "@11ty/eleventy": "3.0.0-alpha.4"
  },
  "dependencies": {
    "@11ty/eleventy-img": "^3.1.8",
--- a/projects/random/minimal-styling/IMG_0030.JPG
+++ b/projects/random/minimal-styling/IMG_0030.JPG
--- a/projects/random/minimal-styling/IMG_0468.JPG
+++ b/projects/random/minimal-styling/IMG_0468.JPG
--- a/projects/random/minimal-styling/IMG_0835.JPG
+++ b/projects/random/minimal-styling/IMG_0835.JPG
--- a/projects/random/minimal-styling/index.html
+++ b/projects/random/minimal-styling/index.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minimal Styling riffing off Kevin Powell</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=PT+Sans:wght@400;700&display=swap"
+        rel="stylesheet">
+    <!-- <link rel="stylesheet" href="style.css"> -->
+    <link rel="stylesheet" href="style-new.css">
+</head>
+
+<body>
+    <main>
+        <article class="wrapper flow">
+            <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1>
+            <img src="./IMG_0030.JPG" alt="">
+            <p>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.
+            </p>
+            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
+            <h3>Lorem, ipsum dolor.</h3>
+            <img src="IMG_0468.JPG" alt="">
+            <p></p>
+            <h3>Lorem ipsum dolor sit amet consectetur.</h3>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium
+                maxime
+                accusamus ipsam architecto debitis expedita?</p>
+            <ul>
+                <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
+                <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
+                <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
+            </ul>
+            <fieldset>
+                <form action="">
+                    <label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
+                    <label for="email">Email<input type="email" name="email" id=""
+                            placeholder="Enter your email address"></label>
+                    <label for="message">Message
+                        <textarea id="message" name="message" rows="4" cols="50"
+                            placeholder="Your message here"></textarea>
+                    </label>
+                </form>
+            </fieldset>
+            <img src="./IMG_0835.JPG" alt="">
+        </article>
+    </main>
+
+</body>
+
+</html>
--- a/projects/random/minimal-styling/readme.md
+++ b/projects/random/minimal-styling/readme.md
@ -0,0 +1,10 @@
+Base layout and images to be used for working through two videos by Kevin Powell
+
+"Minimal CSS - Maximal Image"
+"How to make a nice site with less CSS"
+https://www.youtube.com/watch?v=RctP49SwyT0
+
+"Stop over-engineering your CSS"
+https://www.youtube.com/watch?v=wBKT2KN_Y9s
+
+Its a rough approximation of what I could see in the video.
--- a/projects/random/minimal-styling/style-new.css
+++ 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;
+}
--- 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;
+}
Author	SHA1	Message	Date
Robert McGovern	e69bf49e05	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	2024-02-02 03:03:01 +00:00
Robert McGovern	2a9d10af21	Changes per end of "Stop over-engineering your CSS" video	2024-02-01 20:08:51 +00:00
Robert McGovern	bd79b9c569	Added readme to minimal styling	2024-02-01 17:28:58 +00:00
Robert McGovern	e3aaceb931	Base files to work through for 2 Kevin Powell videos This is my attempt at copying the html that Kevin used in two of his videos, the first about minimal styling and other about limited css	2024-01-29 20:56:25 +00:00
Robert McGovern	d6fac9cd61	Initial changes to allow building in 11ty 3.0 canary	2024-01-29 19:14:30 +00:00