status-im
/
status-network-site
mirror of https://github.com/status-im/status-network-site.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add texts from doc. Improve responsive. Finish about. 

Signed-off-by: Nistor Cristian <contact@nistorcristian.com>
This commit is contained in:
Nistor Cristian 2019-11-19 23:38:37 +02:00 committed by Jakub
parent 013727d125
commit a1b598a4db
10 changed files with 8798 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.dev.yml
View File

@ -15,8 +15,6 @@ i18n_dir: :lang
url: https://dev.status.im/
root: /
permalink: news/:year/:month/:day/:title/
archive_dir: news
code_dir: downloads/code
new_post_name: :year-:month-:day-:title.md # File name of new posts
post_asset_folder: true

2
_config.prod.yml
View File

@ -19,8 +19,6 @@ i18n_dir: :lang
url: https://status.im/
root: /
permalink: news/:year/:month/:day/:title/
archive_dir: news
code_dir: downloads/code
new_post_name: :year-:month-:day-:title.md # File name of new posts
post_asset_folder: true

8602
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
source/news2/index.md
View File

@ -1,4 +0,0 @@
---
title: News
layout: news
---

77
themes/navy/layout/about.ejs
View File

@ -1,17 +1,16 @@
<!-- INTRO-SECTION -->
<section class="intro about-intro">
<section class="intro about-intro pt-150">
<div class="container">
<div class="row">
<div class="col-md-9">
<h1>A Network <br> Creating Change</h1>
<p class="teaser-2">The Status Network is an open set of projects working toward the same mission – to enable people their own means for money, communication, law, and through privacy, preserve culture.</p>
<p class="teaser-2">We build financial and social technology that empowers people to build their own sovereign societies.</p>
<h1 class="mb-50">A Network <br> Creating Change</h1>
<p class="teaser-2">The Status Network is an open set of projects building peer-to-peer technologies for people to transact securely, communicate freely, and organize with confidence. </p>
<p class="teaser-2">Together, we build financial and social technology that empowers people to advance their own sovereign communities.</p>
<ul class="inline-links">
<li><a href="#" class="link-arrow"><%- image_tag("img/arrow-bottom.svg") %></a></li>
<li><a href="#" class="link-arrow">What we build</a></li>
<li><a href="#" class="link-arrow">Why we build it</a></li>
<li><a href="#" class="link-arrow">Sovereign Societies</a></li>
<li><a href="#" class="link-arrow">Our Principles</a></li>
<li><svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8.75369C16 8.30652 15.833 7.85996 15.5005 7.51727C14.8356 6.83187 13.7655 6.83187 13.1006 7.51727L9.69725 11.0245V1.74945C9.69725 0.780154 8.9395 0 7.99915 0C7.05881 0 6.30195 0.780154 6.30195 1.74945V11.0254L2.89859 7.51727C2.23367 6.83187 1.16362 6.83187 0.498695 7.51727C-0.166232 8.20266 -0.166232 9.30564 0.498695 9.99104L6.79965 16.486C7.46458 17.1713 8.53462 17.1713 9.19955 16.486L15.5005 9.99104C15.833 9.64834 16 9.20087 16 8.75369Z" fill="#4360DF"/> </svg></li>
<li><a href="#what" class="link-arrow">What we build</a></li>
<li><a href="#why" class="link-arrow">Why we build it</a></li>
<li><a href="#society" class="link-arrow">Sovereign Societies</a></li>
</ul>
</div>
</div>
@ -20,43 +19,42 @@
<!-- END-INTRO-SECTION -->
<!-- WHAT-WE-BUILD -->
<section class="what-we-build">
<section class="what-we-build pt-150 pb-150" id="what">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="inner">
<h2 class="mb-50">What we build</h2>
<p class="teaser-2 mb-50">We build on the entire technology stack from low level protocols, to developer tools, to consumer products & applications. Our technology aim is to remove the need for third parties and preserve privacy and security for all. </p>
<p class="teaser-2">Collectively we build a powerful suite to support soverign economies around the world.</p>
<p class="teaser-2">The Network is building a new decentralized technology stack from low level protocols, to developer tools, to consumer products & applications. Our focus is on security, privacy, and peer-to-peer infrastructure and experiences.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-5 mr-auto">
<ul>
<li>
<h4 class="m-b-30">Implementation</h4>
<h4 class="mb-30">Implementation</h4>
<p>We support the growth of the network and implement our tech where needed most.</p>
</li>
<li>
<h4 class="m-b-30">Products</h4>
<h4 class="mb-30">Products</h4>
<p>Applications, hardware, services that allow real people to leverage the power of web3.</p>
</li>
<li>
<h4 class="m-b-30">Developer Tools</h4>
<h4 class="mb-30">Developer Tools</h4>
<p>Frameworks and developer tools to help technologists build the products and services needed.</p>
</li>
<li>
<h4 class="m-b-30">Infrastructure</h4>
<h4 class="mb-30">Infrastructure</h4>
<p>We build the low level protocols for secure communication and built for resource restricted devices - making the technology accesible to all.</p>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="inner-img">
<a href="#"><%- image_tag("img/infografic.png") %></a>
<%- image_tag("img/infografic.png") %>
</div>
</div>
</div>
@ -65,15 +63,18 @@
<!-- END-WHAT-WE-BUILD -->
<!-- WHY-WE-BUILD -->
<section class="why-we-build">
<section class="why-we-build pt-150 pb-150" id="why">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="inner">
<h2 class="mb-50">Why we build it</h2>
<p class="teaser-2 mb-50">Freedom is threatened around the world with government surveillance, third party censorship, and volatile economies. The world is nearing 1 billion people living in slums, and over 10% of the world's population lives on less than $1.90 per day. Lives are bound by factors outside of individual control. It is a fundamental right to have the means for financial independence, voice, and sovereignty.</p>
<p class="teaser-2 mb-50">Our principles drive us to build the means for freedom to anyone who wants to take control back into their own hands.</p>
<a href="#" class="link-arrow"><%- image_tag("img/arrow-right.svg") %>See the Principles</a>
<p class="teaser-2 mb-50">Our principles drive us to build the means for freedom to anyone who wants to take control back into their own hands. Because we believe that having the means for financial independence, free expression, and community sovereignty should be fundamental human rights.</p>
<p class="teaser-2 mb-50">Sovereign communities are emerging around the world, and they may flourish by migrating to more resilient internet infrastructure - free from surveillance and centralized banking systems.</p>
<p class="teaser-2 mb-50">By providing open, secure internet infrastructure, we hope to empower emerging communities with resilient means to organize, govern, and build their own economic systems free from surveillance and central banking. This encourages emerging communities to harness individual human rights - liberty, privacy, transparency - as the default optimal structure for their communities.</p>
<p class="teaser-2 mb-50">We believe advancements in p2p and blockchain technologies will result in a more resilient, secure internet that fosters economic opportunity and upholds human rights.</p>
<p class="teaser-2 mb-50">We aim to empower local communities that seek greater sovereignty, by providing the necessary tools and infrastructure to communicate, organize, and govern themselves - free from surveillance and centralized institutions.</p>
<a href="#" class="link-arrow"><svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25369 0.5C8.80652 0.5 8.35996 0.667031 8.01727 0.999494C7.33187 1.66442 7.33187 2.73446 8.01727 3.39939L11.5245 6.80275H2.24945C1.28015 6.80275 0.5 7.5605 0.5 8.50085C0.5 9.44119 1.28015 10.1981 2.24945 10.1981H11.5254L8.01727 13.6014C7.33187 14.2663 7.33187 15.3364 8.01727 16.0013C8.70266 16.6662 9.80564 16.6662 10.491 16.0013L16.986 9.70035C17.6713 9.03542 17.6713 7.96538 16.986 7.30045L10.491 0.999494C10.1483 0.66703 9.70087 0.5 9.25369 0.5Z" fill="#4360DF"/> </svg> Learn More About Sovereign Communities</a>
</div>
</div>
</div>
@ -82,31 +83,43 @@
<!-- END-WHY-WE-BUILD -->
<!-- SOVEREIGN-SOCIETY -->
<section class="sovereign-society">
<section class="sovereign-society pt-150 pb-150" id="society">
<div class="container">
<div class="row">
<div class="col-md-9">
<h2 class="mb-50">What is a sovereign society?</h2>
<p class="teaser-2">Sovereignty is assurance of the freedom to govern oneself. A society needs three core pillars to stand up and govern itself.</p>
<h2 class="mb-50">How can The Status Network help sovereign communities?</h2>
<p class="teaser-2">Every individual and community has different needs. The Status Network provides modular sets of tools and infrastructure to help diverse communities around the globe thrive.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="row mb-50">
<div class="col-md-4 d-flex flex-column mt-30">
<div class="inner ">
<span>I.</span>
<h5>The means to build a secure economy.</h5>
<h5><b>Communication</b> The means to build a secure economy.</h5>
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 d-flex flex-column mt-30">
<div class="inner ">
<span>II.</span>
<h5>The means to communicate securely.</h5>
<h5><b>Commerce </b> Tools to trade and access open financial services.</h5>
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 d-flex flex-column mt-30">
<div class="inner ">
<span>III.</span>
<h5>The will to do both.</h5>
<h5><b>Mobile</b> Enables equal access even in the most remote areas in the world.</h5>
</div>
</div>
<div class="col-md-4 d-flex flex-column mt-30">
<div class="inner">
<span>IV.</span>
<h5><b>Decentralized</b> Neutral underlying p2p protocols that aren't controlled by a single company or person.</h5>
</div>
</div>
<div class="col-md-4 d-flex flex-column mt-30">
<div class="inner">
<span>V.</span>
<h5><b>Open Source</b> Software for developers to harness a p2p stack to create their own applications that uphold human rights and fosters economic opportunity.</h5>
</div>
</div>
</div>

