diff --git a/.eleventy.js b/.eleventy.js index 14f2c76..3a3dd58 100644 --- a/.eleventy.js +++ b/.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"); -// } -// }; \ No newline at end of file +}; \ No newline at end of file diff --git a/readme.md b/readme.md index 4cf09df..8178321 100644 --- a/readme.md +++ b/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 - │ └── layouts # HTML layout files + │ └── components # landing sections and reuable components + │ └── layouts # page layouts + │ └── svgs # for including in njk templates └── assets - ├── images - └── styles # Your blog CSS files + ├── fonts + ├── images + ├── js + └── styles # SCSS ``` diff --git a/src/_data/seo.json b/src/_data/seo.json index 2c5b99a..53c8d06 100644 --- a/src/_data/seo.json +++ b/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" } \ No newline at end of file diff --git a/src/_includes/components/landing/hero.njk b/src/_includes/components/landing/hero.njk index 5e6d2b3..bcd29bf 100644 --- a/src/_includes/components/landing/hero.njk +++ b/src/_includes/components/landing/hero.njk @@ -1,5 +1,5 @@
-
+
start9 hero; voxel explosion
diff --git a/src/_includes/components/landing/infographics.njk b/src/_includes/components/landing/infographics.njk index 62012cb..6bb8fda 100644 --- a/src/_includes/components/landing/infographics.njk +++ b/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.

-
+
{% include "svgs/big-tech-network-diagram.svg" %}
{% include "svgs/big-tech-network-diagram.svg" %}
@@ -24,7 +24,7 @@ namely software developers, corporations, wealthy individuals, and politicians. Start9 levels the playing field by making it possible for the rest of us.

-
+
{% include "svgs/embassyos-network-diagram_red_extended.svg" %}
{% include "svgs/embassyos-network-diagram_red_extended.svg" %}
diff --git a/src/_includes/components/landing/powered-by.njk b/src/_includes/components/landing/powered-by.njk index 922f823..c0714c9 100644 --- a/src/_includes/components/landing/powered-by.njk +++ b/src/_includes/components/landing/powered-by.njk @@ -11,7 +11,7 @@ Check out our source code!

