mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
264 lines
10 KiB
HTML
264 lines
10 KiB
HTML
<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
|
|
<div id="specialShadow" class="bd-special-shadow"></div>
|
|
|
|
<div class="container">
|
|
|
|
<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;">
|
|
<i class="fab fa-lg fa-github"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
|
|
<span class="icon" style="color: #55acee;">
|
|
<i class="fab fa-lg fa-twitter"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="navMenu{{ include.id }}" class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
|
|
Docs
|
|
</a>
|
|
<div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
|
|
<a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
|
|
Overview
|
|
</a>
|
|
<a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
|
|
Modifiers
|
|
</a>
|
|
<a class="navbar-item {% if page.doc-tab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
|
|
Columns
|
|
</a>
|
|
<a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
|
|
Layout
|
|
</a>
|
|
<a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
|
|
Form
|
|
</a>
|
|
<a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
|
|
Elements
|
|
</a>
|
|
<a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
|
|
Components
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<div class="navbar-item">
|
|
<div>
|
|
<p class="is-size-6-desktop">
|
|
<strong>{{ site.data.meta.version }}</strong>
|
|
</p>
|
|
{{#unless site.deprecated}}
|
|
<small>
|
|
<a class="bd-view-all-versions" href="https://versions.bulma.io/">View all versions</a>
|
|
</small>
|
|
{{/unless}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
|
|
Blog
|
|
</a>
|
|
<div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
|
|
{% for post in site.posts limit:3 %}
|
|
<a class="navbar-item" href="{{ post.url }}">
|
|
<div class="navbar-content">
|
|
<p>
|
|
<small class="has-text-link">{{ post.date | date_to_string }}</small>
|
|
</p>
|
|
<p>{{ post.title }}</p>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
<a class="navbar-item" href="{{ site.url }}/blog/">
|
|
More posts
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<div class="navbar-item">
|
|
<div class="navbar-content">
|
|
<div class="level is-mobile">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<strong>Stay up to date!</strong>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<div class="level-item">
|
|
<a class="button bd-is-rss is-small" href="{{ site.url }}/atom.xml">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-rss"></i>
|
|
</span>
|
|
<span>Subscribe</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<div class="navbar-link">
|
|
More
|
|
</div>
|
|
<div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
|
|
<a class="navbar-item {% if page.route == 'bulma-start' %}is-active{% endif %}" href="{{ site.url }}/bulma-start/">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<span class="icon is-large has-text-success">
|
|
<i class="fas fa-rocket fa-2x"></i>
|
|
</span>
|
|
</div>
|
|
<div class="media-content">
|
|
<p>
|
|
<strong>Bulma start</strong>
|
|
<br>
|
|
<small>A tiny npm package to get started</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<a class="navbar-item {% if page.route == 'made-with-bulma' %}is-active{% endif %}" href="{{ site.url }}/made-with-bulma/">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<span class="icon is-large has-text-primary">
|
|
<i class="fas fa-certificate fa-2x"></i>
|
|
</span>
|
|
</div>
|
|
<div class="media-content">
|
|
<p>
|
|
<strong>Made with Bulma</strong>
|
|
<br>
|
|
<small>The official community badge</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<a id="moreDropdownBootstrap" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/alternative-to-bootstrap/">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<span class="icon is-large">
|
|
<i class="fas fa-exchange-alt fa-2x"></i>
|
|
</span>
|
|
</div>
|
|
<div class="media-content">
|
|
<p>
|
|
<strong>Coming from Bootstrap</strong>
|
|
<br>
|
|
<small>See how Bulma is an alternative to Bootstrap</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<a id="moreDropdownPatreon" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<span class="icon is-large">
|
|
<i class="fab fa-patreon fa-2x"></i>
|
|
</span>
|
|
</div>
|
|
<div class="media-content">
|
|
<p>
|
|
<strong>Patreon backers</strong>
|
|
<br>
|
|
<small>Everyone who is supporting Bulma</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<a class="navbar-item {% if page.route == 'extensions' %}is-active{% endif %}" href="{{ site.url }}/extensions/">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<span class="icon is-large has-text-danger">
|
|
<i class="fas fa-plug fa-2x"></i>
|
|
</span>
|
|
</div>
|
|
<div class="media-content">
|
|
<p>
|
|
<strong>Extensions</strong>
|
|
<br>
|
|
<small>Side projects to enhance Bulma</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
|
|
<span class="bd-emoji">⭐️</span>
|
|
Expo
|
|
</a>
|
|
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
|
|
<span class="bd-emoji">❤️</span>
|
|
Love
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
|
|
<span class="icon" style="color: #333;">
|
|
<i class="fab fa-lg fa-github"></i>
|
|
</span>
|
|
</a>
|
|
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
|
|
<span class="icon" style="color: #55acee;">
|
|
<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">
|
|
<a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
|
|
<img
|
|
style="display: block; max-height: 36px;"
|
|
src="/images/become_a_patron_button.png"
|
|
width="153"
|
|
height="36"
|
|
srcset="/images/become_a_patron_button@3x.png 3x,
|
|
/images/become_a_patron_button@2x.png 2x,
|
|
/images/become_a_patron_button.png 1x"
|
|
alt="Become a patron">
|
|
</a>
|
|
</p>
|
|
<p class="control">
|
|
{% include elements/tw-button.html label="Tweet" %}
|
|
</p>
|
|
<p class="control">
|
|
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
|
<span class="icon">
|
|
<i class="fas fa-download"></i>
|
|
</span>
|
|
<span>Download</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
{% unless include.hide_fortyfour %}
|
|
{% include fortyfour.html %}
|
|
{% endunless %}
|