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

landing graphics, line animations, 'fixed' menu, css tweaks

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-14 18:05:58 +02:00
parent 61682732e4
commit efd2c15ce6
83 changed files with 1449 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878
View File

@@ -1 +1 @@
[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1662120146663,"type":"2"},"json"]
[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1663148524558,"type":"2"},"json"]

2
.eleventy.js
View File

@@ -13,6 +13,8 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
//eleventyConfig.addNunjucksFilter('bitcoin', arr => arr.filter(e => e.name == 'Synapse'));
//plugins
eleventyConfig.addPlugin(eleventySass);

3
src/_data/canary.json Normal file
View File

@@ -0,0 +1,3 @@
{
"text": "WE HAVE NEVER RECEIVED A SECRET GOVERNMENT REQUEST TO HAND OVER USER INFORMATION."
}

42
src/_data/menu.json
View File

@@ -1,10 +1,34 @@
[
{
"inHeader": true,
"inFlyout": false,
"inFooter": false,
"items": [
{
"name": "Store",
"slug": "store",
"url": "https://store.start9.com/",
"target": "",
"class": "em"
},
{
"name": "Dev Community",
"slug": "dev",
"url": "https://start9.com/latest/contribute/index",
"target": "",
"order": 1,
"class": ""
}
]
},
{
"name": "Our Company",
"slug": "company",
"order": 0,
"size": "full",
"onHeader": true,
"inHeader": false,
"inFlyout": true,
"inFooter": true,
"items": [
{
"name": "About",
@@ -53,7 +77,9 @@
"slug": "products",
"order": 1,
"size": "full",
"onHeader": true,
"inHeader": false,
"inFlyout": true,
"inFooter": true,
"items": [
{
"name": "Embassy ONE",
@@ -86,7 +112,9 @@
"slug": "embassyos",
"order": 2,
"size": "half",
"onHeader": true,
"inHeader": false,
"inFlyout": true,
"inFooter": true,
"items": [
{
"name": "Support",
@@ -119,7 +147,9 @@
"slug": "developers",
"order": 3,
"size": "half",
"onHeader": true,
"inHeader": false,
"inFlyout": true,
"inFooter": true,
"items": [
{
"name": "Contribute",
@@ -144,7 +174,9 @@
"slug": "contact",
"order": 4,
"size": "half",
"onHeader": false,
"inHeader": false,
"inFlyout": false,
"inFooter": true,
"items": [
{
"name": "Matrix",

102
src/_data/pseudoservices.json
View File

@@ -1,122 +1,54 @@
[
{
"name": "elit ad magna",
"name": "Whatsapp",
"url": "https://start9.com/marketplace/175"
},
{
"name": "sit culpa",
"name": "Twitter",
"url": "https://start9.com/marketplace/175"
},
{
"name": "sunt veniam irure",
"name": "Lastpass",
"url": "https://start9.com/marketplace/199"
},
{
"name": "cillum do",
"name": "bank",
"url": "https://start9.com/marketplace/148"
},
{
"name": "aute",
"name": "Github",
"url": "https://start9.com/marketplace/126"
},
{
"name": "voluptate",
"name": "Google Drive",
"url": "https://start9.com/marketplace/186"
},
{
"name": "aliquip",
"name": "iPhotos",
"url": "https://start9.com/marketplace/119"
},
{
"name": "exercitation",
"name": "Coinbase",
"url": "https://start9.com/marketplace/132"
},
{
"name": "culpa",
"name": "GoFundMe",
"url": "https://start9.com/marketplace/165"
},
{
"name": "nisi fugiat",
"url": "https://start9.com/marketplace/158"
"name": "PayPal",
"url": "https://start9.com/marketplace/165"
},
{
"name": "non culpa",
"url": "https://start9.com/marketplace/151"
"name": "iMessage",
"url": "https://start9.com/marketplace/165"
},
{
"name": "cillum nostrud ad",
"url": "https://start9.com/marketplace/103"
"name": "KeepPass",
"url": "https://start9.com/marketplace/165"
},
{
"name": "irure",
"url": "https://start9.com/marketplace/181"
},
{
"name": "anim",
"url": "https://start9.com/marketplace/138"
},
{
"name": "consequat adipisicing",
"url": "https://start9.com/marketplace/157"
},
{
"name": "reprehenderit",
"url": "https://start9.com/marketplace/199"
},
{
"name": "sint consequat anim",
"url": "https://start9.com/marketplace/134"
},
{
"name": "fugiat id",
"url": "https://start9.com/marketplace/169"
},
{
"name": "labore officia",
"url": "https://start9.com/marketplace/145"
},
{
"name": "laboris",
"url": "https://start9.com/marketplace/103"
},
{
"name": "sunt",
"url": "https://start9.com/marketplace/189"
},
{
"name": "ex ut ipsum",
"url": "https://start9.com/marketplace/119"
},
{
"name": "adipisicing",
"url": "https://start9.com/marketplace/135"
},
{
"name": "qui",
"url": "https://start9.com/marketplace/172"
},
{
"name": "anim",
"url": "https://start9.com/marketplace/126"
},
{
"name": "do adipisicing est",
"url": "https://start9.com/marketplace/199"
},
{
"name": "et nulla",
"url": "https://start9.com/marketplace/118"
},
{
"name": "in qui",
"url": "https://start9.com/marketplace/123"
},
{
"name": "proident duis",
"url": "https://start9.com/marketplace/141"
},
{
"name": "sint Lorem velit",
"url": "https://start9.com/marketplace/193"
"name": "Kickstarter",
"url": "https://start9.com/marketplace/165"
}
]

137
src/_data/services.json
View File

@@ -1,26 +1,141 @@
[
{
"name": "Matrix",
"slug": "matrix",
"description": "asfsdf",
"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"
"whatsapp","imessage"
]
},
{
"name": "Mastadon",
"slug": "mastadon",
"description": "asfsdf",
"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": "BitWarden",
"slug": "bitwarden",
"description": "asfsdf",
"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"
"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", "plebnet-tools"],
"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", "lightning"],
"pseudoservices": ["paypal","coinbase"]
}
]

14
src/_includes/components/footer.njk
View File

@@ -1,8 +1,12 @@
<footer>
<div class="footer-content">
<div class="header"><img src="../assets/images/start9_logo.png" alt=""></div>
<div class="footer__content">
<div class="header">
<img src="../assets/images/start9_logo.png" alt="">
<div class="footer__copyright">© 2022, START9 LABS, INC.</div>
<div class="footer__donate">[btcpay widget]</div>
</div>
<ul class="groups">
{% for group in menu|sort(false, false, 'order') %}
{% for group in menu|selectattr("inFooter")|sort(false, false, 'order') %}
<li class="{{group.size}}">
<h1>{{group.name}}</h1>
<ul>
@@ -15,8 +19,6 @@
</li>
{% endfor %}
</ul>
<div class="footer__copyright">© 2022, START9 LABS, INC.</div>
<div class="footer__donate">[btcpay widget]</div>
<div class="footer__canary">WE HAVE NEVER RECEIVED A SECRET GOVERNMENT REQUEST TO HAND OVER USER INFORMATION.</div>
</div>
<div class="footer__canary">{{ canary.text }}</div>
</footer>

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

@@ -1,17 +1,19 @@
<header>
<nav>
<ul>
{% for group in menu|selectattr("inHeader") %}
{% for item in group.items %}
<li class="closed-menu">
<a {{ 'class=' + item.class + '' if item.class }} {{ 'target=' + item.target + '' if item.target }} href="{{ item.url }}">{{ item.name }}</a>
</li>
{% endfor %}
{% endfor %}
<li class="closed-menu">
<a href="/store" class="em">store</a>
</li>
<li class="closed-menu">
<a href="/store">dev community</a>
</li>
<li class="closed-menu">
<a id="menu-open" href="#">menu {% include "components/svg/menu-open.svg" %}</a>
<a id="menu-open" href="">menu {% include "components/svg/menu-open.svg" %}</a>
</li>
<li class="opened-menu">
<a id="menu-close" href="#">close</a>
<a id="menu-close" href="">close</a>
</li>
</ul></nav>
</ul>
</nav>
</header>

23
src/_includes/components/landing/_contact.njk Normal file
View File

@@ -0,0 +1,23 @@
<input type="email" name="" id="" placeholder="email address">
<ul
class="community__icons">
{# {% for group in menu.filter(e => e.slug == 'contact') %}
{% 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>
</li>
{% endfor %}
{% endfor %} #}
<li>
<a target="_blank" href="https://matrix.to/#/!lMnRwPWnyQvOfAoEnD:matrix.start9labs.com">{% include "components/svg/matrix.svg" %}</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/channel/UCGEw4HJDvOn3Oy8ykR36P7Q">{% include "components/svg/youtube.svg" %}</a>
</li>
<li>
<a target="_blank" href="https://t.me/start9_labs">{% include "components/svg/telegram.svg" %}</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/start9labs">{% include "components/svg/twitter.svg" %}</a>
</li>
</ul>

43
src/_includes/components/landing/be-your-own.njk
View File

@@ -16,20 +16,31 @@
{% endfor %}
</ul>
</div>
<ul class="services">
{% for service in services %}
{# |selectattr("pseudoservices",pseudoservice.name) #}
<li class="service">
<a href="">{% include "components/svg/chevron-left.svg" %}</a>
<a href="">
<img class="service__image" src="{{ 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>
{% endfor %}
</ul>
<div class="services">
{% for pseudoservice in pseudoservices %}
<div class="slides-container slides-container--{{ pseudoservice.name.toLowerCase() }}">
<ul class="slides-inner">
{% 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>
{% 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>
<a href="https://marketplace.start9.com/" class="btn">browse the start9 marketplace</a>
</section>
</div>
<a href="https://marketplace.start9.com/" class="btn">browse the start9 marketplace</a>
</section>

36
src/_includes/components/landing/bitcoin.njk
View File

@@ -2,13 +2,29 @@
{% include "components/svg/grid_blend_top.svg" %}
<div class="subsection">
<h1>Become Bitcoin</h1>
<p><em>Don't trust, verify.</em><br>Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose.</p>
<a class="btn" href="">why host a bitcoin node?</a>
</div>
<div class="subsection">
<h1>Become Lightning</h1>
<p><em>Not your keys, not your coins.</em><br>Run a Lightning node to take full control and custody over your Bitcoin on Lightning.</p>
<a class="btn" href="">why host a lightning node?</a>
</div>
{% include "components/svg/grid_blend_bottom.svg" %}
</section>
<p>
<em>Don't trust, verify.</em>
<br>Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose.</p>
<a class="btn" href="">why host a bitcoin node?</a>
</div>
<div class="subsection">
<h1>Become Lightning</h1>
<p>
<em>Not your keys, not your coins.</em>
<br>Run a Lightning node to take full control and custody over your Bitcoin on Lightning.</p>
<a class="btn" href="">why host a lightning node?</a>
</div>
<div id="flying-icons">
{% for service in services %}
{% for category in service.categories %}
{% 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"
alt="">
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% include "components/svg/grid_blend_bottom.svg" %}
</section>

17
src/_includes/components/landing/community.njk
View File

@@ -1,17 +1,6 @@
<section id="community">
<h1>Join the <em>Community</em></h1>
<input type="email" name="" id="" placeholder="email address">
<ul class="community__icons">
{# {% for group in menu.filter(e => e.slug == 'contact') %}
{% 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>
</li>
{% endfor %}
{% endfor %} #}
<li><a target="_blank" href="https://matrix.to/#/!lMnRwPWnyQvOfAoEnD:matrix.start9labs.com">{% include "components/svg/matrix.svg" %}</a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UCGEw4HJDvOn3Oy8ykR36P7Q">{% include "components/svg/youtube.svg" %}</a></li>
<li><a target="_blank" href="https://t.me/start9_labs">{% include "components/svg/telegram.svg" %}</a></li>
<li><a target="_blank" href="https://twitter.com/start9labs">{% include "components/svg/twitter.svg" %}</a></li>
</ul>
{% include "components/landing/_contact.njk" %}
</section>

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

@@ -2,13 +2,13 @@
<div class="subsection">
<h1>The problem is <em>trust</em></h1>
<p><em>Whoever controls your data, controls you.</em> 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>
{% include "components/svg/problem-with-internet.svg" %}
{% include "components/svg/big-tech-network-diagram.svg" %}
</div>
<div class="subsection inverse">
<h1>Take back <em>control</em></h1>
<p>The only way to be free is to cut out the middle men and take control of your data by running a personal server.
<br><br>
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. <em>Start9 levels the playing field</em> by making it possible for the rest of us.</p>
{% include "components/svg/embassy-fixes-it.svg" %}
{% include "components/svg/embassyos-network-diagram.svg" %}
</div>
</section>

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

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

After

Width:  |  Height:  |  Size: 180 B

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

@@ -1,3 +1,3 @@
<svg class="line-primary" width="158" height="600" viewBox="0 0 158 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 0V302.19H156.737V600" stroke-width="1" vector-effect="non-scaling-stroke"/>
<svg class="line-primary" viewBox="0 0 158 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 0V302.19H156.737V600" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 B

After

Width:  |  Height:  |  Size: 174 B

3
src/_includes/components/landing/lines/dev-to-contact.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg class="line-primary" viewBox="0 0 38 204" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 0V100.63H36V204" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 168 B

3
src/_includes/components/landing/lines/powered-to-support.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg class="line-primary" viewBox="0 0 298 380" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M296 0V150H2V380" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 167 B

11
src/_includes/components/landing/lines/products-to-info 1.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="525" height="600" viewBox="0 0 525 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_417_136)">
<path d="M263 142H524V0" stroke="black"/>
<path d="M1 0V142H263" stroke="black"/>
</g>
<defs>
<clipPath id="clip0_417_136">
<rect width="525" height="600" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

11
src/_includes/components/landing/lines/products-to-info.svg
View File

@@ -1,4 +1,11 @@
<svg class="line-primary" viewBox="0 0 525 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 0V142H524V0" stroke-width="1px" vector-effect="non-scaling-stroke"/>
<path d="M268 143V442.55H140V600" stroke-width="1px" vector-effect="non-scaling-stroke"/>
<path
d="m 1,0 v 142 l 267,1"
vector-effect="non-scaling-stroke" />
<path
d="m 524,0 v 142 l -256,1"
vector-effect="non-scaling-stroke" />
<path
d="M268 143V442.55H140V600"
vector-effect="non-scaling-stroke" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 274 B

After

Width:  |  Height:  |  Size: 350 B

3
src/_includes/components/landing/lines/support-to-dev.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg class="line-primary" viewBox="0 0 188 267" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.99999 0V186.197H186V267" vector-effect="non-scaling-stroke"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 177 B

2
src/_includes/components/landing/powered-by.njk
View File

@@ -9,6 +9,6 @@
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.
</p>
<img src="" alt="">
{% include "components/svg/stack.svg" %}
<a href=""><img src="" alt="">check out the <span>source code</span></a>
</section>

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

@@ -1,4 +1,4 @@
<section id="support" class="inverse">
<section id="support" style="background-color: black;">
<h1>get
<em>help</em>
</h1>

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

@@ -2,7 +2,7 @@
<div class="menu-content">
<div class="header"><img src="../assets/images/start9_logo.png" alt=""></div>
<ul class="groups">
{% for group in menu|selectattr("onHeader")|sort(false, false, 'order') %}
{% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}
<li class="{{group.size}}">
<h1>{{group.name}}</h1>
<ul>

88
src/_includes/components/svg/big-tech-network-diagram.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 80 KiB

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

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

After

Width:  |  Height:  |  Size: 54 KiB

17
src/_includes/components/svg/stack.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 57 KiB

13
src/_includes/components/svg/start9_basis.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg viewBox="0 0 596 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M580.165 59.5716C580.165 59.5716 585.471 50.0984 587.872 45.6906C590.594 40.6946 594.731 33.3418 595.242 26.502C595.859 18.2559 593.283 11.5594 589.527 6.98682C585.771 2.41423 580.218 0.12793 572.951 0.12793C566.745 0.12793 561.601 2.00596 557.682 5.68037C553.681 9.43642 551.721 14.0907 551.721 19.6431C551.721 25.1955 553.518 29.7681 557.274 33.3609C561.03 36.9536 565.847 38.6684 571.89 38.6684C577.687 38.6684 580.79 36.7537 583.459 34.284C581.136 41.4828 568.919 59.5716 568.919 59.5716C568.919 59.5716 566.476 59.5716 580.165 59.5716ZM573.196 29.8498C570.175 29.8498 567.562 28.9516 565.439 26.9919C563.234 25.1139 562.173 22.5826 562.173 19.3981C562.173 16.2953 563.234 13.7641 565.439 11.8044C567.562 9.92634 570.175 8.94651 573.196 8.94651C576.136 8.94651 578.667 9.92634 580.79 11.8044C582.913 13.7641 583.974 16.2953 583.974 19.3981C583.974 22.5826 582.913 25.1139 580.79 26.9919C578.667 28.9516 576.136 29.8498 573.196 29.8498Z" fill="white"/>
<path d="M0.408264 58.9998H11.9214L17.6371 44.0572H39.6836L45.3993 58.9998H56.9124L33.8045 1.84237H23.5162L0.408264 58.9998ZM26.5374 20.7043L27.1906 18.9079L28.6604 14.4987L30.1301 18.9079L30.7833 20.7043L36.0092 34.4221H21.3115L26.5374 20.7043Z" fill="white"/>
<path d="M61.938 58.9998H85.8624C91.5782 58.9998 96.3141 57.53 100.233 54.4272C104.153 51.3244 106.112 47.16 106.112 41.8526C106.112 35.4019 102.683 30.7477 95.8241 27.9715C98.0288 26.9916 99.9068 25.3586 101.458 23.2356C102.928 21.1126 103.745 18.5813 103.745 15.8051C103.745 11.3958 102.111 7.96638 99.0086 5.51677C95.8241 3.06717 91.3332 1.84237 85.4542 1.84237H61.938V58.9998ZM72.7162 33.5239H85.2092C91.9048 33.5239 95.3342 36.2185 95.3342 41.4443C95.3342 46.7518 91.9048 49.3647 85.2092 49.3647H72.7162V33.5239ZM72.7162 11.3142H84.6376C87.6588 11.3142 89.8634 11.8857 91.2515 12.8656C92.558 13.9271 93.2929 15.5601 93.2929 17.6831C93.2929 19.8878 92.558 21.5208 91.2515 22.5007C89.8634 23.5622 87.6588 24.0521 84.6376 24.0521H72.7162V11.3142Z" fill="white"/>
<path d="M171.391 30.4211C171.391 21.9291 168.533 14.9069 162.981 9.19118C157.347 3.55709 150.325 0.699219 141.996 0.699219C133.586 0.699219 126.563 3.55709 121.011 9.19118C115.377 14.9069 112.601 21.9291 112.601 30.4211C112.601 38.913 115.377 46.0169 121.011 51.651C126.563 57.3667 133.586 60.1429 141.996 60.1429C150.325 60.1429 157.347 57.3667 162.981 51.651C168.533 46.0169 171.391 38.913 171.391 30.4211ZM141.996 50.1812C136.607 50.1812 132.198 48.4665 128.768 44.8737C125.257 41.281 123.542 36.4634 123.542 30.4211C123.542 24.3787 125.257 19.6428 128.768 16.0501C132.198 12.4573 136.607 10.6609 141.996 10.6609C147.303 10.6609 151.713 12.4573 155.224 16.0501C158.653 19.6428 160.45 24.3787 160.45 30.4211C160.45 36.4634 158.653 41.281 155.224 44.8737C151.713 48.4665 147.303 50.1812 141.996 50.1812Z" fill="white"/>
<path d="M226.324 1.84237H215.546V36.3001C215.546 40.7094 214.403 44.1389 212.198 46.5885C209.912 49.0381 206.809 50.1812 202.89 50.1812C198.889 50.1812 195.786 49.0381 193.581 46.5885C191.295 44.1389 190.233 40.7094 190.233 36.3001V1.84237H179.455V37.3616C179.455 44.5471 181.578 50.0996 185.987 54.1006C190.315 58.1832 195.949 60.1429 202.89 60.1429C209.749 60.1429 215.383 58.1832 219.792 54.1006C224.12 50.0996 226.324 44.5471 226.324 37.3616V1.84237Z" fill="white"/>
<path d="M232.791 11.8041H250.265V58.9998H261.043V11.8041H278.517V1.84237H232.791V11.8041Z" fill="white"/>
<path d="M318.785 16.1317C318.785 14.172 319.683 12.7023 321.48 11.7224C323.276 10.7426 325.562 10.171 328.339 10.171C335.034 10.171 339.525 13.6005 341.811 20.296L350.303 15.3968C346.711 5.59843 339.525 0.699219 328.584 0.699219C322.541 0.699219 317.724 2.16898 314.049 5.02685C310.293 7.88472 308.497 11.6408 308.497 16.3767C308.497 21.0309 310.048 24.787 313.314 27.6449C316.581 30.5844 320.908 32.5441 326.379 33.5239C331.278 34.5037 334.789 35.7286 337.076 37.1167C339.362 38.5864 340.505 40.5461 340.505 42.9957C340.505 45.282 339.525 47.16 337.647 48.5481C335.688 50.0179 333.156 50.6711 329.89 50.6711C325.644 50.6711 322.378 49.528 320.092 47.2417C317.805 44.9554 316.254 41.5259 315.437 37.035L305.966 41.8526C307.109 47.405 309.64 51.8959 313.723 55.1621C317.724 58.5099 323.113 60.1429 329.972 60.1429C336.341 60.1429 341.485 58.5099 345.404 55.0804C349.324 51.651 351.283 47.4866 351.283 42.5874C351.283 37.8515 349.732 34.0138 346.711 31.2376C343.608 28.4614 338.954 26.3384 332.585 25.0319C327.685 24.0521 324.174 22.909 322.051 21.5208C319.847 20.2144 318.785 18.418 318.785 16.1317Z" fill="white"/>
<path d="M354.314 11.8041H371.788V58.9998H382.566V11.8041H400.04V1.84237H354.314V11.8041Z" fill="white"/>
<path d="M392.648 58.9998H404.161L409.877 44.0572H431.923L437.639 58.9998H449.152L426.044 1.84237H415.756L392.648 58.9998ZM418.777 20.7043L419.43 18.9079L420.9 14.4987L422.37 18.9079L423.023 20.7043L428.249 34.4221H413.551L418.777 20.7043Z" fill="white"/>
<path d="M487.329 58.9998H499.658L485.859 34.8304C494.514 31.7275 498.924 26.0934 498.924 18.0097C498.924 13.1105 497.046 9.19118 493.453 6.25165C489.778 3.31213 484.798 1.84237 478.592 1.84237H454.177V58.9998H464.956V35.8102H474.101L487.329 58.9998ZM464.956 11.3142H478.592C484.961 11.3142 488.145 13.8454 488.145 18.8263C488.145 23.8888 484.961 26.3384 478.592 26.3384H464.956V11.3142Z" fill="white"/>
<path d="M503.587 11.8041H521.061V58.9998H531.839V11.8041H549.313V1.84237H503.587V11.8041Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

15
src/_includes/layouts/peripheral.njk Normal file
View File

@@ -0,0 +1,15 @@
---
layout: layouts/base.njk
---
<link rel="stylesheet" href="../assets/styles/peripheral.css"/>
{{ content | safe }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script src="{{ '/assets/js/main.js' | url }}"></script>

335
src/about.njk
View File

@@ -1,161 +1,184 @@
---
title: About | Start9
layout: layouts/base.njk
layout: layouts/peripheral.njk
---
{# <script src="{{ '/assets/js/getTeam.js' | url }}"></script> #}
<link rel="stylesheet" href="../assets/styles/peripheral.css">
<section id="hero">
<div id="hero-image">
<img src="assets/images/explosion.png" alt="">
<img class="img-shadow" src="assets/images/explosion.png" alt=""></div>
<div id="logo">
<h1>
about start
</h1>
<ul id="sub-menu">
<li>
<a href="#mission">mission</a>
</li>
<li>
<a href="#values">values</a>
</li>
<li>
<a href="#virtues">virtues</a>
</li>
<li>
<a href="#origin">origin story</a>
</li>
<li>
<a href="#team">team</a>
</li>
</ul>
</div>
</section>
<section id="blurb">
<h2>Privacy and<br>
free speech are fundamental human rights and essential ingredients for a free society.</h2>
<p>Human history demonstrates that, when entrusted to others, these rights are invariably denied, resulting in great
suffering. As such, it is necessary for individuals to protect their own privacy and right to speak freely.
</p>
<p>Fortunately, modern technologies, in the form of personal computers, encryption, and open, decentralized network
protocols such as the Internet and Bitcoin, make this a real possibility.
</p>
<p>What is needed is a revolution in personal computing away from the current, hosted, custodial model that breeds
dependency and corruption, towards a decentralized model, where individuals have absolute control over their data and
communications.</p>
</section>
<section id="mission">
<h2>mission</h2>
<h3>To eliminate the need for trusted third parties in the human/computer relationship.</h3>
<img src="" alt="" class="section-hero section-hero--bkg"></section>
<section id="values">
<h2>values</h2>
<img src="" alt="" class="section-hero">
<p>
<strong>This list of values is not comprehensive. It does not encapsulate all the values of all the members of Start9.
Instead, we attempt to enumerate those values which represent the fulfillment of our mission and which are practically
within our ability to achieve.</strong>
</p>
<h4>decentralization</h4>
<p>Centralized systems act as single points of failure and are susceptible to corruption. Decentralized systems afford
greater robustness and soundness guarantees.</p>
<H4>openness</H4>
<p>Everyone should have permissionless access to computing resources and tools, unrestricted by geography, ethnicity, or
belief.</p>
<H4>community</H4>
<p>The human experience is richest when shared amongst individuals who possessing common beliefs, values, and
activities, and that computers should facilitate the formation of communities.</p>
<H4>privacy</H4>
<p>There are four reasons that privacy is necessary for a free society and proper human existence: privacy (1) promotes
creativity and experimentation by minimizing the risk of embarrassment; (2) protects valuable information from theft and
extortion; (3) enables the diffusion of contrarian ideals and ideas; (4) serves as an insurance policy against the
future, in the event that what is acceptable today becomes unacceptable tomorrow.</p>
<h4>independence</h4>
<p>Being dependent means being unable to survive on your own. Like a child, it means needing others and relying on them
to provide for you, thus granting them power over you. A free and dignified human existence demands self-reliance: the
ability to think and act with efficacy to obtain one’s needs.</p>
</section>
<section id="virtues">
<h2>virtues</h2>
<p>
<strong>Below are the virtues or qualities of character needed to achieve our values and accomplish our mission.</strong>
</p>
<img src="" alt="" class="section-hero">
<h4>Audacity</h4>
<p>A willingness to take bold risks.</p>
<h4>Tenacity</h4>
<p>Fierce determination and relentless effort.</p>
<h4>Excellence</h4>
<p>Setting high standards and never settling for less.</p>
<h4>courtesy</h4>
<p>Treating others politely, with kindness and due respect.</p>
<h4>generocity</h4>
<p>providing beyond what is necessary or expected.</p>
<h4>fortitude</h4>
<p>Having courage in the face of pain or adversity.</p>
<h4>integrity</h4>
<p>The virtue that underlies all others. The quality of being whole and genuine, intact and unbroken, internally
consistent, and adhering to principle in all cases.</p>
</section>
<section id="origin">
<h2>origin story</h2>
<img src="" alt="" class="section-hero">
<p>
<strong>Pokemon is a game for Gameboy.</strong>
Twitch is a live video streaming app. “Twitch Plays Pokemon” was a popular phenomenon where Twitch users would
collaborate to play a SHARED game of Pokemon on Gameboy. Here’s how it worked:</p>
<p>Participants would use the Twitch message board to enter commands that then got executed in the gameplay. For
example, if someone entered the command “right”, that would cause the player to move 1 space to the right. Commands
would execute immediately after they were received, and anyone could enter a valid command at any time. You can think of
Twitch Plays Pokemon as the more practical equivalent of placing a Gameboy in the middle of a crowded room and telling
everyone to push buttons at the same time. As you might expect, the gameplay of Twitch Plays Pokemon was quite
“twitchy”, but in a very “infinite monkey theory” way, progress could eventually be made.</p>
<p>
<strong>In an effort to streamline play</strong>, a new game mode was devised in which players would “vote” for the next
command and, every 4 seconds, whatever command received the most votes over the previous 4 seconds would execute in the
game. Also introduced in this mode was the ability to attach multipliers to a command, such that the command would
execute that number of times. For example, “right2” would cause the player to move 2 spaces to the right. “right3” would
cause the player to move 3 spaces to the right, and so on. The highest number any participant could place after a
command was 9, meaning whatever command they entered would execute 9 times. As you might expect, gameplay in this mode
was less chaotic, more efficient, but it also meant each participant had less direct and immediate influence over the
game. If a group of even 5-10 got together and colluded on their votes, they could practically take over the game and
make contrarian ideas irrelevant. The new game mode was called “Democracy”, and the original game mode became known as
“Anarchy”. Which game mode was engaged was itself governed by a democratic process: if more participants wanted to play
in Democracy mode, then Democracy mode engaged; if more wanted to play in Anarchy mode, then Anarchy mode engaged.</p>
<p>To summarize:
<strong>in Anarchy mode, everyone had equal influence over the game</strong>, but progress was slow and clunky. In
Democracy mode, progress was fast and efficient, but colluding groups could marginalize individual participants and ruin
the game for them.</p>
<p>So… individual participants
<strong>discovered a means of effective protest</strong>
whenever Democracy mode became suffocating, but they could not garner enough votes to switch back to Anarchy mode.
Someone would type the command “start9” into the comments. This command meant “open the start menu 9 times in a row”,
which, as you might imagine, would be enormously disruptive if executed. The entire screen would be blocked by the start
menu, over and over. Typing “start9” was a participant’s way of signaling to other participants that they felt
marginalized by Democracy mode, and they were ready to fight back. If others felt the same, they could also begin typing
“start9” - then, sure enough, “start9” would finally receive more votes than the colluding group’s command, and the menu
opening would begin. Every 4 seconds, the menu would open 9 times…again, and again, and again…until finally, the
colluding group would be forced to either cooperate in reverting the game mode back to Anarchy mode or quit altogether.</p>
<p>Playing in Anarchy mode was impractical, but people did not want to play a game where they had no voice, where a
group of insiders had taken total control. And so
<strong>“start9” became the battle cry of the individual</strong>, the out-group, a means of signaling to other
individuals that it was time to fight back against the usurpers - to use their own rules against them, until there was
no alternative but to return control to the individual participants.</p>
</section>
<section id="team">
<h1>our team</h1>
<img src="" alt="" class="section-hero">
{% block content %}
<div>
<ul>
{% for member in team %}
<li>
{# <a href="/files/{{ member.login }}"> {{ member.thing2 }} </a> #}
{{ member.login }}
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
</section>
<section id="hero">
<div id="hero-image">
<img src="../assets/images/about-hero.png" alt=""/>
<img class="img-shadow" src="../assets/images/about-hero.png" alt=""/>
</div>
<div id="logo">
<h1>
{% include "components/svg/start9_basis.svg" %}
<span style="display: none;">Start9</span>
</h1>
<ul id="sub-menu">
<li>
<a href="#mission">mission</a>
</li>
<li>
<a href="#values">values</a>
</li>
<li>
<a href="#virtues">virtues</a>
</li>
<li>
<a href="#origin">origin story</a>
</li>
<li>
<a href="#team">team</a>
</li>
</ul>
</div>
</section>
<section id="blurb">
<h2>Privacy and<br/> free speech are fundamental human rights and essential ingredients for a free society.</h2>
<p>Human history demonstrates that, when entrusted to others, these rights are invariably denied, resulting in great
suffering. As such, it is necessary for individuals to protect their own privacy and right to speak freely.
</p>
<p>Fortunately, modern technologies, in the form of personal computers, encryption, and open, decentralized network
protocols such as the Internet and Bitcoin, make this a real possibility.
</p>
<p>What is needed is a revolution in personal computing away from the current, hosted, custodial model that breeds
dependency and corruption, towards a decentralized model, where individuals have absolute control over their data and
communications.</p>
</section>
<section id="mission">
<h2>mission</h2>
<div class="section__double-image">
<div class="section__image section__image--left">
<img src="../assets/images/mission1.png" alt=""/>
<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 class="img-shadow" src="../assets/images/mission2.png" alt=""/>
</div>
</div>
{# <img src="" alt="" class="section__img section__img--bkg"/> #}
</section>
<section id="values">
<h2>values</h2>
<div class="section__image">
<img src="../assets/images/values.png" alt=""/>
<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.
Instead, we attempt to enumerate those values which represent the fulfillment of our mission and which are practically
within our ability to achieve.</strong>
</p>
<h4>decentralization</h4>
<p>Centralized systems act as single points of failure and are susceptible to corruption. Decentralized systems afford
greater robustness and soundness guarantees.</p>
<H4>openness</H4>
<p>Everyone should have permissionless access to computing resources and tools, unrestricted by geography, ethnicity, or
belief.</p>
<H4>community</H4>
<p>The human experience is richest when shared amongst individuals who possessing common beliefs, values, and
activities, and that computers should facilitate the formation of communities.</p>
<H4>privacy</H4>
<p>There are four reasons that privacy is necessary for a free society and proper human existence: privacy (1) promotes
creativity and experimentation by minimizing the risk of embarrassment; (2) protects valuable information from theft and
extortion; (3) enables the diffusion of contrarian ideals and ideas; (4) serves as an insurance policy against the
future, in the event that what is acceptable today becomes unacceptable tomorrow.</p>
<h4>independence</h4>
<p>Being dependent means being unable to survive on your own. Like a child, it means needing others and relying on them
to provide for you, thus granting them power over you. A free and dignified human existence demands self-reliance: the
ability to think and act with efficacy to obtain one’s needs.</p>
</section>
<section id="virtues">
<h2>virtues</h2>
<div class="section__image">
<img src="../assets/images/virtues.png" alt=""/>
<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>
</p>
<h4>Audacity</h4>
<p>A willingness to take bold risks.</p>
<h4>Tenacity</h4>
<p>Fierce determination and relentless effort.</p>
<h4>Excellence</h4>
<p>Setting high standards and never settling for less.</p>
<h4>courtesy</h4>
<p>Treating others politely, with kindness and due respect.</p>
<h4>generocity</h4>
<p>providing beyond what is necessary or expected.</p>
<h4>fortitude</h4>
<p>Having courage in the face of pain or adversity.</p>
<h4>integrity</h4>
<p>The virtue that underlies all others. The quality of being whole and genuine, intact and unbroken, internally
consistent, and adhering to principle in all cases.</p>
</section>
<section id="origin">
<h2>origin story</h2>
<div class="section__image">
<img src="../assets/images/origin.png" alt=""/>
<img class="img-shadow" src="../assets/images/origin.png" alt=""/>
</div>
<p>
<strong>Pokemon is a game for Gameboy.</strong>
Twitch is a live video streaming app. “Twitch Plays Pokemon” was a popular phenomenon where Twitch users would
collaborate to play a SHARED game of Pokemon on Gameboy. Here’s how it worked:</p>
<p>Participants would use the Twitch message board to enter commands that then got executed in the gameplay. For
example, if someone entered the command “right”, that would cause the player to move 1 space to the right. Commands
would execute immediately after they were received, and anyone could enter a valid command at any time. You can think of
Twitch Plays Pokemon as the more practical equivalent of placing a Gameboy in the middle of a crowded room and telling
everyone to push buttons at the same time. As you might expect, the gameplay of Twitch Plays Pokemon was quite
“twitchy”, but in a very “infinite monkey theory” way, progress could eventually be made.</p>
<p>
<strong>In an effort to streamline play</strong>, a new game mode was devised in which players would “vote” for the next
command and, every 4 seconds, whatever command received the most votes over the previous 4 seconds would execute in the
game. Also introduced in this mode was the ability to attach multipliers to a command, such that the command would
execute that number of times. For example, “right2” would cause the player to move 2 spaces to the right. “right3” would
cause the player to move 3 spaces to the right, and so on. The highest number any participant could place after a
command was 9, meaning whatever command they entered would execute 9 times. As you might expect, gameplay in this mode
was less chaotic, more efficient, but it also meant each participant had less direct and immediate influence over the
game. If a group of even 5-10 got together and colluded on their votes, they could practically take over the game and
make contrarian ideas irrelevant. The new game mode was called “Democracy”, and the original game mode became known as
“Anarchy”. Which game mode was engaged was itself governed by a democratic process: if more participants wanted to play
in Democracy mode, then Democracy mode engaged; if more wanted to play in Anarchy mode, then Anarchy mode engaged.</p>
<p>To summarize:
<strong>in Anarchy mode, everyone had equal influence over the game</strong>, but progress was slow and clunky. In
Democracy mode, progress was fast and efficient, but colluding groups could marginalize individual participants and ruin
the game for them.</p>
<p>So… individual participants
<strong>discovered a means of effective protest</strong>
whenever Democracy mode became suffocating, but they could not garner enough votes to switch back to Anarchy mode.
Someone would type the command “start9” into the comments. This command meant “open the start menu 9 times in a row”,
which, as you might imagine, would be enormously disruptive if executed. The entire screen would be blocked by the start
menu, over and over. Typing “start9” was a participant’s way of signaling to other participants that they felt
marginalized by Democracy mode, and they were ready to fight back. If others felt the same, they could also begin typing
“start9” - then, sure enough, “start9” would finally receive more votes than the colluding group’s command, and the menu
opening would begin. Every 4 seconds, the menu would open 9 times…again, and again, and again…until finally, the
colluding group would be forced to either cooperate in reverting the game mode back to Anarchy mode or quit altogether.</p>
<p>Playing in Anarchy mode was impractical, but people did not want to play a game where they had no voice, where a
group of insiders had taken total control. And so
<strong>“start9” became the battle cry of the individual</strong>, the out-group, a means of signaling to other
individuals that it was time to fight back against the usurpers - to use their own rules against them, until there was
no alternative but to return control to the individual participants.</p>
</section>
<section id="team">
<h2>our team</h2>
<div class="section__image">
<img src="../assets/images/team.png" alt=""/>
<img class="img-shadow" src="../assets/images/team.png" alt=""/>
</div>
{% block content %}
<div>
<ul>
{% for member in team %}
<li>
{# <a href="/files/{{ member.login }}"> {{ member.thing2 }} </a> #}
{{ member.login }}
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
</section>

BIN
src/assets/images/about-hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/assets/images/bigtech2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/bigtech3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/images/code1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/images/code1.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/images/mission1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/assets/images/mission1.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/images/mission2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
src/assets/images/mission2.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
src/assets/images/mission3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/images/origin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/origin.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/privacy1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/privacy1.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/images/service-icons/balanceofsatoshis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/service-icons/bitcoind.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/service-icons/btc-rpc-proxy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/images/service-icons/btcpayserver.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/images/service-icons/c-lightning.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
src/assets/images/service-icons/electrs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/service-icons/lightning-jet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/service-icons/lightning-terminal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
src/assets/images/service-icons/lnd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/images/service-icons/lndg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/images/service-icons/mastodon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/service-icons/mempool.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/service-icons/ride-the-lightning.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/service-icons/spark-wallet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/images/service-icons/specter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/service-icons/sphinx-relay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/images/service-icons/synapse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/service-icons/thunderhub.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/service-icons/vaultwarden.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/team.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
src/assets/images/team.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
src/assets/images/values.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/virtues.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
src/assets/images/virtues.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

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

@@ -3,39 +3,59 @@ gsap.registerPlugin(CustomEase);
var bodyRect = document.body.getBoundingClientRect();
var sections = [
"pitch",
"products",
"infographics",
"bitcoin",
"be-your-own",
"powered-by",
"support",
"dev",
"community"
]
const sections = [
"pitch",
"products",
"infographics",
"bitcoin",
"be-your-own",
"powered-by",
"support",
"dev",
"community",
];
const bitcoinServices = [
"balanceofsatoshis",
"bitcoind",
"btc-rpc-proxy",
"btcpayserver",
"c-lightning",
"electrs",
"lightning-jet",
"lnd",
"lightning-terminal",
"lndg",
"mempool",
"ride-the-lightning",
"spark-wallet",
"specter",
"sphinx-relay",
"thunderhub",
];
//////////////////////////////////////////
// AUTO APPLY URL ANCHORS
setTimeout(function() {
// timeout to allow initial load to redirect to anchor
// TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout
sections.forEach(slug => {
ScrollTrigger.create({
trigger: "#" + slug,
start: "top center",
end: "bottom center",
markers: {startColor: "white", endColor: "white"},
onEnter: () => { window.location.href = "#" + slug; },
onEnterBack: () => { window.location.href = "#" + slug; }
});
});
}, 2000);
// setTimeout(function () {
// // timeout to allow initial load to redirect to anchor
// // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout
// sections.forEach((slug) => {
// ScrollTrigger.create({
// trigger: "#" + slug,
// start: "top center",
// end: "bottom center",
// //markers: { startColor: "white", endColor: "white" },
// onEnter: () => {
// window.location.href = "#" + slug;
// },
// onEnterBack: () => {
// window.location.href = "#" + slug;
// },
// });
// });
// }, 2000);
//////////////////////////////////////////
// MENU
@@ -45,22 +65,24 @@ let menuOpen = document.getElementById("menu-open"),
openedMenuArray = gsap.utils.toArray(".opened-menu"),
closedMenuArray = gsap.utils.toArray(".closed-menu");
menuOpen.addEventListener("click", () => openMenu());
menuClose.addEventListener("click", () => closeMenu());
menuOpen.addEventListener("click", (e) => openMenu(e));
menuClose.addEventListener("click", (e) => closeMenu(e));
function openMenu() {
function openMenu(e) {
e.preventDefault();
gsap.to("#menu", { y: "0vh" });
gsap.to("main", { 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"});
gsap.to("html", { overflow: "hidden" });
}
function closeMenu() {
function closeMenu(e) {
e.preventDefault();
gsap.to("#menu", { y: "-100vh" });
gsap.to("main", { 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: "overlay"});
gsap.to("html", { overflow: "overlay" });
}
//////////////////////////////////////////
@@ -86,20 +108,17 @@ gsap.from("#logo", { duration: 0.5, y: "-5rem", opacity: 0, delay: 0.75 });
// backdrop-filter: blur(10px);
//background-color: rgba(0,0,0,0.1);
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", {
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"
},
});
//////////////////////////////////////////
// PITCH
@@ -124,8 +143,8 @@ gsap.from("#hero-to-pitch path:first-child", {
scrollTrigger: {
trigger: "#hero-to-pitch",
scrub: true,
start: "top center",
end: "bottom center",
start: "top center", // "triggerElement page"
end: "bottom center", // "triggerElement page"
},
});
@@ -135,8 +154,8 @@ gsap.from("#products-to-info path:first-child", {
scrollTrigger: {
trigger: "#products-to-info path:first-child",
scrub: true,
start: "top center",
end: "bottom center",
start: "top center", // "triggerElement page"
end: "bottom center", // "triggerElement page"
},
});
@@ -146,11 +165,81 @@ gsap.from("#products-to-info path:nth-child(2)", {
scrollTrigger: {
trigger: "#products-to-info path:nth-child(2)",
scrub: true,
start: "top center",
end: "bottom center",
start: "top center", // "triggerElement page"
end: "bottom center", // "triggerElement page"
},
});
gsap.from("#products-to-info path:nth-child(3)", {
drawSVG: 0,
ease: "none",
scrollTrigger: {
trigger: "#products-to-info path:nth-child(3)",
scrub: true,
start: "top center", // "triggerElement page"
end: "bottom center", // "triggerElement page"
},
});
// BITCOIN
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
bitcoinServices.forEach((service) => {
const serviceElement = document.querySelector(".service-icon--" + service);
const bitcoinSectionElement = document.querySelector("#bitcoin");
const upOrDown = getRandomInt(0, 1);
const bitcoinHeight = bitcoinSectionElement.clientHeight;
serviceElement
? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
: "";
if (upOrDown) {
gsap.set(".service-icon--" + service, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
});
gsap.to(".service-icon--" + service, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
//x: getRandomInt(0, 100) + "vw",
ease: "in",
delay: getRandomNumber(0, 1),
scrollTrigger: {
trigger: "#bitcoin",
scrub: true,
start: "top 25%", // "triggerElement page"
end: "90% center", // "triggerElement page"
//markers: { startColor: "lime", endColor: "lime" },
},
});
} else {
gsap.set(".service-icon--" + service, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
});
gsap.to(".service-icon--" + service, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
//x: getRandomInt(0, 100) + "vw",
ease: "in",
delay: getRandomNumber(0, 1),
scrollTrigger: {
trigger: "#bitcoin",
scrub: true,
start: "top bottom", // "triggerElement page"
end: "90% center", // "triggerElement page"
//markers: { startColor: "orange", endColor: "orange" },
},
});
}
});
gsap.from("#bitcoin-to-be path", {
drawSVG: 0,
ease: "none",
@@ -162,8 +251,10 @@ gsap.from("#bitcoin-to-be path", {
},
});
let imgs = gsap.utils.toArray(".pseudoservice"),
next = 1.5, // time to change
// BE YOUR OWN
let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
next = 3, // time to change
itemHeight = document
.querySelector(".pseudoservice")
.getBoundingClientRect().height,
@@ -183,20 +274,187 @@ let imgs = gsap.utils.toArray(".pseudoservice"),
function crossfade() {
var action = gsap
.timeline()
.to(imgs, { y: "-=" + itemHeight, duration: 1, ease: kerplunk2 })
.to(imgs[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
.to(pseudoserviceArray, {
y: "-=" + itemHeight,
duration: 1,
ease: kerplunk2,
})
.to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
imgs.push(imgs.shift()); // the first (shift) to the end (push) from the array
//console.log(imgs);
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(
".slides-container--" + thisPseudoservice.toLowerCase()
);
var slidesContainerArray = document.querySelectorAll(".slides-container");
slidesContainerArray.forEach((thisContainer) => {
thisContainer.style.display = "none";
});
if (thisElement) {
thisElement.style.display = "flex";
}
}
// start the crossfade after next = 3 sec
gsap.delayedCall(next, crossfade);
// 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() {
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("#bitcoin-to-be path", {
drawSVG: 0,
ease: "none",
scrollTrigger: {
trigger: "#bitcoin-to-be path",
scrub: true,
start: "top center",
end: "bottom center",
},
});
gsap.from("#be-to-powered path", {
drawSVG: 0,
ease: "none",
scrollTrigger: {
trigger: "#be-to-powered path",
scrub: true,
start: "top center",
end: "bottom center",
},
});
gsap.from("#powered-to-support path", {
drawSVG: 0,
ease: "none",
scrollTrigger: {
trigger: "#powered-to-support path",
scrub: true,
start: "top center",
end: "bottom center",
},
});
gsap.from("#support-to-dev path", {
drawSVG: 0,
ease: "none",
scrollTrigger: {
trigger: "#support-to-dev path",
scrub: true,
start: "top center",
end: "bottom center",
},
});
gsap.from("#dev-to-contact path", {
drawSVG: 0,
ease: "none",
scrollTrigger: {
trigger: "#dev-to-contact path",
scrub: true,
start: "top center",
end: "bottom center",
},
});
//Librarys
/*

14
src/assets/js/peripheral.js Normal file
View File

@@ -0,0 +1,14 @@
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"
},
}
);

68
src/assets/styles/be-your-own.scss
View File

@@ -3,7 +3,7 @@
flex-direction: column;
align-items: center;
gap: 6rem;
margin: 0 0 6rem 0;
//margin: 0 0 6rem 0;
padding: 0 6rem 6rem 6rem;
box-sizing: border-box;
width: 100%;
@@ -66,7 +66,7 @@
}
}
ul.services{
.services{
position: absolute;
top: calc(3 * var(--line));
background-color: #353535;
@@ -74,9 +74,73 @@
width: calc(11.5ch - 4rem);
font-size: var(--size);
left: -1rem;
img{
border-radius: 100%;
width: 5rem;
}
.service{
display: flex;
align-items: center;
.service__link{
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;
}

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

@@ -11,20 +11,20 @@ section#bitcoin {
z-index: -1;
margin-bottom: -10rem;
&::before{
content: '';
&::before {
content: "";
width: 100%;
height: 100vh;
background-image: linear-gradient(#33333300,var(--c-bkg));
background-image: linear-gradient(#33333300, var(--c-bkg));
position: absolute;
top: -100vh;
}
&::after{
content: '';
&::after {
content: "";
width: 100%;
height: 100vh;
background-image: linear-gradient(var(--c-bkg),#33333300);
background-image: linear-gradient(var(--c-bkg), #33333300);
position: absolute;
bottom: -100vh;
}
@@ -50,13 +50,13 @@ section#bitcoin {
p {
max-width: min(35ch, 50vw);
em{
em {
color: var(--c-1);
font-weight: 700;
}
}
.subsection{
.subsection {
padding: 0 6rem;
}
@@ -69,15 +69,94 @@ section#bitcoin {
display: flex;
flex-direction: column;
align-items: flex-end;
h1, p{
h1,
p {
text-align: right;
}
}
a.btn{
a.btn {
background-color: var(--c-1);
color:var(--c-6);
color: var(--c-6);
border-color: var(--c-6);
font-size: 1.2rem;
}
#flying-icons{
position: absolute;
top: 0;
left:0;
right: 0;
bottom: 0;
overflow: hidden;
}
.service-icon {
border-radius: 100%;
position: absolute;
top:0;
left:0;
z-index: -2;
backdrop-filter: blur(48px);
mix-blend-mode: soft-light;
box-shadow: 0 37px 50px rgb(0 0 0 / 20%);
&.service-icon--spectre {
background-color: var(--c-1);
}
&.service-icon--electrs {
background-color: var(--c-1);
padding: 1rem;
}
&.service-icon--balanceofsatoshis {
width: 5rem;
}
&.service-icon--bitcoind {
width: auto;
}
&.service-icon--btc-rpc-proxy {
width: 9rem;
}
&.service-icon--btcpay-server {
width: 6rem;
}
&.service-icon--c-lightning {
width: auto;
}
&.service-icon--electrs {
width: 7rem;
}
&.service-icon--lightning-jet {
width: 6rem;
}
&.service-icon--lnd {
width: 10rem;
}
&.service-icon--lightning-terminal {
width: 7rem;
}
&.service-icon--lndg {
width: 9rem;
}
&.service-icon--mempool {
width: 8rem;
}
&.service-icon--ride-the-lightning {
width: 8rem;
}
&.service-icon--spark-wallet {
width: 7rem;
}
&.service-icon--specter {
width: 5rem;
}
&.service-icon--sphinx-relay {
width: 6rem;
}
&.service-icon--thunderhub {
width: 5rem;
}
}
}

2
src/assets/styles/dev.scss
View File

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 2 * var(--section-padding));
//min-height: calc(100vh - 2 * var(--section-padding));
padding: var(--section-padding) 6rem;
h2{
margin: 0;

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

@@ -1,7 +1,9 @@
footer{
//position: absolute;
padding: 0;
.footer-content{
font-weight: 400;
color: gray;
.footer__content{
display: flex;
.header{
align-self: flex-start;
@@ -91,6 +93,11 @@ footer{
}
}
.footer__canary{
text-align: center;
padding: 2rem;
}
@media only screen and (max-width: 1200px) {
footer .groups li > a {
font-size: 2.2vw;

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

@@ -10,13 +10,16 @@ section#infographics{
gap: 3rem;
padding: 6rem;
svg{
width: 100%;
width: 110%;
}
&:first-child{
background-color: black;
}
&:last-child{
background-color: white;
svg{
width: 80%;
}
}
}
}

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

@@ -78,24 +78,6 @@ section {
max-height: 75vh;
}
.img-shadow {
filter: blur(2rem) brightness(0);
z-index: -1;
position: absolute;
top: 5rem;
opacity: .5;
}
#hero-image {
position: relative;
display: flex;
img {
width: 50rem;
max-width: 90vw;
margin-top: 4rem;
}
}
nav {
color: var(--c-text-primary);
}
@@ -183,6 +165,7 @@ p {
em {
font-style: normal;
color: var(--c-text-accent);
font-weight: 400;
}
}

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

@@ -79,7 +79,7 @@ body{
}
main{
transform: translateY(-100vh);
//transform: translateY(-100vh);
}
a {
@@ -106,7 +106,7 @@ ul {
header{
position: fixed;
width: 100vw;
z-index: 1;
z-index: 2;
}
nav{
--padding: 1rem;
@@ -130,9 +130,16 @@ nav{
color: var(--c-text-bright);
font-size: 1.5rem;
padding: 0em 0.5em 0em 0.5em;
&.em{
background-color: var(--c-text-accent);
&:hover{
color: var(--c-text-accent);
background-color: var(--c-text-bright);
}
}
&:hover{
color: var(--c-text-accent);
}
}
}
@@ -163,4 +170,22 @@ nav{
.closed-menu {
//overflow: hidden;
white-space: nowrap;
}
}
#hero-image {
position: relative;
display: flex;
img {
width: 50rem;
max-width: 90vw;
margin-top: 4rem;
}
}
.img-shadow {
filter: blur(2rem) brightness(0);
z-index: -1;
position: absolute;
top: 5rem;
opacity: .5;
}

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

@@ -1,5 +1,6 @@
#menu{
//position: absolute;
position: fixed;
z-index: 1;
padding: 0;
width: 100vw;
height:100vh;

0
src/assets/styles/news.scss Normal file
View File

211
src/assets/styles/peripheral.scss
View File

@@ -1,97 +1,172 @@
main{
margin-top: 10rem;
main {
margin-top: 7rem;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: clip;
}
section {
--width: 42ch;
--side-padding: 3rem;
font-family: "Montserrat";
font-weight: 300;
font-size: 1rem;
width: var(--width);
padding: 7rem var(--side-padding);
position: relative;
overflow: visible;
&:nth-of-type(2n + 3) {
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
width: 100vw;
background-color: #212121;
z-index: -1;
}
}
.section__image {
display: flex;
flex-direction: column;
align-items: center;
margin: 2rem 0;
position: relative;
img {
width: 50%;
}
.img-shadow {
top: 3rem;
filter: blur(1rem) brightness(0);
}
}
display: flex;
flex-direction: column;
//align-items: center;
//outline: 1px solid orange;
}
section{
--width: 42ch;
--side-padding: 3rem;
font-family: "Montserrat";
font-weight: 300;
font-size: 1rem;
width: var(--width);
padding: 10rem var(--side-padding);
position: relative;
overflow:visible;
&:nth-of-type(even){
&::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
width: 100vw;
background-color: #212121;
z-index: -1;
}
section#hero {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
gap: 5rem;
width: calc(100vw - (2 * var(--side-padding)));
justify-content: center;
flex-direction: row;
&::before {
content: none;
}
h1 {
width: 100%;
}
}
@media only screen and (max-width: 1245px) {
section#hero {
flex-direction: column;
}
}
section#virtues {
.section__image img {
width: 75%;
}
}
.section__double-image {
position: relative;
.section__image{
position: absolute;
top:-140%;
width:100%;
}
.section__image--left{
left:-105%;
align-items: flex-end;
}
.section__image--right{
right:-105%;
align-items: flex-start;
}
}
#hero-image img {
margin-top: 0;
width: 28rem;
}
h1 {
font-family: var(--f-hero);
font-size: 4.4rem;
width: 110%;
line-height: 1;
font-family: var(--f-hero);
font-size: 4.2rem;
width: 110%;
line-height: 1;
}
h2 {
font-family: var(--f-hero);
font-size: 3.7rem;
text-align: center;
font-family: var(--f-hero);
font-size: 3.7rem;
text-align: center;
}
section#blurb h2 {
font-size: 2.5rem;
color: var(--c-text-accent);
width: 110%;
line-height: 1;
text-align: left;
margin-bottom: 2rem;
font-size: 2.5rem;
color: var(--c-text-accent);
width: 110%;
line-height: 1;
text-align: left;
margin-bottom: 2rem;
}
h3 {
font-family: var(--f-hero);
font-size: 1.8rem;
width: 112%;
font-family: var(--f-hero);
font-size: 1.8rem;
width: 112%;
}
h4 {
font-weight: 800;
font-weight: 800;
}
h3, h4 {
color: var(--c-text-accent);
h3,
h4 {
color: var(--c-text-accent);
}
ul#sub-menu{
display: flex;
justify-content: space-between;
width: 107%;
li a{
font-family: var(--f-hero);
font-size: 1.2rem;
color: var(--c-text-primary);
text-transform: uppercase;
font-weight: 900;
white-space: nowrap;
transition: var(--t-simple);
&:hover{
color: var(--c-text-accent);
}
ul#sub-menu {
display: flex;
justify-content: space-between;
width: 33rem;
li a {
font-family: var(--f-hero);
font-size: 1.2rem;
color: var(--c-text-primary);
text-transform: uppercase;
font-weight: 900;
white-space: nowrap;
transition: var(--t-simple);
&:hover {
color: var(--c-text-accent);
}
}
}
p{
font-family: "Montserrat";
font-weight: 300;
line-height: 1.9rem;
font-size: 1rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
p {
font-family: "Montserrat";
font-weight: 300;
line-height: 1.9rem;
font-size: 1rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
strong{
font-weight: 700;
}
}
strong {
font-weight: 700;
}
}

5
src/assets/styles/powered-by.scss
View File

@@ -50,7 +50,8 @@ section#powered-by {
}
}
}
img {
width: 20rem;
svg {
width: 45rem;
margin-top: 6rem;
}
}

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

@@ -4,7 +4,7 @@ section#support {
align-items: center;
padding: 6rem;
background: var(--c-1);
margin-bottom: 6rem;
//margin-bottom: 6rem;
.cols {
display: flex;
align-items: center;
@@ -16,10 +16,18 @@ section#support {
}
img {
max-height: 40vh;
max-width: 100%;
transform: rotateZ(5deg);
}
@media only screen and (max-width: 1200px) {
.cols{
flex-direction: column;
.col:nth-child(1){
order: 2;
}
.col:nth-child(2){
order: 1;
}
}
}
}

18
src/contact.njk
View File

@@ -1,6 +1,18 @@
---
title: About | Start9
layout: layouts/base.njk
title: Contact | Start9
layout: layouts/peripheral.njk
---
{% include "components/landing/community.njk" %}
<section id="hero">
<div id="hero-image">
<img src="../assets/images/about-hero.png" alt=""/>
<img class="img-shadow" src="../assets/images/about-hero.png" alt=""/>
</div>
<div id="logo">
<h1>
<span>Contact Us</span>
</h1>
</div>
</section>
{% include "components/landing/_contact.njk" %}

16
src/index.njk
View File

@@ -58,12 +58,28 @@ layout: layouts/base.njk
{% include "components/landing/be-your-own.njk" %}
<div class="line" id="be-to-powered">
{% include "components/landing/lines/be-to-powered.svg" %}
</div>
{% include "components/landing/powered-by.njk" %}
<div class="line" id="powered-to-support">
{% include "components/landing/lines/powered-to-support.svg" %}
</div>
{% include "components/landing/support.njk" %}
<div class="line" id="support-to-dev">
{% include "components/landing/lines/support-to-dev.svg" %}
</div>
{% include "components/landing/dev.njk" %}
<div class="line" id="dev-to-contact">
{% include "components/landing/lines/dev-to-contact.svg" %}
</div>
{% include "components/landing/community.njk" %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>