-
+
{% include "svgs/stack.svg" %}
{% include "svgs/stack.svg" %}
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index fa75fab..cbb9606 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -5,8 +5,8 @@ - - {{ title }} + {# + {{ title }} #} {% favicon './favicon.svg' %} diff --git a/src/about.njk b/src/about.njk index f541111..f9394dc 100644 --- a/src/about.njk +++ b/src/about.njk @@ -4,7 +4,7 @@ layout: layouts/peripheral.njk ---
-
+
about page hero image: a robot emerging from the embasssy
diff --git a/src/assets/images/thumbnail.jpg b/src/assets/images/thumbnail.jpg new file mode 100644 index 0000000..253991a Binary files /dev/null and b/src/assets/images/thumbnail.jpg differ diff --git a/src/assets/js/landing.js b/src/assets/js/landing.js index 9ba8c9b..f222be7 100644 --- a/src/assets/js/landing.js +++ b/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, + } + ); +}); \ No newline at end of file diff --git a/src/assets/styles/bitcoin.scss b/src/assets/styles/bitcoin.scss index ca9dfe6..2d0cde8 100644 --- a/src/assets/styles/bitcoin.scss +++ b/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; - left:0; + top: 0; + left: 0; z-index: -2; backdrop-filter: blur(48px); mix-blend-mode: soft-light; @@ -118,7 +123,7 @@ section#bitcoin { width: 15rem; } &.service-icon--electrs { - width: 7rem; + width: 7rem; background-color: var(--c-bkg-offset); padding: 1rem; z-index: -6; @@ -173,4 +178,16 @@ section#bitcoin { .service-icon--c-lightning { width: 11rem !important; } -} \ No newline at end of file + + section#bitcoin .subsection { + padding: 0 2rem; + } + + section#bitcoin .subsection--bitcoin { + margin-left: 4rem; + } + + section#bitcoin .subsection--lightning { + margin-right: 4rem; + } +} diff --git a/src/assets/styles/community.scss b/src/assets/styles/community.scss index f6d847f..89648c4 100644 --- a/src/assets/styles/community.scss +++ b/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; diff --git a/src/assets/styles/infographics.scss b/src/assets/styles/infographics.scss index 10ca600..c707b1a 100644 --- a/src/assets/styles/infographics.scss +++ b/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 + } } \ No newline at end of file diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss index 1517320..1aeab2e 100644 --- a/src/assets/styles/landing.scss +++ b/src/assets/styles/landing.scss @@ -11,14 +11,35 @@ body { margin: 0; - background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), - url("/assets/images/bkg.jpg"); + background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), 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; diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index 046d231..c7a520a 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -7,17 +7,17 @@ background-attachment: fixed; --viewportWidth: calc(100vw - var(--scrollbarWidth)); - --c-red1: #EE6570; - --c-red2: #FF4961; - --c-red3: #E84258; - --c-red4: #993E4A; + --c-red1: #ee6570; + --c-red2: #ff4961; + --c-red3: #e84258; + --c-red4: #993e4a; --c-gray1: #121212; --c-gray2: #333333; --c-gray3: #828282; - --c-gray4: #D1D1D1; - --c-gray5: #E0E0E0; - --c-gray6: #F4F4F5; + --c-gray4: #d1d1d1; + --c-gray5: #e0e0e0; + --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-fade1: rgba(255,255,255,.1); - --c-bkg-light-fade2: rgba(255,255,255,.2); - --c-bkg-light-fade9: rgba(255,255,255,.9); + --c-bkg-light-fade05: rgba(255, 255, 255, 0.05); + --c-bkg-light-fade1: rgba(255, 255, 255, 0.1); + --c-bkg-light-fade2: rgba(255, 255, 255, 0.2); + --c-bkg-light-fade9: rgba(255, 255, 255, 0.9); - --c-bkg-dark-fade1: rgba(0,0,0,.1); - --c-bkg-dark-fade2: rgba(0,0,0,.2); + --c-bkg-dark-fade1: rgba(0, 0, 0, 0.1); + --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{ - path{ + &:hover { + 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(111.3deg, transparent 9.6%, var(--c-bkg-accent) 50%, transparent 93.6%); + background: linear-gradient( + 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{ - text-transform:none; +h1, +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 { - font-size: 2.5rem; - }} + justify-content: flex-end; + li a { + font-size: 2rem; + } + } } .image-with-shadow { @@ -391,18 +416,19 @@ nav { } /* Safari 9+ */ -@supports (-webkit-hyphens:none) { - body{ +@supports (-webkit-hyphens: none) { + body { overflow-x: hidden; } - section#support, section#be-your-own{ - transform: translate(0,0); + section#support, + 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; } @@ -411,10 +437,10 @@ nav { --rows-above: 2 !important; } } - + @media screen and (max-width: 1300px) { #be-your-own { --rows-above: 1 !important; } } -} \ No newline at end of file +} diff --git a/src/assets/styles/menu.scss b/src/assets/styles/menu.scss index 3eb55dc..68e1d6c 100644 --- a/src/assets/styles/menu.scss +++ b/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; } } \ No newline at end of file diff --git a/src/assets/styles/peripheral.scss b/src/assets/styles/peripheral.scss index 11a0453..609f4ce 100644 --- a/src/assets/styles/peripheral.scss +++ b/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; @@ -385,11 +389,13 @@ section#news { } } -section#contact { +section#contact { gap: 3rem; - p{ margin: 0;} -.community__icons{ - width: auto; - margin: 0; + p { + margin: 0; + } + .community__icons { + width: auto; + margin: 0; + } } -} \ No newline at end of file diff --git a/src/assets/styles/powered-by.scss b/src/assets/styles/powered-by.scss index b5ee94d..4062329 100644 --- a/src/assets/styles/powered-by.scss +++ b/src/assets/styles/powered-by.scss @@ -52,11 +52,17 @@ section#powered-by { } } svg { - width: 45rem; - max-width: calc(100vw - 12rem); + --width: min(45rem, (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, diff --git a/src/assets/styles/support.scss b/src/assets/styles/support.scss index 6e363ca..840c929 100644 --- a/src/assets/styles/support.scss +++ b/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; + } + } } diff --git a/src/contact.njk b/src/contact.njk index 4a2885b..cd248d5 100644 --- a/src/contact.njk +++ b/src/contact.njk @@ -4,7 +4,7 @@ layout: layouts/peripheral.njk ---
-
+
contact page hero: @ symbol emerging from an embassy
diff --git a/src/dev.njk b/src/dev.njk index 31f1280..dd74340 100644 --- a/src/dev.njk +++ b/src/dev.njk @@ -4,7 +4,7 @@ layout: layouts/peripheral.njk ---
-
+
dev page hero: html tag emerging from an embassy
diff --git a/src/jobs.njk b/src/jobs.njk index 899aa94..72200bc 100644 --- a/src/jobs.njk +++ b/src/jobs.njk @@ -4,7 +4,7 @@ layout: layouts/peripheral.njk ---
-
+
jobs page hero: laptop emerging from an embassy
diff --git a/src/news.njk b/src/news.njk index d2e9cec..d7e3b3d 100644 --- a/src/news.njk +++ b/src/news.njk @@ -4,7 +4,7 @@ layout: layouts/peripheral.njk ---
-
+
news page hero: tv emerging from an embassy
diff --git a/src/privacy.njk b/src/privacy.njk index 9a68626..2727b23 100644 --- a/src/privacy.njk +++ b/src/privacy.njk @@ -4,7 +4,7 @@ layout: layouts/peripheral.njk ---
-
+