62
themes/navy/layout/index.ejs
View File

@ -3,13 +3,13 @@
<div class="container">
<div class="row">
<div class="col-md-10">
<h1 class="mb-50">Technology to empower sovereign societies.</h1>
<h1 class="mb-50">The Status Network</h1>
</div>
</div>
<div class="row">
<div class="col-md-7">
<p class="teaser-1 mb-150">The Status Network is a collection of projects and people dedicated to creating the tools and infrastructure for resilient, sustainable and inclusive communities.</p>
<a href="#" class="link-arrow">
<p class="teaser-1 mb-150">The Status Network is a collection of projects and people creating the products, tools and infrastructure for resilient, sustainable and inclusive communities.</p>
<a href="/about/" class="link-arrow">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25369 0.5C8.80652 0.5 8.35996 0.667031 8.01727 0.999494C7.33187 1.66442 7.33187 2.73446 8.01727 3.39939L11.5245 6.80275H2.24945C1.28015 6.80275 0.5 7.5605 0.5 8.50085C0.5 9.44119 1.28015 10.1981 2.24945 10.1981H11.5254L8.01727 13.6014C7.33187 14.2663 7.33187 15.3364 8.01727 16.0013C8.70266 16.6662 9.80564 16.6662 10.491 16.0013L16.986 9.70035C17.6713 9.03542 17.6713 7.96538 16.986 7.30045L10.491 0.999494C10.1483 0.66703 9.70087 0.5 9.25369 0.5Z" fill="#4360DF"/> </svg>
Learn More
</a>
@ -56,7 +56,7 @@
<div class="col-md-6">
<div class="inner-start">
<h2>A Robust and <br>Powerful Ecosystem</h2>
<p class="teaser-2">We build at each layer in the technology stack to ensure alignment between the blockchain base layer, messaging capabilities, and variety of meaningful user experiences.</p>
<p class="teaser-2">We build decentralized technologies ranging from protocol-level infrastructure to consumer applications — forming an open source peer-to-peer technology stack.</p>
</div>
</div>
</div>
@ -78,53 +78,53 @@
<div class="bg"><%- image_tag("/img/bg-status.png") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-status.svg") %></div>
<span class="black">Private, Secure Communication</span>
<span class="black">Private, secure communication – Chat, Browse, Transact</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="inner-img">
<a href="https://keycard.status.im/" target="_blank">
<a href="https://keycard.tech" target="_blank">
<div class="bg"><%- image_tag("/img/bg-keycard.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-keycard.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Secure, Contactless, Open Source Hardwallet</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="inner-img">
<a href="#" target="_blank">
<a href="https://dap.ps/" target="_blank">
<div class="bg"><%- image_tag("/img/bg-dapps.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-dapps.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Curated Ethereum dapp explorer </span>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 m-t-30">
<div class="col-lg-4 col-md-6 mt-30">
<div class="inner-img">
<a href="#" target="_blank">
<a href="https://teller.exchange" target="_blank">
<div class="bg"><%- image_tag("/img/bg-teller.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-teller.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Exchange fiat and crypto anywhere</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 m-t-30">
<div class="col-lg-4 col-md-6 mt-30">
<div class="inner-img">
<a href="#" target="_blank">
<a href="https://assemble.fund/" target="_blank">
<div class="bg"><%- image_tag("/img/bg-assemble.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-assemble.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Decentralized project funding</span>
</div>
</a>
</div>
@ -148,18 +148,18 @@
<div class="bg"><%- image_tag("/img/bg-embark.png") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-embark.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>All-in-one developer platform for building & deploying DApps</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="inner-img">
<a href="#" target="_blank">
<a href="https://subspace.status.im/" target="_blank">
<div class="bg"><%- image_tag("/img/bg-subspace.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-subspace.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Frontend development library & blockchain sync</span>
</div>
</a>
</div>
@ -183,7 +183,7 @@
<div class="bg"><%- image_tag("/img/bg-vac.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-vac.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Secure peer-to-peer messaging stack.</span>
</div>
</a>
</div>
@ -194,7 +194,7 @@
<div class="bg"><%- image_tag("/img/bg-nimbus.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-nimbus.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Researching and implementing light Ethereum 2.0 clients</span>
</div>
</a>
</div>
@ -205,7 +205,7 @@
<div class="bg"><%- image_tag("/img/bg-libp2p.svg") %></div>
<div class="inner">
<div class="product-logo"><%- image_tag("/img/logo-libp2p.svg") %></div>
<span>Our Secure, Contactless, Open Source Hardwallet</span>
<span>Implementation of libp2p in Nim for mobile phones & other resource restricted devices.</span>
</div>
</a>
</div>
@ -216,10 +216,10 @@
<div class="row">
<div class="col-md-6">
<h3 class="mb-50">Have a project or idea that supports the mission?</h3>
<p class="teaser-2">Submit a proposal to the Status Network through Assemble - our decentralized funding mechanism. We are looking to fund projects across each layer in the stack that support our mission.</p>
<p class="teaser-2">Submit a proposal to the Status Network through Assemble - our decentralized funding platform. We are looking to fund projects across each layer in the stack that support our mission.</p>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center">
<a href="#" class="link-arrow">
<a href="https://assemble.fund/" class="link-arrow" target="_blank">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.7985 0.5C10.2724 0.5 9.74702 0.698349 9.34384 1.09315C8.5375 1.88275 8.5375 3.15343 9.34384 3.94302L13.47 7.98451H2.55817C1.41783 7.98451 0.5 8.88434 0.5 10.001C0.5 11.1177 1.41783 12.0164 2.55817 12.0164H13.471L9.34384 16.0579C8.5375 16.8475 8.5375 18.1182 9.34384 18.9078C10.1502 19.6974 11.4478 19.6974 12.2542 18.9078L19.8952 11.4254C20.7016 10.6358 20.7016 9.36513 19.8952 8.57554L12.2542 1.09315C11.851 0.698349 11.3245 0.5 10.7985 0.5Z" fill="#6C87FF"/> </svg>
Submit a Proposal
</a>
@ -234,17 +234,17 @@
<div class="row">
<div class="col-xl-5 col-md-6">
<div class="inner">
<h3 class="mb-50">A Mission, <br>Driven by Principles</h3>
<p class="teaser-2 mb-50">We’re building technology to pave the way for anyone who wants to join our mission creating open solutions for communities around the globe.</p>
<h3 class="mb-50">A Mission, <br>driven by principles</h3>
<p class="teaser-2 mb-50">Our peer-to-peer technology provides anyone, anywhere access to private and secure solutions - we’re working to empower sovereign communities around the globe.</p>
<ul class="inline-links">
<li>
<a href="#" class="link-arrow">
<a href="/about/" class="link-arrow">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25369 0.5C8.80652 0.5 8.35996 0.667031 8.01727 0.999494C7.33187 1.66442 7.33187 2.73446 8.01727 3.39939L11.5245 6.80275H2.24945C1.28015 6.80275 0.5 7.5605 0.5 8.50085C0.5 9.44119 1.28015 10.1981 2.24945 10.1981H11.5254L8.01727 13.6014C7.33187 14.2663 7.33187 15.3364 8.01727 16.0013C8.70266 16.6662 9.80564 16.6662 10.491 16.0013L16.986 9.70035C17.6713 9.03542 17.6713 7.96538 16.986 7.30045L10.491 0.999494C10.1483 0.66703 9.70087 0.5 9.25369 0.5Z" fill="#4360DF"/> </svg>
Learn More
</a>
</li>
<li>
<a href="#" class="link-arrow">
<a href="https://ambassador.status.im/" class="link-arrow">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25369 0.5C8.80652 0.5 8.35996 0.667031 8.01727 0.999494C7.33187 1.66442 7.33187 2.73446 8.01727 3.39939L11.5245 6.80275H2.24945C1.28015 6.80275 0.5 7.5605 0.5 8.50085C0.5 9.44119 1.28015 10.1981 2.24945 10.1981H11.5254L8.01727 13.6014C7.33187 14.2663 7.33187 15.3364 8.01727 16.0013C8.70266 16.6662 9.80564 16.6662 10.491 16.0013L16.986 9.70035C17.6713 9.03542 17.6713 7.96538 16.986 7.30045L10.491 0.999494C10.1483 0.66703 9.70087 0.5 9.25369 0.5Z" fill="#4360DF"/> </svg>
Become an Ambassador
</a>
@ -254,12 +254,8 @@
</div>
<div class="col-md-6 ml-auto">
<div class="inner">
<h3 class="mb-50">SNT - More than a <br>utility token</h3>
<p class="teaser-2 mb-50">The Status Network Token does more than power features in the Status App and throughout the ecosystem stack. It is a purpose driven token to incentivize participation in the network and push us collectively towards our common goal.</p>
<a href="#" class="link-arrow">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25369 0.5C8.80652 0.5 8.35996 0.667031 8.01727 0.999494C7.33187 1.66442 7.33187 2.73446 8.01727 3.39939L11.5245 6.80275H2.24945C1.28015 6.80275 0.5 7.5605 0.5 8.50085C0.5 9.44119 1.28015 10.1981 2.24945 10.1981H11.5254L8.01727 13.6014C7.33187 14.2663 7.33187 15.3364 8.01727 16.0013C8.70266 16.6662 9.80564 16.6662 10.491 16.0013L16.986 9.70035C17.6713 9.03542 17.6713 7.96538 16.986 7.30045L10.491 0.999494C10.1483 0.66703 9.70087 0.5 9.25369 0.5Z" fill="#4360DF"/> </svg>
Learn More
</a>
<h3 class="mb-50">SNT - The Status Network Token</h3>
<p class="teaser-2 mb-50">SNT is the native token of The Status Network and connects the products and services throughout the ecosystem. It governs the network, powers products features, and incentivizes ongoing initiatives.</p>
</div>
</div>
</div>

1
themes/navy/layout/layout.ejs
View File

@ -14,6 +14,7 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js" integrity="sha256-aVHuwKjAybLqtyxPV5dl4PGQFlgikZ3ceRuzkQlv18A=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.10.0/rellax.min.js" integrity="sha256-jyHh7xruaFLUoKPPnsSwEvYrBnzJczScRNnuh4Ysblc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>

7
themes/navy/layout/partial/header.ejs
View File

@ -29,14 +29,13 @@
</div>
</div>
<div class="container">
<div class="row">
<div class="row mt-auto mb-auto">
<div class="col-md-12">
<nav class="pt-150 pb-150">
<ul>
<li class="<% if(is_current('/')) { %>active<% } %>"><a href="/">Home</a></li>
<li class="<% if(is_current('about')) { %>active<% } %>"><a href="/">About</a></li>
<li class="<% if(is_current('principles')) { %>active<% } %>"><a href="/">Status Network Token</a></li>
<li class="<% if(is_current('news')) { %>active<% } %>"><a href="/">News</a></li>
<li class="<% if(is_current('about')) { %>active<% } %>"><a href="/about/">About</a></li>
<li class="<% if(is_current('news')) { %>active<% } %>"><a href="https://news.thestatus.network/" target="_blank">News</a></li>
</ul>
</nav>
</div>

14
themes/navy/source/js/main.js
View File

@ -21,6 +21,16 @@ $(document).ready(function () {
});
});
$('.about-intro .inline-links a').each(function (index, element) {
$(this).on('click', function (event) {
event.preventDefault();
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 300);
});
});
$(window).on('scroll', function(event) {
$('.in-view').each(function (index, element) {
@ -32,6 +42,10 @@ $(document).ready(function () {
});
var rellax = new Rellax('.floating-logo', {
speed: -3,
});
// Check if element is into view when scrolling
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();

159
themes/navy/source/scss/main.scss
View File

@ -91,22 +91,22 @@ h1{
}
h2{
font-size: 3.625rem;
font-size: 3rem;
line-height: 3rem;
font-weight: bold;
line-height: 3.625rem;
letter-spacing: -1.85897px;
}
h3{
font-size: 3rem;
font-size: 2.625rem;
line-height: 2.625rem;
font-weight: bold;
line-height: 3rem;
letter-spacing: -1.21795px;
}
h4{
font-size: 2.375rem;
line-height: 2.375rem;
font-size: 2rem;
line-height: 2rem;
font-weight: bold;
letter-spacing: -1.21795px;
}
@ -118,7 +118,7 @@ ul{
}
.link-arrow{
font-size: 1.25rem;
font-size: 1rem;
font-weight: 600;
color: $purple;
letter-spacing: -0.2px;
@ -145,16 +145,16 @@ ul{
}
.teaser-1{
font-size: 2.375rem;
font-size: 1.625rem;
line-height: 2.25rem;
font-weight: 400;
line-height: 3rem;
color: $light-grey;
}
.teaser-2{
font-size: 1.75rem;
font-size: 1.375rem;
line-height: 2rem;
font-weight: 400;
line-height: 2.375rem;
color: $light-grey;
letter-spacing: -0.965517px;
}
@ -165,14 +165,18 @@ ul{
align-items: baseline;
}
.m-t-30{
.mt-30{
margin-top: 30px;
}
.m-b-30{
.mb-30{
margin-bottom: 30px;
}
.mt-50{
margin-top: 50px;
}
.mb-50{
margin-bottom: 50px;
}
@ -228,24 +232,29 @@ header{
.header-overlay{
background: $darker-grey;
padding: 30px 45px;
padding: 30px 45px !important;
overflow: auto;
transition: all .3s ease-in-out;
.modal-dialog{
max-width: 100%;
margin: 0;
height: 100%;
display: flex;
.modal-content{
background: transparent;
border: none;
display: flex;
.container{
flex: 1;
display: flex;
flex-direction: column;
}
}
}
.nav-section{
display: flex;
justify-content: space-between;
align-items: center;
a[data-dismiss="modal"]{
margin-right: 30px;
}
}
nav{
ul{
@ -257,10 +266,13 @@ header{
}
a{
color: #B6B6B6;
font-size: 4.875rem;
line-height: 7.5rem;
font-size: 3.875rem;
line-height: 5.5rem;
font-weight: bold;
letter-spacing: -2.5px;
&:hover{
color: rgba(255, 255, 255, 0.75);
}
}
}
}
@ -273,13 +285,13 @@ header{
margin-left: 20px;
a{
color: $white;
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 5px;
display: inline-block;
}
p{
font-size: 1.125rem;
font-size: 1rem;
color: $lighter-grey;
line-height: 1.375rem;
}
@ -306,9 +318,9 @@ header{
padding-bottom: 80px;
position: relative;
h1{
font-size: 4.875rem;
font-size: 3.875rem;
line-height: 3.875rem;
font-weight: bold;
line-height: 4.875rem;
color: $black;
}
.floating-logo{
@ -331,7 +343,7 @@ header{
li{
margin: 0 15px;
a{
font-size: 1.25rem;
font-size: 1rem;
font-weight: 600;
color: $white;
display: flex;
@ -364,6 +376,7 @@ header{
margin-bottom: 80px;
display: flex;
align-items: center;
font-size: 1.625rem;
svg{
margin-right: 20px;
}
@ -376,7 +389,7 @@ header{
&:hover{
.inner{
span{
max-height: 60px;
max-height: 120px;
margin-bottom: 20px;
}
}
@ -416,7 +429,7 @@ header{
color: $white;
}
a{
font-size: 2.25rem;
font-size: 1.625rem;
color: #6C87FF;
}
}
@ -438,7 +451,7 @@ header{
}
.inline{
.link-arrow{
font-size: 1.875rem;
font-size: 1.375rem;
}
}
}
@ -489,7 +502,7 @@ footer{
display: inline-block;
}
p{
font-size: 1.125rem;
font-size: 1rem;
line-height: 1.375rem;
}
}
@ -540,7 +553,6 @@ footer{
.what-we-build{
background-color: $slight-grey;
padding: 250px 0 220px 0;
.inner{
h2{
color: $black;
@ -568,31 +580,29 @@ footer{
}
}
.why-we-build{
padding: 200px 0;
h2{
color: $black;
}
}
.sovereign-society{
padding: 200px 0;
background-color: $slight-grey;
.inner{
background-color: $white;
padding: 30px 40px;
text-align: center;
margin: 70px 0 70px 0;
height: 100%;
span{
font-size: 3.625rem;
font-size: 3rem;
font-weight: bold;
color: #DCDCDC;
}
h5{
font-size: 1.75rem;
font-size: 1rem;
line-height: 1.5rem;
margin-top: 15px;
font-weight: bold;
color: $black;
b{
font-weight: bold;
display: block;
font-size: 1.375rem;
line-height: 2rem;
}
}
}
}
@ -692,27 +702,30 @@ a.active{
}
@media (max-width: 1599px){
h2 {
font-size: 3rem;
line-height: 3rem;
html{
font-size: 14px;
}
h3{
h2 {
font-size: 2.625rem;
line-height: 2.625rem;
}
h4{
h3{
font-size: 2rem;
line-height: 2rem;
}
h4{
font-size: 1.625rem;
line-height: 1.625rem;
}
.teaser-2{
font-size: 1.375rem;
line-height: 2rem;
font-size: 1.125rem;
line-height: 1.5rem;
}
.intro{
padding-bottom: 60px;
h1{
font-size: 3.875rem;
line-height: 3.875rem;
font-size: 3.5rem;
line-height: 3.5rem;
}
.floating-logo{
svg{
@ -721,8 +734,8 @@ a.active{
}
}
.teaser-1{
font-size: 1.625rem;
line-height: 2.25rem;
font-size: 1.25rem;
line-height: 1.625rem;
}
.pt-150 {
padding-top: 100px;
@ -753,8 +766,8 @@ a.active{
ul{
li{
a{
font-size: 3.875rem;
line-height: 5.5rem;
font-size: 2.875rem;
line-height: 4.5rem;
}
}
}
@ -786,6 +799,23 @@ a.active{
}
.ecosystem{
.products{
.inner-img{
height: 280px;
display: flex;
align-items: flex-end;
overflow: hidden;
a{
.inner{
.product-logo{
transform: scale(0.7) translate3d(calc(-20% - 5px), 20px, 0);
}
span{
font-size: 1rem;
line-height: 1.25rem;
}
}
}
}
.grey-subtitle{
margin-bottom: 60px;
svg{
@ -797,7 +827,7 @@ a.active{
.inner-end{
margin-top: 150px;
a{
font-size: 1.625rem;
font-size: 1.25rem;
}
}
}
@ -904,7 +934,7 @@ a.active{
}
}
.header-overlay{
padding: 25px 5px;
padding: 25px 5px !important;
.logo{
img{
width: 184px;
@ -975,6 +1005,19 @@ a.active{
}
}
}
.ecosystem{
.products{
.inner-img{
a{
.inner{
.product-logo{
transform: none;
}
}
}
}
}
}
}
@media (max-width: 991px){
@ -1035,7 +1078,7 @@ a.active{
ul{
justify-content: flex-start;
li{
margin: 0 30px 0 0;
margin: 0 15px 0 0;
&:last-child{
margin-right: 0;
}
@ -1043,7 +1086,7 @@ a.active{
font-size: 0.875rem;
letter-spacing: -0.14px;
font-weight: normal;
padding: 0;
padding: 6px 10px;
svg{
display: none;
}