From 795a9a76b90095b5832696b5ddd992408a4eaf20 Mon Sep 17 00:00:00 2001 From: Lucy Cifferello <12953208+elvece@users.noreply.github.com> Date: Thu, 10 Nov 2022 07:29:19 -0700 Subject: [PATCH] add banner --- src/_data/site.js | 1 + src/_includes/components/banner.njk | 9 +++++ src/_includes/layouts/base.njk | 2 + src/_includes/layouts/peripheral.njk | 1 + src/assets/js/banner.js | 20 ++++++++++ src/assets/styles/main.scss | 55 +++++++++++++++++++++++++++- src/assets/styles/vars.scss | 3 ++ src/index.njk | 1 + 8 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 src/_includes/components/banner.njk create mode 100644 src/assets/js/banner.js diff --git a/src/_data/site.js b/src/_data/site.js index 8a14bb7..5aaa2b9 100644 --- a/src/_data/site.js +++ b/src/_data/site.js @@ -4,6 +4,7 @@ module.exports = { pitch: { url: '#infographics' //'https://start9.com/latest/learn/index' }, + banner: true, products: { buyUrl: 'https://store.start9.com', diyUrl: 'https://docs.start9.com/latest/diy', diff --git a/src/_includes/components/banner.njk b/src/_includes/components/banner.njk new file mode 100644 index 0000000..1f9799c --- /dev/null +++ b/src/_includes/components/banner.njk @@ -0,0 +1,9 @@ +{% if site.banner %} + +{% endif %} \ No newline at end of file diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 0307e48..d73b5cb 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -9,6 +9,8 @@ {% seo "" %} + + {% include "components/banner.njk" %} {% include "components/header.njk" %} diff --git a/src/_includes/layouts/peripheral.njk b/src/_includes/layouts/peripheral.njk index b45a459..18f70fd 100644 --- a/src/_includes/layouts/peripheral.njk +++ b/src/_includes/layouts/peripheral.njk @@ -6,6 +6,7 @@ layout: layouts/base.njk {{ content | safe }} + diff --git a/src/assets/js/banner.js b/src/assets/js/banner.js new file mode 100644 index 0000000..39602fb --- /dev/null +++ b/src/assets/js/banner.js @@ -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') + } + } +} diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index 6b714a9..3864af7 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -2,6 +2,7 @@ @use "fonts"; @use "menu"; @use "footer"; +@import "vars"; :root { background-attachment: fixed; @@ -18,6 +19,7 @@ --c-gray4: #d1d1d1; --c-gray5: #e0e0e0; --c-gray6: #f4f4f5; + --c-gray7: #1e1e1e; --c-1: rgba(255, 255, 255); --c-text-primary: var(--c-1); @@ -239,8 +241,8 @@ header { position: fixed; width: 100vw; z-index: 2; - top: 0; - + padding-top: 1rem; + a.header__logo { opacity: 0; filter: blur(10px); @@ -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 { --padding: 1rem; //width: calc(100% - 2 * var(--padding) - 15px); @@ -456,4 +495,16 @@ nav { .pb1 { padding-bottom: 1rem; +} + +.pt1 { + padding-top: 1rem; +} + +.pt2 { + padding-top: 2rem; +} + +.pt3 { + padding-top: 3rem; } \ No newline at end of file diff --git a/src/assets/styles/vars.scss b/src/assets/styles/vars.scss index ad51504..48a3ba4 100644 --- a/src/assets/styles/vars.scss +++ b/src/assets/styles/vars.scss @@ -1,3 +1,6 @@ $tablet: 440px; $laptop: 840px; $desktop: 1440px; + +$banner-height: 3rem; +$banner-height-mobile: 5rem; \ No newline at end of file diff --git a/src/index.njk b/src/index.njk index 7bea0ef..b22c32f 100644 --- a/src/index.njk +++ b/src/index.njk @@ -62,6 +62,7 @@ layout: layouts/base.njk +