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

add banner

Browse Source
This commit is contained in:
Lucy Cifferello
2022-11-10 07:29:19 -07:00
parent 2274924a73
commit 795a9a76b9
8 changed files with 90 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/_data/site.js
View File

@@ -4,6 +4,7 @@ module.exports = {
pitch: { pitch: {
url: '#infographics' //'https://start9.com/latest/learn/index' url: '#infographics' //'https://start9.com/latest/learn/index'
}, },
banner: true,
products: { products: {
buyUrl: 'https://store.start9.com', buyUrl: 'https://store.start9.com',
diyUrl: 'https://docs.start9.com/latest/diy', diyUrl: 'https://docs.start9.com/latest/diy',

9
src/_includes/components/banner.njk Normal file
View File

@@ -0,0 +1,9 @@
{% if site.banner %}
<section id="banner" style="display: none">
<div class="banner__content">
<p>
<a href="/embassy-pro">Embassy Pro</a> presale ends Nov 20, 11:00pm ET. Price will rise from $1,499 to $1,899. <a target="_blank" rel="noopener noreferrer" href="{{ site.products.pro }}">Get yours</a>!
</p>
</div>
</section>
{% endif %}

2
src/_includes/layouts/base.njk
View File

@@ -10,6 +10,8 @@
</head> </head>
<body> <body>
{% include "components/banner.njk" %}
{% include "components/header.njk" %} {% include "components/header.njk" %}
{% include "components/menu.njk" %} {% include "components/menu.njk" %}

1
src/_includes/layouts/peripheral.njk
View File

@@ -6,6 +6,7 @@ layout: layouts/base.njk
{{ content | safe }} {{ content | safe }}
<script defer type="module" src="{{ '/@root/src/assets/js/banner.js' }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/CustomEase.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/CustomEase.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

20
src/assets/js/banner.js Normal file
View File

@@ -0,0 +1,20 @@
// BANNER
if (document.getElementById('banner')) {
// if peripheral page
if (window.location.pathname.split('/')[1] !== '') {
document.getElementById('banner').style.display = 'none'
document.getElementsByTagName('body')[0].classList.remove('pt3')
document.getElementsByTagName('header')[0].classList.remove('header__top')
if (window.screen.width < 500) {
document.getElementsByTagName('header')[0].classList.add('pt1')
}
} else {
// if main page
document.getElementById('banner').style.display = 'block'
document.getElementsByTagName('body')[0].classList.add('pt3')
document.getElementsByTagName('header')[0].classList.remove('header__top')
if (window.screen.width < 500) {
document.getElementsByTagName('header')[0].classList.add('pt2')
}
}
}

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

@@ -2,6 +2,7 @@
@use "fonts"; @use "fonts";
@use "menu"; @use "menu";
@use "footer"; @use "footer";
@import "vars";
:root { :root {
background-attachment: fixed; background-attachment: fixed;
@@ -18,6 +19,7 @@
--c-gray4: #d1d1d1; --c-gray4: #d1d1d1;
--c-gray5: #e0e0e0; --c-gray5: #e0e0e0;
--c-gray6: #f4f4f5; --c-gray6: #f4f4f5;
--c-gray7: #1e1e1e;
--c-1: rgba(255, 255, 255); --c-1: rgba(255, 255, 255);
--c-text-primary: var(--c-1); --c-text-primary: var(--c-1);
@@ -239,7 +241,7 @@ header {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
z-index: 2; z-index: 2;
top: 0; padding-top: 1rem;
a.header__logo { a.header__logo {
opacity: 0; opacity: 0;
@@ -272,6 +274,43 @@ header {
} }
} }
} }
.header__top {
top: $banner-height;
}
section#banner {
z-index: 10;
position: fixed;
width: 100vw;
top: 0;
height: $banner-height;
.banner__content {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--c-accent);
color: var(--c-1);
p {
max-width: 100vw;
font-size: 1rem;
}
a {
color: var(--c-1);
font-weight: 700;
}
}
}
@media screen and (max-width: 500px) {
section#banner p {
padding: 0 2rem 0 2rem;
}
}
nav { nav {
--padding: 1rem; --padding: 1rem;
//width: calc(100% - 2 * var(--padding) - 15px); //width: calc(100% - 2 * var(--padding) - 15px);
@@ -457,3 +496,15 @@ nav {
.pb1 { .pb1 {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.pt1 {
padding-top: 1rem;
}
.pt2 {
padding-top: 2rem;
}
.pt3 {
padding-top: 3rem;
}

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

@@ -1,3 +1,6 @@
$tablet: 440px; $tablet: 440px;
$laptop: 840px; $laptop: 840px;
$desktop: 1440px; $desktop: 1440px;
$banner-height: 3rem;
$banner-height-mobile: 5rem;

1
src/index.njk
View File

@@ -62,6 +62,7 @@ layout: layouts/base.njk
<script defer type="module" src="{{ '/@root/src/assets/js/bitcoin-animation.js' | url }}"></script> <script defer type="module" src="{{ '/@root/src/assets/js/bitcoin-animation.js' | url }}"></script>
<script defer type="module" src="{{ '/@root/src/assets/js/contact.js' | url }}"></script> <script defer type="module" src="{{ '/@root/src/assets/js/contact.js' | url }}"></script>
<script defer type="module" src="{{ '/@root/src/assets/js/header.js' | url }}"></script> <script defer type="module" src="{{ '/@root/src/assets/js/header.js' | url }}"></script>
<script defer type="module" src="{{ '/@root/src/assets/js/banner.js' }}"></script>
<script defer type="module" src="{{ '/@root/src/assets/js/hero.js' | url }}"></script> <script defer type="module" src="{{ '/@root/src/assets/js/hero.js' | url }}"></script>
<script defer type="module" src="{{ '/@root/src/assets/js/menu.js' | url }}"></script> <script defer type="module" src="{{ '/@root/src/assets/js/menu.js' | url }}"></script>
<script defer type="module" src="{{ '/@root/src/assets/js/landing.js' | url }}"></script> <script defer type="module" src="{{ '/@root/src/assets/js/landing.js' | url }}"></script>