1st draft finished

.eleventy.js

@@ -3,6 +3,9 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const svgSprite = require("eleventy-plugin-svg-sprite");
 const dateFilter = require("./src/filters/dateFilter.js");
 const cleanCSS = require("clean-css");
+//const eleventyWebcPlugin = require("@11ty/eleventy-plugin-webc");
+//const { eleventyImagePlugin } = require("@11ty/eleventy-img");
+const Image = require('@11ty/eleventy-img');
 
 module.exports = function (config) {
   config.setServerOptions({
@@ -13,7 +16,7 @@ module.exports = function (config) {
     showAllHosts: true,
   });
   // PASSTHROUGHS
-  config.addPassthroughCopy("src/assets/images/");
+  //config.addPassthroughCopy("src/assets/images/");
 
   // LAYOUTS //
   config.addLayoutAlias("base", "layouts/base.njk");
@@ -43,6 +46,50 @@ module.exports = function (config) {
     svgShortcode: "icon",
     globalClasses: "icon",
   });
+  // WebC
+	// config.addPlugin(eleventyWebcPlugin, {
+	// 	components: [
+	// 		// …
+	// 		// Add as a global WebC component
+	// 		"npm:@11ty/eleventy-img/*.webc",
+	// 	]
+	// });
+	// Image plugin
+	// config.addPlugin(eleventyImagePlugin, {
+	// 	// Set global default options
+	// 	formats: ["webp", "jpeg"],
+	// 	urlPath: "/assets/images/",
+  //   outputDir: "./dist/assets/images/",
+
+	// 	// Notably `outputDir` is resolved automatically
+	// 	// to the project output directory
+
+	// 	defaultAttributes: {
+	// 		loading: "lazy",
+	// 		decoding: "async"
+	// 	}
+	// });
+
+  // SHORTCODES
+  config.addShortcode("image", async function(src, cls, alt, sizes) {
+		let metadata = await Image(src, {
+			widths: [300, 600],
+			formats: ["webp", "jpeg"],
+      urlPath: "/assets/images/",
+      outputDir: "dist/assets/images/",
+		});
+
+		let imageAttributes = {
+      class: cls,
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+
+		// You bet we throw an error on a missing alt (alt="" works okay)
+		return Image.generateHTML(metadata, imageAttributes);
+	});
 
   // EXTRAS //
   // Post List Excerpts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucht",
   "version": "1.0.0",
-  "description": "A mildly opinionated Eleventy starter kit",
+  "description": "A homepage",
   "scripts": {
     "eleventy:serve": "cross-env ELEVENTY_ENV=development eleventy --serve --quiet",
     "eleventy:build": "cross-env ELEVENTY_ENV=production eleventy",
@@ -12,14 +12,16 @@
     "build": "run-s -l eleventy:build sass:build"
   },
   "author": {
-    "name": "Matt DeCamp",
-    "email": "matt@mattdecamp.com",
-    "url": "https://mattdecamp.com"
+    "name": "Spencer Flagg",
+    "email": "work@spencerflagg.com",
+    "url": "https://spencerflagg.com"
   },
   "license": "MIT",
   "dependencies": {
     "@11ty/eleventy": "^2.0.0",
+    "@11ty/eleventy-img": "^3.1.1",
     "@11ty/eleventy-plugin-rss": "^1.1.1",
+    "@11ty/eleventy-plugin-webc": "^0.11.1",
     "clean-css": "^5.1.5",
     "cross-env": "^7.0.3",
     "eleventy-plugin-svg-sprite": "^2.4.0",

src/assets/styles/scss/components/_landing.scss

@@ -77,6 +77,7 @@
     img {
         object-fit: cover;
         min-height: 100vh;
+        width: 100%;
         &.bkg--winter {
             border-right: 1px solid black;
         }&.bkg--summer {
@@ -85,4 +86,22 @@
         }
             
     }
+}
+
+@media screen and (max-width: 600px) {
+    .bkg {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+        img {
+            min-height: auto;
+            height: 50vh;
+            &.bkg--winter {
+                border-right: none;
+                border-bottom: 1px solid black;
+            }&.bkg--summer {
+                border-left: none;
+                border-top: 1px solid black;
+            }
+        }
+    }
 }

src/includes/styles/main.css

@@ -581,6 +581,7 @@ header {
 .bkg img {
   object-fit: cover;
   min-height: 100vh;
+  width: 100%;
 }
 .bkg img.bkg--winter {
   border-right: 1px solid black;
@@ -590,6 +591,24 @@ header {
   border-left: 1px solid black;
 }
 
+@media screen and (max-width: 600px) {
+  .bkg {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+  .bkg img {
+    min-height: auto;
+    height: 50vh;
+  }
+  .bkg img.bkg--winter {
+    border-right: none;
+    border-bottom: 1px solid black;
+  }
+  .bkg img.bkg--summer {
+    border-left: none;
+    border-top: 1px solid black;
+  }
+}
 footer {
   width: 100%;
   max-width: 100vw;

src/index.njk

@@ -36,6 +36,6 @@ heading: Verwarming, Ventilatie, Airco
     </div>
 </div>
 <div class="bkg">
-    <img class="bkg--winter" src="/assets/images/winter.png" alt=""></img>
-    <img class="bkg--summer" src="/assets/images/summer.png" alt=""></img>
+    {% image "src/assets/images/winter.png", "bkg--winter", "alt text here", "(min-width: 30em) 50vw, 100vw" %}
+    {% image "src/assets/images/summer.png", "bkg--summer", "alt text here", "(min-width: 30em) 50vw, 100vw" %}
 </div>