finished except for: glidejs width issue, footer, wouter images, recent article alignment issue

.eleventy.js

@@ -2,21 +2,35 @@ const htmlmin = require('html-minifier');
 const dateFns = require('date-fns');
 const lazyImagesPlugin = require('eleventy-plugin-lazyimages');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const i18n = require('eleventy-plugin-i18n');
+const translations = require('./src/_data/i18n');
 
 module.exports = function (eleventyConfig) {
+
+  // PLUGINS **************************************************************
+
   eleventyConfig.addPlugin(syntaxHighlight);
 
-  eleventyConfig.addPlugin(lazyImagesPlugin, {
+  // does not work with background images
-    transformImgPath: (imgPath) => {
+  // eleventyConfig.addPlugin(lazyImagesPlugin, {
-      if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
+  //   transformImgPath: (imgPath) => {
-        // Handle remote file
+  //     if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
-        return imgPath;
+  //       // Handle remote file
-      } else {
+  //       return imgPath;
-        return `./src/${imgPath}`;
+  //     } else {
+  //       return `./src/${imgPath}`;
+  //     }
+  //   },
+  // });
+
+  eleventyConfig.addPlugin(i18n, {
+    translations,
+    fallbackLocales: {
+      'es-ES': 'en-US'
     }
-    },
   });
 
+
   eleventyConfig.setEjsOptions({
     rmWhitespace: true,
     context: {
@@ -28,7 +42,27 @@ module.exports = function (eleventyConfig) {
     files: './_site/assets/styles/main.css',
   });
 
+  // use this to redirect to en-GB
+  // eleventyConfig.setBrowserSyncConfig({
+  //   files: './_site/assets/styles/main.css',
+  //   callbacks: {
+  //     ready: function (err, bs) {
+  //       bs.addMiddleware('*', (req, res) => {
+  //         if (req.url === '/') {
+  //           res.writeHead(302, {
+  //             location: '/en-GB/'
+  //           });
+  //           res.end();
+  //         }
+  //       });
+  //     }
+  //   }
+  // });
+
   eleventyConfig.addPassthroughCopy("styles/fonts");
+  eleventyConfig.addPassthroughCopy("**/*.png");
+  eleventyConfig.addPassthroughCopy("**/*.svg");
+  eleventyConfig.addPassthroughCopy("node_modules/@glidejs/glide/dist");
 
   eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
     if (outputPath.endsWith('.html')) {
@@ -53,10 +87,34 @@ module.exports = function (eleventyConfig) {
 
   //Create collection of sponsor logos
   eleventyConfig.addCollection('screenshots', function (collection) {
-    return galleryImages;
+    return galleryImages.map(url => {
+      return url.replace('src/', '');
+    });
   });
 
   return {
+    passthroughFileCopy: true,
     dir: { input: 'src', output: '_site', data: '_data' },
   };
+
+  // return {
+  //   templateFormats: ['md', 'njk', 'html', 'liquid'],
+
+  //   // If your site lives in a different subdirectory, change this.
+  //   // Leading or trailing slashes are all normalized away, so don’t worry about it.
+  //   // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+  //   // This is only used for URLs (it does not affect your file structure)
+  //   pathPrefix: '/',
+
+  //   markdownTemplateEngine: 'liquid',
+  //   htmlTemplateEngine: 'njk',
+  //   dataTemplateEngine: 'njk',
+  //   passthroughFileCopy: true,
+  //   dir: {
+  //     input: '.',
+  //     includes: '_includes',
+  //     data: '_data',
+  //     output: 'docs',
+  //   },
+  // };
 };

package-lock.json

@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@glidejs/glide": "^3.4.1",
+        "eleventy-plugin-i18n": "^0.1.3",
         "fast-glob": "^3.2.7"
       },
       "devDependencies": {
@@ -296,6 +298,11 @@
         "purgecss": "^3.1.3"
       }
     },
+    "node_modules/@glidejs/glide": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
+      "integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -886,7 +893,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -2230,9 +2236,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001230",
+      "version": "1.0.30001271",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
-      "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
+      "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -2259,7 +2265,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
       "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -2644,7 +2649,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2655,8 +2659,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-      "dev": true
     },
     "node_modules/color-string": {
       "version": "1.5.5",
@@ -4069,6 +4072,16 @@
       "integrity": "sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==",
       "dev": true
     },
+    "node_modules/eleventy-plugin-i18n": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-i18n/-/eleventy-plugin-i18n-0.1.3.tgz",
+      "integrity": "sha512-O4FtB4t7g0T3ujH3ciFGCyJ/r1CHzp33WYrDqgnX6s6KZ4R63CkN/RndRKU36ahWWUmF0BrLjQ+IDwj2ntsicw==",
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "lodash.get": "^4.4.2",
+        "templite": "^1.1.0"
+      }
+    },
     "node_modules/eleventy-plugin-lazyimages": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eleventy-plugin-lazyimages/-/eleventy-plugin-lazyimages-2.1.0.tgz",
@@ -5947,7 +5960,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8078,6 +8090,11 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "node_modules/lodash.isfinite": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
@@ -13211,7 +13228,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -13691,6 +13707,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/templite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/templite/-/templite-1.1.0.tgz",
+      "integrity": "sha512-DtXicIurbnJS5/eu3nMLLspt4bZ8F/811IpcI7DgSE63UhES6ld3CxoTcLXBuGhliYx2wMVmyNzHf3c7mqwIIA=="
+    },
     "node_modules/term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -15352,6 +15373,11 @@
         "purgecss": "^3.1.3"
       }
     },
+    "@glidejs/glide": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
+      "integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -15859,7 +15885,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "requires": {
         "color-convert": "^2.0.1"
       }
@@ -16924,9 +16949,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001230",
+      "version": "1.0.30001271",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
-      "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
+      "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
       "dev": true
     },
     "caw": {
@@ -16946,7 +16971,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
       "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -17274,7 +17298,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "requires": {
         "color-name": "~1.1.4"
       }
