mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
New docs init
This commit is contained in:
Jeremy Thomas
parent
740df6a0fa
commit
a6b48378f8
44
docs/_data/global.json
Normal file
44
docs/_data/global.json
Normal file
@ -0,0 +1,44 @@
|
||||
{
|
||||
"more_items": [
|
||||
{
|
||||
"id": "bulma-start",
|
||||
"color": "success",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-rocket",
|
||||
"title": "Bulma start",
|
||||
"description": "A tiny npm package to get started"
|
||||
},
|
||||
{
|
||||
"id": "made-with-bulma",
|
||||
"color": "primary",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-certificate",
|
||||
"title": "Made with Bulma",
|
||||
"description": "The official community badge"
|
||||
},
|
||||
{
|
||||
"id": "alternative-to-bootstrap",
|
||||
"color": "bootstrap",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-exchange-alt",
|
||||
"title": "Coming from Bootstrap",
|
||||
"description": "See how Bulma is an alternative to Bootstrap"
|
||||
},
|
||||
{
|
||||
"id": "backers",
|
||||
"color": "patreon",
|
||||
"fa_type": "fab",
|
||||
"fa_icon": "fa-patreon",
|
||||
"title": "Patreon backers",
|
||||
"description": "Everyone who is supporting Bulma"
|
||||
},
|
||||
{
|
||||
"id": "extensions",
|
||||
"color": "danger",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-plug",
|
||||
"title": "Extensions",
|
||||
"description": "Side projects to enhance Bulma",
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,14 +1,10 @@
|
||||
<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">
|
||||
<!-- <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>
|
||||
@ -18,7 +14,7 @@
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fab fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</a> -->
|
||||
|
||||
<div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
|
||||
<span></span>
|
||||
@ -27,190 +23,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenu{{ include.id }}" class="navbar-menu">
|
||||
<div id="navMenu{{ include.id }}" class="navbar-menu is-active">
|
||||
<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>
|
||||
<a class="navbar-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Documentation</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-code"></i>
|
||||
</span>
|
||||
<span>Templates</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'videos' %}is-active{% endif %}" href="{{ site.url }}/videos/">
|
||||
<span class="icon has-text-success">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
</span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
|
||||
<span class="icon" style="color: #f26522;">
|
||||
<i class="fas fa-rss"></i>
|
||||
</span>
|
||||
<span>Blog</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
|
||||
<span class="icon" style="color: #FFD257;">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
<span>Expo</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-heart"></i>
|
||||
</span>
|
||||
<span>Love</span>
|
||||
</a>
|
||||
<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>
|
||||
{% for item in site.data.global.more_items %}
|
||||
<a class="navbar-item {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<span class="icon is-large has-text-{{ item.color }}">
|
||||
<i class="{{ item.fa_type }} {{ item.fa_icon }} fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p>
|
||||
<strong>{{ item.title }}</strong>
|
||||
<br>
|
||||
<small>{{ item.description }}</small>
|
||||
</p>
|
||||
</div>
|
||||
</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>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</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">
|
||||
@ -229,7 +104,7 @@
|
||||
<p class="control">
|
||||
<a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
|
||||
<img
|
||||
style="display: block; max-height: 36px;"
|
||||
style="border-radius: 3px; display: block; max-height: 36px;"
|
||||
src="/images/become_a_patron_button.png"
|
||||
width="153"
|
||||
height="36"
|
||||
@ -239,25 +114,13 @@
|
||||
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>
|
||||
<strong>Download</strong>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% unless include.hide_fortyfour %}
|
||||
{% include fortyfour.html %}
|
||||
{% endunless %}
|
||||
|
||||
@ -280,8 +280,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
const translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
|
||||
specialShadow.style.opacity = scrollFactor;
|
||||
specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
|
||||
|
||||
if (specialShadow) {
|
||||
specialShadow.style.opacity = scrollFactor;
|
||||
specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
|
||||
}
|
||||
}
|
||||
|
||||
translateHeader(window.scrollY, false);
|
||||
|
||||
@ -11,6 +11,11 @@ body.page-grid .column > .notification
|
||||
padding-right: 0
|
||||
text-align: center
|
||||
|
||||
a.navbar-item
|
||||
& > .icon:not(:last-child)
|
||||
margin-left: -0.25em
|
||||
margin-right: 0.25em
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 0.75rem
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -280,8 +280,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
|
||||
var translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
|
||||
specialShadow.style.opacity = scrollFactor;
|
||||
specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
|
||||
|
||||
if (specialShadow) {
|
||||
specialShadow.style.opacity = scrollFactor;
|
||||
specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
|
||||
}
|
||||
}
|
||||
|
||||
translateHeader(window.scrollY, false);
|
||||
|
||||
@ -4,7 +4,7 @@ layout: default
|
||||
route: index
|
||||
---
|
||||
|
||||
{% include navbar.html id="ThankYou" fixed=true has_container=true boxed=true transparent=true %}
|
||||
{% include navbar.html id="ThankYou" %}
|
||||
|
||||
<section class="hero is-large has-text-centered">
|
||||
<div class="hero-body">
|
||||
|
||||
@ -4,7 +4,7 @@ $navbar-fixed-z: 30 !default
|
||||
|
||||
$navbar-item-color: $grey-dark !default
|
||||
$navbar-item-hover-color: $link !default
|
||||
$navbar-item-hover-background-color: $background !default
|
||||
$navbar-item-hover-background-color: $white-bis !default
|
||||
$navbar-item-active-color: $black !default
|
||||
$navbar-item-active-background-color: transparent !default
|
||||
$navbar-item-img-max-height: 1.75rem !default
|
||||
@ -42,6 +42,7 @@ $navbar-divider-background-color: $border !default
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background-color
|
||||
box-shadow: 0 2px 0 0 $background
|
||||
min-height: $navbar-height
|
||||
position: relative
|
||||
@each $name, $pair in $colors
|
||||
@ -104,13 +105,15 @@ $navbar-divider-background-color: $border !default
|
||||
&.is-fixed-top
|
||||
top: 0
|
||||
|
||||
html.has-navbar-fixed-top,
|
||||
body.has-navbar-fixed-top
|
||||
padding-top: $navbar-height
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top
|
||||
padding-top: $navbar-height
|
||||
|
||||
html.has-navbar-fixed-bottom,
|
||||
body.has-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-tabs
|
||||
@ -137,17 +140,20 @@ body.has-navbar-fixed-bottom
|
||||
color: $navbar-item-color
|
||||
display: block
|
||||
line-height: 1.5
|
||||
padding: 0.5rem 1rem
|
||||
padding: 0.5rem 0.75rem
|
||||
position: relative
|
||||
|
||||
a.navbar-item,
|
||||
a.navbar-link
|
||||
.navbar-link
|
||||
border-radius: $radius
|
||||
cursor: pointer
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: $navbar-item-hover-background-color
|
||||
color: $navbar-item-hover-color
|
||||
|
||||
.navbar-item
|
||||
display: flex
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
img
|
||||
@ -240,13 +246,14 @@ a.navbar-link
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: stretch
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar
|
||||
min-height: $navbar-height
|
||||
padding: 1rem 2rem
|
||||
&.is-transparent
|
||||
a.navbar-item,
|
||||
a.navbar-link
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: transparent !important
|
||||
@ -367,7 +374,7 @@ a.navbar-link
|
||||
padding-bottom: $navbar-height
|
||||
// Hover/Active states
|
||||
a.navbar-item,
|
||||
a.navbar-link
|
||||
.navbar-link
|
||||
&.is-active
|
||||
color: $navbar-item-active-color
|
||||
&.is-active:not(:hover)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user