mirror of
https://github.com/Start9Labs/start9.com.git
synced 2026-03-26 10:21:54 +00:00
img, html optimization; css tweaks; img tweaks; added video; service icon animation fix;
This commit is contained in:
Spencer Flagg
65
.eleventy.js
65
.eleventy.js
@@ -1,7 +1,18 @@
|
||||
const eleventySass = require("eleventy-sass");
|
||||
//const gsap = require('gsap');
|
||||
const lazyImagesPlugin = require('eleventy-plugin-lazyimages');
|
||||
|
||||
// https://www.npmjs.com/package/eleventy-plugin-img2picture
|
||||
const img2picture = require("eleventy-plugin-img2picture");
|
||||
|
||||
// https://www.npmjs.com/package/@sardine/eleventy-plugin-tinycss
|
||||
const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
|
||||
|
||||
// https://www.npmjs.com/package/@sardine/eleventy-plugin-tinysvg
|
||||
const tinysvg = require('@sardine/eleventy-plugin-tinysvg');
|
||||
|
||||
// https://www.npmjs.com/package/@sardine/eleventy-plugin-tinyhtml
|
||||
const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
|
||||
// passthrus
|
||||
@@ -9,15 +20,39 @@ module.exports = function (eleventyConfig) {
|
||||
|
||||
eleventyConfig.addPassthroughCopy('src/assets/fonts');
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/js");
|
||||
eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png');
|
||||
eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg');
|
||||
eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
|
||||
eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
|
||||
// eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png');
|
||||
// eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg');
|
||||
// eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
|
||||
// eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
|
||||
|
||||
|
||||
if (true) {//(process.env.ELEVENTY_ENV === "production") {
|
||||
eleventyConfig.addPlugin(img2picture, {
|
||||
// Should be same as Eleventy input folder set using `dir.input`.
|
||||
eleventyInputDir: "src",
|
||||
|
||||
// Output folder for optimized images.
|
||||
imagesOutputDir: "_site/assets/images",
|
||||
|
||||
// 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: "/assets/images/",
|
||||
});
|
||||
} else {
|
||||
// During development, copy the files to Eleventy's `dir.output`
|
||||
eleventyConfig.addPassthroughCopy("src/assets/images");
|
||||
}
|
||||
|
||||
//eleventyConfig.addNunjucksFilter('bitcoin', arr => arr.filter(e => e.name == 'Synapse'));
|
||||
|
||||
//plugins
|
||||
eleventyConfig.addPlugin(eleventySass);
|
||||
//eleventyConfig.addPlugin(tinyCSS);
|
||||
eleventyConfig.addPlugin(tinyHTML);
|
||||
eleventyConfig.addPlugin(tinysvg, {
|
||||
baseUrl: 'src/_includes/components/svg/',
|
||||
});
|
||||
|
||||
// eleventyConfig.addPlugin(lazyImagesPlugin, {
|
||||
// imgSelector: 'img:not(.unlazy)', // custom image selector
|
||||
@@ -28,3 +63,23 @@ module.exports = function (eleventyConfig) {
|
||||
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");
|
||||
// }
|
||||
// };
|
||||
2977
package-lock.json
generated
2977
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "^3.0.0",
|
||||
"@11ty/eleventy-img": "^2.0.1",
|
||||
"@sardine/eleventy-plugin-tinycss": "^2.0.0",
|
||||
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
||||
"@sardine/eleventy-plugin-tinysvg": "^1.2.0",
|
||||
"css-declaration-sorter": "^6.3.1",
|
||||
"eleventy-favicon": "^1.1.3",
|
||||
"eleventy-plugin-img2picture": "^3.0.0",
|
||||
"eleventy-sass": "^1.3.1",
|
||||
"esm": "^3.2.25",
|
||||
"gsap": "^3.10.4",
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
### for now...
|
||||
```
|
||||
npm start
|
||||
npm run start
|
||||
```
|
||||
|
||||
Run the following command on your local environment:
|
||||
|
||||
@@ -174,6 +174,15 @@
|
||||
"target": "",
|
||||
"order": 1,
|
||||
"class": ""
|
||||
},
|
||||
{
|
||||
"name": "Github",
|
||||
"slug": "github",
|
||||
"url": "https://github.com/Start9Labs",
|
||||
"target": "_blank",
|
||||
"order": 1,
|
||||
"class": "",
|
||||
"icon": "open-source"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<ul>
|
||||
{% for item in group.items|sort(false, false, 'order') %}
|
||||
<li>
|
||||
<a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="{{item.url}}">{{item.name}}</a>
|
||||
<a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="{{item.url}}">{{item.name}}{% if item.icon %}{% include "components/svg/" + item.icon + ".svg" %}{% endif %}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<li class="service slide">
|
||||
{# <a href="">{% include "components/svg/chevron-left.svg" %}</a> #}
|
||||
<a class="service__content" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
|
||||
<img class="service__image" src="../assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} emabssyos service icon" title="{{ service.name }} service icon"/>
|
||||
<img class="service__image" src="assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} emabssyos service icon" title="{{ service.name }} service icon"/>
|
||||
<div class="service__name">{{ service.name }}</div>
|
||||
{# <div class="service__desc">{{ service.description }}</div> #}
|
||||
</a>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
{% if pseudoservice.slug in service.pseudoservices %}
|
||||
<div class="service__content" >
|
||||
<a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
|
||||
<img class="service__image service__image--{{ service.slug }}" src="../assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyOS service icon" title="{{ service.name }} embassyOS service icon"
|
||||
<img class="service__image service__image--{{ service.slug }}" src="assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyOS service icon" title="{{ service.name }} embassyOS service icon"
|
||||
style="filter: drop-shadow(0px 0px 3rem {{ service.color }}C0)"/>
|
||||
<div class="service__info">
|
||||
<h3 class="service__name">{{ service.name }}</h3>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
{% if (category == "bitcoin") or (category == "lightning") or (category == "plebnet-tools") %}
|
||||
<img
|
||||
class="service-icon service-icon--{{ service.slug }}"
|
||||
src="../assets/images/service-icons/{{ service.slug }}.png"
|
||||
src="assets/images/service-icons/{{ service.slug }}.png"
|
||||
alt="{{ service.name }} embassyOS service icon"
|
||||
alt="{{ service.name }} embassyOS service icon"/>
|
||||
{% endif %}
|
||||
|
||||
@@ -5,5 +5,6 @@
|
||||
<p>
|
||||
We make a personal server called an <em>Embassy</em> that puts you in control of your data, your money, and your digital life.
|
||||
</p>
|
||||
<a class="btn" href="{{ site.pitch.url }}">learn more</a>
|
||||
{# <a class="btn" href="{{ site.pitch.url }}">learn more</a> #}
|
||||
<iframe id="odysee-iframe" width="560" height="315" src="https://odysee.com/$/embed/@purism:8/introducing-pureboot-basic:d?r=B2sJWhwiPNQDy457RV1NjAYxDb6uiHGm" allowfullscreen></iframe>
|
||||
</section>
|
||||
|
||||
@@ -9,13 +9,15 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="image-with-shadow">
|
||||
{% include "components/svg/stack-new.svg" %}
|
||||
<div class="img-shadow">{% include "components/svg/stack-new.svg" %}</div>
|
||||
{% include "components/svg/stack-new4.svg" %}
|
||||
<div class="img-shadow">{% include "components/svg/stack-new2.svg" %}</div>
|
||||
</div>
|
||||
<a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
|
||||
|
||||
{# <a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
|
||||
<div class="image-with-shadow">
|
||||
<img src="../assets/images/code1.png" alt="html tag icon" title="html tag icon"/>
|
||||
<img class="img-shadow" src="../assets/images/code1.png" style="filter: blur(.8rem) brightness(0)" alt=""/>
|
||||
<img src="assets/images/code1.png" alt="html tag icon" title="html tag icon"/>
|
||||
<img class="img-shadow" src="assets/images/code1.png" style="filter: blur(.8rem) brightness(0)" alt=""/>
|
||||
</div>
|
||||
check out the <span>source code</span></a>
|
||||
check out the <span>source code</span></a> #}
|
||||
|
||||
</section>
|
||||
@@ -1,8 +1,8 @@
|
||||
<section id="products">
|
||||
<div class="subsection">
|
||||
<div class="subsection subsection--buy">
|
||||
<a class="product product--buy" href="{{ site.products.buyUrl }}">
|
||||
<img src="../assets/images/buy-centered.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
|
||||
<img class="img-shadow" src="../assets/images/buy-centered.png" alt="">
|
||||
<img src="assets/images/buy-centered.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
|
||||
<img class="img-shadow" src="assets/images/buy-centered.png" alt="">
|
||||
<div class="heading">
|
||||
<h1 class="product__header">buy</h1>
|
||||
<span class="product__subheader">your embassy</span>
|
||||
@@ -10,15 +10,15 @@
|
||||
{% include "components/svg/buy-lines.svg" %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<div class="subsection subsection--diy">
|
||||
<a class="product product--diy" href="{{ site.products.diyUrl }}">
|
||||
<img src="../assets/images/diy.png" alt="partially assembled embassy, represented in voxels" title="partially assembled embassy, represented in voxels">
|
||||
<img class="img-shadow" src="../assets/images/diy.png" alt="">
|
||||
{# <img src="assets/images/diy.png" alt="partially assembled embassy, represented in voxels" title="partially assembled embassy, represented in voxels">
|
||||
<img class="img-shadow" src="assets/images/diy.png" alt=""> #}
|
||||
<div class="heading">
|
||||
<h1 class="product__header">diy</h1>
|
||||
<span class="product__subheader">your embassy</span>
|
||||
<span class="product__subheader"><strong>like to tinker?</strong></span>
|
||||
<span class="product__subheader">DIY your embassy</span>
|
||||
</div>
|
||||
{% include "components/svg/diy-lines.svg" %}
|
||||
{# {% include "components/svg/diy-lines.svg" %} #}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -15,8 +15,8 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="image-with-shadow">
|
||||
<img src="../assets/images/support1.png" alt="life preserver icon" title="life preserver icon">
|
||||
<img class="img-shadow" src="../assets/images/support1.png" alt=""></div>
|
||||
<img src="assets/images/support1.png" alt="life preserver icon" title="life preserver icon">
|
||||
<img class="img-shadow" src="assets/images/support1.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn" href="{{ site.support.url }}">meet the team</a>
|
||||
|
||||
@@ -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}}">
|
||||
|
||||
3
src/_includes/components/svg/open-source.svg
Normal file
3
src/_includes/components/svg/open-source.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-open-source" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3a9 9 0 0 1 3.618 17.243l-2.193 -5.602a3 3 0 1 0 -2.849 0l-2.193 5.603a9 9 0 0 1 3.617 -17.244z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
22
src/_includes/components/svg/stack-new2.svg
Normal file
22
src/_includes/components/svg/stack-new2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 69 KiB |
26
src/_includes/components/svg/stack-new3.svg
Normal file
26
src/_includes/components/svg/stack-new3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 83 KiB |
26
src/_includes/components/svg/stack-new4.svg
Normal file
26
src/_includes/components/svg/stack-new4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 83 KiB |
@@ -8,7 +8,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="../assets/styles/main.css">
|
||||
<link rel="stylesheet" href="/assets/styles/main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
|
||||
<link rel="stylesheet" href="../assets/styles/peripheral.css"/>
|
||||
<link rel="stylesheet" href="/assets/styles/peripheral.css"/>
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
|
||||
@@ -6,8 +6,8 @@ layout: layouts/peripheral.njk
|
||||
{# <script src="{{ '/assets/js/getTeam.js' | url }}"></script> #}
|
||||
<section id="hero" class="hero--about">
|
||||
<div id="hero-image">
|
||||
<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=""/>
|
||||
<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>
|
||||
<div id="logo">
|
||||
<h1>
|
||||
@@ -49,13 +49,13 @@ layout: layouts/peripheral.njk
|
||||
<h2>mission</h2>
|
||||
<div class="section__double-image">
|
||||
<div class="section__image section__image--left">
|
||||
<img src="../assets/images/mission1.png" alt="mission section hero: a rocketship trail" title="mission section hero: a rocketship trail"/>
|
||||
<img class="img-shadow" src="../assets/images/mission1.png" alt=""/>
|
||||
<img src="assets/images/mission1.png" alt="mission section hero: a rocketship trail" title="mission section hero: a rocketship trail"/>
|
||||
<img class="img-shadow" src="assets/images/mission1.png" alt=""/>
|
||||
</div>
|
||||
<h3>To eliminate the need for trusted third parties in the human/computer relationship.</h3>
|
||||
<div class="section__image section__image--right">
|
||||
<img src="../assets/images/mission2.png" alt="mission section hero: a rocketship with trail" title="mission section hero: a rocketship with trail"/>
|
||||
<img class="img-shadow" src="../assets/images/mission2.png" alt=""/>
|
||||
<img src="assets/images/mission2.png" alt="mission section hero: a rocketship with trail" title="mission section hero: a rocketship with trail"/>
|
||||
<img class="img-shadow" src="assets/images/mission2.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
{# <img src="" alt="" class="section__img section__img--bkg"/> #}
|
||||
@@ -63,8 +63,8 @@ layout: layouts/peripheral.njk
|
||||
<section id="values">
|
||||
<h2>values</h2>
|
||||
<div class="section__image">
|
||||
<img src="../assets/images/values.png" alt="values section hero: an eye with a slash through it" title="values section hero: an eye with a slash through it"/>
|
||||
<img class="img-shadow" src="../assets/images/values.png" alt=""/>
|
||||
<img src="assets/images/values.png" alt="values section hero: an eye with a slash through it" title="values section hero: an eye with a slash through it"/>
|
||||
<img class="img-shadow" src="assets/images/values.png" alt=""/>
|
||||
</div>
|
||||
<p>
|
||||
<strong>This list of values is not comprehensive. It does not encapsulate all the values of all the members of Start9.
|
||||
@@ -93,8 +93,8 @@ layout: layouts/peripheral.njk
|
||||
<section id="virtues">
|
||||
<h2>virtues</h2>
|
||||
<div class="section__image">
|
||||
<img src="../assets/images/virtues.png" alt="virtues section hero: a sunrise between mountains" title="virtues section hero: a sunrise between mountains"/>
|
||||
<img class="img-shadow" src="../assets/images/virtues.png" alt=""/>
|
||||
<img src="assets/images/virtues.png" alt="virtues section hero: a sunrise between mountains" title="virtues section hero: a sunrise between mountains"/>
|
||||
<img class="img-shadow" src="assets/images/virtues.png" alt=""/>
|
||||
</div>
|
||||
<p>
|
||||
<strong>Below are the virtues or qualities of character needed to achieve our values and accomplish our mission.</strong>
|
||||
@@ -118,8 +118,8 @@ layout: layouts/peripheral.njk
|
||||
<section id="origin">
|
||||
<h2>origin story</h2>
|
||||
<div class="section__image">
|
||||
<img src="../assets/images/origin.png" alt="origin section hero: pikachu" title="origin section hero: pikachu"/>
|
||||
<img class="img-shadow" src="../assets/images/origin.png" alt=""/>
|
||||
<img src="assets/images/origin.png" alt="origin section hero: pikachu" title="origin section hero: pikachu"/>
|
||||
<img class="img-shadow" src="assets/images/origin.png" alt=""/>
|
||||
</div>
|
||||
<p>
|
||||
<strong>Pokemon is a game for Gameboy.</strong>
|
||||
@@ -166,8 +166,8 @@ layout: layouts/peripheral.njk
|
||||
<section id="team">
|
||||
<h2>our team</h2>
|
||||
<div class="section__image">
|
||||
<img src="../assets/images/team2.png" alt="team section hero: robots being printed" title="team section hero: robots being printed"/>
|
||||
<img class="img-shadow" src="../assets/images/team2.png" alt=""/>
|
||||
<img src="assets/images/team2.png" alt="team section hero: robots being printed" title="team section hero: robots being printed"/>
|
||||
<img class="img-shadow" src="assets/images/team2.png" alt=""/>
|
||||
</div>
|
||||
|
||||
<ul class="members">
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/hd0262_preview.mp4
Normal file
BIN
src/assets/images/hd0262_preview.mp4
Normal file
Binary file not shown.
@@ -1,5 +1,6 @@
|
||||
var bodyRect = document.body.getBoundingClientRect();
|
||||
|
||||
// TODO: pull these from data js
|
||||
const sections = [
|
||||
"pitch",
|
||||
"products",
|
||||
@@ -45,8 +46,8 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
|
||||
// sections.forEach((slug) => {
|
||||
// ScrollTrigger.create({
|
||||
// trigger: "#" + slug,
|
||||
// start: "top 75%",
|
||||
// end: "bottom 75%",
|
||||
// start: "top 25%",
|
||||
// end: "bottom 25%",
|
||||
// //markers: { startColor: "white", endColor: "white" },
|
||||
// onEnter: () => {
|
||||
// window.location.href = "#" + slug;
|
||||
@@ -58,9 +59,6 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
|
||||
// });
|
||||
// }, 2000);
|
||||
|
||||
|
||||
|
||||
|
||||
//gsap.config({trialWarn: false});
|
||||
|
||||
// create the smooth scroller FIRST!
|
||||
@@ -74,8 +72,6 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
|
||||
// backdrop-filter: blur(10px);
|
||||
//background-color: rgba(0,0,0,0.1);
|
||||
|
||||
|
||||
|
||||
gsap.from("#hero-to-pitch path:first-child", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
@@ -96,7 +92,6 @@ gsap.from("#pitch h1, #pitch p", {
|
||||
y: "5rem",
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#pitch",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -104,11 +99,10 @@ gsap.from("#pitch h1, #pitch p", {
|
||||
},
|
||||
});
|
||||
|
||||
gsap.from("#pitch a", {
|
||||
gsap.from("#pitch iframe", {
|
||||
duration: 0.5,
|
||||
opacity: 0,
|
||||
filter: "blur(10px)",
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#pitch",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -123,7 +117,6 @@ gsap.from("#products .subsection:nth-child(1)", {
|
||||
duration: 0.5,
|
||||
opacity: 0,
|
||||
outline: "1px solid rgba(255,255,255,1)",
|
||||
//filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#products",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -136,7 +129,6 @@ gsap.from("#products .subsection:nth-child(2)", {
|
||||
delay: 0.25,
|
||||
opacity: 0,
|
||||
outline: "1px solid rgba(255,255,255,1)",
|
||||
//filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#products",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -144,26 +136,41 @@ gsap.from("#products .subsection:nth-child(2)", {
|
||||
},
|
||||
});
|
||||
|
||||
const buyAnchor = document.querySelector('.product--buy')
|
||||
const buyAnchor = document.querySelector(".product--buy");
|
||||
|
||||
const buyTL = gsap
|
||||
.timeline({paused:true})
|
||||
.from('#buy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
|
||||
.to('.product--buy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
|
||||
.timeline({ paused: true })
|
||||
.from(
|
||||
"#buy-lines path:first-child",
|
||||
{ drawSVG: 0, ease: "none", duration: 0.75 },
|
||||
0
|
||||
)
|
||||
.to(
|
||||
".product--buy img:first-child",
|
||||
{ opacity: 0.4, ease: "none", duration: 0.25 },
|
||||
0
|
||||
);
|
||||
|
||||
buyAnchor.onmouseenter = () => buyTL.play()
|
||||
buyAnchor.onmouseleave = () => buyTL.reverse()
|
||||
buyAnchor.onmouseenter = () => buyTL.play();
|
||||
buyAnchor.onmouseleave = () => buyTL.reverse();
|
||||
|
||||
const diyAnchor = document.querySelector('.product--diy')
|
||||
const diyAnchor = document.querySelector(".product--diy");
|
||||
|
||||
const diyTL = gsap
|
||||
.timeline({paused:true})
|
||||
.from('#diy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
|
||||
.to('.product--diy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
|
||||
|
||||
diyAnchor.onmouseenter = () => diyTL.play()
|
||||
diyAnchor.onmouseleave = () => diyTL.reverse()
|
||||
.timeline({ paused: true })
|
||||
.from(
|
||||
"#diy-lines path:first-child",
|
||||
{ drawSVG: 0, ease: "none", duration: 0.75 },
|
||||
0
|
||||
)
|
||||
.to(
|
||||
".product--diy img:first-child",
|
||||
{ opacity: 0.4, ease: "none", duration: 0.25 },
|
||||
0
|
||||
);
|
||||
|
||||
diyAnchor.onmouseenter = () => diyTL.play();
|
||||
diyAnchor.onmouseleave = () => diyTL.reverse();
|
||||
|
||||
gsap.from("#products-to-info path:first-child", {
|
||||
drawSVG: 0,
|
||||
@@ -203,13 +210,8 @@ gsap.from("#products-to-info path:nth-child(3)", {
|
||||
|
||||
gsap.from("#infographics .subsection:nth-child(1)", {
|
||||
duration: 0.5,
|
||||
//y: "5rem",
|
||||
//scale: 0.8,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
outline: "1px solid rgba(255,255,255,1)",
|
||||
//filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#infographics .subsection:nth-child(1)",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -219,13 +221,8 @@ gsap.from("#infographics .subsection:nth-child(1)", {
|
||||
|
||||
gsap.from("#infographics .subsection:nth-child(2)", {
|
||||
duration: 0.5,
|
||||
//y: "5rem",
|
||||
//scale: 0.8,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
outline: "1px solid rgba(255,255,255,1)",
|
||||
//filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#infographics .subsection:nth-child(2)",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -239,7 +236,6 @@ gsap.from("#infographics .subsection:nth-child(2)", {
|
||||
gsap.from("#bitcoin .subsection:nth-of-type(1)", {
|
||||
duration: 1,
|
||||
opacity: 0,
|
||||
//outline: "1px solid rgba(255,255,255,1)",
|
||||
filter: "blur(10px)",
|
||||
y: "5rem",
|
||||
scrollTrigger: {
|
||||
@@ -252,7 +248,6 @@ gsap.from("#bitcoin .subsection:nth-of-type(1)", {
|
||||
gsap.from("#bitcoin .subsection:nth-of-type(2)", {
|
||||
duration: 1,
|
||||
opacity: 0,
|
||||
//outline: "1px solid rgba(255,255,255,1)",
|
||||
filter: "blur(10px)",
|
||||
y: "-5rem",
|
||||
scrollTrigger: {
|
||||
@@ -272,13 +267,29 @@ function getRandomNumber(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
positionServiceIcons();
|
||||
//positionServiceIcons();
|
||||
|
||||
const timelineServiceIcons = gsap.timeline({
|
||||
onComplete() {
|
||||
//deleteSplit();
|
||||
//scroll.update();
|
||||
//resolve();
|
||||
console.log("complete");
|
||||
},
|
||||
});
|
||||
|
||||
function positionServiceIcons() {
|
||||
bitcoinServices.forEach((service) => {
|
||||
const serviceElement = document.querySelector(".service-icon--" + service);
|
||||
console.log("positionServiceIcons");
|
||||
|
||||
bitcoinServices.forEach((service, i) => {
|
||||
var serviceClass = ".service-icon--" + service;
|
||||
|
||||
gsap.set(serviceClass, {});
|
||||
gsap.to(serviceClass, {});
|
||||
|
||||
const serviceElement = document.querySelector(serviceClass);
|
||||
const bitcoinSectionElement = document.querySelector("#bitcoin");
|
||||
const upOrDown = getRandomInt(0, 1);
|
||||
const upOrDown = i % 2;
|
||||
const bitcoinHeight = bitcoinSectionElement.clientHeight;
|
||||
|
||||
serviceElement
|
||||
@@ -286,14 +297,15 @@ function positionServiceIcons() {
|
||||
: "";
|
||||
|
||||
if (upOrDown) {
|
||||
gsap.set(".service-icon--" + service, {
|
||||
gsap.set(serviceClass, {
|
||||
y: getRandomInt(0, bitcoinHeight / 2) + "px",
|
||||
});
|
||||
gsap.to(".service-icon--" + service, {
|
||||
gsap.to(serviceClass, {
|
||||
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
|
||||
//x: getRandomInt(0, 100) + "vw",
|
||||
ease: "in",
|
||||
delay: getRandomNumber(0, 1),
|
||||
overwrite: true,
|
||||
scrollTrigger: {
|
||||
trigger: "#bitcoin",
|
||||
scrub: true,
|
||||
@@ -303,32 +315,47 @@ function positionServiceIcons() {
|
||||
},
|
||||
});
|
||||
} else {
|
||||
gsap.set(".service-icon--" + service, {
|
||||
gsap.set(serviceClass, {
|
||||
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
|
||||
});
|
||||
gsap.to(".service-icon--" + service, {
|
||||
gsap.to(serviceClass, {
|
||||
y: getRandomInt(0, bitcoinHeight / 2) + "px",
|
||||
//x: getRandomInt(0, 100) + "vw",
|
||||
ease: "in",
|
||||
delay: getRandomNumber(0, 1),
|
||||
overwrite: true,
|
||||
scrollTrigger: {
|
||||
trigger: "#bitcoin",
|
||||
scrub: true,
|
||||
start: "top bottom",
|
||||
end: "90% center",
|
||||
//markers: { startColor: "lime", endColor: "blue" },
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const tickerTL = gsap.timeline();
|
||||
|
||||
function onResizeComplete() {
|
||||
positionServiceIcons();
|
||||
initializeSizes();
|
||||
//gsap.delayedCall(next, crossfade);
|
||||
//tickerTL.resizePlay ? tickerTL.resizePlay.restart(true) : "";
|
||||
}
|
||||
|
||||
var resizeTimeout = setTimeout(onResizeComplete, 400);
|
||||
window.onresize = function() {
|
||||
window.onresize = function () {
|
||||
// if (tickerTL.isActive()) tickerTL.pause();
|
||||
// if (!tickerTL.resizePlay)
|
||||
// tickerTL.resizePlay = gsap.delayedCall(0.2, function () {
|
||||
// tickerTL.play();
|
||||
// });
|
||||
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(onResizeComplete, 400);
|
||||
console.log("onresize");
|
||||
};
|
||||
|
||||
gsap.from("#bitcoin-to-be path:first-child", {
|
||||
@@ -348,9 +375,7 @@ gsap.from("#bitcoin-to-be path:first-child", {
|
||||
gsap.from("#be-your-own h1", {
|
||||
duration: 0.5,
|
||||
y: "5rem",
|
||||
//scale: 0.8,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#be-your-own",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -363,7 +388,6 @@ gsap.from("#be-your-own p", {
|
||||
y: "5rem",
|
||||
filter: "blur(10px)",
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#be-your-own h1",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -375,7 +399,6 @@ gsap.from("#be-your-own #ticker", {
|
||||
duration: 1.5,
|
||||
filter: "blur(20px)",
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#be-your-own #ticker",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -383,28 +406,28 @@ gsap.from("#be-your-own #ticker", {
|
||||
},
|
||||
});
|
||||
|
||||
let pseudoserviceArray, next, itemHeight, listHeight, windowHeight, kerplunk, kerplunk2;
|
||||
// TICKER
|
||||
|
||||
pseudoserviceArray = gsap.utils.toArray(".pseudoservice");
|
||||
|
||||
next = 4;
|
||||
let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
|
||||
next = 4,
|
||||
itemHeight,
|
||||
listHeight,
|
||||
windowHeight,
|
||||
kerplunk,
|
||||
kerplunk2;
|
||||
|
||||
function initializeSizes() {
|
||||
|
||||
itemHeight = document
|
||||
.querySelector(".pseudoservice")
|
||||
.getBoundingClientRect().height;
|
||||
|
||||
|
||||
listHeight = document
|
||||
.querySelector(".pseudoservices")
|
||||
.getBoundingClientRect().height;
|
||||
|
||||
|
||||
windowHeight = document.getElementById("ticker__window").clientHeight;
|
||||
|
||||
}
|
||||
|
||||
initializeSizes();
|
||||
|
||||
kerplunk = CustomEase.create(
|
||||
"custom",
|
||||
"M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "
|
||||
@@ -416,26 +439,24 @@ kerplunk2 = CustomEase.create(
|
||||
);
|
||||
|
||||
function crossfade() {
|
||||
var action = gsap
|
||||
.timeline()
|
||||
var action = tickerTL
|
||||
.to(pseudoserviceArray, {
|
||||
id: "thunk",
|
||||
y: "-=" + itemHeight,
|
||||
duration: 1,
|
||||
ease: kerplunk2,
|
||||
overwrite: true
|
||||
})
|
||||
.to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
|
||||
|
||||
pseudoserviceArray.push(pseudoserviceArray.shift()); // the first (shift) to the end (push) from the array
|
||||
//console.log(pseudoserviceArray);
|
||||
//console.log(itemHeight);
|
||||
|
||||
// start endless run
|
||||
gsap.delayedCall(next, crossfade);
|
||||
|
||||
var thisPseudoservice = pseudoserviceArray[2].innerHTML,
|
||||
thisElement = document.querySelector(
|
||||
".service-container--" + thisPseudoservice.toLowerCase().replace(' ','-')
|
||||
".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-")
|
||||
);
|
||||
|
||||
var slidesContainerArray = document.querySelectorAll(".service-container");
|
||||
@@ -448,109 +469,8 @@ function crossfade() {
|
||||
}
|
||||
}
|
||||
|
||||
// start the crossfade after next = 3 sec
|
||||
gsap.delayedCall(next, crossfade);
|
||||
|
||||
// document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
|
||||
// // TODO: pause not working - Id not found
|
||||
// function pauseThunk() {
|
||||
// console.log("asfd");
|
||||
// gsap.getById("thunk").kill();
|
||||
// }
|
||||
|
||||
// CAROUSEL
|
||||
|
||||
// var slideDelay = 1.5;
|
||||
// var slideDuration = 0.3;
|
||||
// var wrap = true;
|
||||
|
||||
// var slides = document.querySelectorAll(".slide");
|
||||
// var prevButton = document.querySelector("#prevButton");
|
||||
// var nextButton = document.querySelector("#nextButton");
|
||||
// var progressWrap = gsap.utils.wrap(0, 1);
|
||||
|
||||
// var numSlides = slides.length;
|
||||
|
||||
// gsap.set(slides, {
|
||||
// xPercent: (i) => i * 100,
|
||||
// });
|
||||
|
||||
// var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
|
||||
|
||||
// var animation = gsap.to(slides, {
|
||||
// xPercent: "+=" + numSlides * 100,
|
||||
// duration: 1,
|
||||
// ease: "none",
|
||||
// paused: true,
|
||||
// repeat: -1,
|
||||
// modifiers: {
|
||||
// xPercent: wrapX,
|
||||
// },
|
||||
// });
|
||||
|
||||
// var proxy = document.createElement("div");
|
||||
// var slideAnimation = gsap.to({}, {});
|
||||
// var slideWidth = 0;
|
||||
// var wrapWidth = 0;
|
||||
|
||||
resize();
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
|
||||
// prevButton.addEventListener("click", function () {
|
||||
// animateSlides(1);
|
||||
// });
|
||||
|
||||
// nextButton.addEventListener("click", function () {
|
||||
// animateSlides(-1);
|
||||
// });
|
||||
|
||||
// function updateDraggable() {
|
||||
// slideAnimation.kill();
|
||||
// this.update();
|
||||
// }
|
||||
|
||||
// function animateSlides(direction) {
|
||||
// slideAnimation.kill();
|
||||
// var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
|
||||
|
||||
// slideAnimation = gsap.to(proxy, {
|
||||
// x: x,
|
||||
// duration: slideDuration,
|
||||
// onUpdate: updateProgress,
|
||||
// });
|
||||
// }
|
||||
|
||||
// function updateProgress() {
|
||||
// animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
|
||||
// }
|
||||
|
||||
// function snapX(value) {
|
||||
// let snapped = gsap.utils.snap(slideWidth, value);
|
||||
// return wrap
|
||||
// ? snapped
|
||||
// : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
|
||||
// }
|
||||
|
||||
function resize() {
|
||||
initializeSizes();
|
||||
|
||||
// var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
|
||||
|
||||
// slideWidth = slides[0].offsetWidth;
|
||||
// wrapWidth = slideWidth * numSlides;
|
||||
|
||||
// wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
|
||||
|
||||
// gsap.set(proxy, {
|
||||
// x: norm * wrapWidth,
|
||||
// });
|
||||
|
||||
// animateSlides(0);
|
||||
// slideAnimation.progress(1);
|
||||
|
||||
}
|
||||
|
||||
gsap.from("#be-to-powered path", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
@@ -568,9 +488,7 @@ gsap.from("#be-to-powered path", {
|
||||
gsap.from("#powered-by h1", {
|
||||
duration: 0.5,
|
||||
y: "-5rem",
|
||||
//scale: 0.8,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#powered-by h1",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -580,10 +498,8 @@ gsap.from("#powered-by h1", {
|
||||
|
||||
gsap.from("#powered-by p", {
|
||||
duration: 0.5,
|
||||
//y: "-10rem",
|
||||
filter: "blur(10px)",
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#powered-by h1",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -593,10 +509,8 @@ gsap.from("#powered-by p", {
|
||||
|
||||
gsap.from("#powered-by svg", {
|
||||
duration: 1,
|
||||
//y: "-10rem",
|
||||
filter: "blur(20px)",
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
scrollTrigger: {
|
||||
trigger: "#powered-by svg",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -620,13 +534,8 @@ gsap.from("#powered-to-support path", {
|
||||
|
||||
gsap.from("#support", {
|
||||
duration: 0.5,
|
||||
//y: "5rem",
|
||||
//scale: 0.8,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
outline: "1px solid rgba(255,255,255,1)",
|
||||
//filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#support",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
@@ -650,12 +559,8 @@ gsap.from("#support-to-dev path", {
|
||||
|
||||
gsap.from("#dev h1", {
|
||||
duration: 0.5,
|
||||
//y: "5rem",
|
||||
scale: 0.8,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
//outline: "1px solid rgba(255,255,255,1)",
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#dev",
|
||||
@@ -667,11 +572,9 @@ gsap.from("#dev h1", {
|
||||
gsap.from("#dev .col:nth-child(1)", {
|
||||
duration: 0.5,
|
||||
x: "5rem",
|
||||
//scale: 0.8,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
delay: 0.5,
|
||||
//outline: "1px solid rgba(255,255,255,1)",
|
||||
outline: "1px solid rgba(255,255,255,1)",
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#dev",
|
||||
@@ -684,10 +587,8 @@ gsap.from("#dev .col:nth-child(2)", {
|
||||
duration: 0.5,
|
||||
x: "-5rem",
|
||||
scale: 0.5,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
delay: 0.75,
|
||||
//outline: "1px solid rgba(255,255,255,1)",
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#dev",
|
||||
@@ -712,11 +613,8 @@ gsap.from("#dev-to-contact path", {
|
||||
|
||||
gsap.from("#community", {
|
||||
duration: 0.5,
|
||||
//y: "5rem",
|
||||
scale: 0.8,
|
||||
//rotateX: 15,
|
||||
opacity: 0,
|
||||
//delay: 0.75,
|
||||
//outline: "1px solid rgba(255,255,255,1)",
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
@@ -724,380 +622,4 @@ gsap.from("#community", {
|
||||
start: "top 75%", // "triggerElement page"
|
||||
toggleActions: defaultActions,
|
||||
},
|
||||
});
|
||||
|
||||
//Librarys
|
||||
|
||||
/*
|
||||
var imagesLoaded = require('imagesloaded');
|
||||
import barba from '@barba/core';
|
||||
import LocomotiveScroll from 'locomotive-scroll';
|
||||
import { gsap } from "gsap";
|
||||
import { Draggable } from "gsap/Draggable";
|
||||
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { InertiaPlugin } from "gsap/InertiaPlugin";
|
||||
import { SplitText } from "gsap/SplitText";
|
||||
|
||||
gsap.registerPlugin(Draggable, ScrollToPlugin, ScrollTrigger, InertiaPlugin, SplitText);
|
||||
|
||||
|
||||
|
||||
|
||||
// Locomotive Scroll
|
||||
const scroll = new LocomotiveScroll({
|
||||
el: document.querySelector('[data-scroll-container]'),
|
||||
smooth: true,
|
||||
tablet: {
|
||||
breakpoint: 961
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Use Locomotive Scroll with ScrollTrigger
|
||||
scroll.on("scroll", ScrollTrigger.update);
|
||||
|
||||
ScrollTrigger.scrollerProxy(".locomotive", {
|
||||
scrollTop(value) {
|
||||
return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
|
||||
},
|
||||
pinType: document.querySelector(".locomotive").style.transform ? "transform" : "fixed"
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Mobile Menu Toggle
|
||||
const menuIcon = document.querySelector('.navBtnContainer');
|
||||
const mobileNav = document.querySelector('.mobileNav');
|
||||
|
||||
const menuToggle = function () {
|
||||
menuIcon.addEventListener(`click`, function() {
|
||||
if(this.classList.contains(`active`)) {
|
||||
this.classList.remove(`active`);
|
||||
mobileNav.classList.remove(`active`);
|
||||
} else {
|
||||
this.classList.add(`active`);
|
||||
mobileNav.classList.add(`active`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
menuToggle();
|
||||
|
||||
|
||||
|
||||
|
||||
// Custom cursor
|
||||
const cursorAnimate = function () {
|
||||
const cursors = document.querySelector('.cursors')
|
||||
const cursor = cursors.querySelector('.cursor')
|
||||
const cursorLinks = document.querySelectorAll('a, video, .resumeItem')
|
||||
let cursorX = 0
|
||||
let cursorY = 0
|
||||
let aimX = 0
|
||||
let aimY = 0
|
||||
let speed = 0.2
|
||||
|
||||
const cursorEase = function () {
|
||||
cursorX += (aimX - cursorX) * speed
|
||||
cursorY += (aimY - cursorY) * speed
|
||||
|
||||
cursor.style.left = cursorX + "px"
|
||||
cursor.style.top = cursorY + "px"
|
||||
|
||||
requestAnimationFrame(cursorEase)
|
||||
}
|
||||
|
||||
cursorEase()
|
||||
|
||||
document.addEventListener('mousemove', function (event) {
|
||||
aimX = event.pageX
|
||||
aimY = event.pageY
|
||||
})
|
||||
|
||||
cursorLinks.forEach(cursorLink => {
|
||||
cursorLink.addEventListener('mouseover', function () {
|
||||
cursor.classList.add(`hover`)
|
||||
})
|
||||
cursorLink.addEventListener('mouseout', function () {
|
||||
cursor.classList.remove(`hover`)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Scroll Trigger Hero Image
|
||||
const heroImgInnerAnimate = function () {
|
||||
const heroImgInner = document.querySelectorAll('.heroImgInner');
|
||||
heroImgInner.forEach(function (heroImgInner){
|
||||
gsap.to(heroImgInner, {
|
||||
scrollTrigger: {
|
||||
trigger: heroImgInner,
|
||||
scroller: ".locomotive",
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: 1,
|
||||
},
|
||||
y: "-43.75%",
|
||||
ease: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Footer Marquee
|
||||
const footerMarqueeAnimate = function () {
|
||||
const footerMarquee = document.querySelector('.footerMarqueeItem');
|
||||
const footerMarqueeTrack = document.querySelector('.footerMarqueeTrack');
|
||||
const footerMarqueeItemWidth = footerMarquee.offsetWidth;
|
||||
//console.log(footerMarqueeItemWidth);
|
||||
const footerMarqueeTL = gsap.timeline({repeat:-1, defaults:{ease:"none"}});
|
||||
footerMarqueeTL.to(footerMarqueeTrack,{x:-footerMarqueeItemWidth, duration:20});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Scroll Trigger Marquee
|
||||
const marqueeAnimate = function () {
|
||||
const marquee = document.querySelectorAll('.marqueeTrack');
|
||||
marquee.forEach(function (marquee){
|
||||
gsap.to(marquee, {
|
||||
scrollTrigger: {
|
||||
trigger: marquee,
|
||||
scroller: ".locomotive",
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: 1,
|
||||
},
|
||||
x: "-33.33%",
|
||||
ease: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Scroll Trigger Spin
|
||||
const spinTextAnimate = function () {
|
||||
const spinText = document.querySelectorAll('.spinText');
|
||||
spinText.forEach(function (spinText){
|
||||
gsap.to(spinText, {
|
||||
scrollTrigger: {
|
||||
trigger: spinText,
|
||||
scroller: ".locomotive",
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: 1,
|
||||
},
|
||||
rotation:360,
|
||||
ease: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Work Experience Dropdown
|
||||
const experienceToggle = function () {
|
||||
const resumeItems = document.querySelectorAll('.resumeItem');
|
||||
resumeItems.forEach(function (item) {
|
||||
let jobTitleHeight = item.offsetHeight;
|
||||
item.addEventListener('click', function () {
|
||||
let jobDescHeight = this.children[4].offsetHeight;
|
||||
if(this.classList.contains('active')) {
|
||||
this.classList.remove('active')
|
||||
this.style.height = jobTitleHeight + "px"
|
||||
} else {
|
||||
this.classList.add('active')
|
||||
this.style.height = jobTitleHeight + jobDescHeight + "px"
|
||||
}
|
||||
setTimeout(function () { scroll.update(); }, 1000)
|
||||
})
|
||||
});
|
||||
}
|
||||
experienceToggle();
|
||||
|
||||
|
||||
|
||||
|
||||
// Update scroll height after Images Load
|
||||
imagesLoaded( 'body', function() {
|
||||
scroll.update();
|
||||
cursorAnimate();
|
||||
footerMarqueeAnimate();
|
||||
marqueeAnimate();
|
||||
spinTextAnimate();
|
||||
ScrollTrigger.matchMedia({
|
||||
"(min-width: 960px)": function() {
|
||||
heroImgInnerAnimate();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Barba
|
||||
|
||||
const transitionPanel1 = document.querySelector('#transitionPanel1');
|
||||
const loadPanel = document.querySelector('.loadPanel');
|
||||
|
||||
barba.hooks.after(() => {
|
||||
marqueeAnimate();
|
||||
spinTextAnimate();
|
||||
experienceToggle();
|
||||
cursorAnimate();
|
||||
ScrollTrigger.matchMedia({
|
||||
"(min-width: 960px)": function() {
|
||||
heroImgInnerAnimate();
|
||||
}
|
||||
})
|
||||
scroll.update();
|
||||
});
|
||||
|
||||
|
||||
barba.init({
|
||||
|
||||
transitions: [{
|
||||
name: 'default',
|
||||
|
||||
|
||||
|
||||
once({ next }) {
|
||||
|
||||
return new Promise(resolve => {
|
||||
|
||||
const timeline = gsap.timeline({
|
||||
onComplete() {
|
||||
deleteSplit();
|
||||
scroll.update();
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
|
||||
const splitHeadline = new SplitText('h1', {type:'words'})
|
||||
function deleteSplit() {
|
||||
splitHeadline.revert()
|
||||
}
|
||||
|
||||
|
||||
timeline
|
||||
.set('.load-content', {opacity: 0})
|
||||
.set('main', {y: 200, opacity: 0})
|
||||
.set('header', {y: -100, opacity: 0})
|
||||
.set(splitHeadline.words, {opacity: 0, y: 48})
|
||||
.to('.load-content', {duration: 1, opacity: 1}, 0.5)
|
||||
.to('.loadPanel', {duration: 1, height: 0, ease: "power4.inOut"}, '+=1')
|
||||
.to('.load-content', {duration: 1, opacity: 0}, '-=1')
|
||||
.to('header', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=0.5')
|
||||
.to('main', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=1')
|
||||
.to(splitHeadline.words, {duration: 1, y: 0, opacity: 1, ease: "power3.out", stagger: 0.04}, '-=1')
|
||||
.set('.loadPanel', {opacity: 0, display:'none'})
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
leave({ current, next, trigger }) {
|
||||
|
||||
return new Promise(resolve => {
|
||||
|
||||
const timeline = gsap.timeline({
|
||||
onComplete() {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
|
||||
transitionPanel1.classList.add(`active`);
|
||||
mobileNav.classList.remove(`active`);
|
||||
menuIcon.classList.remove(`active`);
|
||||
|
||||
timeline
|
||||
.to('footer', {duration: 0.5, opacity: 0}, 0)
|
||||
.to(current.container, {duration: 0.5, opacity: 0}, 0)
|
||||
.to(current.container, {display: 'none'})
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
beforeEnter({ current, next, trigger }) {
|
||||
|
||||
scroll.scrollTo(0, 0);
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
enter({ current, next, trigger }) {
|
||||
|
||||
imagesLoaded( 'body', function() {
|
||||
scroll.update();
|
||||
});
|
||||
|
||||
return new Promise(resolve => {
|
||||
|
||||
const timeline = gsap.timeline({
|
||||
onComplete() {
|
||||
transitionPanel1.classList.remove(`active`);
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
|
||||
timeline
|
||||
.set(current.container, {opacity: 0})
|
||||
.set(next.container, {opacity: 0})
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
afterEnter({ current, next, trigger }) {
|
||||
|
||||
return new Promise(resolve => {
|
||||
|
||||
const timeline = gsap.timeline({
|
||||
onComplete() {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
|
||||
timeline
|
||||
.to(next.container, {duration: 1, opacity: 1}, 0.5)
|
||||
.to('footer', {duration: 1, opacity: 1}, 0.5)
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
}],
|
||||
|
||||
views: [{}],
|
||||
|
||||
//debug: true
|
||||
});
|
||||
|
||||
*/
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
const defaultActions = "play none none none";
|
||||
|
||||
gsap.from("section#hero+section", {
|
||||
duration: 0.5,
|
||||
y: "5rem",
|
||||
opacity: 0,
|
||||
delay: 1,
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "section#hero+section",
|
||||
start: "top 75%", // "triggerElement page"
|
||||
toggleActions: defaultActions,
|
||||
},
|
||||
});
|
||||
|
||||
const sections = document.querySelectorAll("section:not(#hero):not(#blurb)");
|
||||
|
||||
sections.forEach(function (section) {
|
||||
gsap.from(section, {
|
||||
duration: 0.5,
|
||||
y: "5rem",
|
||||
opacity: 0,
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 75%", // "triggerElement page"
|
||||
toggleActions: defaultActions,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rem;
|
||||
gap: 3rem;
|
||||
//margin: 0 0 6rem 0;
|
||||
padding: 0 6rem 0 6rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
margin: 0 0 0 1rem !important;
|
||||
&::before{
|
||||
top: 25% !important;
|
||||
left: -4rem !important;
|
||||
left: calc(-4rem + 2px) !important;
|
||||
align-self: flex-start !important;
|
||||
justify-content: center !important;
|
||||
border-top: 2rem transparent solid !important;
|
||||
@@ -40,11 +40,12 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rem;
|
||||
gap: 3rem;
|
||||
//margin: 0 0 6rem 0;
|
||||
padding: 0 6rem 0 6rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
//transform: translate(0px,0px);
|
||||
|
||||
//--size: 3rem;
|
||||
--p-t: calc(0.2 * var(--size));
|
||||
@@ -170,7 +171,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
|
||||
box-shadow: var(--sh-2);
|
||||
|
||||
&::before{
|
||||
position: absolute;
|
||||
|
||||
@@ -103,7 +103,7 @@ section#bitcoin {
|
||||
z-index: -2;
|
||||
backdrop-filter: blur(48px);
|
||||
mix-blend-mode: soft-light;
|
||||
box-shadow: 0 37px 50px rgb(0 0 0 / 20%);
|
||||
box-shadow: 0 2rem 3rem var(--c-shadow-3);
|
||||
|
||||
&.service-icon--balanceofsatoshis {
|
||||
width: 5rem;
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
}
|
||||
img {
|
||||
width: 20rem;
|
||||
box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
|
||||
box-shadow: var(--sh-2);
|
||||
border-radius: 1.3rem;
|
||||
}
|
||||
}
|
||||
@@ -55,10 +55,15 @@ footer{
|
||||
letter-spacing: .1em;
|
||||
color: var(--c-text-primary);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
white-space: nowrap;
|
||||
|
||||
path{
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
// &::after{
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
@@ -77,6 +82,9 @@ footer{
|
||||
// left: -5%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
path {
|
||||
stroke: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
&.highlight{
|
||||
color: var(--c-text-bright);
|
||||
@@ -93,6 +101,10 @@ footer{
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
svg{
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ section#infographics{
|
||||
outline: 1px solid rgba(255,255,255,0);
|
||||
svg{
|
||||
width: min(110%, 1000px);
|
||||
//width: clamp(500px, 50vw, 1000px);
|
||||
}
|
||||
&:first-child{
|
||||
&::before {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
body, .ScrollSmoother-wrapper {
|
||||
margin: 0;
|
||||
background: linear-gradient(0deg, #333333, #333333),
|
||||
background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
|
||||
url("../../assets/images/bkg.jpg");
|
||||
background-blend-mode: color, normal;
|
||||
background-size: cover;
|
||||
@@ -62,7 +62,7 @@ section {
|
||||
}
|
||||
|
||||
[class*="section--"]{
|
||||
box-shadow: rgb(0 0 0 / 50%) 0 3rem 3rem;
|
||||
box-shadow: var(--c-shadow-1) 0 3rem 3rem;
|
||||
}
|
||||
|
||||
.section--inverse{
|
||||
@@ -96,7 +96,7 @@ section {
|
||||
.line svg{
|
||||
width: calc(100vw - (2 * 6rem));
|
||||
max-width: 50vw;
|
||||
max-height: 60vh;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
nav {
|
||||
@@ -104,6 +104,8 @@ nav {
|
||||
}
|
||||
|
||||
#logo {
|
||||
transform: translateY(-5rem);
|
||||
opacity: 0;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -208,7 +210,7 @@ a.btn {
|
||||
&:hover{
|
||||
transform: rotateX(30deg);
|
||||
&::before {
|
||||
box-shadow: inset 0 1rem 1rem -0.5rem rgb(0 0 0 / 50%);
|
||||
box-shadow: inset 0 1rem 1rem -0.5rem var(--c-shadow-1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -235,7 +237,7 @@ a.btn {
|
||||
height: 1rem;
|
||||
z-index: -1;
|
||||
transform: rotateX(90deg) translateY(2px);
|
||||
box-shadow: inset 0 0.3rem 0.5rem 0rem rgb(0 0 0 / 50%);
|
||||
box-shadow: inset 0 0.3rem 0.5rem 0rem var(--c-shadow-1);
|
||||
}
|
||||
|
||||
&.btn--subtle{
|
||||
@@ -294,6 +296,9 @@ a.btn {
|
||||
}
|
||||
}
|
||||
|
||||
#bitcoin-to-be, #be-to-powered, #powered-to-support, #support-to-dev {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
|
||||
$pastels: (red, pink) (blue, purple) (green, yellow)
|
||||
|
||||
@@ -1,279 +1,313 @@
|
||||
@use 'normalize';
|
||||
@use 'fonts';
|
||||
@use 'menu';
|
||||
@use 'footer';
|
||||
@use "normalize";
|
||||
@use "fonts";
|
||||
@use "menu";
|
||||
@use "footer";
|
||||
/* @use 'post'; */
|
||||
|
||||
:root {
|
||||
background-attachment: fixed;
|
||||
--viewportWidth: calc(100vw - var(--scrollbarWidth));
|
||||
:root {
|
||||
background-attachment: fixed;
|
||||
--viewportWidth: calc(100vw - var(--scrollbarWidth));
|
||||
|
||||
--c-1: rgba(255,255,255);
|
||||
--c-text-primary: var(--c-1);
|
||||
--c-line-primary: var(--c-1);
|
||||
--c-1: rgba(255, 255, 255);
|
||||
--c-text-primary: var(--c-1);
|
||||
--c-line-primary: var(--c-1);
|
||||
|
||||
--c-2: #EF4B63;
|
||||
--c-text-accent: var(--c-2);
|
||||
--c-line-accent: var(--c-2);
|
||||
--c-2: #ef4b63;
|
||||
--c-text-accent: var(--c-2);
|
||||
--c-line-accent: var(--c-2);
|
||||
|
||||
--c-3: #333;
|
||||
--c-bkg: var(--c-3);
|
||||
--c-3: #333;
|
||||
--c-bkg: var(--c-3);
|
||||
|
||||
--c-4: #BA1930;
|
||||
--c-3d-shadow: var(--c-4);
|
||||
--c-4: #ba1930;
|
||||
--c-3d-shadow: var(--c-4);
|
||||
|
||||
--c-5: rgba(255,255,255,1);
|
||||
--c-text-bright: var(--c-5);
|
||||
--c-5: rgba(255, 255, 255, 1);
|
||||
--c-text-bright: var(--c-5);
|
||||
|
||||
--c-6: rgb(194, 194, 194);
|
||||
--c-6: rgb(194, 194, 194);
|
||||
|
||||
--c-spacer: rgba(255,255,255,.05);
|
||||
--s-primary: 0.5;
|
||||
--b-primary: 1px solid var(--c-line-primary);
|
||||
--b-secondary: 1px dashed var(--c-line-primary);
|
||||
--c-shadow-1: rgb(0 0 0 / 50%);
|
||||
--c-shadow-2: rgb(0 0 0 / 40%);
|
||||
--c-shadow-3: rgb(0 0 0 / 20%);
|
||||
|
||||
--f-hero: "Basis Grotesque Pro";
|
||||
--f-bold: "Tusker Grotesk 5500";
|
||||
--f-accent: 'Montserrat';
|
||||
--f-accent2: 'Arkibal Mono';
|
||||
--f-accent-bold: 'Montserrat';
|
||||
--f-accent2-bold: 'Arkibal Mono Rg';
|
||||
--f-copy: 'Liberation Mono';
|
||||
--f-button: 'Basis Grotesque Mono Pro';
|
||||
--c-spacer: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--t-simple: all .2s ease-in-out;
|
||||
--sh-2: 0 3rem 2rem 0rem var(--c-shadow-2);
|
||||
|
||||
--s-primary: 0.5;
|
||||
--b-primary: 1px solid var(--c-line-primary);
|
||||
--b-secondary: 1px dashed var(--c-line-primary);
|
||||
|
||||
--f-hero: "Basis Grotesque Pro";
|
||||
--f-bold: "Tusker Grotesk 5500";
|
||||
--f-accent: "Montserrat";
|
||||
--f-accent2: "Arkibal Mono";
|
||||
--f-accent-bold: "Montserrat";
|
||||
--f-accent2-bold: "Arkibal Mono Rg";
|
||||
--f-copy: "Liberation Mono";
|
||||
--f-button: "Basis Grotesque Mono Pro";
|
||||
|
||||
--t-simple: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
html {
|
||||
//background-color: lime;
|
||||
font-size: 2vmin;
|
||||
font-size: max(2vmin, 10px);
|
||||
scroll-behavior: smooth;
|
||||
color: var(--c-text-primary);
|
||||
font-family: var(--f-accent);
|
||||
font-weight: 200;
|
||||
overflow: scroll;
|
||||
overflow: overlay;
|
||||
display: flex;
|
||||
//background-color: lime;
|
||||
font-size: 2vmin;
|
||||
font-size: max(2vmin, 10px);
|
||||
scroll-behavior: smooth;
|
||||
color: var(--c-text-primary);
|
||||
font-family: var(--f-accent);
|
||||
font-weight: 200;
|
||||
overflow: scroll;
|
||||
overflow: overlay;
|
||||
display: flex;
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--c-2);
|
||||
}
|
||||
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--c-1);
|
||||
}
|
||||
|
||||
&.menu-is-open{
|
||||
.header__logo{
|
||||
opacity: 1 !important;
|
||||
filter: blur(0px) !important;
|
||||
&.menu-is-open {
|
||||
.header__logo {
|
||||
opacity: 1 !important;
|
||||
filter: blur(0px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
background: #333333;
|
||||
body {
|
||||
background: var(--c-bkg);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
main{
|
||||
//transform: translateY(-100vh);
|
||||
perspective: 1000px;
|
||||
picture {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
picture + picture {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
main {
|
||||
//transform: translateY(-100vh);
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
|
||||
a.link-in-svg{
|
||||
fill: var(--c-text-accent);
|
||||
path{
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
&:hover{
|
||||
path{
|
||||
fill: var(--c-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p a {
|
||||
color: var(--c-text-primary);
|
||||
text-decoration: underline;
|
||||
&:hover{
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
color: var(--c-text-primary);
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
em {
|
||||
color: var(--c-text-accent);
|
||||
font-style: normal;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
em {
|
||||
color: var(--c-text-accent);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
header{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
z-index: 2;
|
||||
top:0;
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
|
||||
a.header__logo{
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
svg{
|
||||
width:8rem;
|
||||
position: absolute;
|
||||
path{
|
||||
transition: var(--t-simple);
|
||||
stroke-width: 0;
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
svg path{
|
||||
stroke-width: 0.2rem;
|
||||
stroke: var(--c-text-primary);
|
||||
}
|
||||
svg path:last-child{
|
||||
stroke: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nav{
|
||||
--padding: 1rem;
|
||||
//width: calc(100% - 2 * var(--padding) - 15px);
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--f-accent);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
padding: var(--padding);
|
||||
a.header__logo {
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
li {
|
||||
list-style: none;
|
||||
a {
|
||||
color: var(--c-text-bright);
|
||||
font-size: 1.5rem;
|
||||
padding: 0em 0.5em 0em 0.5em;
|
||||
|
||||
path {
|
||||
fill: var(--c-text-bright);
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
|
||||
&.em{
|
||||
background-color: var(--c-text-accent);
|
||||
margin-right: 1rem;
|
||||
&:hover{
|
||||
color: var(--c-text-accent);
|
||||
background-color: var(--c-text-bright);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: var(--c-text-accent);
|
||||
path {
|
||||
fill: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scrolled-menu{
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
#menu-open{
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
align-items: center;
|
||||
svg{
|
||||
height: .7em;
|
||||
margin-top: -2px;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
width: 8rem;
|
||||
position: absolute;
|
||||
path {
|
||||
transition: var(--t-simple);
|
||||
stroke-width: 0;
|
||||
stroke: transparent;
|
||||
}
|
||||
path:last-child{
|
||||
//filter: drop-shadow(0 0 0.6rem rgb(0 0 0 / 80%));
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
svg path {
|
||||
stroke-width: 0.2rem;
|
||||
stroke: var(--c-text-primary);
|
||||
}
|
||||
svg path:last-child {
|
||||
stroke: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nav {
|
||||
--padding: 1rem;
|
||||
//width: calc(100% - 2 * var(--padding) - 15px);
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--f-accent);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
padding: var(--padding);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
li {
|
||||
list-style: none;
|
||||
a {
|
||||
color: var(--c-text-bright);
|
||||
font-size: 1.5rem;
|
||||
padding: 0em 0.5em 0em 0.5em;
|
||||
|
||||
path {
|
||||
fill: var(--c-text-bright);
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
|
||||
&.em {
|
||||
background-color: var(--c-text-accent);
|
||||
margin-right: 1rem;
|
||||
&:hover {
|
||||
color: var(--c-text-accent);
|
||||
background-color: var(--c-text-bright);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--c-text-accent);
|
||||
path {
|
||||
fill: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scrolled-menu {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
#menu-open {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
svg {
|
||||
height: 0.7em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.opened-menu {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transform: translateX(3rem);
|
||||
//overflow: hidden;
|
||||
white-space: nowrap;
|
||||
//margin-left: -1rem;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transform: translateX(3rem);
|
||||
//overflow: hidden;
|
||||
white-space: nowrap;
|
||||
//margin-left: -1rem;
|
||||
}
|
||||
.closed-menu {
|
||||
//overflow: hidden;
|
||||
white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#hero-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
scale: 0.95;
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
img {
|
||||
width: 50rem;
|
||||
max-width: 90vw;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
scale: 0.95;
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
img {
|
||||
width: 50rem;
|
||||
max-width: 90vw;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.img-shadow {
|
||||
filter: blur(2rem) brightness(0);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
opacity: .5;
|
||||
}
|
||||
filter: blur(2rem) brightness(0);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.header__logo img{
|
||||
width: 11rem !important;
|
||||
}
|
||||
.hide-on-mobile{
|
||||
display: none;
|
||||
}
|
||||
nav ul li a {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.header__logo img {
|
||||
width: 11rem !important;
|
||||
}
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
nav ul li a {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-with-shadow{
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.image-with-shadow {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -6,11 +6,11 @@ main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: clip;
|
||||
background-color: #333;
|
||||
background-color: var(--c-bkg);
|
||||
}
|
||||
|
||||
#menu {
|
||||
box-shadow: inset 0 -5rem 5rem -2rem rgb(0 0 0 / 40%);
|
||||
box-shadow: inset 0 -5rem 5rem -2rem var(--c-shadow-2);
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
@@ -226,7 +226,7 @@ section#origin {
|
||||
border-radius: 100%;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
|
||||
box-shadow: var(--sh-2);
|
||||
}
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
@@ -309,5 +309,7 @@ section#news {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,15 @@ section#pitch {
|
||||
h1 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
max-width: 73vw;
|
||||
max-width: min(16ch,64vw);
|
||||
}
|
||||
p{
|
||||
max-width: min(50ch, 73vw);
|
||||
max-width: min(50ch, 64vw);
|
||||
}
|
||||
iframe{
|
||||
border:0;
|
||||
width: max(500px,50vw);
|
||||
height: max(282px,28.2vw);
|
||||
box-shadow: var(--c-shadow-1) 0 3rem 3rem;
|
||||
}
|
||||
}
|
||||
@@ -84,5 +84,13 @@ section#powered-by {
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
&.source-link--floated{
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg|a:link,
|
||||
svg|a:visited {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,15 +1,16 @@
|
||||
section#products {
|
||||
transform-style: preserve-3d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 3rem;
|
||||
|
||||
|
||||
.subsection {
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
|
||||
.heading{
|
||||
.heading {
|
||||
transition: var(--t-simple);
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -18,7 +19,7 @@ section#products {
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
|
||||
.product__subheader{
|
||||
.product__subheader {
|
||||
font-weight: 500;
|
||||
color: var(--c-text-primary);
|
||||
text-transform: uppercase;
|
||||
@@ -35,12 +36,12 @@ section#products {
|
||||
padding: 2rem;
|
||||
//transition: var(--t-simple);
|
||||
.heading h1 {
|
||||
line-height: .8;
|
||||
line-height: 0.8;
|
||||
}
|
||||
&:hover{
|
||||
&:hover {
|
||||
.heading {
|
||||
transform: scale(1.1);
|
||||
> *{
|
||||
> * {
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
@@ -50,8 +51,9 @@ section#products {
|
||||
// }
|
||||
}
|
||||
}
|
||||
&:first-of-type a {
|
||||
&.subsection--buy a {
|
||||
align-items: center;
|
||||
|
||||
.heading {
|
||||
//left: 6rem;
|
||||
//top: 6rem;
|
||||
@@ -61,36 +63,54 @@ section#products {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.product__subheader{
|
||||
|
||||
.product__subheader {
|
||||
}
|
||||
background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
|
||||
svg{
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 0.05)
|
||||
);
|
||||
svg {
|
||||
width: 27.5vw;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
&:last-of-type a {
|
||||
align-items: flex-start;
|
||||
.heading {
|
||||
// right: 6rem;
|
||||
// top: 6rem;
|
||||
// position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
h1{
|
||||
letter-spacing: .5rem;
|
||||
}
|
||||
.product__subheader{
|
||||
&.subsection--diy {
|
||||
position: absolute;
|
||||
bottom: -5rem;
|
||||
background-color: var(--c-bkg);
|
||||
a {
|
||||
|
||||
}
|
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
|
||||
svg{
|
||||
width: 27.5vw;
|
||||
position: absolute;
|
||||
&:hover {
|
||||
.heading {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
padding: 1rem;
|
||||
align-items: flex-start;
|
||||
.heading {
|
||||
// right: 6rem;
|
||||
// top: 6rem;
|
||||
// position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
h1 {
|
||||
letter-spacing: 0.5rem;
|
||||
}
|
||||
.product__subheader {
|
||||
}
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0.25)
|
||||
);
|
||||
svg {
|
||||
width: 27.5vw;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ section#support {
|
||||
padding: 6rem;
|
||||
//margin-bottom: 6rem;
|
||||
gap: 3rem;
|
||||
//transform: translate(0px,0px);
|
||||
.cols {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<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=""/>
|
||||
<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>
|
||||
<div id="logo">
|
||||
<h1>
|
||||
|
||||
@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<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=""/>
|
||||
<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>
|
||||
<div id="logo">
|
||||
<h1>
|
||||
|
||||
@@ -31,7 +31,7 @@ layout: layouts/base.njk
|
||||
|
||||
</script> #}
|
||||
|
||||
<link rel="stylesheet" href="assets/styles/landing.css">
|
||||
<link rel="stylesheet" href="/assets/styles/landing.css">
|
||||
<link rel="preload" as="image" href="assets/images/explosion.png">
|
||||
|
||||
<div class="cube">
|
||||
|
||||
@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<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=""/>
|
||||
<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>
|
||||
<div id="logo">
|
||||
<h1>
|
||||
|
||||
@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<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=""/>
|
||||
<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>
|
||||
<div id="logo">
|
||||
<h1>
|
||||
|
||||
Reference in New Issue
Block a user