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

This commit is contained in:
Spencer Flagg
2022-10-24 14:17:02 +02:00
parent 9ca6779388
commit 5c12e2aaea
24 changed files with 227 additions and 121 deletions

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 }}">
<title>{{ title }}</title>
{# <meta name="description" content="{{ description }}">
<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>

View File

@@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@@ -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,
}
);
});

View File

@@ -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;
}
}
section#bitcoin .subsection {
padding: 0 2rem;
}
section#bitcoin .subsection--bitcoin {
margin-left: 4rem;
}
section#bitcoin .subsection--lightning {
margin-right: 4rem;
}
}

View File

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

View File

@@ -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
}
}

View File

@@ -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;

View File

@@ -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;
}
}
}
}

View File

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

View File

@@ -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;
}
}
}

View File

@@ -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,

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"