iOS, macOS, firefox css tweaks; config and readme updates;

.eleventy.js

@@ -1,9 +1,11 @@
 const eleventySass = require("eleventy-sass");
 const lazyImagesPlugin = require('eleventy-plugin-lazyimages');
 const faviconPlugin = require("eleventy-favicon");
+
+// https://github.com/artstorm/eleventy-plugin-seo
 const pluginSEO = require("eleventy-plugin-seo");
 
-// https://www.npmjs.com/package/eleventy-plugin-img2picture
+// https://github.com/saneef/eleventy-plugin-img2picture
 const img2picture = require("eleventy-plugin-img2picture");
 
 // https://www.npmjs.com/package/@sardine/eleventy-plugin-tinycss
@@ -17,13 +19,15 @@ const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
 
 module.exports = function (eleventyConfig) {
 
-  // passthrus
-  //eleventyConfig.addPassthroughCopy("./src/assets/styles");
-
   eleventyConfig.addPassthroughCopy('src/assets/fonts');
   eleventyConfig.addPassthroughCopy("./src/assets/js");
 
-  if (process.env.ELEVENTY_ENV === "production") {
+
+  if (process.env.ELEVENTY_ENV === "enable-image-optim") {
+    // img2picture (recommend not enabling)
+    ////// this plugin smartly optimizes images on build, such as converting pngs to smaller jpegs. 
+    ////// did not see noticable speed gains when enabled, but it did cause rendering issues on older versions of Safari (e.g. on Calalina).
+    ////// specifially, jpeg masking (as a replacement for alpha pngs) doesn't seem to work for all browsers.
     eleventyConfig.addPlugin(img2picture, {
       // Should be same as Eleventy input folder set using `dir.input`.
       eleventyInputDir: "src",
@@ -35,6 +39,8 @@ module.exports = function (eleventyConfig) {
       // It should match with path suffix in `imagesOutputDir`.
       // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`
       urlPath: "/assets/images/",
+      sharpPngOptions: { pallette: true },
+      sharpJpegOptions: { quality: 100 }
     });
   } else {
     // During development, copy the files to Eleventy's `dir.output`
@@ -45,38 +51,13 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventySass);
   eleventyConfig.addPlugin(faviconPlugin, { destination: './_site' });
   eleventyConfig.addPlugin(pluginSEO, require("./src/_data/seo.json"));
-  //eleventyConfig.addPlugin(tinyCSS);
+  //eleventyConfig.addPlugin(tinyCSS); // smartly injects selectors from external css files into style tags. requires some massaging. not ready for prime time.
   eleventyConfig.addPlugin(tinyHTML);
   eleventyConfig.addPlugin(tinysvg, {
     baseUrl: 'src/_includes/svgs/',
   });
 
-  // eleventyConfig.addPlugin(lazyImagesPlugin, {
-  //   imgSelector: 'img:not(.unlazy)', // custom image selector
-  //   //cacheFile: '', // don't cache results to a file
-  // });
-
   return {
     dir: { input: "src", output: "_site", data: "_data" },
   };
 };
-
-// module.exports = function (eleventyConfig) {
-//   if (process.env.ELEVENTY_ENV === "production") {
-//     eleventyConfig.addPlugin(img2picture, {
-//       // Should be same as Eleventy input folder set using `dir.input`.
-//       eleventyInputDir: ".",
-
-//       // Output folder for optimized images.
-//       imagesOutputDir: "_site",
-
-//       // URL prefix for images src URLS.
-//       // It should match with path suffix in `imagesOutputDir`.
-//       // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`
-//       urlPath: "",
-//     });
-//   } else {
-//     // During development, copy the files to Eleventy's `dir.output`
-//     eleventyConfig.addPassthroughCopy("./images");
-//   }
-// };

readme.md

@@ -4,7 +4,7 @@
 
 - [11ty](https://www.11ty.dev) for Static Site Generator
 
-## *TO UPDATE* Getting started
+## Serve for dev
 
 ```
 npm run start
@@ -13,8 +13,12 @@ npm run start
 Open http://localhost:8080 to see the site.
 _(8080+n will be used if 8080 is already in use, ad nauseum)_
 
+### NOTE
+Eleventy projects served in this way will re-build on save of any file in the project.
+Usually, any browser viewing the page will also hot-reload on build. However, this project stopped hot-reloading a couple of weeks ago. Have not been able to diagnose why. According to some threads I found, it's a bit of a black-box with many possible causes.
 
-## *TO UPDATE* Deploy to production
+
+## Deploy to production
 
 You can see the results locally in production mode with:
 
@@ -23,6 +27,7 @@ npm run build
 ```
 
 Now, your blog is ready to be deployed. All generated files are located at `_site` folder, which you can deploy with any hosting service.
+(I use https://coolify.io/ which allows me to auto-deploy by pushing to GitLab.)
 
 
 ## Project structure
@@ -32,12 +37,15 @@ Now, your blog is ready to be deployed. All generated files are located at `_sit
 ├── .eleventy.js       # Eleventy config
 │
 └── src
-    ├── _data          # Eleventy data folder
+    ├── _data          # Eleventy data folder (supports .json and exported .js)
     ├── _includes
-    │   └── components # HTML layout files
+    │   └── components # landing sections and reuable components
-    │   └── layouts    # HTML layout files
+    │   └── layouts    # page layouts
+    │   └── svgs       # for including in njk templates
     └── assets         
+        ├── fonts
         ├── images     
-        └── styles     # Your blog CSS files
+        ├── js         
+        └── styles     # SCSS
 ```
 

src/_data/seo.json

@@ -4,5 +4,5 @@
     "url": "https://start9.com",
     "author": "Start9 Labs",
     "twitter": "start9labs",
-    "image": "favicon.svg"
+    "image": "/assets/images/thumbnail.jpg"
   }

src/_includes/components/landing/hero.njk

@@ -1,5 +1,5 @@
 <section id="hero">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img src="/assets/images/explosion.png" alt="start9 hero; voxel explosion" title="start9 hero; voxel explosion">
         <img as="image" class="img-shadow" src="/assets/images/explosion.png" alt="">
     </div>

src/_includes/components/landing/infographics.njk

@@ -8,7 +8,7 @@
             App companies can see your pictures, read your documents, listen to your conversations, track your location, sell your
             private information, permanently delete your data, or cut you off at any time. Even if the companies behind these apps
             are not malicious, they are prime targets for hackers and are vulnerable to political winds.</p>
-        <div class="image-with-shadow">
+        <div id="big-tech-network-image-block" class="image-with-shadow">
             {% include "svgs/big-tech-network-diagram.svg" %}
             <div class="img-shadow">{% include "svgs/big-tech-network-diagram.svg" %}</div>
         </div>
@@ -24,7 +24,7 @@
                     namely software developers, corporations, wealthy individuals, and politicians.
                     <em>Start9 levels the playing field</em>
                     by making it possible for the rest of us.</p>
-                <div class="image-with-shadow">
+                <div id="embassyos-network-image-block" class="image-with-shadow">
                     {% include "svgs/embassyos-network-diagram_red_extended.svg" %}
                     <div class="img-shadow">{% include "svgs/embassyos-network-diagram_red_extended.svg" %}</div>
                 </div>

src/_includes/components/landing/powered-by.njk

@@ -11,7 +11,7 @@
             Check out our <a href="https://github.com/Start9Labs/embassy-os" target="_blank" rel="noopener noreferrer">source code!</a>
         </p>
     </div>
-    <div class="image-with-shadow">
+    <div id="stack-image-block" class="image-with-shadow">
         {% include "svgs/stack.svg" %}
         <div class="img-shadow">{% include "svgs/stack.svg" %}</div>
     </div>

src/_includes/layouts/base.njk

@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
+    {# <meta name="description" content="{{ description }}">
-    <title>{{ title }}</title>
+    <title>{{ title }}</title> #}
     {% favicon './favicon.svg' %}
     <link rel="stylesheet" href="/assets/styles/main.css">
     <script async defer data-website-id="3e99dfb1-0664-4d49-8fb6-de86e763a716" src="https://s9-analytics.altweb.me/umami.js"></script>

src/about.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 <section id="hero" class="hero--about">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img src="/assets/images/about-hero.png" alt="about page hero image: a robot emerging from the embasssy" title="about page hero image: a robot emerging from the embasssy"/>
         <img class="img-shadow" src="/assets/images/about-hero.png" alt=""/>
     </div>

src/assets/js/landing.js

@@ -57,3 +57,24 @@ window.onresize = function () {
 //     });
 //   });
 // }, 2000);
+
+
+//////////////////////////////////////////
+// SHADOW PARALLAX
+
+gsap.utils.toArray('.img-shadow').forEach((elem) => {
+  gsap.fromTo(
+    elem,
+    {
+      y: "5rem",
+    },
+    {
+      scrollTrigger: {
+        scrub: true,
+        trigger: elem,
+        start: '-4rem bottom',
+      },
+      y: 0,
+    }
+  );
+});

src/assets/styles/bitcoin.scss

@@ -1,9 +1,13 @@
-#bitcoin-to-be svg{
+#bitcoin-to-be svg {
   max-height: 50vh;
 }
 
 section#bitcoin {
-  background-image: linear-gradient(180deg, var(--c-bitcoin) 0%, var(--c-lightning) 100%);
+  background-image: linear-gradient(
+    180deg,
+    var(--c-bitcoin) 0%,
+    var(--c-lightning) 100%
+  );
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100%;
@@ -36,7 +40,8 @@ section#bitcoin {
   }
 
   // grid of squares (svg)
-  #grid-blend-top, #grid-blend-bottom {
+  #grid-blend-top,
+  #grid-blend-bottom {
     // mix-blend-mode: multiply;
     width: 100vw;
     rect {
@@ -79,10 +84,10 @@ section#bitcoin {
     }
   }
 
-  #flying-icons{
+  #flying-icons {
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
@@ -92,8 +97,8 @@ section#bitcoin {
   .service-icon {
     border-radius: 100%;
     position: absolute;
-    top:0;
+    top: 0;
-    left:0;
+    left: 0;
     z-index: -2;
     backdrop-filter: blur(48px);
     mix-blend-mode: soft-light;
@@ -173,4 +178,16 @@ section#bitcoin {
   .service-icon--c-lightning {
     width: 11rem !important;
   }
+
+  section#bitcoin .subsection {
+    padding: 0 2rem;
+  }
+
+  section#bitcoin .subsection--bitcoin {
+    margin-left: 4rem;
+  }
+
+  section#bitcoin .subsection--lightning {
+    margin-right: 4rem;
+  }
 }

