library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add banner

Browse Source
This commit is contained in:
Jeremy Thomas 2024-11-07 12:44:39 +00:00
parent 66b6a46451
commit fc52c88009
4 changed files with 223 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/_includes/website/banner.html Normal file
View File

@ -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>

2
docs/_layouts/default.html
View File

@ -4,6 +4,8 @@
{% include global/head.html %}
</head>
<body>
{% include website/banner.html %}
{{ content }}
{% if page.modals %}

98
docs/assets/css/website.css
View File

@ -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;
}
}

110
docs/website.scss
View File

@ -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;
}
}