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 CleanCSS = require("clean-css");
|
||||
|
||||
module.exports = async function (eleventyConfig) {
|
||||
const { EleventyRenderPlugin } = await import("@11ty/eleventy");
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("./src/css");
|
||||
eleventyConfig.addPassthroughCopy("./src/fonts");
|
||||
eleventyConfig.addPassthroughCopy("./src/images");
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -17,7 +17,7 @@
|
|||
"author": "Robert McGovern",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "3.0.0-alpha.4"
|
||||
"@11ty/eleventy": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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