src/assets/styles/community.scss

@@ -16,6 +16,7 @@ section#community {
   }
 
   input[type="email"] {
+    border-radius: 0;
     width: var(--width);
     background-color: transparent;
     border: 0;

src/assets/styles/infographics.scss

@@ -2,14 +2,14 @@ section#infographics{
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  padding: 0 6rem;
+  padding: 0 3rem;
   .subsection{
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3rem;
-    padding: 6rem;
+    padding: 6rem 3rem;
     outline: 1px solid rgba(255,255,255,0);
     svg{
       width: 100%;
@@ -42,7 +42,8 @@ section#infographics{
   }
 
   .image-with-shadow{
-    width: clamp(min(400px, 90vw), 110%, 1000px);
+    --width: clamp(min(400px, 90vw), 110%, 1000px);
+    width: var(--width);
     z-index: 1;
     .img-shadow{
       width: 100%;
@@ -51,4 +52,12 @@ section#infographics{
       }
     }
   }
+
+  #big-tech-network-image-block svg{
+    height: calc((494 / 1282) * var(--width)); // force aspect ratio for iOS
+  }
+
+  #embassyos-network-image-block svg{
+    height: calc((606 / 1282) * var(--width)); // force aspect ratio for iOS
+  }
 }

src/assets/styles/landing.scss