@@ -17282,8 +17305,7 @@
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-      "dev": true
     },
     "color-string": {
       "version": "1.5.5",
@@ -18396,6 +18418,16 @@
       "integrity": "sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==",
       "dev": true
     },
+    "eleventy-plugin-i18n": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-i18n/-/eleventy-plugin-i18n-0.1.3.tgz",
+      "integrity": "sha512-O4FtB4t7g0T3ujH3ciFGCyJ/r1CHzp33WYrDqgnX6s6KZ4R63CkN/RndRKU36ahWWUmF0BrLjQ+IDwj2ntsicw==",
+      "requires": {
+        "chalk": "^4.1.1",
+        "lodash.get": "^4.4.2",
+        "templite": "^1.1.0"
+      }
+    },
     "eleventy-plugin-lazyimages": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eleventy-plugin-lazyimages/-/eleventy-plugin-lazyimages-2.1.0.tgz",
@@ -19882,8 +19914,7 @@
     "has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-      "dev": true
     },
     "has-symbol-support-x": {
       "version": "1.4.2",
@@ -21487,6 +21518,11 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isfinite": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
@@ -25475,7 +25511,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "requires": {
         "has-flag": "^4.0.0"
       }
@@ -25877,6 +25912,11 @@
         "uuid": "^3.0.1"
       }
     },
+    "templite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/templite/-/templite-1.1.0.tgz",
+      "integrity": "sha512-DtXicIurbnJS5/eu3nMLLspt4bZ8F/811IpcI7DgSE63UhES6ld3CxoTcLXBuGhliYx2wMVmyNzHf3c7mqwIIA=="
+    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",

package.json

@@ -65,6 +65,8 @@
     ]
   },
   "dependencies": {
+    "@glidejs/glide": "^3.4.1",
+    "eleventy-plugin-i18n": "^0.1.3",
     "fast-glob": "^3.2.7"
   }
 }

src/_data/i18n/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+    hello: {
+      'en-US': 'Hello',
+      'es-NL': 'Hola'
+    }
+  };

src/_data/sections.js

@@ -0,0 +1,11 @@
+module.exports = {
+  sections: [ 
+    { slug: 'home', name: 'Home' }, 
+    { slug: 'info', name: 'Info' }, 
+    { slug: 'screenshots', name: 'Screenshots' }, 
+    { slug: 'systems', name: 'Systems' }, 
+    { slug: 'pricing', name: 'Pricing' }, 
+    { slug: 'download', name: 'Download' }, 
+    { slug: 'reviews', name: 'Reviews' }
+  ]
+}

src/_includes/blurb.ejs

@@ -1,5 +1,139 @@
 <article class="blurb__wrapper">
+    <section>
         <p>
             Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.
         </p>
+    </section>
+    <section>
+        <div class="before-and-after">
+            <div class='img background-img'></div>
+            <div class='img foreground-img'></div>
+            <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="before-and-after__slider">
+            <div class='slider-button'></div>
+        </div>
+    </section>
 </article>
