mirror of
https://github.com/Start9Labs/start9.com.git
synced 2026-03-26 10:21:54 +00:00
turned off lazy loading, refactored js, image tweaks, css tweaks, be-your-own rennovation
This commit is contained in:
Spencer Flagg
@@ -19,10 +19,10 @@ module.exports = function (eleventyConfig) {
|
||||
//plugins
|
||||
eleventyConfig.addPlugin(eleventySass);
|
||||
|
||||
eleventyConfig.addPlugin(lazyImagesPlugin, {
|
||||
imgSelector: 'img:not(.unlazy)', // custom image selector
|
||||
//cacheFile: '', // don't cache results to a file
|
||||
});
|
||||
// eleventyConfig.addPlugin(lazyImagesPlugin, {
|
||||
// imgSelector: 'img:not(.unlazy)', // custom image selector
|
||||
// //cacheFile: '', // don't cache results to a file
|
||||
// });
|
||||
|
||||
return {
|
||||
dir: { input: "src", output: "_site", data: "_data" },
|
||||
|
||||
3
index.js
3
index.js
@@ -2,3 +2,6 @@
|
||||
// eslint-disable-next-line no-global-assign
|
||||
require = require("esm")(module/* , options */)
|
||||
module.exports = require("./main.js")
|
||||
|
||||
gsap.registerPlugin(DrawSVGPlugin);
|
||||
gsap.registerPlugin(CustomEase);
|
||||
@@ -1,54 +1,67 @@
|
||||
[
|
||||
{
|
||||
"name": "Whatsapp",
|
||||
"slug": "whatsapp",
|
||||
"url": "https://start9.com/marketplace/175"
|
||||
},
|
||||
{
|
||||
"name": "Twitter",
|
||||
"slug": "twitter",
|
||||
"url": "https://start9.com/marketplace/175"
|
||||
},
|
||||
{
|
||||
"name": "Lastpass",
|
||||
"slug": "lastpass",
|
||||
"url": "https://start9.com/marketplace/199"
|
||||
},
|
||||
{
|
||||
"name": "bank",
|
||||
"slug": "bank",
|
||||
"url": "https://start9.com/marketplace/148"
|
||||
},
|
||||
{
|
||||
"name": "Github",
|
||||
"slug": "github",
|
||||
"url": "https://start9.com/marketplace/126"
|
||||
},
|
||||
{
|
||||
"name": "Google Drive",
|
||||
"slug": "google-drive",
|
||||
"url": "https://start9.com/marketplace/186"
|
||||
},
|
||||
{
|
||||
"name": "iPhotos",
|
||||
"slug": "iphotos",
|
||||
"url": "https://start9.com/marketplace/119"
|
||||
},
|
||||
{
|
||||
"name": "Coinbase",
|
||||
"slug": "coinbase",
|
||||
"url": "https://start9.com/marketplace/132"
|
||||
},
|
||||
{
|
||||
"name": "GoFundMe",
|
||||
"slug": "gofundme",
|
||||
"url": "https://start9.com/marketplace/165"
|
||||
},
|
||||
{
|
||||
"name": "PayPal",
|
||||
"slug": "paypal",
|
||||
"url": "https://start9.com/marketplace/165"
|
||||
},
|
||||
{
|
||||
"name": "iMessage",
|
||||
"slug": "imessage",
|
||||
"url": "https://start9.com/marketplace/165"
|
||||
},
|
||||
{
|
||||
"name": "KeePass",
|
||||
"slug": "keepass",
|
||||
"url": "https://start9.com/marketplace/165"
|
||||
},
|
||||
{
|
||||
"name": "Kickstarter",
|
||||
"slug": "kickstarter",
|
||||
"url": "https://start9.com/marketplace/165"
|
||||
}
|
||||
]
|
||||
@@ -1,141 +1,186 @@
|
||||
[
|
||||
{
|
||||
"name": "Synapse",
|
||||
"slug": "synapse",
|
||||
"description": "Synapse is the battle-tested, reference implementation of the Matrix protocol. Matrix is a next-generation, federated, full-featured, encrypted, independent messaging system. There are no trusted third parties involved. (see matrix.org for details).",
|
||||
"categories": ["communications"],
|
||||
"pseudoservices": [
|
||||
"whatsapp","imessage"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Mastodon",
|
||||
"slug": "mastodon",
|
||||
"description": "Mastodon is a free, open-source social network server based on ActivityPub where users can follow friends and discover new ones. On Mastodon, users can publish anything they want: links, pictures, text, video. All Mastodon servers are interoperable as a federated network (users on one server can seamlessly communicate with users from another one, including non-Mastodon software that implements ActivityPub)!",
|
||||
"categories": ["communications"],
|
||||
"pseudoservices": [
|
||||
"twitter"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Vaultwarden",
|
||||
"slug": "vaultwarden",
|
||||
"description": "Vaultwarden is a lightweight and secure password manager for storing and autofilling sensitive information such as usernames and passwords, credit cards, identities, and notes. It is an alternative implementation of the Bitwarden server API written in Rust and compatible with upstream Bitwarden clients. All data is stored in an encrypted vault on your Embassy.",
|
||||
"categories": ["data"],
|
||||
"pseudoservices": [
|
||||
"lastpass","keepass"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Balance of Satoshis",
|
||||
"slug": "balanceofsatoshis",
|
||||
"description": "",
|
||||
"categories": ["plebnet-tools"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Bitcoin Core",
|
||||
"slug": "bitcoind",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["bank"]
|
||||
},
|
||||
{
|
||||
"name": "Bitcoin Proxy",
|
||||
"slug": "btc-rpc-proxy",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "BTCPay Server",
|
||||
"slug": "btcpayserver",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["kickstarter","gofundme"]
|
||||
},
|
||||
{
|
||||
"name": "Core Lightning",
|
||||
"slug": "c-lightning",
|
||||
"description": "",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal","coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "electrs",
|
||||
"slug": "electrs",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "lightning Jet",
|
||||
"slug": "lightning-jet",
|
||||
"description": "",
|
||||
"categories": ["plebnet-tools"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Lightning Network Daemon",
|
||||
"slug": "lnd",
|
||||
"description": "",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal","coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "Lightning Terminal",
|
||||
"slug": "lightning-terminal",
|
||||
"description": "",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "LNDg",
|
||||
"slug": "lndg",
|
||||
"description": "",
|
||||
"categories": ["plebnet-tools"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Mempool",
|
||||
"slug": "mempool",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["bank"]
|
||||
},
|
||||
{
|
||||
"name": "Ride the Lightning",
|
||||
"slug": "ride-the-lightning",
|
||||
"description": "",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal","coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "Spark Wallet",
|
||||
"slug": "spark-wallet",
|
||||
"description": "",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal"]
|
||||
},
|
||||
{
|
||||
"name": "Specter",
|
||||
"slug": "specter",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Sphinx Chat",
|
||||
"slug": "sphinx-relay",
|
||||
"description": "",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["whatsapp","imessage"]
|
||||
},
|
||||
{
|
||||
"name": "Thunderhub",
|
||||
"slug": "thunderhub",
|
||||
"description": "",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["paypal","coinbase"]
|
||||
}
|
||||
]
|
||||
{
|
||||
"name": "Synapse",
|
||||
"slug": "synapse",
|
||||
"description": "A battle-tested implementation of the Matrix protocol, the killer of all messaging apps.",
|
||||
"color": "#666666",
|
||||
"categories": ["communications"],
|
||||
"pseudoservices": ["whatsapp", "imessage"]
|
||||
},
|
||||
{
|
||||
"name": "Mastodon",
|
||||
"slug": "mastodon",
|
||||
"description": "A free, open-source social network server",
|
||||
"color": "#6364ff",
|
||||
"categories": ["communications"],
|
||||
"pseudoservices": ["twitter"]
|
||||
},
|
||||
{
|
||||
"name": "Vaultwarden",
|
||||
"slug": "vaultwarden",
|
||||
"description": "Secure password management",
|
||||
"color": "#175ddc",
|
||||
"categories": ["data"],
|
||||
"pseudoservices": ["lastpass", "keepass"]
|
||||
},
|
||||
{
|
||||
"name": "Balance of Satoshis",
|
||||
"slug": "balanceofsatoshis",
|
||||
"description": "A tool for working with the balance of your satoshis on LND.",
|
||||
"color": "#",
|
||||
"categories": ["plebnet-tools"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Bitcoin Core",
|
||||
"slug": "bitcoind",
|
||||
"description": "A Bitcoin Full Node by Bitcoin Core.",
|
||||
"color": "#f2a900",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["bank"]
|
||||
},
|
||||
{
|
||||
"name": "Bitcoin Proxy",
|
||||
"slug": "btc-rpc-proxy",
|
||||
"description": "Super charge your Bitcoin node.",
|
||||
"color": "#",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "BTCPay Server",
|
||||
"slug": "btcpayserver",
|
||||
"description": "Bitcoin and cryptocurrency payment processor and POS system.",
|
||||
"color": "#51b13e",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["kickstarter", "gofundme"]
|
||||
},
|
||||
{
|
||||
"name": "Core Lightning",
|
||||
"slug": "c-lightning",
|
||||
"description": "An implementation of the Lightning Network protocol by Blockstream.",
|
||||
"color": "#ffe95f",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal", "coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "electrs",
|
||||
"slug": "electrs",
|
||||
"description": "",
|
||||
"color": "#",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "lightning Jet",
|
||||
"slug": "lightning-jet",
|
||||
"description": "",
|
||||
"color": "#",
|
||||
"categories": ["plebnet-tools"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Lightning Network Daemon",
|
||||
"slug": "lnd",
|
||||
"description": "A complete implementation of a Lightning Network node by Lightning Labs.",
|
||||
"color": "#338dc9",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal", "coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "Lightning Terminal",
|
||||
"slug": "lightning-terminal",
|
||||
"description": "Your Home for Lightning Liquidity",
|
||||
"color": "#570380",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "LNDg",
|
||||
"slug": "lndg",
|
||||
"description": "Powerful web interface for LND developed specifically for LND Routing Node Operators",
|
||||
"color": "#",
|
||||
"categories": ["plebnet-tools"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Mempool",
|
||||
"slug": "mempool",
|
||||
"description": "A Bitcoin node and network visualizer.",
|
||||
"color": "#8884f7",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["bank"]
|
||||
},
|
||||
{
|
||||
"name": "Ride the Lightning",
|
||||
"slug": "ride-the-lightning",
|
||||
"description": "",
|
||||
"color": "#bdbdbd",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal", "coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "Spark Wallet",
|
||||
"slug": "spark-wallet",
|
||||
"description": "A minimalistic wallet GUI for Core Lightning (CLN).",
|
||||
"color": "#2c384c",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["paypal"]
|
||||
},
|
||||
{
|
||||
"name": "Specter",
|
||||
"slug": "specter",
|
||||
"description": "A desktop GUI for Bitcoin Core optimised to work with hardware wallets.",
|
||||
"color": "#e80001",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": []
|
||||
},
|
||||
{
|
||||
"name": "Sphinx Chat",
|
||||
"slug": "sphinx-relay",
|
||||
"description": "Chat on the lightning Network.",
|
||||
"color": "#618aff",
|
||||
"categories": ["lightning"],
|
||||
"pseudoservices": ["whatsapp", "imessage"]
|
||||
},
|
||||
{
|
||||
"name": "Thunderhub",
|
||||
"slug": "thunderhub",
|
||||
"description": "LND Lightning Node Manager in your Browser",
|
||||
"color": "#2b3885",
|
||||
"categories": ["bitcoin"],
|
||||
"pseudoservices": ["paypal", "coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "Ghost",
|
||||
"slug": "ghost",
|
||||
"description": "A self-hosted blogging platform.",
|
||||
"color": "#bfbfbe",
|
||||
"categories": ["communications"],
|
||||
"pseudoservices": ["paypal", "coinbase"]
|
||||
},
|
||||
{
|
||||
"name": "Photoview",
|
||||
"slug": "photoview",
|
||||
"description": "An easy way to organize and share personal photos.",
|
||||
"color": "#ff692c",
|
||||
"categories": ["data"],
|
||||
"pseudoservices": ["iphotos"]
|
||||
},
|
||||
{
|
||||
"name": "Syncthing",
|
||||
"slug": "syncthing",
|
||||
"description": "Synchronizes files between devices in real time, safely protected from prying eyes.",
|
||||
"color": "#1191ce",
|
||||
"categories": ["data"],
|
||||
"pseudoservices": ["google-drive"]
|
||||
},
|
||||
{
|
||||
"name": "Gitea",
|
||||
"slug": "gitea",
|
||||
"description": "A painless, self-hosted git service.",
|
||||
"color": "#609926",
|
||||
"categories": ["data"],
|
||||
"pseudoservices": ["github"]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<footer>
|
||||
<div class="footer__content">
|
||||
<div class="header">
|
||||
<img src="../assets/images/start9_logo.png" alt="">
|
||||
{% include "components/svg/logo.svg" %}
|
||||
<div class="footer__copyright">{{ site.footer.copyright }}</div>
|
||||
<div class="footer__donate">[btcpay widget]</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<header>
|
||||
<nav>
|
||||
<a class="header__logo" href="/" aria-label="Return Home"><img src="../assets/images/start9_logo.png" alt=""></a>
|
||||
<a class="header__logo" href="/" aria-label="Return Home">
|
||||
{% include "components/svg/logo.svg" %}
|
||||
</a>
|
||||
<ul>
|
||||
{% for group in menu|selectattr("inHeader") %}
|
||||
{% for item in group.items %}
|
||||
|
||||
46
src/_includes/components/landing/be-your-own copy.njk
Normal file
46
src/_includes/components/landing/be-your-own copy.njk
Normal file
@@ -0,0 +1,46 @@
|
||||
<section id="be-your-own">
|
||||
<h1>be
|
||||
<em>your own</em>
|
||||
everything</h1>
|
||||
<p>Anything you can do in the <a href="https://en.wikipedia.org/wiki/Censorship_by_Apple#App_Store" target="_blank">permissioned</a>, <a href="https://www.computerworld.com/article/3634591/the-problem-with-the-subscription-economy.html" target="_blank">subscription-based</a>, <a href="https://en.wikipedia.org/wiki/Privacy_concerns_regarding_Google" target="_blank">privacy-invading</a>, <a target="_blank" href="https://dataprot.net/articles/biggest-data-breaches/">insecure</a> model of cloud computing, you
|
||||
can also do in the open, free, private, secure model of <em>sovereign computing</em>.</p>
|
||||
<div id='ticker'>
|
||||
<div id="ticker__selected-frame">
|
||||
<span>be your own</span>
|
||||
{# <div id="services"></div> #}
|
||||
</div>
|
||||
<div id="ticker__window">
|
||||
<ul class='pseudoservices'>
|
||||
{% for pseudoservice in pseudoservices %}
|
||||
<li class="pseudoservice">{{ pseudoservice.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for pseudoservice in pseudoservices %}
|
||||
<div class="slides-container slides-container--{{ pseudoservice.slug }}">
|
||||
<ul class="slides-inner">
|
||||
{% for service in services %}
|
||||
{% if pseudoservice.slug in service.pseudoservices %}
|
||||
<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"/>
|
||||
<div class="service__name">{{ service.name }}</div>
|
||||
{# <div class="service__desc">{{ service.description }}</div> #}
|
||||
</a>
|
||||
{# <a href="">{% include "components/svg/chevron-right.svg" %}</a> #}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="slides-controls">
|
||||
<button id="prevButton">{% include "components/svg/chevron-left.svg" %}</button>
|
||||
<button id="nextButton">{% include "components/svg/chevron-right.svg" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>
|
||||
</section>
|
||||
@@ -2,8 +2,8 @@
|
||||
<h1>be
|
||||
<em>your own</em>
|
||||
everything</h1>
|
||||
<p>Anything you can do in the permissioned, subscription-based, privacy-invading, insecure model of cloud computing, you
|
||||
can also do in the open, free, private, secure model of sovereign computing</p>
|
||||
<p>Anything you can do in the <a href="https://en.wikipedia.org/wiki/Censorship_by_Apple#App_Store" target="_blank">permissioned</a>, <a href="https://www.computerworld.com/article/3634591/the-problem-with-the-subscription-economy.html" target="_blank">subscription-based</a>, <a href="https://en.wikipedia.org/wiki/Privacy_concerns_regarding_Google" target="_blank">privacy-invading</a>, <a target="_blank" href="https://dataprot.net/articles/biggest-data-breaches/">insecure</a> model of cloud computing, you
|
||||
can also do in the open, free, private, secure model of <em>sovereign computing</em>.</p>
|
||||
<div id='ticker'>
|
||||
<div id="ticker__selected-frame">
|
||||
<span>be your own</span>
|
||||
@@ -18,28 +18,24 @@
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for pseudoservice in pseudoservices %}
|
||||
<div class="slides-container slides-container--{{ pseudoservice.name.toLowerCase() }}">
|
||||
<ul class="slides-inner">
|
||||
<div class="service-container service-container--{{ pseudoservice.slug }}">
|
||||
{% for service in services %}
|
||||
{% if pseudoservice.name.toLowerCase() in service.pseudoservices %}
|
||||
<li class="service slide">
|
||||
{# <a href="">{% include "components/svg/chevron-left.svg" %}</a> #}
|
||||
<a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
|
||||
<img class="service__image" src="../assets/images/service-icons/{{ service.slug }}.png" alt=""/>
|
||||
<div class="service__name">{{ service.name }}</div>
|
||||
{# <div class="service__desc">{{ service.description }}</div> #}
|
||||
</a>
|
||||
{# <a href="">{% include "components/svg/chevron-right.svg" %}</a> #}
|
||||
</li>
|
||||
{% 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"
|
||||
style="filter: drop-shadow(0px 0px 3rem {{ service.color }}C0)"/>
|
||||
<div class="service__info">
|
||||
<h3 class="service__name">{{ service.name }}</h3>
|
||||
<p class="service__desc">{{ service.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="service__bkg" style="background: linear-gradient(180deg, {{ service.color }}00 0%, {{ service.color }}C0 30%, {{ service.color }}FF 50%, {{ service.color }}C0 66%, {{ service.color }}00 100%);"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="slides-controls">
|
||||
<button id="prevButton">{% include "components/svg/chevron-left.svg" %}</button>
|
||||
<button id="nextButton">{% include "components/svg/chevron-right.svg" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>
|
||||
|
||||
@@ -21,7 +21,8 @@
|
||||
<img
|
||||
class="service-icon service-icon--{{ service.slug }}"
|
||||
src="../assets/images/service-icons/{{ service.slug }}.png"
|
||||
alt=""/>
|
||||
alt="{{ service.name }} embassyos service icon"
|
||||
alt="{{ service.name }} embassyos service icon"/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -4,8 +4,9 @@
|
||||
<div class="col">
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<p style="color: black;">Interested in packaging a service?</p>
|
||||
<p style="color: black;">Our community runs on devs like <em>you</em>.</p>
|
||||
<p>Interested in packaging a service?<br/><em>Our community runs on devs like you.</em></p>
|
||||
<p>There are <a href="https://github.com/awesome-selfhosted/awesome-selfhosted" target="_blank">thousands</a> of wonderful open-source services out there - just waiting to be added to the Embassy Marketplace.</p>
|
||||
<p>If you're familiar with Docker or Rust (or want to learn!), check out our step-by-step packaging tutorials.</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a class="btn" href="{{ site.dev.url }}">learn more</a>
|
||||
@@ -13,7 +14,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="code-wrapper"><img src="assets/images/dockerfile.png" alt=""></div>
|
||||
<div class="code-wrapper"><img src="assets/images/dockerfile.png" alt="screenshot of dockerfile" title="screenshot of dockerfile"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,10 +1,10 @@
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<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="">
|
||||
<img src="assets/images/explosion.png" alt="voxel explosion" title="voxel explosion">
|
||||
<img 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="">
|
||||
{% include "components/svg/logo.svg" %}
|
||||
<span>sovereign computing</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
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 class="image-with-shadow">
|
||||
{% include "components/svg/big-tech-network-diagram.svg" %}
|
||||
<div class="img-shadow">{% include "components/svg/big-tech-network-diagram.svg" %}</div>
|
||||
</div> #}
|
||||
{% include "components/svg/big-tech-network-diagram.svg" %}
|
||||
</div>
|
||||
{# {% include "components/svg/big-tech-network-diagram.svg" %} #}
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<h1>Take back
|
||||
@@ -25,10 +25,10 @@
|
||||
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">
|
||||
{% 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_red_extended.svg" %}
|
||||
<div class="image-with-shadow">
|
||||
{% include "components/svg/embassyos-network-diagram_red_extended.svg" %}
|
||||
<div class="img-shadow">{% include "components/svg/embassyos-network-diagram_red_extended.svg" %}</div>
|
||||
</div>
|
||||
{# {% include "components/svg/embassyos-network-diagram_red_extended.svg" %} #}
|
||||
</div>
|
||||
</section>
|
||||
@@ -2,23 +2,20 @@
|
||||
<h1>Powered by <em>EmbassyOS</em></h1>
|
||||
<div>
|
||||
<p>
|
||||
In the past, running a server was only possible for highly technical people or those who could afford to hire them;
|
||||
namely software developers, corporations, wealthy individuals, and politicians. Start9 levels the playing field by
|
||||
making it possible for the rest of us.
|
||||
</p>
|
||||
<p>
|
||||
EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to turn anyone into a
|
||||
system’s administrator capable of managing their own server.
|
||||
EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to <em>
|
||||
turn anyone into a
|
||||
system administrator
|
||||
</em> capable of managing their own server.
|
||||
</p>
|
||||
</div>
|
||||
<div class="image-with-shadow">
|
||||
{% include "components/svg/stack.svg" %}
|
||||
<div class="img-shadow">{% include "components/svg/stack.svg" %}</div>
|
||||
{% include "components/svg/stack-new.svg" %}
|
||||
<div class="img-shadow">{% include "components/svg/stack-new.svg" %}</div>
|
||||
</div>
|
||||
<a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
|
||||
<div class="image-with-shadow">
|
||||
<img src="../assets/images/code1.png" alt=""/>
|
||||
<img class="img-shadow" src="../assets/images/code1.png" 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>
|
||||
</section>
|
||||
@@ -1,7 +1,7 @@
|
||||
<section id="products">
|
||||
<div class="subsection">
|
||||
<a class="product product--buy" href="{{ site.products.buyUrl }}">
|
||||
<img 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>
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<a class="product product--diy" href="{{ site.products.diyUrl }}">
|
||||
<img 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>
|
||||
|
||||
@@ -14,7 +14,9 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="../assets/images/support1.png" alt="">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn" href="{{ site.support.url }}">meet the team</a>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 104 KiB |
19
src/_includes/components/svg/logo.svg
Normal file
19
src/_includes/components/svg/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
22
src/_includes/components/svg/stack-new.svg
Normal file
22
src/_includes/components/svg/stack-new.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 66 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.7 KiB |
@@ -12,4 +12,6 @@ layout: layouts/base.njk
|
||||
<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="{{ '/assets/js/_header.js' | url }}"></script>
|
||||
<script src="{{ '/assets/js/_menu.js' | url }}"></script>
|
||||
<script src="{{ '/assets/js/peripheral.js' | url }}"></script>
|
||||
@@ -6,7 +6,7 @@ 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=""/>
|
||||
<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">
|
||||
@@ -49,12 +49,12 @@ 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=""/>
|
||||
<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=""/>
|
||||
<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>
|
||||
@@ -63,7 +63,7 @@ layout: layouts/peripheral.njk
|
||||
<section id="values">
|
||||
<h2>values</h2>
|
||||
<div class="section__image">
|
||||
<img 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>
|
||||
@@ -93,7 +93,7 @@ layout: layouts/peripheral.njk
|
||||
<section id="virtues">
|
||||
<h2>virtues</h2>
|
||||
<div class="section__image">
|
||||
<img 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>
|
||||
@@ -118,7 +118,7 @@ layout: layouts/peripheral.njk
|
||||
<section id="origin">
|
||||
<h2>origin story</h2>
|
||||
<div class="section__image">
|
||||
<img 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>
|
||||
@@ -166,14 +166,14 @@ layout: layouts/peripheral.njk
|
||||
<section id="team">
|
||||
<h2>our team</h2>
|
||||
<div class="section__image">
|
||||
<img 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">
|
||||
{% for member in team %}
|
||||
<li class="member">
|
||||
<img class="member__avatar" src="{{ member.avatar_url }}" alt=""/>
|
||||
<img class="member__avatar" src="{{ member.avatar_url }}" alt="{{ member.name }}'s avatar" title="{{ member.name }}'s avatar"/>
|
||||
<div class="member__content">
|
||||
<h4>{{ member.name }}</h4>
|
||||
<h5>{{ member.position }}</h5>
|
||||
|
||||
BIN
src/assets/images/service-icons/ghost.png
Normal file
BIN
src/assets/images/service-icons/ghost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
src/assets/images/service-icons/gitea.png
Normal file
BIN
src/assets/images/service-icons/gitea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/images/service-icons/photoview.png
Normal file
BIN
src/assets/images/service-icons/photoview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/service-icons/syncthing.png
Normal file
BIN
src/assets/images/service-icons/syncthing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
26
src/assets/js/_header.js
Normal file
26
src/assets/js/_header.js
Normal file
@@ -0,0 +1,26 @@
|
||||
//////////////////////////////////////////
|
||||
// HEADER
|
||||
|
||||
gsap.to("header", {
|
||||
duration: 0.5,
|
||||
backgroundColor: "rgba(0,0,0,0.1)",
|
||||
backdropFilter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-image",
|
||||
scrub: true,
|
||||
start: "center top", // "triggerElement page"
|
||||
end: "bottom top", // "triggerElement page"
|
||||
},
|
||||
});
|
||||
|
||||
gsap.to(".header__logo", {
|
||||
duration: 0.5,
|
||||
opacity: "1",
|
||||
filter: "blur(0px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-image",
|
||||
scrub: true,
|
||||
start: "center top", // "triggerElement page"
|
||||
end: "bottom top", // "triggerElement page"
|
||||
},
|
||||
});
|
||||
18
src/assets/js/_hero.js
Normal file
18
src/assets/js/_hero.js
Normal file
@@ -0,0 +1,18 @@
|
||||
//////////////////////////////////////////
|
||||
// HERO
|
||||
|
||||
gsap.from("#hero-image", {
|
||||
duration: 1,
|
||||
//y: "-10rem",
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
filter: "blur(10px)",
|
||||
delay: 0.5,
|
||||
});
|
||||
gsap.from("#logo", {
|
||||
duration: 0.5,
|
||||
y: "-5rem",
|
||||
opacity: 0,
|
||||
delay: 1.25,
|
||||
//ease: "in-out"
|
||||
});
|
||||
30
src/assets/js/_menu.js
Normal file
30
src/assets/js/_menu.js
Normal file
@@ -0,0 +1,30 @@
|
||||
//////////////////////////////////////////
|
||||
// MENU
|
||||
|
||||
let menuOpen = document.getElementById("menu-open"),
|
||||
menuClose = document.getElementById("menu-close"),
|
||||
openedMenuArray = gsap.utils.toArray(".opened-menu"),
|
||||
closedMenuArray = gsap.utils.toArray(".closed-menu");
|
||||
|
||||
menuOpen.addEventListener("click", (e) => openMenu(e));
|
||||
menuClose.addEventListener("click", (e) => closeMenu(e));
|
||||
|
||||
function openMenu(e) {
|
||||
e.preventDefault();
|
||||
gsap.to("#menu", { y: "0vh" });
|
||||
gsap.to("main", { y: "100vh" });
|
||||
gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
|
||||
gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
|
||||
gsap.to("html", { overflow: "hidden" });
|
||||
document.querySelector('html').classList.add("menu-is-open");
|
||||
}
|
||||
function closeMenu(e) {
|
||||
e.preventDefault();
|
||||
gsap.to("#menu", { y: "-100vh" });
|
||||
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");
|
||||
}
|
||||
@@ -1,6 +1,3 @@
|
||||
gsap.registerPlugin(DrawSVGPlugin);
|
||||
gsap.registerPlugin(CustomEase);
|
||||
|
||||
var bodyRect = document.body.getBoundingClientRect();
|
||||
|
||||
const sections = [
|
||||
@@ -61,55 +58,9 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
|
||||
// });
|
||||
// }, 2000);
|
||||
|
||||
//////////////////////////////////////////
|
||||
// MENU
|
||||
|
||||
let menuOpen = document.getElementById("menu-open"),
|
||||
menuClose = document.getElementById("menu-close"),
|
||||
openedMenuArray = gsap.utils.toArray(".opened-menu"),
|
||||
closedMenuArray = gsap.utils.toArray(".closed-menu");
|
||||
|
||||
menuOpen.addEventListener("click", (e) => openMenu(e));
|
||||
menuClose.addEventListener("click", (e) => closeMenu(e));
|
||||
|
||||
function openMenu(e) {
|
||||
e.preventDefault();
|
||||
gsap.to("#menu", { y: "0vh" });
|
||||
gsap.to("main", { y: "100vh" });
|
||||
gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
|
||||
gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
|
||||
gsap.to("html", { overflow: "hidden" });
|
||||
document.querySelector('html').classList.add("menu-is-open");
|
||||
}
|
||||
function closeMenu(e) {
|
||||
e.preventDefault();
|
||||
gsap.to("#menu", { y: "-100vh" });
|
||||
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");
|
||||
}
|
||||
|
||||
//////////////////////////////////////////
|
||||
// HERO
|
||||
|
||||
gsap.from("#hero-image", {
|
||||
duration: 1,
|
||||
//y: "-10rem",
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
filter: "blur(10px)",
|
||||
delay: 0.5,
|
||||
});
|
||||
gsap.from("#logo", {
|
||||
duration: 0.5,
|
||||
y: "-5rem",
|
||||
opacity: 0,
|
||||
delay: 1.25,
|
||||
//ease: "in-out"
|
||||
});
|
||||
//gsap.config({trialWarn: false});
|
||||
|
||||
// create the smooth scroller FIRST!
|
||||
@@ -123,32 +74,7 @@ gsap.from("#logo", {
|
||||
// backdrop-filter: blur(10px);
|
||||
//background-color: rgba(0,0,0,0.1);
|
||||
|
||||
//////////////////////////////////////////
|
||||
// HEADER
|
||||
|
||||
gsap.to("header", {
|
||||
duration: 0.5,
|
||||
backgroundColor: "rgba(0,0,0,0.1)",
|
||||
backdropFilter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-image",
|
||||
scrub: true,
|
||||
start: "center top", // "triggerElement page"
|
||||
end: "bottom top", // "triggerElement page"
|
||||
},
|
||||
});
|
||||
|
||||
gsap.to(".header__logo", {
|
||||
duration: 0.5,
|
||||
opacity: "1",
|
||||
filter: "blur(0px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-image",
|
||||
scrub: true,
|
||||
start: "center top", // "triggerElement page"
|
||||
end: "bottom top", // "triggerElement page"
|
||||
},
|
||||
});
|
||||
|
||||
gsap.from("#hero-to-pitch path:first-child", {
|
||||
drawSVG: 0,
|
||||
@@ -398,7 +324,7 @@ function positionServiceIcons() {
|
||||
|
||||
function onResizeComplete() {
|
||||
positionServiceIcons();
|
||||
};
|
||||
}
|
||||
var resizeTimeout = setTimeout(onResizeComplete, 400);
|
||||
window.onresize = function() {
|
||||
clearTimeout(resizeTimeout);
|
||||
@@ -457,23 +383,37 @@ gsap.from("#be-your-own #ticker", {
|
||||
},
|
||||
});
|
||||
|
||||
let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
|
||||
next = 3, // time to change
|
||||
let pseudoserviceArray, next, itemHeight, listHeight, windowHeight, kerplunk, kerplunk2;
|
||||
|
||||
pseudoserviceArray = gsap.utils.toArray(".pseudoservice");
|
||||
|
||||
next = 4;
|
||||
|
||||
function initializeSizes() {
|
||||
|
||||
itemHeight = document
|
||||
.querySelector(".pseudoservice")
|
||||
.getBoundingClientRect().height,
|
||||
.getBoundingClientRect().height;
|
||||
|
||||
listHeight = document
|
||||
.querySelector(".pseudoservices")
|
||||
.getBoundingClientRect().height,
|
||||
windowHeight = document.getElementById("ticker__window").clientHeight,
|
||||
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 "
|
||||
),
|
||||
kerplunk2 = CustomEase.create(
|
||||
"custom",
|
||||
"M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
|
||||
);
|
||||
.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 "
|
||||
);
|
||||
|
||||
kerplunk2 = CustomEase.create(
|
||||
"custom",
|
||||
"M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
|
||||
);
|
||||
|
||||
function crossfade() {
|
||||
var action = gsap
|
||||
@@ -495,10 +435,10 @@ function crossfade() {
|
||||
|
||||
var thisPseudoservice = pseudoserviceArray[2].innerHTML,
|
||||
thisElement = document.querySelector(
|
||||
".slides-container--" + thisPseudoservice.toLowerCase()
|
||||
".service-container--" + thisPseudoservice.toLowerCase().replace(' ','-')
|
||||
);
|
||||
|
||||
var slidesContainerArray = document.querySelectorAll(".slides-container");
|
||||
var slidesContainerArray = document.querySelectorAll(".service-container");
|
||||
slidesContainerArray.forEach((thisContainer) => {
|
||||
thisContainer.style.display = "none";
|
||||
});
|
||||
@@ -511,101 +451,104 @@ 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();
|
||||
}
|
||||
// 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 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 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;
|
||||
// var numSlides = slides.length;
|
||||
|
||||
gsap.set(slides, {
|
||||
xPercent: (i) => i * 100,
|
||||
});
|
||||
// gsap.set(slides, {
|
||||
// xPercent: (i) => i * 100,
|
||||
// });
|
||||
|
||||
var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 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 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;
|
||||
// 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);
|
||||
});
|
||||
// prevButton.addEventListener("click", function () {
|
||||
// animateSlides(1);
|
||||
// });
|
||||
|
||||
nextButton.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);
|
||||
// function animateSlides(direction) {
|
||||
// slideAnimation.kill();
|
||||
// var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
|
||||
|
||||
slideAnimation = gsap.to(proxy, {
|
||||
x: x,
|
||||
duration: slideDuration,
|
||||
onUpdate: updateProgress,
|
||||
});
|
||||
}
|
||||
// slideAnimation = gsap.to(proxy, {
|
||||
// x: x,
|
||||
// duration: slideDuration,
|
||||
// onUpdate: updateProgress,
|
||||
// });
|
||||
// }
|
||||
|
||||
function updateProgress() {
|
||||
animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
|
||||
}
|
||||
// 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 snapX(value) {
|
||||
// let snapped = gsap.utils.snap(slideWidth, value);
|
||||
// return wrap
|
||||
// ? snapped
|
||||
// : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
|
||||
// }
|
||||
|
||||
function resize() {
|
||||
var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
|
||||
initializeSizes();
|
||||
|
||||
// var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
|
||||
|
||||
slideWidth = slides[0].offsetWidth;
|
||||
wrapWidth = slideWidth * numSlides;
|
||||
// slideWidth = slides[0].offsetWidth;
|
||||
// wrapWidth = slideWidth * numSlides;
|
||||
|
||||
wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
|
||||
// wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
|
||||
|
||||
gsap.set(proxy, {
|
||||
x: norm * wrapWidth,
|
||||
});
|
||||
// gsap.set(proxy, {
|
||||
// x: norm * wrapWidth,
|
||||
// });
|
||||
|
||||
// animateSlides(0);
|
||||
// slideAnimation.progress(1);
|
||||
|
||||
animateSlides(0);
|
||||
slideAnimation.progress(1);
|
||||
}
|
||||
|
||||
gsap.from("#be-to-powered path", {
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
gsap.to(
|
||||
"header",
|
||||
{
|
||||
duration: 0.5,
|
||||
backgroundColor: "rgba(0,0,0,0.1)",
|
||||
backdropFilter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-image",
|
||||
scrub: true,
|
||||
start: "center top", // "triggerElement page"
|
||||
end: "bottom top", // "triggerElement page"
|
||||
},
|
||||
}
|
||||
);
|
||||
147
src/assets/styles/be-your-own copy.scss
Normal file
147
src/assets/styles/be-your-own copy.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
#be-your-own {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rem;
|
||||
//margin: 0 0 6rem 0;
|
||||
padding: 0 6rem 0 6rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
--size: 3rem;
|
||||
--p-t: calc(0.2 * var(--size));
|
||||
--p-b: calc(0 * var(--size));
|
||||
--p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
|
||||
--line: calc(var(--p-t) + var(--p-b) + var(--size));
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#ticker {
|
||||
height: 50vh;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
#ticker__selected-frame {
|
||||
//outline: 1px solid white;
|
||||
//outline-offset: calc(0.1 * var(--size));
|
||||
font-size: var(--size);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--size);
|
||||
position: absolute;
|
||||
top: calc(2 * var(--line));
|
||||
left: -.5ch;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--size);
|
||||
padding: var(--p);
|
||||
background-color: #353535;
|
||||
border-bottom: 0.5rem #353535 solid;
|
||||
}
|
||||
#ticker__window {
|
||||
height: 50vh;
|
||||
width: calc(100vw - 12rem - 11.5ch);
|
||||
overflow: hidden;
|
||||
font-size: var(--size);
|
||||
left: 11.5ch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.pseudoservices {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: var(--size);
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--size);
|
||||
padding: var(--p);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.services{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(3 * var(--line));
|
||||
background-color: #353535;
|
||||
padding: 2rem;
|
||||
width: calc(11.5ch - 4rem);
|
||||
font-size: var(--size);
|
||||
left: -1rem;
|
||||
|
||||
img{
|
||||
border-radius: 100%;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.service{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.service__content{
|
||||
color: var(--c-1);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a.btn{
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.slides-controls {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
gap: 2rem;
|
||||
|
||||
button{
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.slides-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: absolute;
|
||||
font-size: 90px;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
width: calc(100% / 3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slides-inner {
|
||||
position: relative;
|
||||
height: 7rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,3 +1,41 @@
|
||||
@media screen and (min-width: 900px) {
|
||||
#be-your-own { --size: 3rem;
|
||||
--rows-above: 2;
|
||||
--rows-height: 7;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
#be-your-own {
|
||||
--rows-above: 1;
|
||||
--rows-height: 3;
|
||||
}
|
||||
.service__content{
|
||||
justify-content: center !important;
|
||||
}
|
||||
.service__link{
|
||||
margin: 10rem 0 0 0 !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
.service__info{
|
||||
margin: 0 0 0 1rem !important;
|
||||
&::before{
|
||||
top: 25% !important;
|
||||
left: -4rem !important;
|
||||
align-self: flex-start !important;
|
||||
justify-content: center !important;
|
||||
border-top: 2rem transparent solid !important;
|
||||
border-right: 2rem var(--c-text-accent) solid !important;
|
||||
border-bottom: 2rem transparent solid !important;
|
||||
border-left: 2rem transparent solid !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
#be-your-own { --size: 2rem; }
|
||||
}
|
||||
|
||||
#be-your-own {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -8,7 +46,7 @@
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
--size: 3rem;
|
||||
//--size: 3rem;
|
||||
--p-t: calc(0.2 * var(--size));
|
||||
--p-b: calc(0 * var(--size));
|
||||
--p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
|
||||
@@ -18,91 +56,169 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ticker {
|
||||
height: 50vh;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
#ticker {
|
||||
height: 50vh;
|
||||
#ticker__selected-frame {
|
||||
//outline: 1px solid white;
|
||||
//outline-offset: calc(0.1 * var(--size));
|
||||
font-size: var(--size);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--size);
|
||||
position: absolute;
|
||||
top: calc(var(--rows-above) * var(--line));
|
||||
left: -0.5ch;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--size);
|
||||
padding: var(--p);
|
||||
background-color: #353535;
|
||||
border-bottom: 0.5rem #353535 solid;
|
||||
}
|
||||
#ticker__window {
|
||||
height: calc(var(--rows-height) * var(--line));
|
||||
width: calc(100vw - 12rem - 11.5ch);
|
||||
overflow: hidden;
|
||||
font-size: var(--size);
|
||||
left: 11.5ch;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#ticker__selected-frame {
|
||||
//outline: 1px solid white;
|
||||
//outline-offset: calc(0.1 * var(--size));
|
||||
ul.pseudoservices {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: var(--size);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--size);
|
||||
position: absolute;
|
||||
top: calc(2 * var(--line));
|
||||
left: -.5ch;
|
||||
right: 0;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--size);
|
||||
padding: var(--p);
|
||||
background-color: #353535;
|
||||
border-bottom: 0.5rem #353535 solid;
|
||||
}
|
||||
#ticker__window {
|
||||
height: 50vh;
|
||||
width: calc(100vw - 12rem - 11.5ch);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: var(--size);
|
||||
left: 11.5ch;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.services {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
//background-color: #353535;
|
||||
padding: 2rem;
|
||||
font-size: var(--size);
|
||||
left: -1rem;
|
||||
right: 0;
|
||||
|
||||
img {
|
||||
border-radius: 100%;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
ul.pseudoservices {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: var(--size);
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--size);
|
||||
padding: var(--p);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.services{
|
||||
.service-container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(3 * var(--line));
|
||||
background-color: #353535;
|
||||
padding: 2rem;
|
||||
width: calc(11.5ch - 4rem);
|
||||
font-size: var(--size);
|
||||
left: -1rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
img{
|
||||
border-radius: 100%;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.service{
|
||||
.service__content {
|
||||
width: 100%;
|
||||
color: var(--c-1);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
.service__link{
|
||||
color: var(--c-1);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
margin-right: 5rem;
|
||||
transition: var(--t-simple);
|
||||
&:hover{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.service__image{
|
||||
width: 12rem;
|
||||
&.service__image--gitea, &.service__image--photoview{
|
||||
background-color: var(--c-1);
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.service__info{
|
||||
background-color: var(--c-text-accent);
|
||||
width: 20ch;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
|
||||
|
||||
&::before{
|
||||
position: absolute;
|
||||
top: -4rem;
|
||||
content: '';
|
||||
display: block;
|
||||
//width: 0;
|
||||
//height: 0;
|
||||
border-top: 2rem transparent solid;
|
||||
border-right: 2rem transparent solid;
|
||||
border-bottom: 2rem var(--c-text-accent) solid;
|
||||
border-left: 2rem transparent solid;
|
||||
align-self: center;
|
||||
}
|
||||
*{
|
||||
color: var(--c-text-primary);
|
||||
}
|
||||
p{
|
||||
font-size: .75rem;
|
||||
height: 4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.service__bkg{
|
||||
filter: opacity(0.25) blur(2rem);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:nth-child(n + 2) {
|
||||
outline: 1px solid orange;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a.btn{
|
||||
}
|
||||
a.btn {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.slides-controls {
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -110,7 +226,7 @@
|
||||
min-height: 70px;
|
||||
gap: 2rem;
|
||||
|
||||
button{
|
||||
button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@@ -120,7 +236,7 @@
|
||||
|
||||
.slides-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -129,12 +245,12 @@
|
||||
position: absolute;
|
||||
font-size: 90px;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.9);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
|
||||
width: calc(100% / 3);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -142,6 +258,6 @@
|
||||
.slides-inner {
|
||||
position: relative;
|
||||
height: 7rem;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,10 +16,11 @@
|
||||
gap:1rem;
|
||||
}
|
||||
.wrapper{
|
||||
background-color: var(--c-1);
|
||||
background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
|
||||
max-width: 35ch;
|
||||
padding: 2rem;
|
||||
.content {
|
||||
padding: 1rem;
|
||||
//padding: 1rem;
|
||||
h3{
|
||||
margin: 0;
|
||||
font-family: var(--f-accent);
|
||||
@@ -33,7 +34,7 @@
|
||||
}
|
||||
.footer{
|
||||
padding: 1rem;
|
||||
background: var(--c-spacer);
|
||||
//background: var(--c-spacer);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -42,7 +43,7 @@
|
||||
position: relative;
|
||||
&::before{
|
||||
position: absolute;
|
||||
top: 17rem;
|
||||
top: 15rem;
|
||||
left: -4rem;
|
||||
content: '';
|
||||
display: block;
|
||||
@@ -58,5 +59,6 @@
|
||||
img {
|
||||
width: 20rem;
|
||||
box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
|
||||
border-radius: 1.3rem;
|
||||
}
|
||||
}
|
||||
@@ -7,8 +7,8 @@ footer{
|
||||
display: flex;
|
||||
.header{
|
||||
align-self: flex-start;
|
||||
margin: 5rem 0 0 5rem;
|
||||
img{
|
||||
margin: 1.8rem 0 0 5rem;
|
||||
svg{
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
@@ -105,17 +105,26 @@ footer{
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
footer .groups li > a {
|
||||
font-size: 3.5vmin;
|
||||
}
|
||||
footer .groups{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
footer .groups li {
|
||||
border: 0 !important;
|
||||
footer .footer__content {
|
||||
flex-direction: column;
|
||||
.header{
|
||||
margin: 5rem 0 2.5rem 2.5rem;
|
||||
}
|
||||
.groups .full {
|
||||
grid-row: auto;
|
||||
}
|
||||
.groups li > a {
|
||||
font-size: 3.5vmin;
|
||||
}
|
||||
.groups{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
li {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -39,4 +39,15 @@ section#infographics{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-with-shadow{
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
.img-shadow{
|
||||
width: 100%;
|
||||
svg{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -107,8 +107,9 @@ nav {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
svg {
|
||||
width: 15rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
span{
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -104,6 +104,14 @@ a {
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
|
||||
p a {
|
||||
color: var(--c-text-primary);
|
||||
text-decoration: underline;
|
||||
&:hover{
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
@@ -127,16 +135,33 @@ header{
|
||||
z-index: 2;
|
||||
top:0;
|
||||
|
||||
.header__logo{
|
||||
a.header__logo{
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
margin-top: -.9rem;
|
||||
margin-bottom: -1rem;
|
||||
margin-left: 1rem;
|
||||
height: fit-content;
|
||||
img{
|
||||
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.4rem;
|
||||
stroke: var(--c-text-primary);
|
||||
}
|
||||
svg path:last-child{
|
||||
stroke-width: 0.4rem;
|
||||
stroke: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nav{
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
.header{
|
||||
align-self: flex-start;
|
||||
margin: 5rem 0 0 5rem;
|
||||
img{
|
||||
svg{
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
@@ -60,6 +60,10 @@
|
||||
flex-direction: column;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
--hover-padding: .5rem;
|
||||
--hover-width: calc(100% + (2 * var(--hover-padding)));
|
||||
--hover-nudge: calc(-1 * var(--hover-padding));
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -75,8 +79,8 @@
|
||||
|
||||
&::after{
|
||||
border: var(--b-primary);
|
||||
width: 110%;
|
||||
left: -5%;
|
||||
width: var(--hover-width);
|
||||
left: var(--hover-nudge);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -88,8 +92,8 @@
|
||||
z-index: -1;
|
||||
//border: var(--b-primary);
|
||||
background-color: var(--c-text-accent);
|
||||
width: 110%;
|
||||
left: -5%;
|
||||
width: var(--hover-width);
|
||||
left: var(--hover-nudge);
|
||||
top: 6%;
|
||||
display: inline-block;
|
||||
height: 85%;
|
||||
|
||||
@@ -54,14 +54,14 @@ section#powered-by {
|
||||
svg {
|
||||
width: 45rem;
|
||||
max-width: calc(100vw - 12rem);
|
||||
margin-top: 6rem;
|
||||
//margin-top: 6rem;
|
||||
}
|
||||
|
||||
a.source-link{
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--c-text-bright);
|
||||
line-height: 1;
|
||||
@@ -75,6 +75,7 @@ section#powered-by {
|
||||
border-radius: 999px;
|
||||
padding: .15em .6em;
|
||||
transition: var(--t-simple);
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:hover{
|
||||
transform: scale(1.05);
|
||||
|
||||
@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<img 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">
|
||||
|
||||
@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<img 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">
|
||||
|
||||
@@ -32,6 +32,7 @@ layout: layouts/base.njk
|
||||
</script> #}
|
||||
|
||||
<link rel="stylesheet" href="assets/styles/landing.css">
|
||||
<link rel="preload" as="image" href="assets/images/explosion.png">
|
||||
|
||||
<div class="cube">
|
||||
<div class="cube__face"></div>
|
||||
@@ -92,9 +93,11 @@ 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 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>
|
||||
<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/_header.js' | url }}"></script>
|
||||
<script defer src="{{ '/assets/js/_menu.js' | url }}"></script>
|
||||
<script defer src="{{ '/assets/js/main.js' | url }}"></script>
|
||||
@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<img 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">
|
||||
|
||||
@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
|
||||
|
||||
<section id="hero">
|
||||
<div id="hero-image">
|
||||
<img 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">
|
||||
|
||||
Reference in New Issue
Block a user