@@ -11,14 +11,35 @@
 
 body {
   margin: 0;
-  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
+  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg");
-    url("/assets/images/bkg.jpg");
   background-blend-mode: color, normal;
   background-size: cover;
   background-attachment: fixed;
   width: 100vw;
 }
 
+@supports (-webkit-touch-callout: none) {
+  /* CSS specific to iOS devices */ 
+  body{
+    background: none;
+    position: relative;
+  }
+  body::after{
+    content:'';
+    position: fixed;
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    top:0;
+    left: 0;
+    background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg");
+    background-blend-mode: color, normal;
+    background-size: auto 100vh;
+    background-repeat: no-repeat;
+  }
+
+}
+
 main{
   display:flex;
   flex-direction: column;

src/assets/styles/main.scss

@@ -7,17 +7,17 @@
   background-attachment: fixed;
   --viewportWidth: calc(100vw - var(--scrollbarWidth));
 
-  --c-red1: #EE6570;
+  --c-red1: #ee6570;
-  --c-red2: #FF4961;
+  --c-red2: #ff4961;
-  --c-red3: #E84258;
+  --c-red3: #e84258;
-  --c-red4: #993E4A;
+  --c-red4: #993e4a;
 
   --c-gray1: #121212;
   --c-gray2: #333333;
   --c-gray3: #828282;
-  --c-gray4: #D1D1D1;
+  --c-gray4: #d1d1d1;
-  --c-gray5: #E0E0E0;
+  --c-gray5: #e0e0e0;
-  --c-gray6: #F4F4F5;
+  --c-gray6: #f4f4f5;
 
   --c-1: rgba(255, 255, 255);
   --c-text-primary: var(--c-1);
@@ -52,17 +52,21 @@
   --c-shadow-2: rgb(0 0 0 / 40%);
   --c-shadow-3: rgb(0 0 0 / 20%);
 
-  --c-bkg-light-fade05: rgba(255,255,255,.05);
+  --c-bkg-light-fade05: rgba(255, 255, 255, 0.05);
-  --c-bkg-light-fade1: rgba(255,255,255,.1);
+  --c-bkg-light-fade1: rgba(255, 255, 255, 0.1);
-  --c-bkg-light-fade2: rgba(255,255,255,.2);
+  --c-bkg-light-fade2: rgba(255, 255, 255, 0.2);
-  --c-bkg-light-fade9: rgba(255,255,255,.9);
+  --c-bkg-light-fade9: rgba(255, 255, 255, 0.9);
 
-  --c-bkg-dark-fade1: rgba(0,0,0,.1);
+  --c-bkg-dark-fade1: rgba(0, 0, 0, 0.1);
-  --c-bkg-dark-fade2: rgba(0,0,0,.2);
+  --c-bkg-dark-fade2: rgba(0, 0, 0, 0.2);
 
   --c-spacer: var(--c-bkg-light-fade05);
 
-  --c-glass: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
+  --c-glass: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0.05)
+  );
   --c-dark-glass: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
 
   --sh-2: 0 3rem 2rem 0rem var(--c-shadow-2);