+
+<script>
+
+    document.querySelector("#before-and-after__slider").addEventListener("input", (e) => {
+        const sliderPos = e.target.value;
+        // Update the width of the foreground image
+        document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
+        // Update the position of the slider button
+        document.querySelector('.slider-button').style.left = `calc(${sliderPos}% - 18px)`;
+    });
+
+</script>
+
+<style>
+    article.blurb__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 3rem;
+        padding: 2rem 4rem;
+    }
+
+    .blurb__wrapper section {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .before-and-after {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 300/200;
+        border: 2px solid white;
+    }
+
+    .before-and-after .img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-size: 900px 100%;
+    }
+
+    .before-and-after .background-img {
+        background-image: url("https://picsum.photos/200/300");
+        border-radius: var(--r-1);
+    }
+
+    .before-and-after .foreground-img {
+        background-image: url("https://picsum.photos/200/301");
+        width: 50%;
+
+        border-radius: var(--r-1) 0 0 var(--r-1);
+    }
+
+    .before-and-after .slider {
+        position: absolute;
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 100%;
+        background: rgba(242, 242, 242, 0.3);
+        outline: none;
+        margin: 0;
+        transition: all 0.2s;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .before-and-after .slider:hover {
+        background: rgba(242, 242, 242, 0.1);
+    }
+
+    .before-and-after .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 6px;
+        height: 600px;
+        background: white;
+        cursor: pointer;
+    }
+
+    .before-and-after .slider::-moz-range-thumb {
+        width: 6px;
+        height: 600px;
+        background: white;
+        cursor: pointer;
+    }
+
+    .before-and-after .slider-button {
+        pointer-events: none;
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: white;
+        left: calc(50% - 18px);
+        top: calc(50% - 18px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .before-and-after .slider-button:after {
+        content: "";
+        padding: 3px;
+        display: inline-block;
+        border: solid #5D5D5D;
+        border-width: 0 2px 2px 0;
+        transform: rotate(-45deg);
+    }
+
+    .before-and-after .slider-button:before {
+        content: "";
+        padding: 3px;
+        display: inline-block;
+        border: solid #5D5D5D;
+        border-width: 0 2px 2px 0;
+        transform: rotate(135deg);
+    }
+</style>

src/_includes/download.ejs

@@ -1,46 +1,46 @@
-<article class="download__wrapper">
+<article class="download__wrapper max-w-screen-lg">
     <header>
         <h1 id="download">
             download now
         </h1>
     </header>
     <section class="download__content">
-        <div class="platform__wrapper">
+        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
             <% include /store-icons/ios.svg %>
                 <h2>
                     iOS
                 </h2>
-                <a class="btn btn--store" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
+                <div class="btn btn--store">
                     go to store
-                </a>
                 </div>
-        <div class="platform__wrapper">
+            </a>
+        <a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
             <% include /store-icons/android.svg %>
                 <h2>
                     Android
                 </h2>
-                <a class="btn btn--store" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
+                <div class="btn btn--store">
                     go to store
-                </a>
                 </div>
-        <div class="platform__wrapper">
+            </a>
+        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
             <% include /store-icons/macos.svg %>
                 <h2>
                     macOS
                 </h2>
-                <a class="btn btn--store" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
+                <div class="btn btn--store">
                     go to store
-                </a>
                 </div>
-        <div class="platform__wrapper">
+        </a>
+        <a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
             <% include /store-icons/windows.svg %>
                 <h2>
                     Windows
                 </h2>
-                <a class="btn btn--store" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
+                <div class="btn btn--store">
                     go to store
-                </a>
                 </div>
+            </a>
     </section>
 </article>
 
@@ -48,7 +48,7 @@
     .btn--store {
         text-align: center;
         background: orangered;
-        padding: .25rem 1rem;
+        padding: .5rem 1rem;
         color: white;
         display: block;
         border-radius: 999px;
@@ -70,6 +70,16 @@
         border-radius: var(--r-1);
         background-color: var(--c-bkg);
         gap: 1rem;
+        border: 0.3rem solid var(--c-bkg);
+        transition: all 0.2s;
+    }
+
+    .platform__wrapper:hover {
+        border: 0.3rem solid orangered;
+    }
+
+    .platform__wrapper:hover .btn--store {
+        background: var(--c-1);
     }
 
     .platform__wrapper svg {

src/_includes/hero.ejs

@@ -3,11 +3,19 @@
         <video autoplay loop muted class="hero__video" id="video-bg">
             <!--this id is only used for the toggle function; can be removed if you don't need an event -->
             <!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
-            <source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">
+            <source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">https://thumbs.gfycat.com/EthicalMagnificentHart-mobile.mp4
         </video>
-        <button class="btn btn--hero">
+        <div class="hero__info">
-
+            <a class="btn btn--hero">
-        </button>
+                download now
+            </a>
+            <div class="platform-list">
+                <% include /store-icons/ios.svg %>
+                <% include /store-icons/android.svg %>
+                <% include /store-icons/macos.svg %>
+                <% include /store-icons/windows.svg %>
+            </div>
+        </div>
         <div class="hero__banner">
             <svg class="banner-edge-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
                 <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
@@ -17,7 +25,7 @@
                 <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
                     d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
             </svg>
-            <h1 class="h1--hero">muscles, skeleton, organs and blood vessels in 3D</h1>
+            <h1 class="h1--hero">muscles, bones, organs and blood vessels in 3D</h1>
         </div>
 </div>
 
@@ -25,6 +33,8 @@
     .hero__wrapper {
         --offset: 8rem;
         margin-bottom: var(--offset);
+        padding: 0 2rem;
+        --weird-gap: 0.04rem;
     }
 
     .hero__video {
@@ -37,7 +47,7 @@
         padding: var(--p-1);
         position: absolute;
         bottom: calc(-1 * var(--offset));
-        left: 4rem;
+        left: 6rem;
     }
 
     .hero__banner h1 {
@@ -46,18 +56,55 @@
 
     .banner-edge-left {
         position: absolute;
-        left: calc(-1 * var(--r-1));
+        left: calc(-1 * var(--r-1) + var(--weird-gap));
         height: var(--r-1);
         width: var(--r-1);
-        bottom: var(--offset);
+        bottom: calc(var(--offset) - var(--weird-gap));
     }
 
     .banner-edge-right {
         position: absolute;
-        right: calc(-1 * var(--r-1));
+        right: calc(-1 * var(--r-1) + var(--weird-gap));
         height: var(--r-1);
         width: var(--r-1);
-        bottom: var(--offset);
+        bottom: calc(var(--offset) - var(--weird-gap));
         transform: scaleX(-1);
     }
+
+.hero__info {
+    position: absolute;
+    top: 30%;
+    right: 15%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+.hero__info .platform-list {
+    display: flex;
+    gap: 0.8rem;
+}
+
+.hero__info .platform-list svg {
+    height: 1.8rem;
+    width: 1.8rem;
+}
+
+.hero__info .platform-list svg path {
+    fill: white;
+}
+
+.btn--hero {
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    background: var(--c-1);
+    border-radius: 999px;
+    padding: 1.5rem 2rem;
+    color: black;
+}
+
+.btn--hero:hover {
+    background: var(--c-bkg);
+}
 </style>

src/_includes/info.ejs

@@ -1,5 +1,5 @@
-<article class="info__wrapper">
+<article class="info__wrapper max-w-screen-lg">
-    <section>
+    <section id="info">
         <h1>
             Designed for anatomy students
         </h1>
@@ -36,9 +36,9 @@
 
 <style>
 
-.info__wrapper {
+article.info__wrapper {
-    display: flex;
+    flex-direction: row;
-    gap: 1rem;
+    gap: 3rem;
 }
 
 .info__wrapper section {
@@ -57,13 +57,30 @@
     margin-bottom: 3rem;
 }
 
+.info__wrapper ul {
+    margin-left: 2.5rem;
+}
+
 .info__wrapper ul li{
     font-size: 1.5rem;
     font-weight: 700;
     font-style: italic;
-    list-style-image: url('starsolid.gif');
     line-height: 1;
     margin-bottom: 2rem;
+    list-style: none;
+    position: relative;
+}
+
+.info__wrapper ul li::before {
+    content: '';
+    background: url('./assets/images/check.svg');
+    height: 1.8rem;
+    width: 1.8rem;
+    background-size: contain;
+    display: block;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: -2.3rem;
 }
 
 </style>

src/_includes/layouts/base.ejs

@@ -1,23 +1,27 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ locale }}" dir="{{ dir }}">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> -->
   <link rel="icon" href="/favicon.ico" />
-    <title><%= title %></title>
+
-    <meta
+  <!-- Required Core Stylesheet -->
-      name="description"
+  <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.css">
-      content="<%= (!!locals.description) ? description : site.description %>"
+
-    />
+  <!-- Optional Theme Stylesheet -->
+  <link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.css">
+
+  <title>
+    <%= site.title %>
+  </title>
+  <meta name="description" content="<%= (!!locals.description) ? description : site.description %>" />
   <meta name="author" content="<%= site.author %>" />
-    <meta property="og:title" content="<%= title %>" />
+  <meta property="og:title" content="<%= site.title %>" />
-    <meta
+  <meta property="og:description" content="<%= (!!locals.description) ? description : site.description %>" />
-      property="og:description"
-      content="<%= (!!locals.description) ? description : site.description %>"
-    />
   <meta property="og:locale" content="<%= site.locale %>" />
   <meta property="og:site_name" content="<%= site.site_name %>" />
   <% if (locals.tags=="posts" ) { %>
@@ -37,7 +41,7 @@
           },
           "name": "<%= site.author %>"
         },
-        "headline": "<%= title %>",
+        "headline": "<%= site.title %>",
         "datePublished": "<%= date.toISOString() %>",
         "mainEntityOfPage": {
           "@type": "WebPage",
@@ -46,7 +50,9 @@
         "@context": "http://schema.org"
       }
     </script>
-    <% } %><%- include('webpack.ejs') %> <% if (page.url == "/") { %>
+    <% } %>
+      <%- include('webpack.ejs') %>
+        <% if (page.url=="/" ) { %>
           <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
           <script>
             if (window.netlifyIdentity) {
@@ -62,15 +68,18 @@
           <% } %>
 </head>
 
-  <body class="antialiased w-full text-gray-700">
+<body class="">
-    <div class="max-w-screen-lg mx-auto">
+  <div id="page" class="max-w-screen-lg mx-auto">
-      <div class="">
     <header class="site-header ">
-          <img src="<%= `${site.url}/assets/images/logo.png` %>" alt="">
+      <img class="site-logo" src="<%= `./assets/images/logo.png` %>" alt="">
-          <h1 class="site-title font-semibold text-3xl text-gray-800"><%= site.title %></h1>
+      <h1 class="site-title font-semibold text-3xl text-gray-800">
+        <%= site.title %>
+      </h1>
       <!-- <div class="text-xl"><%= site.description %></div> -->
     </header>
-        <!-- <nav>
+    <!-- <div class="">
+        header was here
+        <nav>
           <ul class="flex flex-wrap text-xl">
             <li class="mr-6">
               <a class="text-gray-700 border-none hover:no-underline hover:text-gray-800" href="/"
@@ -86,35 +95,100 @@
               </a>
             </li>
           </ul>
-        </nav> -->
+        </nav>
-      </div>
+      </div> -->
 
-      <div class="text-xl py-4"><%- content %></div>
+    <main class="page-content">
+      <%- content %>
+    </main>
 
-      <div class="border-t border-gray-300 text-center py-8">
+    <footer class="text-center">
       Made with <span role="img" aria-label="Love">♥</span> by
       <a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
+    </footer>
   </div>
-    </div>
+
+  <script>
+
+    window.onload = setScrollbarVariable;
+    window.onresize = setScrollbarVariable;
+
+    function setScrollbarVariable() {
+      const scrollbarWidth = window.innerWidth - document.body.clientWidth;
+      document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
+    }
+
+  </script>
+
+  <!-- <script src="https://unpkg.com/@glidejs/glide@3.3.0/dist/glide.js"></script> -->
+  <script src="/node_modules/@glidejs/glide/dist/glide.min.js"></script>
+  <!-- <script src="/node_modules/@glidejs/glide/dist/glide.modular.esm.js"></script> -->
+  <!-- <script src="/js/eleventy.js" type="module" async></script> -->
+
+  <script>
+    new Glide('.glide').mount({
+      type: 'carousel',
+      startAt: 0,
+      perView: 1,
+      autoplay: 1000,
+      bound: true,
+      rewind: false
+    })
+  </script>
+
+
 </body>
+
 </html>
 
-
 <style>
+  .site-logo {
+    height: 5rem;
+    transform: rotateZ(4deg) translateY(0.4rem);
+    transition: 0.2s all;
+    border: 3px solid var(--c-1);
+    border-radius: 1rem;
+  }
+
+  .site-logo:hover {
+    transform: rotateZ(0deg) translateY(0.4rem);
+  }
+
   .site-header {
     display: flex;
     justify-content: center;
+    align-items: baseline;
+    gap: 1rem;
   }
 
   .site-title {
     font-family: Bebas Neue;
     font-style: normal;
     font-weight: normal;
-  font-size: 52.72px;
+    font-size: 3rem;
-  line-height: 63px;
+    line-height: 1;
     letter-spacing: 0.24em;
     text-transform: uppercase;
     width: auto;
+    margin: 3rem 0 0 0;
   }
 
+  #page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .page-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  footer {
+    background: black;
+    width: var(--viewportWidth);
+    margin-top: 2rem;
+    padding: 4rem 2rem 6rem 2rem;
+  }
 </style>

src/_includes/layouts/post.ejs

@@ -4,7 +4,7 @@ layout: layouts/base.ejs
 
 <article>
   <header>
-    <h1 class="text-center font-bold text-3xl text-gray-800"><%= title %></h1>
+    <h1 class="text-center font-bold text-3xl text-gray-800"><%= site.title %></h1>
     <div class="text-center text-sm mb-8">
       <%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %>
     </div>

src/_includes/nav.ejs

@@ -3,7 +3,7 @@
     <ul>
       <% sections.forEach((link)=> { %>
         <li class="">
-          <a href="#<%= link.slug %>">
+          <a class="nav-link" href="#<%= link.slug %>">
             <%= link.name %>
           </a>
         </li>
@@ -27,6 +27,8 @@
     background: var(--c-bkg);
     position: absolute;
     z-index: 1;
+
+    --weird-gap: 0.04rem;
   }
 
   nav ul {
@@ -37,23 +39,51 @@
 
   nav ul li {
     white-space: nowrap;
+    font-family: Nunito, sans-serif;
+    text-transform: uppercase;
+    font-size: 1rem;
   }
 
   .nav-edge-left {
     position: absolute;
-    left: calc(-1 * var(--r-1));
+    left: calc(-1 * var(--r-1) + var(--weird-gap));
     height: var(--r-1);
     width: var(--r-1);
-    top: 0;
+    top: calc(-1 * var(--weird-gap));
     transform: scaleY(-1);
   }
 
   .nav-edge-right {
     position: absolute;
-    right: calc(-1 * var(--r-1));
+    right: calc(-1 * var(--r-1) + var(--weird-gap));
     height: var(--r-1);
     width: var(--r-1);
-    top: 0;
+    top: calc(-1 * var(--weird-gap));
     transform: scaleX(-1) scaleY(-1);
   }
+
+.nav-link {
+  position: relative;
+  transition: all 0.15s ease-out;
+  color: black;
+}
+.nav-link:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--c-1);
+  visibility: hidden;
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
+  transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
+}
+.nav-link:hover:before {
+  visibility: visible;
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
+}
 </style>

src/_includes/pricing.ejs

@@ -1,18 +1,18 @@
-<article class="pricing__wrapper">
+<article class="pricing__wrapper max-w-screen-lg">
     <header>
         <h1 id="pricing">
             flexible pricing options
         </h1>
     </header>
     <section class="pricing__content">
-        <div class="level__wrapper level-wrapper--trial">
+        <div class="level__wrapper level-wrapper--heading">
             <header>
                 <h2>
 
-                </h2>
                     <span>
 
                     </span>
+                </h2>
             </header>
             <div class="level__content">
                 <div class="level__price-wrapper">
@@ -37,94 +37,116 @@
             <header>
                 <h2>
                     starter
-                </h2>
                     <span>
                         limited
                     </span>
+                </h2>
             </header>
             <div class="level__content">
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         free
-                    </h2>
                         <span>
-                        purchase advanced systems separately
+                            with paid add-ons
                         </span>
+                    </h2>
                 </div>
                 <ul>
-                    <li>2 systems included</li>
+                    <!-- <li>2 systems included</li>
-                    <li>purchase advanced systems separately</li>
+                    <li>purchase advanced systems separately</li> -->
-                    <li>✔</li>
+                    <% systems.forEach((system)=> { %>
+
+                        <% if (system.status==='free' ) { %>
+
                             <li>✔</li>
+
+                            <% } else if (system.status==='pro' ) { %>
+
                                 <li>✖<span>(in-app purchase)</span></li>
-                    <li>✖<span>(in-app purchase)</span></li>
+
-                    <li>✖<span>(in-app purchase)</span></li>
+                                <% } else if (system.status==='soon' ) { %>
-                    <li>✖<span>(in-app purchase)</span></li>
+
-                    <li>✖<span>(in-app purchase)</span></li>
+                                    <li><span>(coming soon)</span></li>
+
+                                    <% } %>
+
+                                        <% }) %>
                 </ul>
             </div>
             <a class="btn btn--level" href="#download">
-                download now
+                download
             </a>
         </div>
-        <div class="level__wrapper">
+        <div class="level__wrapper level__wrapper--disabled">
             <header>
                 <h2>
                     monthly
-                </h2>
                     <span>
                         subscription
                     </span>
+                </h2>
             </header>
             <div class="level__content">
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         $9.95
-                    </h2>
                     <span>
                         paid monthly
                     </span>
+                    </h2>
                 </div>
                 <ul>
+                    <% systems.forEach((system)=> { %>
+
+                        <% if (system.status==='pro' || system.status==='free' ) { %>
+
                             <li>✔</li>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                            <% } else if (system.status==='soon' ) { %>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                                <li><span>(coming soon)</span></li>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                                <% } %>
+
+                                    <% }) %>
                 </ul>
             </div>
             <a class="btn btn--level btn--disabled">
                 coming soon
             </a>
         </div>
-        <div class="level__wrapper">
+        <div class="level__wrapper level__wrapper--disabled">
             <header>
                 <h2>
                     yearly
-                </h2>
                     <span>
                         subscription
                     </span>
+                </h2>
             </header>
             <div class="level__content">
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         $3.95
-                    </h2>
                     <span>
                         paid monthly
                     </span>
+                    </h2>
                 </div>
                 <ul>
+                    <% systems.forEach((system)=> { %>
+
+                        <% if (system.status==='pro' || system.status==='free' ) { %>
+
                             <li>✔</li>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                            <% } else if (system.status==='soon' ) { %>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                                <li><span class="">(coming soon)</span></li>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                                <% } %>
+
+                                    <% }) %>
                 </ul>
             </div>
             <a class="btn btn--level btn--disabled">
@@ -135,32 +157,38 @@
             <header>
                 <h2>
                     lifetime
-                </h2>
                     <span>
                         Š
                     </span>
+                </h2>
             </header>
             <div class="level__content">
                 <div class="level__price-wrapper">
                     <h2 class="level__price">
                         $39.95
-                    </h2>
                     <span>
                         one time fee
                     </span>
+                    </h2>
                 </div>
                 <ul>
+                    <% systems.forEach((system)=> { %>
+
+                        <% if (system.status==='pro' || system.status==='free' ) { %>
+
                             <li>✔</li>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                            <% } else if (system.status==='soon' ) { %>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                                <li><span>(coming soon)</span></li>
-                    <li>✔</li>
+
-                    <li>✔</li>
+                                <% } %>
+
+                                    <% }) %>
                 </ul>
             </div>
             <a class="btn btn--level" href="#download">
-                download now
+                download
             </a>
         </div>
     </section>
@@ -175,51 +203,121 @@
 
     .level__wrapper {
         display: grid;
-        grid-template-rows: 3rem auto auto;
+        grid-template-rows: 3rem auto 2.5rem;
         gap: 1rem;
     }
 
+    .level__wrapper--disabled {
+        opacity: 0.25;
+    }
+
     .level__wrapper header {
         text-align: center;
     }
 
+    .level__wrapper header span {
+        font-size: 0.75rem;
+        color: white;
+        font-family: Nunito, sans-serif;
+    }
+
     .level__wrapper header h2 {
         color: var(--c-bkg);
+        display: inline-flex;
+        flex-direction: column;
+        align-items: end;
     }
 
     .level__content {
         border-radius: var(--r-1);
         background: var(--c-bkg);
         padding: 2rem 1rem;
+        display: grid;
+        grid-template-rows: 3rem auto;
     }
 
-    .level__price-wrapper h2 {
+    .level__content ul {
+        display: grid;
+        grid-template-rows: repeat(10, 3rem);
+        align-items: center;
+    }
+
+    .level__content li {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.25rem;
+        line-height: 1;
+        font-size: 1.5rem;
+    }
+
+    .level__content li span {
+        font-size: .75rem;
+    }
+
+    .level__price-wrapper {
         text-align: center;
     }
 
-    .level__wrapper span {
+.level__price-wrapper h2 {
+    display: inline-flex;
+        flex-direction: column;
+        align-items: end;
+}
+
+.level__price-wrapper span {
+    font-size: 0.75rem;
+    font-family: Nunito, sans-serif;
+}
+
+    .level__wrapper .note {
         color: var(--c-bkg);
     }
 
+    .level-wrapper--heading .level__content {
+        background: transparent;
+    }
+
+    .level-wrapper--heading ul {
+        justify-items: start;
+        align-items: center;
+    }
+
+    .level-wrapper--heading ul li {
+        color: black;
+        font-size: 1rem;
+    }
+
     .level-wrapper--trial .level__content {
         background: #DBDBDB;
     }
 
+    .level__wrapper--trial .note {
+        color: gray;
+    }
+
     .btn--level {
         text-align: center;
         background: orangered;
-    padding: .25rem 1rem;
         color: white;
         display: block;
         border-radius: 999px;
         text-transform: uppercase;
         font-size: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 0;
+    }
+
+    .btn--level:hover {
+        background: var(--c-bkg);
+        color: var(--c-1);
     }
 
     .btn--disabled {
         background: var(--c-bkg);
-    color: var(--c-1);
+        color: black;
-    opacity: 0.6;
         pointer-events: none;
         cursor: not-allowed;
     }

src/_includes/reviews.ejs

@@ -42,7 +42,7 @@
 
     .reviews-wrapper blockquote {
         font-family: 'DM Serif Display', serif;
-        font-size: 59px;
+        font-size: 3.4rem;
         line-height: .9;
         margin: 0 2rem;
     }
@@ -66,6 +66,13 @@
 
 .review__name {
     align-self: flex-end;
+    margin-right: 6rem;
+    font-size: 1.5rem;
+}
+
+.review__name::before {
+    content: '⁓ ';
+
 }
 
     .rating {
@@ -74,7 +81,7 @@
     }
 
     .rating>label:before {
-        margin: 5px;
+        margin: 0.3rem;
         font-size: 1.25em;
         font-family: FontAwesome;
         display: inline-block;

src/_includes/screenshots.ejs

@@ -7,316 +7,27 @@
             Visual Anatomy 3d runs portrait and landscape, on all your devices.
         </aside>
     </header>
-    <!-- <img src="assets/images/posts/error.png" alt="">
+    <section>
-    <img src="assets/images/posts/error2.png" alt="">
+        <div class="glide">
-    <img src="assets/images/posts/1.png" alt="">
+            <div data-glide-el="track" class="glide__track">
-    <img src="assets/images/posts/2.png" alt=""> -->
+                <ul class="glide__slides">
-    <!-- <img src="assets/images/screenshots/Simulator Screen Shot - iPhone 12 Pro Max - 2021-10-14 at 14.37.14.png" alt="">
-    <img src="assets/images/posts/1.png" alt="">
-    <img src="assets/images/screenshots/1.png" alt="">
-    <img src="assets/images/screenshots/mu.png" alt=""> -->
-    <div class="test-images">
-    <!-- <% collections.screenshots.forEach((screenshot, index)=> { %>
-        <%= screenshot.replace('src/','') %>
-        <img style="width:50px;" src="<%= screenshot.replace('src/','') %>" alt="">
-    <% }) %> -->
-    </div> 
-    <section class="carousel" aria-label="Gallery">
-        <ol class="carousel__viewport">
                     <% collections.screenshots.forEach((screenshot, index)=> { %>
-                <li id="carousel__slide<%= index %>" tabindex="0" class="carousel__slide" style="background-image: url(<%= screenshot.replace('src/','') %>);">
+                        <li class="glide__slide">
-                    <div class="carousel__snapper">
+                            <img width="300" src="<%= screenshot %>" alt="">
-                        <!-- <label for="">
-                            <%= screenshot.replace('src/','') %>
-                        </label> -->
-                        <a href="#carousel__slide<%= (index == 0) ? collections.screenshots.length - 1 : index - 1 %>" class="carousel__prev">Go to last slide</a>
-                        <a href="#carousel__slide<%= index + 1 %>" class="carousel__next">Go to next slide</a>
-                    </div>
                         </li>
                     <% }) %>
-            <!-- 
+                </ul>
-            <li id="carousel__slide1" tabindex="0" class="carousel__slide">
+            </div>
-                <div class="carousel__snapper">
-                    <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a>
-                    <a href="#carousel__slide2" class="carousel__next">Go to next slide</a>
         </div>
-            </li>
-            <li id="carousel__slide2" tabindex="0" class="carousel__slide">
-                <div class="carousel__snapper"></div>
-                <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a>
-                <a href="#carousel__slide3" class="carousel__next">Go to next slide</a>
-            </li>
-            <li id="carousel__slide3" tabindex="0" class="carousel__slide">
-                <div class="carousel__snapper"></div>
-                <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a>
-                <a href="#carousel__slide4" class="carousel__next">Go to next slide</a>
-            </li>
-            <li id="carousel__slide4" tabindex="0" class="carousel__slide">
-                <div class="carousel__snapper"></div>
-                <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a>
-                <a href="#carousel__slide1" class="carousel__next">Go to first slide</a>
-            </li> 
-            -->
-        </ol>
-        <aside class="carousel__navigation">
-            <ol class="carousel__navigation-list">
-                <% collections.screenshots.forEach((screenshot, index)=> { %>
-                    <li class="carousel__navigation-item">
-                        <a href="#carousel__slide<%= index %>" class="carousel__navigation-button">Go to slide 1</a>
-                    </li>
-                <% }) %>
-            </ol>
-        </aside>
     </section>
 </article>
 
 <style>
-    @keyframes tonext {
+    .glide__slide {
-        75% {
+        max-width: 10rem;
-            left: 0;
     }
 
-        95% {
+    .glide__slide img {
-            left: 100%;
+        border-radius: 2rem;
-        }
-
-        98% {
-            left: 100%;
-        }
-
-        99% {
-            left: 0;
-        }
-    }
-
-    @keyframes tostart {
-        75% {
-            left: 0;
-        }
-
-        95% {
-            left: -300%;
-        }
-
-        98% {
-            left: -300%;
-        }
-
-        99% {
-            left: 0;
-        }
-    }
-
-    @keyframes snap {
-        96% {
-            scroll-snap-align: center;
-        }
-
-        97% {
-            scroll-snap-align: none;
-        }
-
-        99% {
-            scroll-snap-align: none;
-        }
-
-        100% {
-            scroll-snap-align: center;
-        }
-    }
-
-    .test-images {
-        display: flex;
-        flex-wrap: wrap;
-        font-size: .5rem;
-    }
-
-    /* body {
-        max-width: 37.5rem;
-        margin: 0 auto;
-        padding: 0 1.25rem;
-        font-family: 'Lato', sans-serif;
-    } */
-
-    .carousel * {
-        box-sizing: border-box;
-        scrollbar-color: transparent transparent;
-        /* thumb and track color */
-        scrollbar-width: 0px;
-    }
-
-    .carousel *::-webkit-scrollbar {
-        width: 0;
-    }
-
-    .carousel *::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .carousel *::-webkit-scrollbar-thumb {
-        background: transparent;
-        border: none;
-    }
-
-    .carousel * {
-        -ms-overflow-style: none;
-    }
-
-    .carousel ol,
-    .carousel li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .carousel {
-        position: relative;
-        padding-top: 75%;
-        filter: drop-shadow(0 0 10px #0003);
-        perspective: 100px;
-    }
-
-    .carousel__viewport {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        overflow-x: scroll;
-        counter-reset: item;
-        scroll-behavior: smooth;
-        scroll-snap-type: x mandatory;
-        gap: 1rem;
-    }
-
-    .carousel__slide {
-        position: relative;
-        flex: 0 0 25%;
-        width: 25%;
-        background-color: #f99;
-        counter-increment: item;
-        border-radius: var(--r-1);
-        background-size: cover;
-    }
-
-    .carousel__slide:nth-child(even) {
-        background-color: #99f;
-    }
-
-    .carousel__slide:before {
-        /* content: counter(item); */
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate3d(-50%, -40%, 70px);
-        color: #fff;
-        font-size: 2em;
-    }
-
-    .carousel__snapper {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        scroll-snap-align: center;
-    }
-
-    @media (hover: hover) {
-        .carousel__snapper {
-            animation-name: tonext, snap;
-            animation-timing-function: ease;
-            animation-duration: 4s;
-            animation-iteration-count: infinite;
-        }
-
-        .carousel__slide:last-child .carousel__snapper {
-            animation-name: tostart, snap;
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .carousel__snapper {
-            animation-name: none;
-        }
-    }
-
-    .carousel:hover .carousel__snapper,
-    .carousel:focus-within .carousel__snapper {
-        animation-name: none;
-    }
-
-    .carousel__navigation {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        text-align: center;
-    }
-
-    .carousel__navigation-list,
-    .carousel__navigation-item {
-        display: inline-block;
-    }
-
-    .carousel__navigation-button {
-        display: inline-block;
-        width: 1.5rem;
-        height: 1.5rem;
-        background-color: #333;
-        background-clip: content-box;
-        border: 0.25rem solid transparent;
-        border-radius: 50%;
-        font-size: 0;
-        transition: transform 0.1s;
-    }
-
-    .carousel::before,
-    .carousel::after,
-    .carousel__prev,
-    .carousel__next {
-        position: absolute;
-        top: 0;
-        margin-top: 37.5%;
-        width: 4rem;
-        height: 4rem;
-        transform: translateY(-50%);
-        border-radius: 50%;
-        font-size: 0;
-        outline: 0;
-    }
-
-    .carousel::before,
-    .carousel__prev {
-        left: -1rem;
-    }
-
-    .carousel::after,
-    .carousel__next {
-        right: -1rem;
-    }
-
-    .carousel::before,
-    .carousel::after {
-        content: '';
-        z-index: 1;
-        background-color: #333;
-        background-size: 1.5rem 1.5rem;
-        background-repeat: no-repeat;
-        background-position: center center;
-        color: #fff;
-        font-size: 2.5rem;
-        line-height: 4rem;
-        text-align: center;
-        pointer-events: none;
-    }
-
-    .carousel::before {
-        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
-    }
-
-    .carousel::after {
-        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
     }
 </style>

src/_includes/systems.ejs

@@ -1,6 +1,6 @@
 <article class="system__wrapper">
     <header>
-        <h1>
+        <h1 id="systems">
             6 detailed body systems
         </h1>
         <aside>
@@ -49,6 +49,29 @@
 
 <style>
 
+.system__wrapper section {
+    display: grid;
+    grid-template-columns: 40rem auto;
+}
+
+.system__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.system__list { 
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.system__list li {
+  aspect-ratio: 1;
+  height: 9rem;
+  background: var(--c-1);
+  border-radius: var(--r-1);
+}
+
 .system__zoom-wrapper {
     position: relative;
 }
@@ -71,9 +94,4 @@ li.system--soon {
     opacity: 1;
 }
 
-.system__wrapper section {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-}
-
 </style>

src/assets/images/check.svg

@@ -0,0 +1,10 @@
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51:52)">
+<path d="M28.0029 14.3048C28.0029 18.0987 26.5278 21.7372 23.902 24.4198C21.2762 27.1025 17.7149 28.6096 14.0014 28.6096C10.288 28.6096 6.72671 27.1025 4.10093 24.4198C1.47515 21.7372 0 18.0987 0 14.3048C0 10.5109 1.47515 6.87245 4.10093 4.18978C6.72671 1.50711 10.288 0 14.0014 0C17.7149 0 21.2762 1.50711 23.902 4.18978C26.5278 6.87245 28.0029 10.5109 28.0029 14.3048V14.3048ZM21.0547 8.88686C20.9297 8.75958 20.7808 8.65937 20.617 8.59221C20.4532 8.52505 20.2779 8.49233 20.1014 8.49601C19.9249 8.49968 19.751 8.53967 19.59 8.61358C19.4291 8.6875 19.2843 8.79383 19.1645 8.9262L13.0861 16.8385L9.42298 13.0943C9.17414 12.8574 8.84503 12.7284 8.50497 12.7345C8.1649 12.7407 7.84045 12.8814 7.59995 13.1271C7.35945 13.3728 7.22169 13.7043 7.21569 14.0518C7.20969 14.3992 7.33592 14.7354 7.56778 14.9897L12.1988 19.7228C12.3235 19.85 12.4721 19.9502 12.6356 20.0175C12.7991 20.0848 12.9742 20.1178 13.1504 20.1145C13.3267 20.1111 13.5004 20.0715 13.6614 19.9981C13.8223 19.9247 13.9672 19.8189 14.0872 19.687L21.0739 10.7644C21.3121 10.5114 21.4437 10.173 21.4404 9.82196C21.4372 9.47093 21.2993 9.1352 21.0564 8.88686H21.0547Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_51:52">
+<rect width="28" height="29" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/styles/main.css

@@ -119,24 +119,72 @@ a:hover {
 html {
   font-size: 2vmin;
   scroll-behavior: smooth;
+  color: black;
+  font-family: Nunito, sans-serif;
 }
 
+/* html, body, #page {
+  width: 100vw;
+} */
+
+/* html{
+  outline: 1px solid red;
+  outline-offset: -10px;
+}
+body{
+  outline: 1px solid orange;
+  outline-offset: -10px;
+}
+#page{
+  outline: 1px solid blue;
+  outline-offset: -10px;
+} */
+
 :root{
   --r-1: 2rem;
   --p-1: 1.5rem;
   --c-bkg: white;
   --c-1: #00C2FF;
   --c-2: black;
+  --viewportWidth: calc(100vw - var(--scrollbarWidth));
+}
+
+.btn {
+  transition: all 0.2s;
+  font-family: Nunito, sans-serif;
+  cursor: pointer;
+}
+
+a:hover, .btn:hover {
+  text-decoration: none;
 }
 
 article {
   padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: min(60rem, var(--viewportWidth));
+}
+
+article > header {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 2rem;
+}
+
+article > header > aside {
+  
 }
 
 .inset {
   background: var(--c-1);
   padding: 4rem 0;
   position: relative;
+  width: var(--viewportWidth);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .inset::before {
@@ -161,13 +209,18 @@ article {
   background: var(--c-bkg);
 }
 
+.inset > article {
+  
+}
+
 h1 {
   font-family: Bebas Neue;
   font-size: 3.5rem;
   color: var(--c-2);
   line-height: 0.77;
   width: 17ch;
-  margin-bottom: 1rem;
+  /* for scrolling */
+  padding-top: 0.75rem;
 }
 
 h1.h1--hero {
@@ -193,21 +246,3 @@ h2 {
   border-radius: var(--radius);
   background: var(--c-bkg);
 }
-
-.system__wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.system__list { 
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.system__list li {
-  aspect-ratio: 1;
-  height: 5rem;
-  background: var(--c-1);
-  border-radius: var(--r-1);
-}

src/en-US/en-US.json

@@ -0,0 +1,4 @@
+{
+    "dir": "ltr",
+    "locale": "en-US"
+  }

src/en-US/index.ejs

@@ -0,0 +1,5 @@
+---
+layout: layouts/base.ejs
+---
+
+hello

src/js/eleventy-js.njk.stop

@@ -0,0 +1,8 @@
+---
+permalink: js/eleventy.js
+eleventyExcludeFromCollections: true
+---
+{% set js %}
+<!-- {% include "../../node_modules/@glidejs/glide/dist/glide.min.js" %} -->
+{% endset %}
+{{ js | jsmin | safe }}

src/nl-NL/nl-NL.json

@@ -0,0 +1,4 @@
+{
+    "dir": "ltr",
+    "locale": "nl-NL"
+  }

webpack.config.js

@@ -4,6 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+// not sure why this 'entries' is post-specific; tried adding other paths and they failed;
 const entries = glob.sync(path.resolve(__dirname, 'src/assets/images/posts/*.{png,gif,jpg,jpeg}'));
 entries.push(path.resolve(__dirname, 'src/assets/styles/main.css'));
 
@@ -46,12 +47,24 @@ module.exports = {
       {
         test: /\.(gif|png|jpg|jpeg)$/i,
         use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/[name].[ext]',
+            },
+          },
           {
             loader: 'file-loader',
             options: {
               name: 'images/screenshots/[name].[ext]',
             },
           },
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/systems/[name].[ext]',
+            },
+          },
           {
             loader: 'image-webpack-loader',
             options: {

webpack.html

@@ -1,4 +1,5 @@
 <%= htmlWebpackPlugin.files.css.map((css) => `<link
-  href="/assets${css}"
+  href="./assets${css}"
   rel="stylesheet"
 />`).join('') %>
+<!-- needed to add ./ the href, or else the path was wrong on production -->