tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: tarasis:3dd7d307b2dc00edd04c337331be567dcf6b9690
Branches Tags
tarasis:main
tarasis:wip
tarasis:3.0test
tarasis:devchallenges
tarasis:frontendmentor
tarasis:freecodecamp
tarasis:11ty-3.0a
...
compare: tarasis:e69bf49e052a448016d119b70ef52706d906fc81
Branches Tags
tarasis:main
tarasis:wip
tarasis:3.0test
tarasis:devchallenges
tarasis:frontendmentor
tarasis:freecodecamp
tarasis:11ty-3.0a

5 Commits
3dd7d307b2 ... e69bf49e05

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
10 changed files with 395 additions and 842 deletions
Show Stats Expand all files Collapse all files

5
.eleventy.js
View File

@ -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");

1021
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -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",

BIN
projects/random/minimal-styling/IMG_0030.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
projects/random/minimal-styling/IMG_0468.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

BIN
projects/random/minimal-styling/IMG_0835.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

57
projects/random/minimal-styling/index.html Normal file
View File

@ -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>

10
projects/random/minimal-styling/readme.md Normal file
View File

@ -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.

103
projects/random/minimal-styling/style-new.css Normal file
View File

@ -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;
}

39
projects/random/minimal-styling/style.css Normal file
View File

@ -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;
}