From fc52c88009c975ddfc7771118c44c07afb57dcbd Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Thu, 7 Nov 2024 12:44:39 +0000 Subject: [PATCH] Add banner --- docs/_includes/website/banner.html | 13 ++++ docs/_layouts/default.html | 2 + docs/assets/css/website.css | 98 +++++++++++++++++++++++++ docs/website.scss | 110 +++++++++++++++++++++++++++++ 4 files changed, 223 insertions(+) create mode 100644 docs/_includes/website/banner.html diff --git a/docs/_includes/website/banner.html b/docs/_includes/website/banner.html new file mode 100644 index 00000000..21096e43 --- /dev/null +++ b/docs/_includes/website/banner.html @@ -0,0 +1,13 @@ +
+

+ +
+ + Get 20% off with code BULMA + +
+ + + Valid until the end of November 2024 + +
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 48dac05d..02813f84 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -4,6 +4,8 @@ {% include global/head.html %} + {% include website/banner.html %} + {{ content }} {% if page.modals %} diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css index c041cacf..49d5d866 100644 --- a/docs/assets/css/website.css +++ b/docs/assets/css/website.css @@ -37064,6 +37064,13 @@ svg { --shine-fg: #fff; --shine-highlight: #0fdb80; --shine-highlight-subtle: #03b565; + --brand: #0fdb80; + --brand-h: 153; + --brand-s: 87%; + --brand-l: 46%; + --brand-hsl: 153, 87%, 46%; + --brand-l-dark: 6%; + --brand-bg: hsl(var(--brand-h), var(--brand-s), var(--brand-l-dark)); } @property --gradient-angle { @@ -37280,3 +37287,94 @@ div.shine { transform: translateY(0); } } +.launch-code { + animation-name: anim-fade-in; + animation-duration: 1s; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/assets/images/coding-background.jpg); + background-size: cover; + background-position: center; + position: relative; + text-align: center; + z-index: 4; + right: 0; + left: 0; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; + animation-duration: 1s; + animation-fill-mode: both; + top: 0; + gap: 0.5rem 1rem; + white-space: nowrap; + flex-direction: column; +} +.launch-code h3, +.launch-code small { + animation-duration: 1s; + animation-fill-mode: both; + max-width: 20rem; + color: white; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1019607843); +} +.launch-code h3 { + animation-delay: 0.5s; + font-size: 1em; + letter-spacing: 0.1em; + text-transform: uppercase; +} +.launch-code small { + animation-delay: 1.5s; + font-size: 1em; + display: block; + opacity: 1; + font-weight: 400; +} +.launch-code .launch-shine { + animation-duration: 1s; + animation-fill-mode: both; + animation-delay: 1s; + max-width: 32rem; + display: flex; + flex-grow: 1; + width: 100%; + border-radius: 12px; +} +.launch-code .shine { + padding: 0.75em; + font-size: 1em; + width: 100%; +} +.launch-code code { + background-color: var(--brand); + color: var(--brand-bg); + font-size: 1.25em; + padding: 0.125em 0.25em; + border-radius: 0.25em; +} +.launch-code strong { + color: var(--brand); +} + +@media screen and (min-width: 1200px) { + .launch-code { + flex-direction: row; + padding: 0.5rem; + } + .launch-code h3, + .launch-code small { + flex-grow: 1; + width: auto; + text-align: center; + max-width: none; + flex-basis: 20rem; + } +} +@media screen and (min-width: 1024px) { + .launch-code { + animation-name: anim-slide-down; + position: sticky; + top: 0; + z-index: 40; + } +} diff --git a/docs/website.scss b/docs/website.scss index e2d30bae..c4e0eff9 100644 --- a/docs/website.scss +++ b/docs/website.scss @@ -508,6 +508,13 @@ $container-max-width: iv.$fullhd; --shine-fg: #fff; --shine-highlight: #0fdb80; --shine-highlight-subtle: #03b565; + --brand: #0fdb80; + --brand-h: 153; + --brand-s: 87%; + --brand-l: 46%; + --brand-hsl: 153, 87%, 46%; + --brand-l-dark: 6%; + --brand-bg: hsl(var(--brand-h), var(--brand-s), var(--brand-l-dark)); } @property --gradient-angle { @@ -768,3 +775,106 @@ div.shine { transform: translateY(0); } } + +.launch-code { + animation-name: anim-fade-in; + animation-duration: 1s; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/assets/images/coding-background.jpg); + background-size: cover; + background-position: center; + position: relative; + text-align: center; + z-index: 4; + right: 0; + left: 0; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; + animation-duration: 1s; + animation-fill-mode: both; + top: 0; + gap: 0.5rem 1rem; + white-space: nowrap; + flex-direction: column; + + h3, + small { + animation-duration: 1s; + animation-fill-mode: both; + max-width: 20rem; + color: white; + text-shadow: 0 2px 4px #0000001a; + } + + h3 { + animation-delay: 0.5s; + font-size: 1em; + letter-spacing: 0.1em; + text-transform: uppercase; + } + + small { + animation-delay: 1.5s; + font-size: 1em; + display: block; + opacity: 1; + font-weight: 400; + } + + .launch-shine { + animation-duration: 1s; + animation-fill-mode: both; + animation-delay: 1s; + max-width: 32rem; + display: flex; + flex-grow: 1; + width: 100%; + border-radius: 12px; + } + + .shine { + // animation-delay: calc(var(--duration) / 2); + // animation-name: none; + padding: 0.75em; + font-size: 1em; + width: 100%; + } + + code { + background-color: var(--brand); + color: var(--brand-bg); + font-size: 1.25em; + padding: 0.125em 0.25em; + border-radius: 0.25em; + } + + strong { + color: var(--brand); + } +} + +@media screen and (min-width: 1200px) { + .launch-code { + flex-direction: row; + padding: 0.5rem; + + h3, + small { + flex-grow: 1; + width: auto; + text-align: center; + max-width: none; + flex-basis: 20rem; + } + } +} + +@media screen and (min-width: 1024px) { + .launch-code { + animation-name: anim-slide-down; + position: sticky; + top: 0; + z-index: 40; + } +}