mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 10:54:29 -07:00
Add shoutout block
This commit is contained in:
Jeremy Thomas
7
docs/_includes/elements/external-link.html
Normal file
7
docs/_includes/elements/external-link.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<a
|
||||
class={{ include.classes }}
|
||||
href="{{ include.url }}"
|
||||
target="_blank"
|
||||
rel="nofollow">
|
||||
{{ include.text }}
|
||||
</a>
|
||||
@@ -109,3 +109,19 @@
|
||||
&:nth-child(3n-1),
|
||||
&:nth-child(3n)
|
||||
margin-left: 1.5rem
|
||||
|
||||
.bd-shoutout
|
||||
background-color: $background
|
||||
padding: 2rem
|
||||
text-align: center
|
||||
&:not(:last-child)
|
||||
margin-bottom: 3rem
|
||||
|
||||
.bd-shoutout-text
|
||||
&.title
|
||||
opacity: 0.8
|
||||
&.subtitle
|
||||
opacity: 0.5
|
||||
|
||||
.bd-shoutout-button
|
||||
margin-top: -0.75rem
|
||||
@@ -12730,6 +12730,28 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
.bd-shoutout {
|
||||
background-color: whitesmoke;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-shoutout:not(:last-child) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.bd-shoutout-text.title {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bd-shoutout-text.subtitle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bd-shoutout-button {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
.bd-bootstrap-table {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
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
@@ -40,7 +40,7 @@ videos:
|
||||
Videos
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
Learn Bulma with interactive <a href="{{ site.data.meta.scrimba_url }}" target="_blank" rel="nofollow">Scrimba</a> tutorials
|
||||
Learn Bulma with interactive {% include external-link.html url=site.data.meta.scrimba_url text="Scrimba" %} tutorials
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -49,56 +49,69 @@ videos:
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
<div class="bd-shoutout message is-success">
|
||||
<p class="title is-4 bd-shoutout-text">
|
||||
Learn Bulma for free!
|
||||
</p>
|
||||
|
||||
{% for video in page.videos %}
|
||||
<div class="bd-video">
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h2 class="title">
|
||||
{{ video.title }}
|
||||
</h2>
|
||||
<p class="subtitle bd-shoutout-text">
|
||||
Build 3 beautiful websites in 58 minutes
|
||||
</p>
|
||||
|
||||
<p class="subtitle has-text-grey-light">
|
||||
{{ video.subtitle }}
|
||||
<p class="bd-shoutout-button">
|
||||
{% include external-link.html
|
||||
classes="button is-success"
|
||||
url=site.data.meta.scrimba_url
|
||||
text="Enroll in the course" %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% for video in page.videos %}
|
||||
<div class="bd-video">
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h2 class="title">
|
||||
{{ video.title }}
|
||||
</h2>
|
||||
|
||||
<p class="subtitle has-text-grey-light">
|
||||
{{ video.subtitle }}
|
||||
</p>
|
||||
|
||||
<div class="content is-medium">
|
||||
<p>
|
||||
{{ video.content }}
|
||||
</p>
|
||||
|
||||
<div class="content is-medium">
|
||||
<p>
|
||||
{{ video.content }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<p>
|
||||
<a class="button is-link is-medium" href="{{ video.video_url }}" target="_blank" rel="nofollow">
|
||||
Watch video
|
||||
</a>
|
||||
|
||||
{% if video.article_url %}
|
||||
<a class="button is-light is-medium" href="{{ video.article_url }}" target="_blank" rel="nofollow">
|
||||
Read article
|
||||
</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-8 is-offset-1">
|
||||
<a class="image" href="{{ video.video_url }}" target="_blank" rel="nofollow">
|
||||
{% if video.no_gif %}
|
||||
<img src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
|
||||
{% else %}
|
||||
<img class="is-hidden-touch" src="/images/videos/{{ video.id }}.gif" alt="{{ video.title }} screenshot">
|
||||
<img class="is-hidden-desktop" src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="buttons">
|
||||
<p>
|
||||
<a class="button is-link is-medium" href="{{ video.video_url }}" target="_blank" rel="nofollow">
|
||||
Watch video
|
||||
</a>
|
||||
|
||||
{% if video.article_url %}
|
||||
<a class="button is-light is-medium" href="{{ video.article_url }}" target="_blank" rel="nofollow">
|
||||
Read article
|
||||
</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
<div class="column is-8 is-offset-1">
|
||||
<a class="image" href="{{ video.video_url }}" target="_blank" rel="nofollow">
|
||||
{% if video.no_gif %}
|
||||
<img src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
|
||||
{% else %}
|
||||
<img class="is-hidden-touch" src="/images/videos/{{ video.id }}.gif" alt="{{ video.title }} screenshot">
|
||||
<img class="is-hidden-desktop" src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user