mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -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
@@ -7,9 +7,9 @@
|
||||
<body
|
||||
class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"
|
||||
>
|
||||
<!-- {% include global/notice.html %} -->
|
||||
{% include global/deprecated.html %}
|
||||
{{ content }}
|
||||
{% include global/footer.html %}
|
||||
{% include global/scripts.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,110 +8,48 @@ route: documentation
|
||||
{% assign current_category = page.doc-tab %}
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
{% assign current_link = site.data.links.by_id[current_link_id] %}
|
||||
{% assign category_links = site.data.links.categories[current_category] %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
{% if link_id == current_link_id %}
|
||||
{% unless forloop.first %}
|
||||
{% assign previous_index = forloop.index0 | minus: 1 %}
|
||||
{% assign previous_link_id = category_links[previous_index] %}
|
||||
{% assign previous_link = site.data.links.by_id[previous_link_id] %}
|
||||
{% endunless %}
|
||||
{% assign subtitle = current_link.subtitle %}
|
||||
|
||||
{% unless forloop.last %}
|
||||
{% assign next_index = forloop.index0 | plus: 1 %}
|
||||
{% assign next_link_id = category_links[next_index] %}
|
||||
{% assign next_link = site.data.links.by_id[next_link_id] %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if page.subtitle %}
|
||||
{% assign subtitle = page.subtitle %}
|
||||
{% endif %}
|
||||
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
<div class="bd-duo">
|
||||
<div class="bd-lead">
|
||||
{% include components/breadcrumb.html %}
|
||||
<header id="docsToggles" class="bd-docs-toggles">
|
||||
<button class="button is-primary is-light bd-fat-button is-small" id="docsNavButton">Show menu</button>
|
||||
<button class="button is-primary is-light bd-fat-button is-small" id="docsSideButton">Show sidebar</button>
|
||||
</header>
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{% if page.subtitle %}
|
||||
{{ page.subtitle }}
|
||||
{% else %}
|
||||
{{ current_link.subtitle }}
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if page.meta %}
|
||||
{%
|
||||
include elements/meta.html
|
||||
colors=page.meta.colors
|
||||
sizes=page.meta.sizes
|
||||
variables=page.meta.variables
|
||||
experimental=page.meta.experimental
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="docs" class="bd-docs {% if page.fullwidth %}bd-is-fullwidth{% else %}bd-is-contained{% endif %}">
|
||||
<div id="docsNavOverlay" class="bd-docs-overlay"></div>
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
<nav id="docsNav" class="bd-docs-nav {% if page.fullwidth %}bd-stickied{% endif %}">
|
||||
{% include components/categories.html %}
|
||||
</nav>
|
||||
|
||||
{% if page.hide_tabs %}
|
||||
<hr style="margin: 0 0 3rem;">
|
||||
{% else %}
|
||||
<nav class="bd-tabs">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
{% if link.new %}
|
||||
<span class="ml-2 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if previous_link %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
← {{ previous_link.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
{{ next_link.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
<main class="bd-docs-main">
|
||||
{% if page.fullwidth %}
|
||||
{% include components/docs-body.html %}
|
||||
{% else %}
|
||||
<div class="container">
|
||||
{% include components/docs-body.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% unless page.hide_categories %}
|
||||
{% include components/categories.html %}
|
||||
{% include components/anchors.html %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<aside id="docsSide" class="bd-docs-side {% if page.fullwidth %}bd-stickied{% endif %}">
|
||||
{% include global/side-sponsor.html %}
|
||||
|
||||
{% if page.meta %}
|
||||
{%
|
||||
include elements/meta.html
|
||||
colors=page.meta.colors
|
||||
sizes=page.meta.sizes
|
||||
variables=page.meta.variables
|
||||
experimental=page.meta.experimental
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% include components/anchors.html %}
|
||||
</aide>
|
||||
</div>
|
||||
|
||||
@@ -26,60 +26,18 @@ route: more
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
<div class="bd-duo">
|
||||
<div class="bd-lead">
|
||||
{% include components/breadcrumb.html %}
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{% if page.title %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ current_link.name }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{% if page.subtitle %}
|
||||
{{ page.subtitle }}
|
||||
{% else %}
|
||||
{{ current_link.subtitle }}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
{% capture hero_content %}
|
||||
{% include elements/sponsor-button.html %}
|
||||
{% endcapture %}
|
||||
{%
|
||||
include components/hero.html
|
||||
color="sponsor"
|
||||
icon=page.icon
|
||||
title=page.title
|
||||
subtitle=page.subtitle
|
||||
content=page.hero_content
|
||||
%}
|
||||
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if previous_link %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
← {{ previous_link.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
{{ next_link.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% include components/more.html %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -8,90 +8,104 @@ breadcrumb:
|
||||
|
||||
{% include global/navbar.html id="Blog" %}
|
||||
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
<div class="bd-duo">
|
||||
<div class="bd-lead">
|
||||
<div class="bd-breadcrumb">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
{% assign link = site.data.links.by_id['home'] %}
|
||||
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
|
||||
</li>
|
||||
<li>
|
||||
{% assign link = site.data.links.by_id['blog'] %}
|
||||
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="{{ page.url }}">{{ page.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% assign title = page.title | markdownify %}
|
||||
{% assign introduction = page.introduction | markdownify %}
|
||||
{% assign m = page.date | date: "%B" %}
|
||||
{% assign d = page.date | date: "%-d" %}
|
||||
{% assign y = page.date | date: "%Y" %}
|
||||
|
||||
{% if page.previous.url or page.next.url %}
|
||||
<nav class="bd-prev-next">
|
||||
{% if page.previous.url %}
|
||||
<a href="{{ site.url }}{{ page.previous.url }}">
|
||||
←
|
||||
</a>
|
||||
{% else %}
|
||||
<span>
|
||||
←
|
||||
</span>
|
||||
{% endif %}
|
||||
{% capture banner_title %}
|
||||
<a href="{{ site.url }}/blog">
|
||||
The <strong>official</strong> Bulma <strong>blog</strong>
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a href="{{ site.url }}{{ page.next.url }}">
|
||||
→
|
||||
</a>
|
||||
{% else %}
|
||||
<span>
|
||||
→
|
||||
</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% capture banner_more %}
|
||||
{% include elements/rss-button.html %}
|
||||
{% endcapture %}
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{{ page.title | markdownify }}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{{ page.date | date_to_string }}
|
||||
</p>
|
||||
</div>
|
||||
{% include
|
||||
elements/banner.html
|
||||
title=banner_title
|
||||
more=banner_more
|
||||
%}
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
<div class="bd-post-container">
|
||||
<div class="bd-post content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if page.previous.url %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
|
||||
← {{ page.previous.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
|
||||
{{ page.next.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<header class="bd-single-header">
|
||||
<div class="container is-max-desktop">
|
||||
<div class="bd-single-titles">
|
||||
<h1 class="title">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<div class="subtitle">
|
||||
{{ introduction }}
|
||||
</div>
|
||||
<div class="subtitle is-date">
|
||||
{{ m }}
|
||||
{% case d %}{% when "1" or "21" or "31" %}{{ d }}st{% when "2" or "22" %}{{ d }}nd{% when "3" or "23" %}{{ d }}rd{% else %}{{ d }}th{% endcase %},
|
||||
{{ y }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</header>
|
||||
|
||||
{% if page.image %}
|
||||
<div class="bd-single-image">
|
||||
<div>
|
||||
<figure>
|
||||
<img
|
||||
src="https://source.unsplash.com/{{ page.image }}/800x450"
|
||||
srcset="https://source.unsplash.com/{{ page.image }}/800x450 800w,
|
||||
https://source.unsplash.com/{{ page.image }}/1600x900 1600w,
|
||||
https://source.unsplash.com/{{ page.image }}/3200x1800 3200w
|
||||
"
|
||||
sizes="(max-width: 799px) 100vw, 1600px"
|
||||
alt="{{ page.alt }}"
|
||||
width="1600"
|
||||
height="900"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bd-single-hr">
|
||||
<div class="container is-max-desktop">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-single-body">
|
||||
<div class="container is-max-desktop">
|
||||
<div class="bd-single-content content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-single-hr">
|
||||
<div class="container is-max-desktop">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bd-pagination">
|
||||
<div class="container is-max-desktop">
|
||||
<div class="bd-pagination-body">
|
||||
{% if page.previous.url %}
|
||||
<a class="button bd-fat-button is-link is-light bd-pagination-previous" href="{{ page.previous.url }}">
|
||||
← {{ page.previous.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a class="button bd-fat-button is-link is-light bd-pagination-next" href="{{ page.next.url }}">
|
||||
{{ page.next.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bd-single-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user