Compare commits
No commits in common. "e69bf49e052a448016d119b70ef52706d906fc81" and "3dd7d307b2dc00edd04c337331be567dcf6b9690" have entirely different histories.
e69bf49e05
...
3dd7d307b2
|
|
@ -1,9 +1,8 @@
|
||||||
|
const { EleventyRenderPlugin } = require("@11ty/eleventy");
|
||||||
const Image = require("@11ty/eleventy-img");
|
const Image = require("@11ty/eleventy-img");
|
||||||
const CleanCSS = require("clean-css");
|
const CleanCSS = require("clean-css");
|
||||||
|
|
||||||
module.exports = async function (eleventyConfig) {
|
module.exports = function (eleventyConfig) {
|
||||||
const { EleventyRenderPlugin } = await import("@11ty/eleventy");
|
|
||||||
|
|
||||||
eleventyConfig.addPassthroughCopy("./src/css");
|
eleventyConfig.addPassthroughCopy("./src/css");
|
||||||
eleventyConfig.addPassthroughCopy("./src/fonts");
|
eleventyConfig.addPassthroughCopy("./src/fonts");
|
||||||
eleventyConfig.addPassthroughCopy("./src/images");
|
eleventyConfig.addPassthroughCopy("./src/images");
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -17,7 +17,7 @@
|
||||||
"author": "Robert McGovern",
|
"author": "Robert McGovern",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "3.0.0-alpha.4"
|
"@11ty/eleventy": "^2.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@11ty/eleventy-img": "^3.1.8",
|
"@11ty/eleventy-img": "^3.1.8",
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 491 KiB |
|
|
@ -1,57 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
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.
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
*,
|
|
||||||
*::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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
/* * {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue