Skip to content

Commit

Permalink
Merge branch 'masterclass'
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgthms
jgthms committed Nov 7, 2024
2 parents b85d189 + 1c7fa94 commit 70ecf07
Show file tree
Hide file tree
Showing 15 changed files with 789 additions and 1 deletion.
13 changes: 13 additions & 0 deletions docs/_includes/website/banner.html
View file
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 4 additions & 1 deletion docs/_includes/website/carbon.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<div id="carboncontainer" class="bd-carbon">
<div id="carbon">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js"></script>
<a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; width: 400px; height: 260px;">
<img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
</a>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>
</div>
</div>
25 changes: 25 additions & 0 deletions docs/_includes/website/masterclass.html
View file
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions docs/_layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
{% include global/head.html %}
</head>
<body>
{% include website/banner.html %}

{{ content }}

{% if page.modals %}
Expand All @@ -30,5 +32,6 @@
</script>
<script src="{{ site.url }}/assets/javascript/main.js"></script>
{% include global/customizer.html %}
{% include website/masterclass.html %}
</body>
</html>
323 changes: 323 additions & 0 deletions docs/assets/css/website.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: "<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);
}
}
.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;
}
}
Binary file added docs/assets/images/coding-background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/code-desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/code-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/logo-desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/logo-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/masterclass-carbon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/text-desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/masterclass/text-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 70ecf07

Please sign in to comment.