@@ -130,7 +134,12 @@ img {
   display: block;
   width: 100%;
   max-width: 100%;
-  height: auto;
+  //height: auto;
+  object-fit: contain;
+}
+
+.image-with-shadow img {
+  align-self: flex-start;
 }
 
 picture {
@@ -151,13 +160,13 @@ a {
   transition: var(--t-simple);
 }
 
-a.link-in-svg{
+a.link-in-svg {
   fill: var(--c-text-accent);
-  path{
+  path {
     transition: var(--t-simple);
   }
-  &:hover{
+  &:hover {
-    path{
+    path {
       fill: var(--c-text-primary);
     }
   }
@@ -175,13 +184,26 @@ p a {
     left: 0;
     height: 1px;
     border-radius: 2px;
-    background: linear-gradient(111.3deg, transparent 9.6%, var(--c-bkg-accent) 93.6%);
+    background: linear-gradient(
-    background: linear-gradient(111.3deg, transparent 9.6%, var(--c-bkg-accent) 50%, transparent 93.6%);
+      111.3deg,
+      transparent 9.6%,
+      var(--c-bkg-accent) 93.6%
+    );
+    background: linear-gradient(
+      111.3deg,
+      transparent 9.6%,
+      var(--c-bkg-accent) 50%,
+      transparent 93.6%
+    );
   }
   &:hover {
     color: var(--c-text-accent);
     &::after {
-      background: linear-gradient(111.3deg, var(--c-bkg-accent) 9.6%, var(--c-bkg-accent) 93.6%);
+      background: linear-gradient(
+        111.3deg,
+        var(--c-bkg-accent) 9.6%,
+        var(--c-bkg-accent) 93.6%
+      );
     }
   }
 }
@@ -199,8 +221,9 @@ h5 {
   }
 }
 
-h1, h2{
+h1,
-  text-transform:none;
+h2 {
+  text-transform: none;
 }
 
 ul {
@@ -233,7 +256,7 @@ header {
         stroke-width: 0;
         stroke: transparent;
       }
-      path:last-child{
+      path:last-child {
         //filter: drop-shadow(0 0 0.6rem rgb(0 0 0 / 80%));
       }
     }
@@ -342,21 +365,21 @@ nav {
   opacity: 0.5;
 }
 
-.form-alert{
+.form-alert {
   padding: 1.5rem;
   font-size: 1.5rem;
   font-weight: 700;
   display: none;
 
-  &.form-alert--success{
+  &.form-alert--success {
     background-color: var(--c-success);
   }
 
-  &.form-alert--error{
+  &.form-alert--error {
     background-color: var(--c-negative);
   }
 
-  &.form-alert--visible{
+  &.form-alert--visible {
     display: block;
   }
 }
@@ -366,9 +389,9 @@ nav {
   line-height: 1.4;
 }
 
-.center{
+.center {
   width: fit-content;
-    align-self: center;
+  align-self: center;
 }
 
 @media only screen and (max-width: 500px) {
@@ -378,11 +401,13 @@ nav {
   .hide-on-mobile {
     display: none;
   }
-  nav ul{
+  nav ul {
     gap: 0;
-  li a {
+    justify-content: flex-end;
-    font-size: 2.5rem;
+    li a {
-  }} 
+      font-size: 2rem;
+    }
+  }
 }
 
 .image-with-shadow {
@@ -391,18 +416,19 @@ nav {
 }
 
 /* Safari 9+ */
-@supports (-webkit-hyphens:none) {
+@supports (-webkit-hyphens: none) {
-  body{
+  body {
     overflow-x: hidden;
   }
-  section#support, section#be-your-own{
+  section#support,
-    transform: translate(0,0);
+  section#be-your-own {
+    transform: translate(0, 0);
   }
-  section#support img{
+  section#support img {
     max-width: 40vh !important;
   }
 
-  section#bitcoin::after{
+  section#bitcoin::after {
     bottom: -99vh;
   }
 

src/assets/styles/menu.scss

@@ -127,7 +127,7 @@
     }
     #menu .groups{
         display: grid;
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr 1fr;
         grid-template-rows: auto;
     }
   }

src/assets/styles/peripheral.scss

@@ -142,6 +142,9 @@ section#virtues {
     h1 {
       font-size: 4.2rem;
     }
+    svg {
+      width: 33rem; // force width for firefox
+    }
   }
 }
 
@@ -358,13 +361,14 @@ section#news {
         background-color: var(--c-gray1);
       }
       h3,
-      p, time {
+      p,
+      time {
         width: var(--width);
         padding: 0 2rem;
         box-sizing: border-box;
       }
 
-      h3{
+      h3 {
         font-size: max(28px, 1.6rem);
       }
       p {
@@ -375,7 +379,7 @@ section#news {
         font-size: max(14px, 0.8rem);
       }
 
-      time{
+      time {
         margin-top: -1.5rem;
         color: var(--c-text-accent);
         font-weight: 600;
@@ -387,9 +391,11 @@ section#news {
 
 section#contact {
   gap: 3rem;
-  p{ margin: 0;}
+  p {
-.community__icons{
+    margin: 0;
-  width: auto;
+  }
-  margin: 0;
+  .community__icons {
-}
+    width: auto;
+    margin: 0;
+  }
 }

src/assets/styles/powered-by.scss

@@ -52,11 +52,17 @@ section#powered-by {
     }
   }
   svg {
-    width: 45rem;
+    --width: min(45rem, (100vw - 12rem));
-    max-width: calc(100vw - 12rem);
+    width: --width;
+    //width: 45rem;
+    //max-width: calc(100vw - 12rem);
     //margin-top: 6rem;
   }
 
+  #stack-image-block svg {
+    height: calc((679 / 843) * var(--width)); // forcing aspect ratio for iOS
+  }
+
   a.source-link{
     margin-top: 5rem;
     display: flex;
@@ -88,6 +94,7 @@ section#powered-by {
       position: absolute;
     }
   }
+
 }
 
 svg|a:link,

src/assets/styles/support.scss

@@ -32,4 +32,13 @@ section#support {
       }
     }
   }
+
+  @media only screen and (max-width: 500px) {
+    section#support cols{
+      gap: 3rem;
+    }
+    section#support img{
+      max-height: 17rem;
+    }
+  }
 }

