Init Masterclass

docs/_includes/website/masterclass.html

@@ -0,0 +1,25 @@
+<div id="masterclass" class="masterclass">
+  <div id="masterclass-background" class="masterclass-background"></div>
+
+  <a class="masterclass-body" href="https://cssmasterclass.io/" target="_blank">
+    <div class="masterclass-content is-hidden-desktop">
+      <img src="{{site.url}}/assets/images/masterclass/logo-mobile.png" height="68" width="240">
+      <img src="{{site.url}}/assets/images/masterclass/text-mobile.png" height="99" width="228">
+      <img src="{{site.url}}/assets/images/masterclass/code-mobile.png" height="89" width="225">
+      <div class="shine">
+        <span>Get started for Free</span>
+      </div>
+    </div>
+
+    <div class="masterclass-content is-hidden-touch">
+      <img src="{{site.url}}/assets/images/masterclass/logo-desktop.png" height="50" width="378">
+      <img src="{{site.url}}/assets/images/masterclass/text-desktop.png" height="58" width="571">
+      <img src="{{site.url}}/assets/images/masterclass/code-desktop.png" height="89" width="375">
+      <div class="shine">
+        <span>Get started for Free</span>
+      </div>
+    </div>
+  </a>
+
+  <button id="masterclass-close" class="modal-close is-large" aria-label="close"></button>
+</div>

docs/_layouts/default.html

@@ -30,5 +30,6 @@
     </script>
     <script src="{{ site.url }}/assets/javascript/main.js"></script>
     {% include global/customizer.html %}
+    {% include website/masterclass.html %}
   </body>
 </html>

docs/assets/css/website.css

@@ -9280,6 +9280,7 @@ button.tag:active,
   --bulma-input-border-width: var(--bulma-control-border-width);
   --bulma-input-border-l: var(--bulma-border-l);
   --bulma-input-border-l-delta: 0%;
+  --bulma-input-border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
   --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
   --bulma-input-active-border-l-delta: var(--bulma-active-border-l-delta);
   --bulma-input-focus-h: var(--bulma-focus-h);
@@ -9306,7 +9307,7 @@ button.tag:active,
 
 .select select, .input, .textarea {
   background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta)));
-  border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
+  border-color: var(--bulma-input-border-color);
   border-radius: var(--bulma-input-radius);
   color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
 }
@@ -17643,6 +17644,9 @@ label.panel-block:hover {
   --bulma-hero-body-padding-small: 1.5rem;
   --bulma-hero-body-padding-medium: 9rem 4.5rem;
   --bulma-hero-body-padding-large: 18rem 6rem;
+  --bulma-hero-gradient-h-offset: 5deg;
+  --bulma-hero-gradient-s-offset: 10%;
+  --bulma-hero-gradient-l-offset: 5%;
 }
 
 .hero {
@@ -37051,3 +37055,228 @@ 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;
+}
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@keyframes rotate-gradient {
+  to {
+    --gradient-angle: 360deg;
+  }
+}
+@property --gradient-angle-offset {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@property --gradient-percent {
+  syntax: "<percentage>";
+  initial-value: 5%;
+  inherits: false;
+}
+@property --gradient-shine {
+  syntax: "<color>";
+  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);
+  }
+}

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();
+  });
 });

docs/website.scss

@@ -499,3 +499,272 @@ $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;
+}
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate-gradient {
+  to {
+    --gradient-angle: 360deg;
+  }
+}
+
+@property --gradient-angle-offset {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@property --gradient-percent {
+  syntax: "<percentage>";
+  initial-value: 5%;
+  inherits: false;
+}
+
+@property --gradient-shine {
+  syntax: "<color>";
+  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);
+  }
+}