Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-26 02:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

post-9/23 meeting small tweaks

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-25 16:52:59 +02:00
parent bc8b0cfcac
commit a2539bd2ae
17 changed files with 520 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/components/header.njk
View File

@@ -1,6 +1,6 @@
<header>
<nav>
<a class="header__logo" href="/"><img src="../assets/images/start9_logo.png" alt=""></a>
<a class="header__logo" href="/" aria-label="Return Home"><img src="../assets/images/start9_logo.png" alt=""></a>
<ul>
{% for group in menu|selectattr("inHeader") %}
{% for item in group.items %}

2
src/_includes/components/landing/_contact.njk
View File

@@ -1,6 +1,6 @@
<form action="">
<input type="email" name="" id="" placeholder="email address"/>
<button type="submit">
<button type="submit" aria-label="Submit Email" title="Submit Email">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
{# <path stroke="none" d="M0 0h24v24H0z" fill="none"/> #}
<line x1="10" y1="14" x2="21" y2="3" vector-effect="non-scaling-stroke" />

4
src/_includes/components/landing/hero.njk
View File

@@ -1,7 +1,7 @@
<section id="hero">
<div id="hero-image">
<img src="assets/images/explosion.png" alt="">
<img class="img-shadow" src="assets/images/explosion.png" alt="">
<img rel="preload" as="image" src="assets/images/explosion.png" alt="">
<img rel="preload" as="image" class="img-shadow" src="assets/images/explosion.png" alt="">
</div>
<div id="logo">
<img class="unlazy" src="assets/images/start9_logo.png" alt="">

6
src/_includes/components/landing/infographics.njk
View File

@@ -1,5 +1,5 @@
<section id="infographics">
<div class="subsection section--subtle">
<div class="subsection">
<h1>The problem is
<em>trust</em>
</h1>
@@ -14,7 +14,7 @@
</div> #}
{% include "components/svg/big-tech-network-diagram.svg" %}
</div>
<div class="subsection section--bold">
<div class="subsection">
<h1>Take back
<em>control</em>
</h1>
@@ -29,6 +29,6 @@
{% include "components/svg/embassyos-network-diagram.svg" %}
<div class="img-shadow">{% include "components/svg/embassyos-network-diagram.svg" %}</div>
</div> #}
{% include "components/svg/embassyos-network-diagram.svg" %}
{% include "components/svg/embassyos-network-diagram_red_extended.svg" %}
</div>
</section>

4
src/_includes/components/landing/lines/be-to-powered.svg
View File

@@ -1,3 +1,3 @@
<svg class="line-primary" viewBox="0 0 73 380" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M71 0V191.387H2V285.693H42V380" vector-effect="non-scaling-stroke"/>
<svg class="line-primary" viewBox="0 0 117 380" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M115 0V71.3869H2V380" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 180 B

After

Width:  |  Height:  |  Size: 171 B

3
src/_includes/components/landing/lines/be-to-powered2.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="117" height="380" viewBox="0 0 117 380" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M115 0V71.3869H2V380" stroke="white" stroke-width="2.37"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 175 B

2
src/_includes/components/menu.njk
View File

@@ -1,6 +1,6 @@
<section id="menu">
<div class="menu-content">
<div class="header"><a href="/"><img src="../assets/images/start9_logo.png" alt=""/></a></div>
{# <div class="header"><a href="/"><img src="../assets/images/start9_logo.png" alt=""/></a></div> #}
<ul class="groups">
{% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}
<li class="{{group.size}}">

93
src/_includes/components/svg/embassyos-network-diagram_red.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

199
src/_includes/components/svg/embassyos-network-diagram_red_extended.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

94
src/_includes/components/svg/embassyos-network-diagram_red_more-arrows.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

117
src/assets/js/main.js
View File

@@ -87,6 +87,7 @@ function closeMenu(e) {
gsap.to("main", { y: "0vh" });
gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
gsap.to("html", { overflow: "scroll" });
gsap.to("html", { overflow: "overlay" });
document.querySelector('html').classList.remove("menu-is-open");
}
@@ -164,7 +165,7 @@ gsap.from("#hero-to-pitch path:first-child", {
//////////////////////////////////////////
// PITCH
gsap.from("#pitch", {
gsap.from("#pitch h1, #pitch p", {
duration: 0.5,
y: "5rem",
scale: 0.9,
@@ -177,6 +178,18 @@ gsap.from("#pitch", {
},
});
gsap.from("#pitch a", {
duration: 0.5,
opacity: 0,
filter: "blur(10px)",
//delay: 0.75,
scrollTrigger: {
trigger: "#pitch",
start: "top 75%", // "triggerElement page"
toggleActions: defaultActions,
},
});
//////////////////////////////////////////
// PRODUCTS
@@ -333,52 +346,64 @@ function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
bitcoinServices.forEach((service) => {
const serviceElement = document.querySelector(".service-icon--" + service);
const bitcoinSectionElement = document.querySelector("#bitcoin");
const upOrDown = getRandomInt(0, 1);
const bitcoinHeight = bitcoinSectionElement.clientHeight;
positionServiceIcons();
serviceElement
? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
: "";
function positionServiceIcons() {
bitcoinServices.forEach((service) => {
const serviceElement = document.querySelector(".service-icon--" + service);
const bitcoinSectionElement = document.querySelector("#bitcoin");
const upOrDown = getRandomInt(0, 1);
const bitcoinHeight = bitcoinSectionElement.clientHeight;
if (upOrDown) {
gsap.set(".service-icon--" + service, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
});
gsap.to(".service-icon--" + service, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
//x: getRandomInt(0, 100) + "vw",
ease: "in",
delay: getRandomNumber(0, 1),
scrollTrigger: {
trigger: "#bitcoin",
scrub: true,
start: "top 25%", // "triggerElement page"
end: "90% center", // "triggerElement page"
//markers: { startColor: "lime", endColor: "lime" },
},
});
} else {
gsap.set(".service-icon--" + service, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
});
gsap.to(".service-icon--" + service, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
//x: getRandomInt(0, 100) + "vw",
ease: "in",
delay: getRandomNumber(0, 1),
scrollTrigger: {
trigger: "#bitcoin",
scrub: true,
start: "top bottom", // "triggerElement page"
end: "90% center", // "triggerElement page"
//markers: { startColor: "orange", endColor: "orange" },
},
});
}
});
serviceElement
? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
: "";
if (upOrDown) {
gsap.set(".service-icon--" + service, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
});
gsap.to(".service-icon--" + service, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
//x: getRandomInt(0, 100) + "vw",
ease: "in",
delay: getRandomNumber(0, 1),
scrollTrigger: {
trigger: "#bitcoin",
scrub: true,
start: "top 25%",
end: "90% center", // "triggerElement page"
//markers: { startColor: "lime", endColor: "lime" },
},
});
} else {
gsap.set(".service-icon--" + service, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
});
gsap.to(".service-icon--" + service, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
//x: getRandomInt(0, 100) + "vw",
ease: "in",
delay: getRandomNumber(0, 1),
scrollTrigger: {
trigger: "#bitcoin",
scrub: true,
start: "top bottom",
end: "90% center",
},
});
}
});
}
function onResizeComplete() {
positionServiceIcons();
};
var resizeTimeout = setTimeout(onResizeComplete, 400);
window.onresize = function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(onResizeComplete, 400);
};
gsap.from("#bitcoin-to-be path:first-child", {
drawSVG: 0,
@@ -680,7 +705,7 @@ gsap.from("#support-to-dev path", {
//////////////////////////////////////////
// DEV
gsap.from("#dev", {
gsap.from("#dev h1", {
duration: 0.5,
//y: "5rem",
scale: 0.8,

9
src/assets/styles/bitcoin.scss
View File

@@ -167,3 +167,12 @@ section#bitcoin {
}
}
}
@media only screen and (max-width: 500px) {
.service-icon--bitcoind {
width: 11rem !important;
}
.service-icon--c-lightning {
width: 11rem !important;
}
}

28
src/assets/styles/infographics.scss
View File

@@ -1,9 +1,10 @@
section#infographics{
display: flex;
flex-direction: column;
align-items: center;
align-items: stretch;
padding: 0 6rem;
.subsection{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
@@ -11,15 +12,30 @@ section#infographics{
padding: 6rem;
outline: 1px solid rgba(255,255,255,0);
svg{
width: 110%;
width: min(110%, 1000px);
}
&:first-child{
&::before {
content: '';
width: 100vw;
position: absolute;
background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
top: 0;
bottom: 0;
z-index: -1;
}
}
&:last-child{
margin-top: 3rem;
svg{
width: 80%;
//margin-top: 3rem;
&::before {
content: '';
width: 100vw;
position: absolute;
background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
top: 0;
bottom: 0;
z-index: -1;
}
}
}

10
src/assets/styles/landing.scss
View File

@@ -43,6 +43,10 @@ section {
}
.line {
padding: 1.8rem 0 1.4rem 0;
}
.line-primary path{
stroke: var(--c-line-primary);
stroke-width: 1px;
@@ -174,7 +178,7 @@ h2 {
p {
font-family: var(--f-accent);
font-weight: 300;
font-size: 1.3rem;
font-size: 1.2rem; // 1.3rem
line-height: 1.4;
color: var(--c-text-primary);
max-width: min(50ch, 73vw);
@@ -229,12 +233,12 @@ a.btn {
right: 0;
height: 1rem;
z-index: -1;
transform: rotateX(90deg);
transform: rotateX(90deg) translateY(2px);
box-shadow: inset 0 0.3rem 0.5rem 0rem rgb(0 0 0 / 50%);
}
&.btn--subtle{
color: var(--c-6);
color: #777777;
font-size: 1.2rem;
&::before {
background-color: white;

4
src/assets/styles/main.scss
View File

@@ -51,6 +51,7 @@ html {
color: var(--c-text-primary);
font-family: var(--f-accent);
font-weight: 200;
overflow: scroll;
overflow: overlay;
display: flex;
@@ -76,7 +77,8 @@ html {
&.menu-is-open{
.header__logo{
opacity: 0 !important;
opacity: 1 !important;
filter: blur(0px) !important;
}
}
}

3
src/assets/styles/menu.scss
View File

@@ -10,6 +10,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
.header{
align-self: flex-start;
margin: 5rem 0 0 5rem;
@@ -51,7 +52,7 @@
font-size: 1.9rem;
line-height: 1.5;
font-weight: 100;
//text-transform: uppercase;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--c-text-primary);
position: relative;

14
src/index.njk
View File

@@ -91,10 +91,10 @@ layout: layouts/base.njk
{% include "components/landing/community.njk" %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script src="{{ '/assets/js/main.js' | url }}"></script>
{# <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> #}
<script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/main.js' | url }}"></script>