Bulma v9 website (#3249)

* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions

View File

@@ -1,5 +1,5 @@
<div id="anchorsReference" class="bd-anchors-reference"></div>
<nav id="anchors" class="bd-anchors">
<nav id="anchors" class="bd-anchors bd-is-empty">
<p class="bd-anchors-title">
On this page
</p>

View File

@@ -0,0 +1,10 @@
<div class="bd-call bd-is-{{ include.color }}">
<div class="bd-call-body">
<p class="bd-call-text">
{{ include.text }}
</p>
<p class="bd-call-button">
{{ include.button }}
</p>
</div>
</div>

View File

@@ -1,27 +1,54 @@
<nav id="categories" class="bd-categories">
{% for category in site.data.links.categories %}
{% assign category_id = category[0] %}
{% assign category_links = category[1] %}
<div class="bd-categories-filter">
<input id="categoriesFilter" class="input is-small" type="text" name="" placeholder="Filter links">
<span class="bd-key">f</span>
</div>
{% for category_id in site.data.links.categoryIds %}
{% assign category_links = site.data.links.categories[category_id] %}
{% assign category_link = site.data.links.by_id[category_id] %}
<div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
{% comment %}
{% if category_id == 'overview' %}
<p class="bd-category-group">
Learn
</p>
{% elsif category_id == 'columns' %}
<p class="bd-category-group">
Style
</p>
{% endif %}
{% endcomment %}
<div class="bd-category {% if category_id == current_category %}is-current{% endif %}">
<header class="bd-category-header">
<a class="bd-category-toggle">
<span class="icon">
<i class="fas fa-chevron-down"></i>
</span>
</a>
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
<strong>{{ category_link.name }}</strong>
<a
class="
bd-category-name
{% if category_id == current_link_id %}is-active{% endif %}
"
href="{{ site.url }}{{ category_link.path }}"
data-name="{{ category_link.name }}"
>
<strong class="bd-name">{{ category_link.name }}</strong>
</a>
<button class="bd-category-toggle icon">
<i class="fas fa-chevron-down"></i>
</button>
</header>
<ul class="bd-category-list">
{% for link_id in category_links %}
{% assign link = site.data.links.by_id[link_id] %}
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
<a href="{{ site.url }}{{ link.path }}">
{{ link.name }}
<a
href="{{ site.url }}{{ link.path }}"
data-name="{{ link.name }}"
>
<span class="bd-name">{{ link.name }}</span>
{% if link.new %}
<span class="ml-1 tag bd-mini-tag is-primary">
New!
@@ -33,10 +60,19 @@
</ul>
</div>
{% endfor %}
<p
id="categoriesNoResults"
class="
bd-categories-no-results
has-background-primary-light
is-size-7
has-text-primary-dark
has-text-centered
p-3
">
There are no results.
<br>
<button class="button is-primary is-small">Reset search <span class="bd-key">esc</span></button>
</p>
</nav>
{% unless page.hide_fortyfour %}
{% include global/fortyfour.html %}
{% endunless %}
{% include global/side-sponsor.html %}

View File

@@ -0,0 +1,16 @@
{%
include components/hero.html
color="basic"
title=page.title
subtitle=subtitle
%}
<div class="bd-docs-body">
<div class="bd-docs-content bd-content">
{{ content }}
</div>
{% include components/pagination.html %}
{% include elements/improve-page.html %}
</div>

View File

@@ -0,0 +1,29 @@
<div class="bd-heading">
<span class="icon has-text-{{ include.color }} is-size-2-widescreen">
<i class="{{ include.icon }}"></i>
</span>
<h2 class="title has-text-black mb-0 is-size-2-widescreen">
{{ include.title }}
</h2>
<div class="subtitle mb-0 mt-0 is-size-4-widescreen">
{{ include.subtitle }}
</div>
<a class="button bd-fat-button is-{{ include.color }} is-light is-size-4-widescreen" href="{{ include.href }}">
{% if include.button_icon_before %}
<span class="icon">
<i class="{{ include.button_icon_before }}"></i>
</span>
{% endif %}
<span>
{{ include.button_label }}
</span>
{% if include.button_icon_after %}
<span class="icon">
<i class="{{ include.button_icon_after }}"></i>
</span>
{% endif %}
</a>
</div>

View File

@@ -0,0 +1,34 @@
{% capture hero_body %}
<div class="bd-hero-body">
<div class="bd-hero-heading">
<h1 class="title">
{% if include.icon %}
<span class="icon">
<i class="{{ include.icon }}"></i>
</span>
{% endif %}
{{ include.title | markdownify }}
</h1>
<div class="subtitle is-4">
{{ include.subtitle | markdownify }}
</div>
{{ include.content }}
</div>
<div class="bd-hero-carbon">
{% include elements/carbon.html %}
</div>
</div>
{% endcapture %}
<section class="hero bd-hero bd-is-{{ include.color }}">
<div class="hero-body">
{% if page.fullwidth %}
{{ hero_body }}
{% else %}
<div class="container">
{{ hero_body }}
</div>
{% endif %}
</div>
</section>

View File

@@ -0,0 +1,82 @@
{% assign currentLinkId = page.breadcrumb | last %}
{% assign currentCategoryIndex = page.breadcrumb | size | minus: 2 %}
{% assign currentCategoryId = page.breadcrumb[currentCategoryIndex] %}
{% assign sameCategoryIds = site.data.links.categories[currentCategoryId] %}
{% assign categorySize = sameCategoryIds | size %}
{% assign lastIndex = categorySize | minus: 1 %}
{% for categoryId in site.data.links.categoryIds %}
{% if categoryId == currentCategoryId %}
{% assign prevCategoryIndex = forloop.index0 | minus: 1 %}
{% assign nextCategoryIndex = forloop.index0 | plus: 1 %}
{% endif %}
{% endfor %}
{% for linkId in sameCategoryIds %}
{% if linkId == currentLinkId %}
{% assign prevIndex = forloop.index0 | minus: 1 %}
{% assign nextIndex = forloop.index0 | plus: 1 %}
{% endif %}
{% endfor %}
<!-- Previous link -->
<!-- If first index in list -->
{% if prevIndex == -1 %}
{% assign prevCategoryId = site.data.links.categoryIds[prevCategoryIndex] %}
{% assign prevCategoryLinks = site.data.links.categories[prevCategoryId] %}
{% assign prevCategorySize = prevCategoryLinks | size %}
{% assign prevLastIndex = prevCategorySize | minus: 1 %}
{% assign prevLinkId = prevCategoryLinks[prevLastIndex] %}
{% else %}
{% assign prevCategoryId = currentCategoryId %}
{% assign prevLinkId = sameCategoryIds[prevIndex] %}
{% endif %}
<!-- Next link -->
<!-- If last index in list -->
{% if nextIndex == categorySize %}
{% assign nextCategoryId = site.data.links.categoryIds[nextCategoryIndex] %}
{% assign nextCategory = site.data.links.categories[nextCategoryId] %}
{% assign nextLinkId = nextCategory[0] %}
{% else %}
{% assign nextCategoryId = currentCategoryId %}
{% assign nextLinkId = sameCategoryIds[nextIndex] %}
{% endif %}
{% unless page.hide_pagination %}
{% if prevLinkId or nextLinkId %}
<nav class="bd-docs-pagination bd-pagination-links">
{% if prevLinkId %}
{% assign prevLink = site.data.links.by_id[prevLinkId] %}
<a
class="button bd-fat-button is-primary is-light bd-pagination-prev"
href="{{ site.url }}{{ prevLink.path }}"
title="{{ prevLink.name }}"
>
<i></i>
<span>
<em>{{ prevCategoryId }}:</em>
<strong>{{ prevLink.name }}</strong>
</span>
</a>
{% endif %}
{% if nextLinkId %}
{% assign nextLink = site.data.links.by_id[nextLinkId] %}
<a
class="button bd-fat-button is-primary is-light bd-pagination-next"
href="{{ site.url }}{{ nextLink.path }}"
title="{{ nextLink.name }}"
>
<span>
<em>{{ nextCategoryId }}:</em>
<strong>{{ nextLink.name }}</strong>
</span>
<i></i>
</a>
{% endif %}
</nav>
{% endif %}
{% endunless %}

View File

@@ -0,0 +1,23 @@
<div class="bd-tabs">
<nav class="bd-tabs-nav">
<button class="bd-is-active">{{ include.button_a | escape }}</button>
<button>{{ include.button_b | escape }}</button>
{% if include.button_c %}
<button>{{ include.button_c | escape }}</button>
{% endif %}
</nav>
<div class="bd-tabs-items">
<div class="bd-tabs-item bd-is-active">
{{ include.item_a }}
</div>
<div class="bd-tabs-item">
{{ include.item_b }}
</div>
{% if include.item_c %}
<div class="bd-tabs-item">
{{ include.item_c }}
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1,7 @@
<div class="bd-var bd-is-body">
<div class="bd-var-name">{% highlight css %}{{ include.variable.name }}{% endhighlight %}</div>
<div class="bd-var-type bd-is-{{ include.variable.type }}">{{ include.variable.type }}</div>
<div class="bd-var-value">{% highlight css %}{{ include.variable.value }}{% endhighlight %}</div>
<div class="bd-var-computed-value">{% highlight css %}{{ include.variable.computed_value }}{% endhighlight %}</div>
<div class="bd-var-computed-type bd-is-{{ include.variable.computed_type }}">{{ include.variable.computed_type }}</div>
</div>

View File

@@ -0,0 +1,49 @@
{% capture content %}
{% assign anchor_name = include.anchor_name | default: 'Variables' %}
{% assign tab = include.tab | default: page.doc-tab %}
{% assign subtab = include.subtab | default: page.doc-subtab %}
{% assign type = include.type | default: tab %}
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
{% assign variables = include.variables | default: data.list %}
{% assign table_class = include.table_class | default: 'is-bordered' %}
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
{% endcapture %}
{% capture variables_size %}{{ variables | size }}{% endcapture %}
{% capture variables_keys_size %}{{ include.variables_keys | size }}{% endcapture %}
{% if variables_size != '0' or variables_keys_size != '0' %}
<div class="bd-vars">
{% include elements/anchor.html name="Variables" %}
<div class="bd-var bd-is-head">
<div class="bd-var-name">
Name
</div>
<div class="bd-var-type">
Type
</div>
<div class="bd-var-value">
Value
</div>
<div class="bd-var-computed-value">
Computed Value
</div>
<div class="bd-var-computed-type">
Computed Type
</div>
</div>
{% if include.variables_keys %}
{% for key in include.variables_keys %}
{% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
{% include components/variables-row.html variable=variable %}
{% endfor %}
{% else %}
{% for variable_name in variables %}
{% assign variable = data.by_name[variable_name] %}
{% include components/variables-row.html variable=variable %}
{% endfor %}
{% endif %}
</div>
{% endif %}