src/contact.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 <section id="hero">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img src="/assets/images/contact-hero.png" alt="contact page hero: @ symbol emerging from an embassy" title="contact page hero: @ symbol emerging from an embassy"/>
         <img class="img-shadow" src="/assets/images/contact-hero.png" alt=""/>
     </div>

src/dev.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 <section id="hero">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img src="/assets/images/dev-hero.png" alt="dev page hero: html tag emerging from an embassy" title="dev page hero: html tag emerging from an embassy"/>
         <img class="img-shadow" src="/assets/images/dev-hero.png" alt=""/>
     </div>

src/jobs.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 <section id="hero">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img src="/assets/images/jobs-hero.png" alt="jobs page hero: laptop emerging from an embassy" title="jobs page hero: laptop emerging from an embassy"/>
         <img class="img-shadow" src="/assets/images/jobs-hero.png" alt=""/>
     </div>

src/news.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 <section id="hero">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img src="/assets/images/news-hero.png" alt="news page hero: tv emerging from an embassy" title="news page hero: tv emerging from an embassy"/>
         <img class="img-shadow" src="/assets/images/news-hero.png" alt=""/>
     </div>

src/privacy.njk

@@ -4,7 +4,7 @@ layout: layouts/peripheral.njk
 ---
 
 <section id="hero">
-    <div id="hero-image">
+    <div id="hero-image" class="image-with-shadow">
         <img
             src="/assets/images/privacy-hero.png"
             alt="about page hero image: a robot emerging from the embasssy and wearing a mask"