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/_includes/website/carbon.html b/docs/_includes/website/carbon.html index 6adfb8e2..ffa0d728 100644 --- a/docs/_includes/website/carbon.html +++ b/docs/_includes/website/carbon.html @@ -1,5 +1,8 @@
- + +
diff --git a/docs/_includes/website/masterclass.html b/docs/_includes/website/masterclass.html new file mode 100644 index 00000000..11b95036 --- /dev/null +++ b/docs/_includes/website/masterclass.html @@ -0,0 +1,25 @@ +
+
+ + +
+ + + +
+ Get started for Free +
+
+ +
+ + + +
+ Get started for Free +
+
+ + + +
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index cf3cf523..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 %} @@ -30,5 +32,6 @@ {% include global/customizer.html %} + {% include website/masterclass.html %} diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css index 6c4785f0..04acf7ad 100644 --- a/docs/assets/css/website.css +++ b/docs/assets/css/website.css @@ -37055,3 +37055,326 @@ svg { background-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-header-color-l)); color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-header-background-l)); } + +:root { + --shine-bg: #131416; + --shine-bg-subtle: #17191c; + --shine-bg: #0e1917; + --shine-bg-subtle: #0e231c; + --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 { + syntax: ""; + initial-value: 0deg; + inherits: false; +} +@keyframes rotate-gradient { + to { + --gradient-angle: 360deg; + } +} +@property --gradient-angle-offset { + syntax: ""; + initial-value: 0deg; + inherits: false; +} +@property --gradient-percent { + syntax: ""; + initial-value: 5%; + inherits: false; +} +@property --gradient-shine { + syntax: ""; + initial-value: white; + inherits: false; +} +@keyframes rotate-gradient { + to { + --gradient-angle: 360deg; + } +} +.shine { + --animation: gradient-angle linear infinite; + --duration: 3s; + --shadow-size: 2px; + border-radius: 0.5em; + border: 2px solid transparent; + cursor: pointer; + display: block; + font-size: 1.25rem; + font-weight: 500; + isolation: isolate; + line-height: 1; + outline-offset: 4px; + overflow: hidden; + padding: 1em 2em; + color: white; + position: relative; + background: linear-gradient(var(--shine-bg), var(--shine-bg)) padding-box, conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shine-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shine-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box; + box-shadow: inset 0 0 0 1px var(--shine-bg-subtle); + color: var(--shine-fg); +} +.shine::before, .shine::after, +.shine span::before { + content: ""; + pointer-events: none; + position: absolute; + inset-inline-start: 50%; + inset-block-start: 50%; + translate: -50% -50%; + z-index: -1; +} +.shine:active { + translate: 0 1px; +} + +/* Inner shimmer */ +.shine::after { + --animation: shimmer linear infinite; + width: 100%; + aspect-ratio: 1; + background: linear-gradient(-50deg, transparent, var(--shine-highlight), transparent); + mask-image: radial-gradient(circle at bottom, transparent 40%, black); + opacity: 0.2; +} + +.shine span { + z-index: 1; +} +.shine span::before { + --size: calc(100% + 1rem); + width: var(--size); + height: var(--size); + box-shadow: inset 0 -1ex 2rem 4px var(--shine-highlight); + opacity: 0; +} + +/* Animate */ +.shine { + --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); + transition: var(--transition); + transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; +} +.shine, .shine::before, .shine::after { + animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused; + animation-composition: add; +} +.shine span::before { + transition: opacity var(--transition); + animation: calc(var(--duration) * 1.5) breathe linear infinite; +} + +.shine:is(:hover, :focus-visible) { + --gradient-percent: 20%; + --gradient-angle-offset: 95deg; + --gradient-shine: var(--shine-highlight-subtle); +} +.shine:is(:hover, :focus-visible), .shine:is(:hover, :focus-visible)::before, .shine:is(:hover, :focus-visible)::after { + animation-play-state: running; +} +.shine:is(:hover, :focus-visible) span::before { + opacity: 1; +} + +@keyframes gradient-angle { + to { + --gradient-angle: 360deg; + } +} +@keyframes shimmer { + to { + rotate: 360deg; + } +} +@keyframes breathe { + from, to { + scale: 1; + } + 50% { + scale: 1.2; + } +} +.masterclass { + position: fixed; + inset: 0; + z-index: 100; + display: none; + align-items: center; + justify-content: center; +} +.masterclass.is-open { + display: flex; +} +.masterclass .modal-close { + position: fixed; + top: 1rem; + right: 1rem; +} + +.masterclass-background { + background-color: rgba(0, 0, 0, 0.9); + position: absolute; + inset: 0; + animation-name: anim-fade-in; + animation-duration: 1000ms; + animation-fill-mode: both; +} + +.masterclass-body { + background-color: #333; + position: relative; + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/assets/images/coding-background.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 2rem; + border-radius: 1rem; + width: calc(100% - 2rem); + box-shadow: 0px 0px 64px 0px rgba(15, 219, 128, 0.2); + border: 2px solid rgba(15, 219, 128, 0.2); + overflow: hidden; + max-width: 400px; + animation-name: anim-slide-up; + animation-duration: 1000ms; + animation-fill-mode: both; +} + +.masterclass-content { + display: flex; + flex-direction: column; + gap: 1em; + justify-content: center; + align-items: center; +} + +div.shine { + cursor: pointer; +} + +@media screen and (min-width: 1024px) { + .masterclass-body { + max-width: 820px; + } +} +@keyframes anim-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes anim-slide-up { + from { + opacity: 0; + transform: translateY(1rem); + } + to { + opacity: 1; + 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/assets/images/coding-background.jpg b/docs/assets/images/coding-background.jpg new file mode 100644 index 00000000..2ba46dbf Binary files /dev/null and b/docs/assets/images/coding-background.jpg differ diff --git a/docs/assets/images/masterclass/code-desktop.png b/docs/assets/images/masterclass/code-desktop.png new file mode 100644 index 00000000..b9ce9fab Binary files /dev/null and b/docs/assets/images/masterclass/code-desktop.png differ diff --git a/docs/assets/images/masterclass/code-mobile.png b/docs/assets/images/masterclass/code-mobile.png new file mode 100644 index 00000000..47c09eb0 Binary files /dev/null and b/docs/assets/images/masterclass/code-mobile.png differ diff --git a/docs/assets/images/masterclass/logo-desktop.png b/docs/assets/images/masterclass/logo-desktop.png new file mode 100644 index 00000000..417685ac Binary files /dev/null and b/docs/assets/images/masterclass/logo-desktop.png differ diff --git a/docs/assets/images/masterclass/logo-mobile.png b/docs/assets/images/masterclass/logo-mobile.png new file mode 100644 index 00000000..9e48cbc4 Binary files /dev/null and b/docs/assets/images/masterclass/logo-mobile.png differ diff --git a/docs/assets/images/masterclass/masterclass-carbon.png b/docs/assets/images/masterclass/masterclass-carbon.png new file mode 100644 index 00000000..882667ad Binary files /dev/null and b/docs/assets/images/masterclass/masterclass-carbon.png differ diff --git a/docs/assets/images/masterclass/text-desktop.png b/docs/assets/images/masterclass/text-desktop.png new file mode 100644 index 00000000..0b0bf88c Binary files /dev/null and b/docs/assets/images/masterclass/text-desktop.png differ diff --git a/docs/assets/images/masterclass/text-mobile.png b/docs/assets/images/masterclass/text-mobile.png new file mode 100644 index 00000000..37990072 Binary files /dev/null and b/docs/assets/images/masterclass/text-mobile.png differ diff --git a/docs/assets/javascript/main.js b/docs/assets/javascript/main.js index 3ed03650..1c7654f3 100644 --- a/docs/assets/javascript/main.js +++ b/docs/assets/javascript/main.js @@ -108,10 +108,18 @@ document.addEventListener("DOMContentLoaded", () => { // MODALS // Functions to open and close a modal function openModal($el) { + if (!$el) { + return; + } + $el.classList.add("is-active"); } function closeModal($el) { + if (!$el) { + return; + } + $el.classList.remove("is-active"); } @@ -416,4 +424,38 @@ document.addEventListener("DOMContentLoaded", () => { new window.ClipboardJS(".bd-clipboard"); }, 100); + + // MASTERCLASS + const MASTERCLASS_KEY = "cssmasterclass"; + const $masterclass = document.getElementById("masterclass"); + const $masterclassBackground = document.getElementById( + "masterclass-background", + ); + const $masterclassClose = document.getElementById("masterclass-close"); + const masterclassStorage = window.localStorage.getItem(MASTERCLASS_KEY); + + if (masterclassStorage !== "seen") { + window.setTimeout(() => { + openMasterclass(); + }, 3000); + } + + const openMasterclass = () => { + $masterclass.classList.add("is-open"); + }; + + const closeMasterclass = () => { + window.localStorage.setItem(MASTERCLASS_KEY, "seen"); + $masterclass.classList.remove("is-open"); + }; + + $masterclassBackground.addEventListener("click", (event) => { + event.preventDefault(); + closeMasterclass(); + }); + + $masterclassClose.addEventListener("click", (event) => { + event.preventDefault(); + closeMasterclass(); + }); }); diff --git a/docs/website.scss b/docs/website.scss index e58af453..c4e0eff9 100644 --- a/docs/website.scss +++ b/docs/website.scss @@ -499,3 +499,382 @@ $container-max-width: iv.$fullhd; ); } } + +:root { + --shine-bg: #131416; + --shine-bg-subtle: #17191c; + --shine-bg: #0e1917; + --shine-bg-subtle: #0e231c; + --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 { + syntax: ""; + initial-value: 0deg; + inherits: false; +} + +@keyframes rotate-gradient { + to { + --gradient-angle: 360deg; + } +} + +@property --gradient-angle-offset { + syntax: ""; + initial-value: 0deg; + inherits: false; +} + +@property --gradient-percent { + syntax: ""; + initial-value: 5%; + inherits: false; +} + +@property --gradient-shine { + syntax: ""; + initial-value: white; + inherits: false; +} + +@keyframes rotate-gradient { + to { + --gradient-angle: 360deg; + } +} + +.shine { + --animation: gradient-angle linear infinite; + --duration: 3s; + --shadow-size: 2px; + border-radius: 0.5em; + border: 2px solid transparent; + cursor: pointer; + display: block; + font-size: 1.25rem; + font-weight: 500; + isolation: isolate; + line-height: 1; + outline-offset: 4px; + overflow: hidden; + padding: 1em 2em; + color: white; + position: relative; + background: + linear-gradient(var(--shine-bg), var(--shine-bg)) padding-box, + conic-gradient( + from calc(var(--gradient-angle) - var(--gradient-angle-offset)), + transparent, + var(--shine-highlight) var(--gradient-percent), + var(--gradient-shine) calc(var(--gradient-percent) * 2), + var(--shine-highlight) calc(var(--gradient-percent) * 3), + transparent calc(var(--gradient-percent) * 4) + ) + border-box; + box-shadow: inset 0 0 0 1px var(--shine-bg-subtle); + color: var(--shine-fg); + + &::before, + &::after, + span::before { + content: ""; + pointer-events: none; + position: absolute; + inset-inline-start: 50%; + inset-block-start: 50%; + translate: -50% -50%; + z-index: -1; + } + + &:active { + translate: 0 1px; + } +} + +/* Inner shimmer */ +.shine::after { + --animation: shimmer linear infinite; + width: 100%; + aspect-ratio: 1; + background: linear-gradient( + -50deg, + transparent, + var(--shine-highlight), + transparent + ); + mask-image: radial-gradient(circle at bottom, transparent 40%, black); + opacity: 0.2; +} + +.shine span { + z-index: 1; + + &::before { + --size: calc(100% + 1rem); + width: var(--size); + height: var(--size); + box-shadow: inset 0 -1ex 2rem 4px var(--shine-highlight); + opacity: 0; + } +} + +/* Animate */ +.shine { + --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); + transition: var(--transition); + transition-property: --gradient-angle-offset, --gradient-percent, + --gradient-shine; + + &, + &::before, + &::after { + animation: + var(--animation) var(--duration), + var(--animation) calc(var(--duration) / 0.4) reverse paused; + animation-composition: add; + } + + span::before { + transition: opacity var(--transition); + animation: calc(var(--duration) * 1.5) breathe linear infinite; + } +} + +.shine:is(:hover, :focus-visible) { + --gradient-percent: 20%; + --gradient-angle-offset: 95deg; + --gradient-shine: var(--shine-highlight-subtle); + + &, + &::before, + &::after { + animation-play-state: running; + } + + span::before { + opacity: 1; + } +} + +@keyframes gradient-angle { + to { + --gradient-angle: 360deg; + } +} + +@keyframes shimmer { + to { + rotate: 360deg; + } +} + +@keyframes breathe { + from, + to { + scale: 1; + } + 50% { + scale: 1.2; + } +} + +.masterclass { + position: fixed; + inset: 0; + z-index: 100; + display: none; + align-items: center; + justify-content: center; + + &.is-open { + display: flex; + } + + .modal-close { + position: fixed; + top: 1rem; + right: 1rem; + } +} + +.masterclass-background { + background-color: rgba(0, 0, 0, 0.9); + position: absolute; + inset: 0; + animation-name: anim-fade-in; + animation-duration: 1000ms; + animation-fill-mode: both; +} + +.masterclass-body { + background-color: #333; + position: relative; + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/assets/images/coding-background.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 2rem; + border-radius: 1rem; + width: calc(100% - 2rem); + box-shadow: 0px 0px 64px 0px rgba(15, 219, 128, 0.20); + border: 2px solid rgba(15, 219, 128, 0.20); + overflow: hidden; + max-width: 400px; + animation-name: anim-slide-up; + animation-duration: 1000ms; + animation-fill-mode: both; +} + +.masterclass-content { + display: flex; + flex-direction: column; + gap: 1em; + justify-content: center; + align-items: center; +} + +div.shine { + cursor: pointer; +} + +@media screen and (min-width: 1024px) { + .masterclass-body { + max-width: 820px; + } +} + +@keyframes anim-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes anim-slide-up { + from { + opacity: 0; + transform: translateY(1rem); + } + to { + opacity: 1; + 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; + } +}