mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add fortyfour
This commit is contained in:
parent
0300482723
commit
8a41c9ed92
@ -29,3 +29,5 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
{% include global/fortyfour.html %}
|
||||||
|
@ -1,8 +1,23 @@
|
|||||||
<a class="bd-banner is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
|
<a class="bd-banner is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
|
||||||
<div class="bd-banner-background"></div>
|
<p class="bd-banner-title">
|
||||||
<p class="bd-banner-text">
|
New ebook!
|
||||||
<strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="bd-emoji-bis">😃</span>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p class="bd-banner-text">
|
||||||
|
My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="bd-emoji-bis">😃</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<figure class="bd-banner-image">
|
||||||
|
{%
|
||||||
|
include elements/responsive-image.html
|
||||||
|
path="css-book/css-in-44-minutes-book-cover"
|
||||||
|
extension="png"
|
||||||
|
alt="CSS in 44 minutes book cover"
|
||||||
|
width="126"
|
||||||
|
height="176"
|
||||||
|
%}
|
||||||
|
</figure>
|
||||||
|
|
||||||
<span class="button is-success is-rounded">
|
<span class="button is-success is-rounded">
|
||||||
<strong>Get it now →</strong>
|
<strong>Get it now →</strong>
|
||||||
</span>
|
</span>
|
||||||
|
@ -1,25 +1,32 @@
|
|||||||
.bd-banner
|
.bd-banner
|
||||||
align-items: center
|
border-radius: $radius-large
|
||||||
display: flex
|
display: block
|
||||||
justify-content: center
|
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
padding: 1rem
|
margin-top: 1.5rem
|
||||||
|
padding: 1.5rem
|
||||||
position: relative
|
position: relative
|
||||||
|
text-align: center
|
||||||
|
transition-duration: $speed
|
||||||
|
transition-property: border-color, color
|
||||||
strong
|
strong
|
||||||
color: currentColor
|
color: currentColor
|
||||||
.tag
|
.tag
|
||||||
margin-right: 0.5em
|
margin-bottom: 0.25em
|
||||||
&.is-patreon
|
&.is-patreon
|
||||||
background-color: $patreon-blue
|
background-color: $patreon-blue
|
||||||
color: $white
|
color: $white
|
||||||
&.is-fortyfour
|
&.is-fortyfour
|
||||||
background-color: $fortyfour
|
background-color: $white
|
||||||
color: $white
|
border: 2px solid $background
|
||||||
.button
|
.button
|
||||||
transform-origin: center
|
transform-origin: center
|
||||||
transition-duration: $speed
|
transition-duration: $speed
|
||||||
transition-property: transform
|
transition-property: transform
|
||||||
&:hover
|
&:hover
|
||||||
|
border-color: $link
|
||||||
|
color: $link
|
||||||
|
.bd-banner-title
|
||||||
|
color: currentColor
|
||||||
.button
|
.button
|
||||||
transform: scale(1.1)
|
transform: scale(1.1)
|
||||||
|
|
||||||
@ -30,11 +37,27 @@
|
|||||||
background-size: cover
|
background-size: cover
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
|
|
||||||
.bd-banner-text
|
.bd-banner-title
|
||||||
|
color: $text-strong
|
||||||
|
font-size: 1.25em
|
||||||
|
font-weight: $weight-semibold
|
||||||
line-height: 1.25
|
line-height: 1.25
|
||||||
margin-right: 0.5rem
|
margin-bottom: 0.25em
|
||||||
|
|
||||||
|
.bd-banner-text
|
||||||
|
font-size: 0.875em
|
||||||
|
line-height: 1.25
|
||||||
|
padding: 0 0.5em
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
|
.bd-banner-image
|
||||||
|
height: 176px
|
||||||
|
margin-bottom: 1rem
|
||||||
|
margin-top: 1rem
|
||||||
|
img
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
.bd-banner-button
|
.bd-banner-button
|
||||||
display: inline-block
|
display: inline-block
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
@ -46,7 +69,3 @@
|
|||||||
|
|
||||||
.hero.bd-is-patreon
|
.hero.bd-is-patreon
|
||||||
background-color: $patreon
|
background-color: $patreon
|
||||||
|
|
||||||
+from(480px)
|
|
||||||
.bd-banner-text
|
|
||||||
margin-right: 1rem
|
|
||||||
|
@ -12834,12 +12834,15 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner {
|
.bd-banner {
|
||||||
align-items: center;
|
border-radius: 6px;
|
||||||
display: flex;
|
display: block;
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 1rem;
|
margin-top: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
transition-duration: 86ms;
|
||||||
|
transition-property: border-color, color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner strong {
|
.bd-banner strong {
|
||||||
@ -12847,7 +12850,7 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner .tag {
|
.bd-banner .tag {
|
||||||
margin-right: 0.5em;
|
margin-bottom: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner.is-patreon {
|
.bd-banner.is-patreon {
|
||||||
@ -12856,8 +12859,8 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner.is-fortyfour {
|
.bd-banner.is-fortyfour {
|
||||||
background-color: #5f45bb;
|
background-color: white;
|
||||||
color: white;
|
border: 2px solid whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner .button {
|
.bd-banner .button {
|
||||||
@ -12869,6 +12872,15 @@ svg {
|
|||||||
transition-property: transform, -webkit-transform;
|
transition-property: transform, -webkit-transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-banner:hover {
|
||||||
|
border-color: #3273dc;
|
||||||
|
color: #3273dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-banner:hover .bd-banner-title {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
.bd-banner:hover .button {
|
.bd-banner:hover .button {
|
||||||
-webkit-transform: scale(1.1);
|
-webkit-transform: scale(1.1);
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
@ -12881,12 +12893,32 @@ svg {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-banner-text {
|
.bd-banner-title {
|
||||||
|
color: #363636;
|
||||||
|
font-size: 1.25em;
|
||||||
|
font-weight: 600;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
margin-right: 0.5rem;
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-banner-text {
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.25;
|
||||||
|
padding: 0 0.5em;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-banner-image {
|
||||||
|
height: 176px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-banner-image img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
.bd-banner-button {
|
.bd-banner-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -12903,12 +12935,6 @@ svg {
|
|||||||
background-color: #f96854;
|
background-color: #f96854;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 480px) {
|
|
||||||
.bd-banner-text {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sponsors {
|
.bd-sponsors {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
docs/images/css-book/css-in-44-minutes-book-cover.png
Normal file
BIN
docs/images/css-book/css-in-44-minutes-book-cover.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 92 KiB |
BIN
docs/images/css-book/css-in-44-minutes-book-cover@2x.png
Normal file
BIN
docs/images/css-book/css-in-44-minutes-book-cover@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 298 KiB |
BIN
docs/images/css-book/css-in-44-minutes-book-cover@3x.png
Normal file
BIN
docs/images/css-book/css-in-44-minutes-book-cover@3x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 503 KiB |
Loading…
Reference in New Issue
Block a user