Add banner

jgthms · Nov 7, 2024 · fc52c88 · fc52c88
1 parent 66b6a46
commit fc52c88
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 0 deletions.
diff --git a/docs/_includes/website/banner.html b/docs/_includes/website/banner.html
@@ -0,0 +1,13 @@
+<div class="launch-code is-animated">
+  <h3><a href="https://cssmasterclass.io/" target="_blank"><img src="{{site.url}}/assets/images/masterclass/logo-desktop.png" height="40" width="300"></a></h3>
+
+  <div class="launch-shine">
+    <a class="shine" href="https://cssmasterclass.io/" target="_blank">
+      <span>Get <strong>20% off</strong> with code <code>BULMA</code></span>
+    </a>
+  </div>
+
+  <small>
+    Valid until the end of <strong>November 2024</strong>
+  </small>
+</div>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -4,6 +4,8 @@
     {% include global/head.html %}
   </head>
   <body>
+    {% include website/banner.html %}
+
     {{ content }}
 
     {% if page.modals %}

diff --git 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
@@ -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;
+  }
+}