mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 20:04: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
@@ -1,123 +1,96 @@
|
||||
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
|
||||
<div class="container">
|
||||
<nav id="navbar" class="bd-navbar navbar">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: var(--github);">
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: var(--twitter);">
|
||||
<i class="fab fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<div class="navbar-item bd-navbar-mobile-sponsor-icon">
|
||||
<a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-outlined is-small">
|
||||
<span class="icon">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
<span>Sponsor</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button id="searchIcon" class="navbar-item bd-navbar-search-icon bd-navbar-mobile-icon">
|
||||
<span class="icon">
|
||||
<i class="fas fa-lg fa-search"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="navMenu{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.url }}{{ site.data.meta.documentation }}">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span class="is-hidden-touch is-hidden-widescreen">
|
||||
Docs
|
||||
</span>
|
||||
<span class="is-hidden-desktop-only">
|
||||
Documentation
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{% for link_id in site.data.links.navbar %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<a class="navbar-item bd-navbar-item-{{ link_id }} {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
|
||||
<span>{{ link.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
{% assign link = site.data.links.by_id['more'] %}
|
||||
<a class="navbar-link" href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
|
||||
<div id="moreDropdown" class="navbar-dropdown">
|
||||
<a class="navbar-item is-hidden-widescreen" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span>
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
<strong>GitHub</strong>
|
||||
<br>
|
||||
The official repository
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<hr class="navbar-divider is-hidden-widescreen">
|
||||
|
||||
{% for link_id in site.data.links.more %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<a class="navbar-item {% if page.route == link_id %}is-active{% endif %} {% if forloop.first %}is-hidden-widescreen{% endif %}" href="{{ site.url }}{{ link.path }}">
|
||||
<span>
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
<strong>{{ link.name }}</strong>
|
||||
<br>
|
||||
{{ link.subtitle }}
|
||||
</span>
|
||||
</a>
|
||||
{% unless forloop.last %}
|
||||
<hr class="navbar-divider {% if forloop.first %}is-hidden-widescreen{% endif %}">
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include global/navbar-start.html id="navbarStartOriginal" version="original" %}
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<span class="icon" style="color: var(--github);">
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<span class="icon" style="color: var(--twitter);">
|
||||
<i class="fab fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<p class="control">
|
||||
{% include elements/github.html %}
|
||||
</p>
|
||||
<p class="control">
|
||||
{% include elements/patreon.html %}
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" style="height: 2.25em; padding: calc(.375em - 1px) .75em;" href="{{ site.data.meta.download }}">
|
||||
<strong>Download</strong>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="navbar-item bd-navbar-sponsor-button is-hidden-desktop">
|
||||
<a class="button is-sponsor is-light">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-item bd-navbar-sponsor-button is-hidden-touch">
|
||||
<a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-light">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
<span>
|
||||
Sponsor
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button class="navbar-item bd-navbar-search-icon">
|
||||
<span class="icon">
|
||||
<i class="fas fa-lg fa-search"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search" class="bd-search">
|
||||
<p class="control has-icons-left">
|
||||
<input id="algoliaSearch" class="input is-rounded" type="text" placeholder="Search the docs">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bd-navbar bd-is-clone">
|
||||
{% include global/navbar-start.html id="navbarStartClone" version="clone" %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user