Remove minifiers. Rework work page

Author: ndorfin

.eleventy.js

@@ -1,7 +1,6 @@
 const yaml = require("js-yaml");
-const CleanCSS = require("clean-css");
-const Terser = require("terser");
-const minify = require('html-minifier').minify;
+// const Terser = require("terser");
+// const minify = require('html-minifier-terser').minify;
 
 const MONTHS = [
   "January",
@@ -84,7 +83,13 @@ module.exports = function(eleventyConfig) {
 
   /* Filters */
   eleventyConfig.addFilter("cssmin", function(code) {
-    return new CleanCSS({}).minify(code).styles;
+    let minifiedCode = code
+      .replace(/[\n\t]/gi, '')
+      .replace(/\:\s/gi, ':')
+      .replace(/\s\s/gi, '')
+      .replace(/\s\{/gi,'{')
+      .replace(/;\}/gi,'}');
+    return minifiedCode;
   });
   eleventyConfig.addNunjucksAsyncFilter("jsmin", async (code, callback) => {
     try {
@@ -96,13 +101,6 @@ module.exports = function(eleventyConfig) {
     }
   });
 
-  eleventyConfig.addFilter("htmlmin", function(code) {
-    var result = minify(code, {
-      collapseWhitespace: true
-    });
-    return result;
-  });
-
   eleventyConfig.addFilter("postUrl", function(post) {
     let postDate = getISODate(post.date).substring(0, 10);
     let fileName = `${post.fileSlug}.html`;
@@ -150,6 +148,21 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ "css/**/*": "css" });
   eleventyConfig.addPassthroughCopy({ "js/**/*": "js" });
 
+  // if (process.env.ELEVENTY_RUN_MODE === 'build'){
+	// 	eleventyConfig.addTransform('htmlmin', function (content) {
+	// 		if ((this.page.outputPath || '').endsWith('.html')) {
+	// 			let minified = htmlmin.minify(content, {
+	// 				useShortDoctype: true,
+	// 				removeComments: false,
+	// 				collapseWhitespace: true,
+	// 			});
+	// 			return minified;
+	// 		}
+	// 		// If not an HTML output, return content as-is
+	// 		return content;
+	// 	});
+	// }
+
   return {
     templateFormats: [
       "html",

_includes/site_scripts.njk

@@ -2,5 +2,5 @@
   {% include "js/site.js" %}
 {% endset %}
 <script async>
-  {{ site_script | jsmin | safe }}
+  {{ site_script | safe }}
 </script>

_includes/svg_sprite.njk

@@ -14,5 +14,5 @@
   </svg>
 </div>
 {% endset %}
-{{ svg | htmlmin |safe }}
+{{ svg | safe }}
 

css/work.css

@@ -3,96 +3,103 @@
 }
 
 @media (min-width: 800px) {
-  .page_work_items article {
-    overflow: hidden;
-  }
-
-  .page_work_items article > *:not(figure):not(header) {
-    margin-left: 24rem;
-  }
-
-  .page_work_items figure {
-    width: 20rem;
-    float: left;
-    clear: left;
-    margin: 0 3rem 2rem 0;
-  }
-
-  .page_work_items img {
-    border-radius: .25rem;
-    box-shadow: var(--shadow);
+  .page_work_items {
+    & article {
+      overflow: hidden;
+    }
+
+    & article > *:not(figure):not(header) {
+      margin-left: 24rem;
+    }
+
+    & figure {
+      width: 20rem;
+      float: left;
+      clear: left;
+      margin: 0 3rem 2rem 0;
+    }
+
+    & img {
+      border-radius: .25rem;
+      box-shadow: var(--shadow);
+    }
   }
 }
 
 .work_list {
   list-style: none;
   margin: 2rem 0;
   padding: 0;
-}
-
-.work_list li {
-  margin: 2rem 0;
-}
-
-.work_list a {
-  display: block;
-  border-bottom: 0;
-}
-
-.work_list b {
-  display: block;
-}
-
-.work_list span {
-  color: var(--colour-text-body);
-}
-
-.work_list img {
-  border-radius: .25rem;
-  box-shadow: var(--shadow);
-}
 
-@media (min-width: 500px) {
-  .work_list a {
-    overflow: hidden;
+  & li {
+    margin: 2rem 0;
   }
 
-  .work_list img {
-    float: left;
-    max-width: 10rem;
-    margin: 0 1rem 0.5rem 0;
+  & a {
+    display: block;
+    border-bottom: 0;
+    padding: 1rem;
+    margin-inline: -1rem;
   }
-}
 
-@media (min-width: 800px) {
-  .work_list {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 2rem;
-    column-gap: 2rem;
-    grid-row-gap: 2rem;
-    row-gap: 2rem;
-    gap: 2rem;
+  & b {
+    display: block;
   }
 
-  .work_list li {
-    margin: 0;
+  & span {
+    color: var(--colour-text-body);
   }
 
-  .work_list a {
-    box-sizing: border-box;
-    background-color: #eee;
-    padding: 1rem;
+  & img {
     border-radius: .25rem;
     box-shadow: var(--shadow);
-    height: 100%;
   }
+}
 
-  .work_list a:active {
-    box-shadow: 0 0 0 var(--shadow-3d-colour);
+@media (min-width: 500px) {
+  .work_list {
+    display: grid;
+    gap: 2rem;
+
+    & li {
+      margin: 0;
+    }
+
+    & a {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      min-block-size: 100%;
+      box-sizing: border-box;
+      margin-inline: 0;
+      background-color: #eee;
+      border-radius: .25rem;
+      box-shadow: var(--shadow);
+    }
+
+    & picture {
+      aspect-ratio: 2/1;
+      min-inline-size: 33.333%;
+      max-inline-size: 33.333%;
+      filter: grayscale(1);
+      opacity: 0.75;
+      transition-property: filter, opacity;
+      transition-duration: 0.2s;
+    }
+
+    & a:is(:hover,:focus) picture {
+      filter: grayscale(0);
+      opacity: 1;
+    }
   }
+}
 
-  .work_list img {
+@media (min-width: 800px) {
+  .work_list {
+    grid-template-columns: repeat(2, 1fr);
 
+    & a:active {
+      box-shadow: 0 0 0 var(--shadow-3d-colour);
+    }
   }
 }