mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 11:54:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
33
docs/_includes/index/beautified.html
Normal file
33
docs/_includes/index/beautified.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<section class="bd-index-section" style="--bd-section-h: 44deg;">
|
||||
<div class="bd-heading">
|
||||
<span class="icon has-text-expo is-size-2-widescreen">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
|
||||
<h2 class="title has-text-black mb-0 is-size-2-widescreen">
|
||||
<strong>Beautified</strong> by <strong>everyone</strong>
|
||||
</h2>
|
||||
|
||||
<div class="subtitle mb-0 mt-0 has-text-grey-light is-size-4-widescreen">
|
||||
See what Bulma developers are bulding
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-expo is-light is-size-4-widescreen" href="{{ site.data.links.by_id.love.path }}">
|
||||
<span class="icon has-text-expo">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
<span>
|
||||
Visit the <strong>expo</strong>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd-screenshots">
|
||||
{% include index/best-screenshot.html website_id="divjoy" %}
|
||||
{% include index/best-screenshot.html website_id="runlet" %}
|
||||
{% include index/best-screenshot.html website_id="gustav" %}
|
||||
{% include index/best-screenshot.html website_id="romes" %}
|
||||
{% include index/best-screenshot.html website_id="getbedtimestories" %}
|
||||
{% include index/best-screenshot.html website_id="signal" %}
|
||||
</div>
|
||||
</section>
|
||||
15
docs/_includes/index/best-screenshot.html
Normal file
15
docs/_includes/index/best-screenshot.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{% assign website = site.data.expo.by_id[include.website_id] %}
|
||||
{% assign imageName = include.website_id | slugify %}
|
||||
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
||||
{% assign size1x = "672x420" %}
|
||||
{% assign size2x = "1344x840" %}
|
||||
|
||||
<a class="bd-screenshot {{ include.modifier }}" href="{{ site.url }}/expo">
|
||||
<img
|
||||
src="{{ imagePath }}-{{ size1x }}.jpg"
|
||||
srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
||||
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
||||
width="672"
|
||||
height="420"
|
||||
/>
|
||||
</a>
|
||||
23
docs/_includes/index/best.html
Normal file
23
docs/_includes/index/best.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% capture best_duplicates %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1126857886599122949" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="1339242817919590404" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="signal" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-huge" tweet_id="869284735440363520" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="966731525709619200" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="getbedtimestories" %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-best">
|
||||
<div class="bd-best-list">
|
||||
{{ best_duplicates }}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1254050448711057410" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="1240347595106549762" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="romes" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1140839283692982274" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="835834634655174658" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="Gustav" %}
|
||||
<!-- More -->
|
||||
{{ best_duplicates }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,22 +6,24 @@
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %} {% assign columns_link =
|
||||
site.data.links.by_id['columns-basics'] %}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
|
||||
{% assign heading_href = site.url | append: columns_link.path %}
|
||||
|
||||
<section class="bd-index-section" style="--bd-section-h: 229deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="link"
|
||||
icon="fas fa-columns"
|
||||
title="The <strong>simplest</strong> grid system"
|
||||
subtitle="Just add columns, they will <strong>resize themselves</strong>"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>columns</strong> docs"
|
||||
%}
|
||||
|
||||
<section class="bd-columns section is-medium">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ columns_link.path }}">
|
||||
The <strong>simplest</strong> grid system
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Just add columns, they will resize themselves
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
<div class="message is-warning is-hidden-tablet">
|
||||
<p class="message-header">
|
||||
Better on desktop
|
||||
@@ -35,62 +37,62 @@ site.data.links.by_id['columns-basics'] %}
|
||||
|
||||
<div id="grid" class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">7</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">8</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">9</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">10</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">11</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">12</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,8 +128,5 @@ site.data.links.by_id['columns-basics'] %}
|
||||
<strong>nest</strong> columns.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include components/hero-buttons.html href=columns_link.path
|
||||
content="<span>See <strong>Columns</strong> docs</span>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
{% assign customize_link = site.data.links.by_id['customize'] %}
|
||||
{% assign heading_href = site.url | append: customize_link.path %}
|
||||
|
||||
<section class="bd-index-section" style="--bd-section-h: 330deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="sass"
|
||||
icon="fab fa-sass"
|
||||
title="So <strong>quick</strong> to customize"
|
||||
subtitle="Simply set your own Sass variables before importing Bulma"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>customization</strong> docs"
|
||||
%}
|
||||
|
||||
<section id="customize" class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ customize_link.path }}">
|
||||
So <strong>quick</strong> to customize
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Simply set your own Sass variables before importing Bulma
|
||||
</h4>
|
||||
<div class="bd-index-custom-tweet">
|
||||
{% include elements/tw.html tweet_id="1070320154452656128"
|
||||
modifier='bd-is-grey' %}
|
||||
</div>
|
||||
<header class="block is-size-5-desktop mb-6">
|
||||
{% include elements/tw.html tweet_id="1070320154452656128" %}
|
||||
</header>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="highlight-full bd-has-drawing">
|
||||
<div class="columns is-variable is-8">
|
||||
<div class="column">
|
||||
<div class="bd-highlight-full bd-has-drawing">
|
||||
{% highlight scss %}{% include snippets/customized.html %}{%
|
||||
endhighlight %} {% include elements/drawing.html id='customize'
|
||||
width=152 height=76 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<div class="column">
|
||||
<div class="bd-index-custom bd-is-before">
|
||||
<p class="bd-index-custom-title">Before</p>
|
||||
<div class="bd-index-custom-example">
|
||||
@@ -96,8 +97,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/hero-buttons.html href=customize_link.path
|
||||
content="<span>Learn how to <strong>customize</strong></span>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,71 +3,85 @@
|
||||
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
|
||||
|
||||
<div class="bd-focus">
|
||||
<nav class="columns">
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ responsiveness_link.path }}">
|
||||
<p class="title is-4">
|
||||
<strong>100% Responsive</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-mobile icon is-large">
|
||||
<i class="fas fa-lg fa-mobile-alt"></i>
|
||||
</span>
|
||||
<span class="bd-focus-tablet icon is-large">
|
||||
<i class="fas fa-2x fa-tablet-alt"></i>
|
||||
</span>
|
||||
<span class="bd-focus-desktop icon is-large">
|
||||
<i class="fas fa-3x fa-desktop"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
<div class="container">
|
||||
<nav class="columns is-multiline">
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.url }}{{ responsiveness_link.path }}">
|
||||
<div class="bd-focus-graph">
|
||||
<div class="bd-focus-device"></div>
|
||||
</div>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ modularity_link.path }}">
|
||||
<p class="title is-4">
|
||||
<strong>Modular</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Just import what you <strong>need</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-cubes bd-focus-icon">
|
||||
<span class="bd-focus-cube bd-focus-cube-1 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-2 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-3 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>100% Responsive</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Designed for <strong>mobile</strong> first
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ columns_link.path }}">
|
||||
<p class="title is-4">
|
||||
<strong>Modern</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Built with <strong>Flexbox</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-css3 icon is-large">
|
||||
<i class="fab fa-3x fa-css3"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.url }}{{ modularity_link.path }}">
|
||||
<div class="bd-focus-graph">
|
||||
<figure class="bd-focus-cubes bd-focus-icon">
|
||||
<span class="bd-focus-cube bd-focus-cube-1 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-2 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-3 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<p class="title is-4">
|
||||
<strong>Free</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Open source on <strong>GitHub</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-github icon is-large">
|
||||
<i class="fab fa-3x fa-github-alt"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>Modular</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Just import what you <strong>need</strong>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.url }}{{ columns_link.path }}">
|
||||
<div class="bd-focus-graph">
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-css3 icon is-large">
|
||||
<i class="fab fa-3x fa-css3"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>Modern</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Built with <strong>Flexbox</strong>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<div class="bd-focus-graph">
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-github icon is-large">
|
||||
<i class="fab fa-3x fa-github-alt"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>Free</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Open source on <strong>GitHub</strong>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
65
docs/_includes/index/hello.html
Normal file
65
docs/_includes/index/hello.html
Normal file
File diff suppressed because one or more lines are too long
@@ -1,33 +1,33 @@
|
||||
{% assign css_only_link = site.data.links.by_id['overview-classes'] %}
|
||||
{% assign css_only_link = site.data.links.by_id['overview-start'] %}
|
||||
{% assign heading_href = site.url | append: css_only_link.path %}
|
||||
|
||||
<section class="bd-index-section" style="--bd-section-h: 153deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="success"
|
||||
icon="fas fa-check"
|
||||
title="No <strong>JavaScript</strong> required"
|
||||
subtitle="CSS only, so it integrates in <strong>any JS</strong> environment"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>installation</strong> docs"
|
||||
%}
|
||||
|
||||
<section class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<header class="bd-index-header bd-is-left">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ css_only_link.path }}">
|
||||
No <strong>JavaScript</strong> required
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
CSS only, so it integrates in any JS environment
|
||||
</h4>
|
||||
<img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
|
||||
</header>
|
||||
<img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="bd-index-js-tweet">
|
||||
{% include
|
||||
elements/tw.html
|
||||
tweet_id="860885116909998080"
|
||||
modifier='bd-is-grey'
|
||||
drawing_id='opinion-free'
|
||||
drawing_width=152
|
||||
drawing_height=52
|
||||
%}
|
||||
</div>
|
||||
<div class="column is-size-5-desktop">
|
||||
{% include
|
||||
elements/tw.html
|
||||
tweet_id="860885116909998080"
|
||||
modifier='bd-is-grey'
|
||||
drawing_id='opinion-free'
|
||||
drawing_width=152
|
||||
drawing_height=52
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
29
docs/_includes/index/love.html
Normal file
29
docs/_includes/index/love.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<section class="bd-index-section" style="--bd-section-h: 348deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="love"
|
||||
icon="fas fa-heart"
|
||||
title="<strong>Loved</strong> by the <strong>community</strong>"
|
||||
subtitle="See what Bulma fans are <strong>tweeting</strong>"
|
||||
href=site.data.links.by_id.love.path
|
||||
button_icon_after="fas fa-heart"
|
||||
button_label="See more <strong>love</strong>"
|
||||
%}
|
||||
|
||||
<div class="bd-tws">
|
||||
<div class="bd-tws-list">
|
||||
{% include elements/tw.html tweet_id="910956939886043136" %}
|
||||
{% include elements/tw.html tweet_id="1313236270617972740" %}
|
||||
{% include elements/tw.html tweet_id="1067168440333606912" %}
|
||||
{% include elements/tw.html tweet_id="1106622513159856131" %}
|
||||
{% include elements/tw.html tweet_id="1148364620714958848" %}
|
||||
{% include elements/tw.html tweet_id="1161404522331344896" %}
|
||||
{% include elements/tw.html tweet_id="1254050448711057410" %}
|
||||
{% include elements/tw.html tweet_id="1176845849629995009" %}
|
||||
{% include elements/tw.html tweet_id="835834634655174658" %}
|
||||
{% include elements/tw.html tweet_id="1310481068886118400" %}
|
||||
{% include elements/tw.html tweet_id="903629781744439297" %}
|
||||
{% include elements/tw.html tweet_id="922849122008354817" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,23 +1,28 @@
|
||||
{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}
|
||||
{% assign heading_href = site.url | append: modifiers_link.path %}
|
||||
|
||||
<section class="bd-index-section">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="primary"
|
||||
icon="fas fa-graduation-cap"
|
||||
title="So <strong>easy</strong> to learn"
|
||||
subtitle="Get a design <strong>started</strong> within <strong>minutes</strong>"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>modifiers</strong> syntax"
|
||||
%}
|
||||
|
||||
<section class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<header class="bd-index-header bd-is-left">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ modifiers_link.path }}">
|
||||
So <strong>easy</strong> to learn
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Get a design started within minutes
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
{% include elements/tw.html tweet_id="868829487072464897"
|
||||
modifier='bd-is-grey' drawing_id='crazy' drawing_width=108
|
||||
drawing_height=48 %}
|
||||
<div class="column is-size-5-desktop">
|
||||
{%
|
||||
include elements/tw.html
|
||||
tweet_id="868829487072464897"
|
||||
drawing_id='crazy'
|
||||
drawing_width=108
|
||||
drawing_height=48
|
||||
%}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
@@ -55,9 +60,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/hero-buttons.html href=modifiers_link.path
|
||||
content="<span>Learn the <strong>modifiers syntax</strong></span
|
||||
>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
39
docs/_includes/index/sponsors.html
Normal file
39
docs/_includes/index/sponsors.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<section class="bd-sponsors">
|
||||
<div class="bd-sponsors-body">
|
||||
<div class="bd-sponsors-content bd-index-content">
|
||||
<h1 class="title has-text-black">
|
||||
<strong>Bulma</strong> is thankful to its <a class="has-text-sponsor" href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a class="has-text-sponsor" href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
|
||||
<span class="icon has-text-sponsor">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Their support contributes to the continuous development of Bulma and other open source software.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-sponsor" href="{{ site.url }}{{ site.data.links.by_id.['become-sponsor'].path }}">
|
||||
<span>
|
||||
Become a sponsor
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd-sponsors-list">
|
||||
<div class="bd-partner-sponsors">
|
||||
{% for sponsor_id in site.data.sponsors.home %}
|
||||
{% include elements/sponsor-item.html
|
||||
sponsor_id=sponsor_id
|
||||
classname="bd-partner-sponsor"
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-sponsors-carbon is-flex is-justify-content-center" style="margin-top: var(--bd-sponsors-spacing);">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,11 +1,11 @@
|
||||
{% assign docs_link = site.data.links.by_id['overview-start'] %}
|
||||
{% assign docs_url = site.url | append: docs_link.path %}
|
||||
|
||||
<section class="section is-large">
|
||||
<section class="bd-index-section" style="--bd-section-h: 214deg;">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<header class="has-text-centered">
|
||||
<h3 class="title is-3">
|
||||
<a class="bd-has-drawing" href="{{ docs_url }}">
|
||||
<a class="bd-has-drawing has-text-info" href="{{ docs_url }}">
|
||||
And so <strong>much more</strong>
|
||||
{% include elements/drawing.html id='join-us' width=86 height=86 %}
|
||||
</a>
|
||||
@@ -16,13 +16,14 @@
|
||||
</header>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<a class="button is-primary is-large" href="{{ docs_url }}">
|
||||
<a class="button bd-fat-button is-info is-large" href="{{ docs_url }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Get <strong>started</strong></span>
|
||||
</a>
|
||||
<a class="button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
|
||||
|
||||
<a class="button bd-fat-button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ tiles }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user