This commit is contained in:
Robert Clarke 2019-05-03 23:36:05 +00:00
commit 536c3856e1
89 changed files with 8421 additions and 0 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
public/

160
README.md Normal file
View file

@ -0,0 +1,160 @@
# Zulma
## Contents
- [Zulma](#zulma)
- [Contents](#contents)
- [Installation](#installation)
- [Options](#options)
- [Pagination](#pagination)
- [Taxonomies](#taxonomies)
- [Menu Links](#menu-links)
- [Brand](#brand)
- [Search](#search)
- [Title](#title)
- [Original](#original)
## Installation
First download this theme to your `themes` directory:
```bash
$ cd themes
$ git clone {GITHUB_LINK}
```
and then enable it in your `config.toml`:
```toml
theme = "zulma"
```
That's it! No more configuration should be required, however keep reading to see what options you can set for more customizability.
## Options
### Pagination
Zulma makes no assumptions about your project. You can freely paginate your content folder or your taxonomies and it will adapt accordingly. For example, editing or creating section (`content/_index.md`) and setting pagination:
```toml
paginate_by = 5
```
This is handled internally, no input is needed from the user.
### Taxonomies
Zulma has 3 taxonomies already set internally: `tags`, `cateogories` and `authors`. Setting of any these three in your config.toml like so:
```toml
taxonomies = [
{name = "categories"},
{name = "tags", paginate_by = 5, rss = true},
{name = "authors", rss = true},
]
```
and setting any of them in a content file:
```toml
[taxonomies]
categories = ["Hello world"]
tags = ["rust", "ssg", "other", "test"]
authors = ["Joe Bloggs"]
```
will cause that metadata to appear on the post, either on the header for the name, or at the bottom for tags and categories, and enable those pages.
Making your own taxonomies is also designed to be as easy as possible, however it does seem to require adding files directly to the theme (someone please let me know if this isn't the case!). First, add it to your cargo.tml
```toml
taxonomies = [
{name = "links"},
]
```
and make the corrosponding folder in the theme templates, in this case: `themes\zulma\templates\links`, and the necessary files: `themes\zulma\templates\links\list.html` and `themes\zulma\templates\links\single.html`
And then for each, just inherit the master page, render the block `content`, and set a variable called `title` for the hero to display on that page.
In `list.html`:
```handlebars
{% extends "taxonomy_list.html" %}
{% block content %}
{% set title = "All Links"%}
{{ super() }}
{% endblock content %}
```
In `single.html`:
```handlebars
{% extends "taxonomy_single.html" %}
{% block content %}
{% set title = "Link: " ~ term.name %}
{{ super() }}
{% endblock content %}
```
### Menu Links
In extra, setting `zulma_menu` with a list of items will cause them to render to the top menu bar. It has two paramers, `url` and `name`. These *must* be set. If you put $BASE_URL in a url, it will automatically be replaced by the actual site URL. This is the easiest way to allow users to navigate to your taxonomies:
```toml
[extra]
zulma_menu = [
{url = "$BASE_URL/categories", name = "Categories"},
{url = "$BASE_URL/tags", name = "Tags"},
{url = "$BASE_URL/authors", name = "Authors"}
]
```
On mobile, a dropdown burger is rendered using javascript. If the page detects javascript is disabled on the clients machine, it will gracefully degrade to always showing the menu (which isn't pretty, but keeps the site functional).
### Brand
In extra, setting `zulma_brand` will cause a brand image to display in the upper left of the top menu bar. This link will always lead back to the homepage. It has two parameters, `image`(optional) and `text`(required). `image` will set the brand to an image at the location specified, and `text` will provide the alt text for this image. If you put $BASE_URL in a url, it will automatically be replaced by the actual site URL. If `image` is not set, the brand will simply be the text specified.
```toml
[extra]
zulma_brand = {image = "$BASE_URL/images/bulma.png", text = "Home"}
```
### Search
Zulma provides search built in. So long as `build_search_index` is set to `true` in `config.toml` then a search input will appear on the top navigation bar. This requires javascript to be enabled to function; if the page detects javascript is disabled on the clients machine, it will hide itself.
The search is shamefully stolen from [Zola's site](https://github.com/getzola/zola/blob/master/docs/static/search.js). Thanks, Vincent!
### Title
In extra, setting `zulma_title` will set a hero banner on the index page to appear with that title inside.
```toml
[extra]
zulma_title = "Blog"
```
If you want to get fancy with it, you can set an image behind using sass like so:
```scss
.index .hero-body {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Plum_trees_Kitano_Tenmangu.jpg/1200px-Plum_trees_Kitano_Tenmangu.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: overlay;
}
```
This will set the image behind the hero, and darken it so the main text can still be easily read.
### Theming
In extra, setting `zulma_theme` to a valid value will change the current colour scheme to that one. All themes were taken from [Bulmaswatch](https://jenil.github.io/bulmaswatch/). Valid theme values are:
- default
- darkly
- flatly
- pulse
- simplex
Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
```toml
[extra]
zulma_theme = "darkly"
```
## Original
This template is based on the [blog template](https://dansup.github.io/bulma-templates/templates/blog.html) over at [Free Bulma Templates](https://dansup.github.io/bulma-templates/). The code behind from adapted from the [after-dark](https://github.com/getzola/after-dark/blob/master/README.md) zola template.

5
config.toml Normal file
View file

@ -0,0 +1,5 @@
# The URL the site will be built for
base_url = "https://example.com"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true

3
content/_index.md Normal file
View file

@ -0,0 +1,3 @@
+++
paginate_by = 5
+++

19
content/some-article.md Normal file
View file

@ -0,0 +1,19 @@
+++
title = "What is Gutenberg"
date = 2017-09-20
[taxonomies]
categories = ["Hello world"]
tags = ["rust", "ssg"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
<!-- more -->
Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

View file

@ -0,0 +1,19 @@
+++
title = "A first theme for Gutenberg"
date = 2017-09-29
[taxonomies]
categories = ["Hello world"]
tags = ["rust", "ssg", "other"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
<!-- more -->
Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

128
sass/_blog.scss Normal file
View file

@ -0,0 +1,128 @@
html,
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
//background: #F0F2F4;
}
.navbar.is-white {
//background: #F0F2F4;
}
.navbar-brand .brand-text {
font-size: 1.11rem;
font-weight: bold;
}
.hero .title {
font-size: 3rem;
}
.article,
.tag-list {
.content p {
line-height: 1.9;
margin: 15px 0;
}
}
.author-image {
position: absolute;
top: -30px;
left: 50%;
width: 60px;
height: 60px;
margin-left: -30px;
//border: 3px solid #ccc;
border-radius: 50%;
}
.media-center {
display: block;
margin-bottom: 1rem;
}
.media-content {
margin-top: 1rem;
}
.article {
margin-top: 1rem;
}
.article-title {
font-size: 2rem;
font-weight: lighter;
line-height: 2;
margin-bottom: 0.5rem;
}
.article-subtitle {
//color: #909AA0;
margin-bottom: 3rem;
}
.article-footer,
.article-body {
margin: 2rem 6rem;
}
.article-body {
line-height: 1.4;
}
.article-footer {
font-style: italic;
padding: 1.5rem;
.columns {
width: 100%;
}
.button,
.tag {
font-style: normal;
}
}
.list.box {
margin-top: 1rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
>a {
margin: 0.2rem;
}
}
.paginator-container {
padding: 2rem 0;
}
.search-results {
display: none;
@include desktop {
position: absolute;
top: 0;
margin-top: 3rem;
width: 50rem;
right: 0;
margin-right: 0.75rem;
}
}
.search-results__items>li {
list-style: none;
margin-top: 1rem;
&:first-child {
margin-top: 0;
}
}
.navbar-end {
height: 100%;
}

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2019 Jeremy Thomas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View file

@ -0,0 +1,119 @@
# [Bulma](https://bulma.io)
Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
[![npm](https://img.shields.io/npm/v/bulma.svg)][npm-link]
[![npm](https://img.shields.io/npm/dm/bulma.svg)][npm-link]
[![Awesome][awesome-badge]][awesome-link]
[![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma)
[![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma)
<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
## Quick install
Bulma is constantly in development! Try it out now:
### NPM
```sh
npm install bulma
```
**or**
### Yarn
```sh
yarn add bulma
```
### Bower
```sh
bower install bulma
```
### Import
After installation, you can import the CSS file into your project using this snippet:
```sh
import 'bulma/css/bulma.css'
```
### CDN
[https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)
Feel free to raise an issue or submit a pull request.
## CSS only
Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)
You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/overview/variables/).
There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.
## Browser Support
Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of:
* Chrome
* Edge
* Firefox
* Opera
* Safari
Internet Explorer (10+) is only partially supported.
## Documentation
The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool.
Browse the [online documentation here.](https://bulma.io/documentation/overview/start/)
## Related projects
| Project | Description |
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors) | Adds support for attribute-based selectors |
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails) | Integrates Bulma with the rails asset pipeline |
| [Vue Admin](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
| [Bulmaswatch](https://github.com/jenil/bulmaswatch) | Free themes for Bulma |
| [Goldfish](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |
| [ember-bulma](https://github.com/open-tux/ember-bulma) | Ember addon providing a collection of UI components for Bulma |
| [Bloomer](https://bloomer.js.org) | A set of React components for Bulma |
| [React-bulma](https://github.com/kulakowka/react-bulma) | React.js components for Bulma |
| [Buefy](https://buefy.github.io) | Lightweight UI components for Vue.js based on Bulma |
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components) | Bulma components for Vue.js with straightforward syntax |
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS) | Javascript integration for Bulma. Written in ES6 with a data-* API |
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx) | A set of modal window effects with CSS transitions and animations for Bulma |
| [Bulma.styl](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma |
| [elm-bulma](https://github.com/surprisetalk/elm-bulma) | Bulma + Elm |
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes) | Bulma classes prepared for usage with Elm |
| [Bulma Customizer](https://bulma-customizer.bstash.io/) | Bulma Customizer &#8211; Create your own **bespoke** Bulma build |
| [Fulma](https://mangelmaxime.github.io/Fulma/) | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react) |
| [Laravel Enso](https://github.com/laravel-enso/enso) | SPA Admin Panel built with Bulma, VueJS and Laravel |
| [Django Bulma](https://github.com/timonweb/django-bulma) | Integrates Bulma with Django |
| [Bulma Templates](https://github.com/dansup/bulma-templates) | Free Templates for Bulma |
| [React Bulma Components](https://github.com/couds/react-bulma-components) | Another React wrap on React for Bulma.io |
| [purescript-bulma](https://github.com/sectore/purescript-bulma) | PureScript bindings for Bulma |
| [Vue Datatable](https://github.com/laravel-enso/vuedatatable) | Bulma themed datatable based on Vue, Laravel & JSON templates |
| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/) | Fluent Design Theme for Bulma inspired by Microsofts Fluent Design System |
| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt) | Automatically add Bulma classes to HTML files |
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react) | Bulma pagination as a react component |
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers) | Functional / Atomic CSS classes for Bulma |
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook) | Bulma swatches as a react hook and a component |
| [BulmaWP](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma |
| [Ralma](https://github.com/aldi/ralma) | Stateless Ractive.js Components for Bulma |
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma) | Lightweight integration of Bulma and Bulma-Extensions for your Django app |
| [rbx](https://dfee.github.io/rbx) | Comprehensive React UI Framework written in TypeScript. |
## Copyright and license
Code copyright 2019 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
[npm-link]: https://www.npmjs.com/package/bulma
[awesome-link]: https://github.com/awesome-css-group/awesome-css
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

View file

@ -0,0 +1,8 @@
@charset "utf-8"
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"

View file

@ -0,0 +1,78 @@
{
"_from": "bulma@0.7.4",
"_id": "bulma@0.7.4",
"_inBundle": false,
"_integrity": "sha512-krG2rP6eAX1WE0sf6O0SC/FUVSOBX4m1PBC2+GKLpb2pX0qanaDqcv9U2nu75egFrsHkI0zdWYuk/oGwoszVWg==",
"_location": "/bulma",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "bulma@0.7.4",
"name": "bulma",
"escapedName": "bulma",
"rawSpec": "0.7.4",
"saveSpec": null,
"fetchSpec": "0.7.4"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
"_shasum": "7e74512e9118d9799021339e67e365ee0ac4f3f9",
"_spec": "bulma@0.7.4",
"_where": "/Users/jthomas/Desktop",
"author": {
"name": "Jeremy Thomas",
"email": "bbxdesign@gmail.com",
"url": "https://jgthms.com"
},
"bugs": {
"url": "https://github.com/jgthms/bulma/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "Modern CSS framework based on Flexbox",
"devDependencies": {
"autoprefixer": "^9.4.7",
"clean-css-cli": "^4.2.1",
"node-sass": "^4.11.0",
"postcss-cli": "^6.1.1",
"rimraf": "^2.6.3"
},
"files": [
"css",
"sass",
"bulma.sass",
"LICENSE",
"README.md"
],
"homepage": "https://bulma.io",
"keywords": [
"css",
"sass",
"flexbox",
"responsive",
"framework"
],
"license": "MIT",
"main": "bulma.sass",
"name": "bulma",
"repository": {
"type": "git",
"url": "git+https://github.com/jgthms/bulma.git"
},
"scripts": {
"build": "npm run build-clean && npm run build-sass && npm run build-autoprefix && npm run build-cleancss",
"build-autoprefix": "postcss --use autoprefixer --map false --output css/bulma.css css/bulma.css",
"build-clean": "rimraf css",
"build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css",
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
"deploy": "npm run build",
"start": "npm run build-sass -- --watch"
},
"style": "bulma/css/bulma.min.css",
"unpkg": "css/bulma.css",
"version": "0.7.4"
}

BIN
sass/_vendor/bulma-0.7.4/sass/.DS_Store vendored Normal file

Binary file not shown.

View file

@ -0,0 +1,5 @@
@charset "utf-8"
@import "minireset.sass"
@import "generic.sass"
@import "helpers.sass"

View file

@ -0,0 +1,130 @@
$body-background-color: $white !default
$body-size: 16px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !default
$body-color: $text !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default
$code-family: $family-code !default
$code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default
$code-size: 0.875em !default
$hr-background-color: $background !default
$hr-height: 2px !default
$hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default
$strong-weight: $weight-bold !default
html
background-color: $body-background-color
font-size: $body-size
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
min-width: 300px
overflow-x: hidden
overflow-y: scroll
text-rendering: $body-rendering
text-size-adjust: 100%
article,
aside,
figure,
footer,
header,
hgroup,
section
display: block
body,
button,
input,
select,
textarea
font-family: $body-family
code,
pre
-moz-osx-font-smoothing: auto
-webkit-font-smoothing: auto
font-family: $code-family
body
color: $body-color
font-size: 1rem
font-weight: $body-weight
line-height: $body-line-height
// Inline
a
color: $link
cursor: pointer
text-decoration: none
strong
color: currentColor
&:hover
color: $link-hover
code
background-color: $code-background
color: $code
font-size: $code-size
font-weight: $code-weight
padding: $code-padding
hr
background-color: $hr-background-color
border: none
display: block
height: $hr-height
margin: $hr-margin
img
height: auto
max-width: 100%
input[type="checkbox"],
input[type="radio"]
vertical-align: baseline
small
font-size: 0.875em
span
font-style: inherit
font-weight: inherit
strong
color: $strong-color
font-weight: $strong-weight
// Block
fieldset
border: none
pre
+overflow-touch
background-color: $pre-background
color: $pre
font-size: 0.875em
overflow-x: auto
padding: 1.25rem 1.5rem
white-space: pre
word-wrap: normal
code
background-color: transparent
color: currentColor
font-size: 1em
padding: 0
table
td,
th
text-align: left
vertical-align: top
th
color: $text-strong

View file

@ -0,0 +1,276 @@
// Float
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important
// Overflow
.is-clipped
overflow: hidden !important
// Overlay
.is-overlay
@extend %overlay
// Typography
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important
+typography-size()
+mobile
+typography-size('mobile')
+tablet
+typography-size('tablet')
+touch
+typography-size('touch')
+desktop
+typography-size('desktop')
+widescreen
+typography-size('widescreen')
+fullhd
+typography-size('fullhd')
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important
@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important
.is-capitalized
text-transform: capitalize !important
.is-lowercase
text-transform: lowercase !important
.is-uppercase
text-transform: uppercase !important
.is-italic
font-style: italic !important
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: darken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important
.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important
// Visibility
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important
+mobile
.is-hidden-mobile
display: none !important
+tablet
.is-hidden-tablet
display: none !important
+tablet-only
.is-hidden-tablet-only
display: none !important
+touch
.is-hidden-touch
display: none !important
+desktop
.is-hidden-desktop
display: none !important
+desktop-only
.is-hidden-desktop-only
display: none !important
+widescreen
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
.is-invisible
visibility: hidden !important
+mobile
.is-invisible-mobile
visibility: hidden !important
+tablet
.is-invisible-tablet
visibility: hidden !important
+tablet-only
.is-invisible-tablet-only
visibility: hidden !important
+touch
.is-invisible-touch
visibility: hidden !important
+desktop
.is-invisible-desktop
visibility: hidden !important
+desktop-only
.is-invisible-desktop-only
visibility: hidden !important
+widescreen
.is-invisible-widescreen
visibility: hidden !important
+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important
+fullhd
.is-invisible-fullhd
visibility: hidden !important
// Other
.is-marginless
margin: 0 !important
.is-paddingless
padding: 0 !important
.is-radiusless
border-radius: 0 !important
.is-shadowless
box-shadow: none !important
.is-unselectable
@extend %unselectable

View file

@ -0,0 +1,84 @@
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6
margin: 0
padding: 0
// Headings
h1,
h2,
h3,
h4,
h5,
h6
font-size: 100%
font-weight: normal
// List
ul
list-style: none
// Form
button,
input,
select,
textarea
margin: 0
// Box sizing
html
box-sizing: border-box
*
&,
&::before,
&::after
box-sizing: inherit
// Media
img,
embed,
iframe,
object,
video
height: auto
max-width: 100%
audio
max-width: 100%
// Iframe
iframe
border: 0
// Table
table
border-collapse: collapse
border-spacing: 0
td,
th
padding: 0
text-align: left

View file

@ -0,0 +1,15 @@
@charset "utf-8"
@import "breadcrumb.sass"
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"
@import "modal.sass"
@import "navbar.sass"
@import "pagination.sass"
@import "panel.sass"
@import "tabs.sass"

View file

@ -0,0 +1,75 @@
$breadcrumb-item-color: $link !default
$breadcrumb-item-hover-color: $link-hover !default
$breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $grey-light !default
.breadcrumb
@extend %block
@extend %unselectable
font-size: $size-normal
white-space: nowrap
a
align-items: center
color: $breadcrumb-item-color
display: flex
justify-content: center
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
&:hover
color: $breadcrumb-item-hover-color
li
align-items: center
display: flex
&:first-child a
padding-left: 0
&.is-active
a
color: $breadcrumb-item-active-color
cursor: default
pointer-events: none
& + li::before
color: $breadcrumb-item-separator-color
content: "\0002f"
ul,
ol
align-items: flex-start
display: flex
flex-wrap: wrap
justify-content: flex-start
.icon
&:first-child
margin-right: 0.5em
&:last-child
margin-left: 0.5em
// Alignment
&.is-centered
ol,
ul
justify-content: center
&.is-right
ol,
ul
justify-content: flex-end
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
// Styles
&.has-arrow-separator
li + li::before
content: "\02192"
&.has-bullet-separator
li + li::before
content: "\02022"
&.has-dot-separator
li + li::before
content: "\000b7"
&.has-succeeds-separator
li + li::before
content: "\0227B"

View file

@ -0,0 +1,74 @@
$card-color: $text !default
$card-background-color: $white !default
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
$card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default
$card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border !default
.card
background-color: $card-background-color
box-shadow: $card-shadow
color: $card-color
max-width: 100%
position: relative
.card-header
background-color: $card-header-background-color
align-items: stretch
box-shadow: $card-header-shadow
display: flex
.card-header-title
align-items: center
color: $card-header-color
display: flex
flex-grow: 1
font-weight: $card-header-weight
padding: 0.75rem
&.is-centered
justify-content: center
.card-header-icon
align-items: center
cursor: pointer
display: flex
justify-content: center
padding: 0.75rem
.card-image
display: block
position: relative
.card-content
background-color: $card-content-background-color
padding: 1.5rem
.card-footer
background-color: $card-footer-background-color
border-top: $card-footer-border-top
align-items: stretch
display: flex
.card-footer-item
align-items: center
display: flex
flex-basis: 0
flex-grow: 1
flex-shrink: 0
justify-content: center
padding: 0.75rem
&:not(:last-child)
border-right: $card-footer-border-top
// Combinations
.card
.media:not(:last-child)
margin-bottom: 0.75rem

View file

@ -0,0 +1,77 @@
$dropdown-content-background-color: $white !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$dropdown-content-z: 20 !default
$dropdown-item-color: $grey-dark !default
$dropdown-item-hover-color: $black !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default
$dropdown-divider-background-color: $border !default
.dropdown
display: inline-flex
position: relative
vertical-align: top
&.is-active,
&.is-hoverable:hover
.dropdown-menu
display: block
&.is-right
.dropdown-menu
left: auto
right: 0
&.is-up
.dropdown-menu
bottom: 100%
padding-bottom: $dropdown-content-offset
padding-top: initial
top: auto
.dropdown-menu
display: none
left: 0
min-width: 12rem
padding-top: $dropdown-content-offset
position: absolute
top: 100%
z-index: $dropdown-content-z
.dropdown-content
background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow
padding-bottom: 0.5rem
padding-top: 0.5rem
.dropdown-item
color: $dropdown-item-color
display: block
font-size: 0.875rem
line-height: 1.5
padding: 0.375rem 1rem
position: relative
a.dropdown-item,
button.dropdown-item
padding-right: 3rem
text-align: left
white-space: nowrap
width: 100%
&:hover
background-color: $dropdown-item-hover-background-color
color: $dropdown-item-hover-color
&.is-active
background-color: $dropdown-item-active-background-color
color: $dropdown-item-active-color
.dropdown-divider
background-color: $dropdown-divider-background-color
border: none
display: block
height: 1px
margin: 0.5rem 0

View file

@ -0,0 +1,75 @@
.level
@extend %block
align-items: center
justify-content: space-between
code
border-radius: $radius
img
display: inline-block
vertical-align: top
// Modifiers
&.is-mobile
display: flex
.level-left,
.level-right
display: flex
.level-left + .level-right
margin-top: 0
.level-item
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
+tablet
display: flex
& > .level-item
&:not(.is-narrow)
flex-grow: 1
.level-item
align-items: center
display: flex
flex-basis: auto
flex-grow: 0
flex-shrink: 0
justify-content: center
.title,
.subtitle
margin-bottom: 0
// Responsiveness
+mobile
&:not(:last-child)
margin-bottom: 0.75rem
.level-left,
.level-right
flex-basis: auto
flex-grow: 0
flex-shrink: 0
.level-item
// Modifiers
&.is-flexible
flex-grow: 1
// Responsiveness
+tablet
&:not(:last-child)
margin-right: 0.75rem
.level-left
align-items: center
justify-content: flex-start
// Responsiveness
+mobile
& + .level-right
margin-top: 1.5rem
+tablet
display: flex
.level-right
align-items: center
justify-content: flex-end
// Responsiveness
+tablet
display: flex

View file

@ -0,0 +1,39 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default
.list
@extend %block
background-color: $list-background-color
border-radius: $list-radius
box-shadow: $list-shadow
// &.is-hoverable > .list-item:hover:not(.is-active)
// background-color: $list-item-hover-background-color
// cursor: pointer
.list-item
display: block
padding: 0.5em 1em
&:not(a)
color: $list-item-color
&:first-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color
a.list-item
background-color: $list-item-hover-background-color
cursor: pointer

View file

@ -0,0 +1,48 @@
.media
align-items: flex-start
display: flex
text-align: left
.content:not(:last-child)
margin-bottom: 0.75rem
.media
border-top: 1px solid rgba($border, 0.5)
display: flex
padding-top: 0.75rem
.content:not(:last-child),
.control:not(:last-child)
margin-bottom: 0.5rem
.media
padding-top: 0.5rem
& + .media
margin-top: 0.5rem
& + .media
border-top: 1px solid rgba($border, 0.5)
margin-top: 1rem
padding-top: 1rem
// Sizes
&.is-large
& + .media
margin-top: 1.5rem
padding-top: 1.5rem
.media-left,
.media-right
flex-basis: auto
flex-grow: 0
flex-shrink: 0
.media-left
margin-right: 1rem
.media-right
margin-left: 1rem
.media-content
flex-basis: auto
flex-grow: 1
flex-shrink: 1
text-align: left
+mobile
.media-content
overflow-x: auto

View file

@ -0,0 +1,50 @@
$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default
$menu-label-color: $text-light !default
.menu
font-size: $size-normal
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.menu-list
line-height: 1.25
a
border-radius: $menu-item-radius
color: $menu-item-color
display: block
padding: 0.5em 0.75em
&:hover
background-color: $menu-item-hover-background-color
color: $menu-item-hover-color
// Modifiers
&.is-active
background-color: $menu-item-active-background-color
color: $menu-item-active-color
li
ul
border-left: $menu-list-border-left
margin: 0.75em
padding-left: 0.75em
.menu-label
color: $menu-label-color
font-size: 0.75em
letter-spacing: 0.1em
text-transform: uppercase
&:not(:first-child)
margin-top: 1em
&:not(:last-child)
margin-bottom: 1em

View file

@ -0,0 +1,86 @@
$message-background-color: $background !default
$message-radius: $radius !default
$message-header-background-color: $text !default
$message-header-color: $text-invert !default
$message-header-weight: $weight-bold !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default
$message-body-border-color: $border !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-pre-background-color: $white !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
.message
@extend %block
background-color: $message-background-color
border-radius: $message-radius
font-size: $size-normal
strong
color: currentColor
a:not(.button):not(.tag):not(.dropdown-item)
color: currentColor
text-decoration: underline
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
&.is-#{$name}
background-color: lighten($color, $color-lightning)
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
.message-header
align-items: center
background-color: $message-header-background-color
border-radius: $message-header-radius $message-header-radius 0 0
color: $message-header-color
display: flex
font-weight: $message-header-weight
justify-content: space-between
line-height: 1.25
padding: $message-header-padding
position: relative
.delete
flex-grow: 0
flex-shrink: 0
margin-left: 0.75em
& + .message-body
border-width: $message-header-body-border-width
border-top-left-radius: 0
border-top-right-radius: 0
.message-body
border-color: $message-body-border-color
border-radius: $message-body-radius
border-style: solid
border-width: $message-body-border-width
color: $message-body-color
padding: $message-body-padding
code,
pre
background-color: $message-body-pre-background-color
pre code
background-color: $message-body-pre-code-background-color

View file

@ -0,0 +1,113 @@
$modal-z: 40 !default
$modal-background-background-color: rgba($black, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
$modal-content-spacing-mobile: 160px !default
$modal-content-spacing-tablet: 40px !default
$modal-close-dimensions: 40px !default
$modal-close-right: 20px !default
$modal-close-top: 20px !default
$modal-card-spacing: 40px !default
$modal-card-head-background-color: $background !default
$modal-card-head-border-bottom: 1px solid $border !default
$modal-card-head-padding: 20px !default
$modal-card-head-radius: $radius-large !default
$modal-card-title-color: $text-strong !default
$modal-card-title-line-height: 1 !default
$modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default
$modal-card-body-background-color: $white !default
$modal-card-body-padding: 20px !default
.modal
@extend %overlay
align-items: center
display: none
flex-direction: column
justify-content: center
overflow: hidden
position: fixed
z-index: $modal-z
// Modifiers
&.is-active
display: flex
.modal-background
@extend %overlay
background-color: $modal-background-background-color
.modal-content,
.modal-card
margin: 0 $modal-content-margin-mobile
max-height: calc(100vh - #{$modal-content-spacing-mobile})
overflow: auto
position: relative
width: 100%
// Responsiveness
+tablet
margin: 0 auto
max-height: calc(100vh - #{$modal-content-spacing-tablet})
width: $modal-content-width
.modal-close
@extend %delete
background: none
height: $modal-close-dimensions
position: fixed
right: $modal-close-right
top: $modal-close-top
width: $modal-close-dimensions
.modal-card
display: flex
flex-direction: column
max-height: calc(100vh - #{$modal-card-spacing})
overflow: hidden
-ms-overflow-y: visible
.modal-card-head,
.modal-card-foot
align-items: center
background-color: $modal-card-head-background-color
display: flex
flex-shrink: 0
justify-content: flex-start
padding: $modal-card-head-padding
position: relative
.modal-card-head
border-bottom: $modal-card-head-border-bottom
border-top-left-radius: $modal-card-head-radius
border-top-right-radius: $modal-card-head-radius
.modal-card-title
color: $modal-card-title-color
flex-grow: 1
flex-shrink: 0
font-size: $modal-card-title-size
line-height: $modal-card-title-line-height
.modal-card-foot
border-bottom-left-radius: $modal-card-foot-radius
border-bottom-right-radius: $modal-card-foot-radius
border-top: $modal-card-foot-border-top
.button
&:not(:last-child)
margin-right: 10px
.modal-card-body
+overflow-touch
background-color: $modal-card-body-background-color
flex-grow: 1
flex-shrink: 1
overflow: auto
padding: $modal-card-body-padding

View file

@ -0,0 +1,428 @@
$navbar-background-color: $white !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
$navbar-padding-vertical: 1rem !default
$navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default
$navbar-item-hover-color: $link !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
$navbar-burger-color: $navbar-item-color !default
$navbar-tab-hover-background-color: transparent !default
$navbar-tab-hover-border-bottom-color: $link !default
$navbar-tab-active-color: $link !default
$navbar-tab-active-background-color: transparent !default
$navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default
$navbar-dropdown-background-color: $white !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
$navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$navbar-dropdown-item-hover-color: $black !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
$navbar-divider-background-color: $background !default
$navbar-divider-height: 2px !default
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
$navbar-breakpoint: $desktop !default
=navbar-fixed
left: 0
position: fixed
right: 0
z-index: $navbar-fixed-z
.navbar
background-color: $navbar-background-color
min-height: $navbar-height
position: relative
z-index: $navbar-z
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
.navbar-brand
& > .navbar-item,
.navbar-link
color: $color-invert
& > a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
color: $color-invert
.navbar-link
&::after
border-color: $color-invert
.navbar-burger
color: $color-invert
+from($navbar-breakpoint)
.navbar-start,
.navbar-end
& > .navbar-item,
.navbar-link
color: $color-invert
& > a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
color: $color-invert
.navbar-link
&::after
border-color: $color-invert
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
color: $color-invert
.navbar-dropdown
a.navbar-item
&.is-active
background-color: $color
color: $color-invert
& > .container
align-items: stretch
display: flex
min-height: $navbar-height
width: 100%
&.has-shadow
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
&.is-fixed-bottom,
&.is-fixed-top
+navbar-fixed
&.is-fixed-bottom
bottom: 0
&.has-shadow
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
&.is-fixed-top
top: 0
html,
body
&.has-navbar-fixed-top
padding-top: $navbar-height
&.has-navbar-fixed-bottom
padding-bottom: $navbar-height
.navbar-brand,
.navbar-tabs
align-items: stretch
display: flex
flex-shrink: 0
min-height: $navbar-height
.navbar-brand
a.navbar-item
&:hover
background-color: transparent
.navbar-tabs
+overflow-touch
max-width: 100vw
overflow-x: auto
overflow-y: hidden
.navbar-burger
color: $navbar-burger-color
+hamburger($navbar-height)
margin-left: auto
.navbar-menu
display: none
.navbar-item,
.navbar-link
color: $navbar-item-color
display: block
line-height: 1.5
padding: 0.5rem 0.75rem
position: relative
.icon
&:only-child
margin-left: -0.25rem
margin-right: -0.25rem
a.navbar-item,
.navbar-link
cursor: pointer
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
color: $navbar-item-hover-color
.navbar-item
display: block
flex-grow: 0
flex-shrink: 0
img
max-height: $navbar-item-img-max-height
&.has-dropdown
padding: 0
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-tab
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
&.is-active
background-color: $navbar-tab-active-background-color
border-bottom-color: $navbar-tab-active-border-bottom-color
border-bottom-style: $navbar-tab-active-border-bottom-style
border-bottom-width: $navbar-tab-active-border-bottom-width
color: $navbar-tab-active-color
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
.navbar-content
flex-grow: 1
flex-shrink: 1
.navbar-link:not(.is-arrowless)
padding-right: 2.5em
&::after
@extend %arrow
border-color: $navbar-dropdown-arrow
margin-top: -0.375em
right: 1.125em
.navbar-dropdown
font-size: 0.875rem
padding-bottom: 0.5rem
padding-top: 0.5rem
.navbar-item
padding-left: 1.5rem
padding-right: 1.5rem
.navbar-divider
background-color: $navbar-divider-background-color
border: none
display: none
height: $navbar-divider-height
margin: 0.5rem 0
+until($navbar-breakpoint)
.navbar > .container
display: block
.navbar-brand,
.navbar-tabs
.navbar-item
align-items: center
display: flex
.navbar-link
&::after
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($black, 0.1)
padding: 0.5rem 0
&.is-active
display: block
// Fixed navbar
.navbar
&.is-fixed-bottom-touch,
&.is-fixed-top-touch
+navbar-fixed
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
&.is-fixed-top-touch
.navbar-menu
+overflow-touch
max-height: calc(100vh - #{$navbar-height})
overflow: auto
html,
body
&.has-navbar-fixed-top-touch
padding-top: $navbar-height
&.has-navbar-fixed-bottom-touch
padding-bottom: $navbar-height
+from($navbar-breakpoint)
.navbar,
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
.navbar
min-height: $navbar-height
&.is-spaced
padding: $navbar-padding-vertical $navbar-padding-horizontal
.navbar-start,
.navbar-end
align-items: center
a.navbar-item,
.navbar-link
border-radius: $radius
&.is-transparent
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
&.is-active
background-color: $navbar-dropdown-item-active-background-color
color: $navbar-dropdown-item-active-color
.navbar-burger
display: none
.navbar-item,
.navbar-link
align-items: center
display: flex
.navbar-item
display: flex
&.has-dropdown
align-items: stretch
&.has-dropdown-up
.navbar-link::after
transform: rotate(135deg) translate(0.25em, -0.25em)
.navbar-dropdown
border-bottom: $navbar-dropdown-border-top
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px rgba($black, 0.1)
top: auto
&.is-active,
&.is-hoverable:hover
.navbar-dropdown
display: block
.navbar.is-spaced &,
&.is-boxed
opacity: 1
pointer-events: auto
transform: translateY(0)
.navbar-menu
flex-grow: 1
flex-shrink: 0
.navbar-start
justify-content: flex-start
margin-right: auto
.navbar-end
justify-content: flex-end
margin-left: auto
.navbar-dropdown
background-color: $navbar-dropdown-background-color
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
box-shadow: 0 8px 8px rgba($black, 0.1)
display: none
font-size: 0.875rem
left: 0
min-width: 100%
position: absolute
top: 100%
z-index: $navbar-dropdown-z
.navbar-item
padding: 0.375rem 1rem
white-space: nowrap
a.navbar-item
padding-right: 3rem
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
&.is-active
background-color: $navbar-dropdown-item-active-background-color
color: $navbar-dropdown-item-active-color
.navbar.is-spaced &,
&.is-boxed
border-radius: $navbar-dropdown-boxed-radius
border-top: none
box-shadow: $navbar-dropdown-boxed-shadow
display: block
opacity: 0
pointer-events: none
top: calc(100% + (#{$navbar-dropdown-offset}))
transform: translateY(-5px)
transition-duration: $speed
transition-property: opacity, transform
&.is-right
left: auto
right: 0
.navbar-divider
display: block
.navbar > .container,
.container > .navbar
.navbar-brand
margin-left: -.75rem
.navbar-menu
margin-right: -.75rem
// Fixed navbar
.navbar
&.is-fixed-bottom-desktop,
&.is-fixed-top-desktop
+navbar-fixed
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-desktop
top: 0
html,
body
&.has-navbar-fixed-top-desktop
padding-top: $navbar-height
&.has-navbar-fixed-bottom-desktop
padding-bottom: $navbar-height
&.has-spaced-navbar-fixed-top
padding-top: $navbar-height + ($navbar-padding-vertical * 2)
&.has-spaced-navbar-fixed-bottom
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
// Hover/Active states
a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
&.is-active:not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
&:hover,
&.is-active
.navbar-link
background-color: $navbar-item-hover-background-color
// Combination
.hero
&.is-fullheight-with-navbar
min-height: calc(100vh - #{$navbar-height})

View file

@ -0,0 +1,144 @@
$pagination-color: $grey-darker !default
$pagination-border-color: $grey-lighter !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
$pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default
$pagination-focus-color: $link-focus !default
$pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
$pagination-disabled-color: $grey !default
$pagination-disabled-background-color: $grey-lighter !default
$pagination-disabled-border-color: $grey-lighter !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
$pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination
font-size: $size-normal
margin: $pagination-margin
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
&.is-rounded
.pagination-previous,
.pagination-next
padding-left: 1em
padding-right: 1em
border-radius: $radius-rounded
.pagination-link
border-radius: $radius-rounded
.pagination,
.pagination-list
align-items: center
display: flex
justify-content: center
text-align: center
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
@extend %control
@extend %unselectable
font-size: 1em
padding-left: 0.5em
padding-right: 0.5em
justify-content: center
margin: 0.25rem
text-align: center
.pagination-previous,
.pagination-next,
.pagination-link
border-color: $pagination-border-color
color: $pagination-color
min-width: $pagination-min-width
&:hover
border-color: $pagination-hover-border-color
color: $pagination-hover-color
&:focus
border-color: $pagination-focus-border-color
&:active
box-shadow: $pagination-shadow-inset
&[disabled]
background-color: $pagination-disabled-background-color
border-color: $pagination-disabled-border-color
box-shadow: none
color: $pagination-disabled-color
opacity: 0.5
.pagination-previous,
.pagination-next
padding-left: 0.75em
padding-right: 0.75em
white-space: nowrap
.pagination-link
&.is-current
background-color: $pagination-current-background-color
border-color: $pagination-current-border-color
color: $pagination-current-color
.pagination-ellipsis
color: $pagination-ellipsis-color
pointer-events: none
.pagination-list
flex-wrap: wrap
+mobile
.pagination
flex-wrap: wrap
.pagination-previous,
.pagination-next
flex-grow: 1
flex-shrink: 1
.pagination-list
li
flex-grow: 1
flex-shrink: 1
+tablet
.pagination-list
flex-grow: 1
flex-shrink: 1
justify-content: flex-start
order: 1
.pagination-previous
order: 2
.pagination-next
order: 3
.pagination
justify-content: space-between
&.is-centered
.pagination-previous
order: 1
.pagination-list
justify-content: center
order: 2
.pagination-next
order: 3
&.is-right
.pagination-previous
order: 1
.pagination-next
order: 2
.pagination-list
justify-content: flex-end
order: 3

View file

@ -0,0 +1,101 @@
$panel-item-border: 1px solid $border !default
$panel-heading-background-color: $background !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
$panel-heading-padding: 0.5em 0.75em !default
$panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
$panel-heading-weight: $weight-light !default
$panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default
$panel-list-item-color: $text !default
$panel-list-item-hover-color: $link !default
$panel-block-color: $text-strong !default
$panel-block-hover-background-color: $background !default
$panel-block-active-border-left-color: $link !default
$panel-block-active-color: $link-active !default
$panel-block-active-icon-color: $link !default
$panel-icon-color: $text-light !default
.panel
font-size: $size-normal
&:not(:last-child)
margin-bottom: 1.5rem
.panel-heading,
.panel-tabs,
.panel-block
border-bottom: $panel-item-border
border-left: $panel-item-border
border-right: $panel-item-border
&:first-child
border-top: $panel-item-border
.panel-heading
background-color: $panel-heading-background-color
border-radius: $panel-heading-radius $panel-heading-radius 0 0
color: $panel-heading-color
font-size: $panel-heading-size
font-weight: $panel-heading-weight
line-height: $panel-heading-line-height
padding: $panel-heading-padding
.panel-tabs
align-items: flex-end
display: flex
font-size: 0.875em
justify-content: center
a
border-bottom: $panel-tab-border-bottom
margin-bottom: -1px
padding: 0.5em
// Modifiers
&.is-active
border-bottom-color: $panel-tab-active-border-bottom-color
color: $panel-tab-active-color
.panel-list
a
color: $panel-list-item-color
&:hover
color: $panel-list-item-hover-color
.panel-block
align-items: center
color: $panel-block-color
display: flex
justify-content: flex-start
padding: 0.5em 0.75em
input[type="checkbox"]
margin-right: 0.75em
& > .control
flex-grow: 1
flex-shrink: 1
width: 100%
&.is-wrapped
flex-wrap: wrap
&.is-active
border-left-color: $panel-block-active-border-left-color
color: $panel-block-active-color
.panel-icon
color: $panel-block-active-icon-color
a.panel-block,
label.panel-block
cursor: pointer
&:hover
background-color: $panel-block-hover-background-color
.panel-icon
+fa(14px, 1em)
color: $panel-icon-color
margin-right: 0.75em
.fa
font-size: inherit
line-height: inherit

View file

@ -0,0 +1,151 @@
$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default
$tabs-link-color: $text !default
$tabs-link-hover-border-bottom-color: $text-strong !default
$tabs-link-hover-color: $text-strong !default
$tabs-link-active-border-bottom-color: $link !default
$tabs-link-active-color: $link !default
$tabs-link-padding: 0.5em 1em !default
$tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
$tabs-boxed-link-active-background-color: $white !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default
$tabs-toggle-link-border-color: $border !default
$tabs-toggle-link-border-style: solid !default
$tabs-toggle-link-border-width: 1px !default
$tabs-toggle-link-hover-background-color: $background !default
$tabs-toggle-link-hover-border-color: $border-hover !default
$tabs-toggle-link-radius: $radius !default
$tabs-toggle-link-active-background-color: $link !default
$tabs-toggle-link-active-border-color: $link !default
$tabs-toggle-link-active-color: $link-invert !default
.tabs
@extend %block
+overflow-touch
@extend %unselectable
align-items: stretch
display: flex
font-size: $size-normal
justify-content: space-between
overflow: hidden
overflow-x: auto
white-space: nowrap
a
align-items: center
border-bottom-color: $tabs-border-bottom-color
border-bottom-style: $tabs-border-bottom-style
border-bottom-width: $tabs-border-bottom-width
color: $tabs-link-color
display: flex
justify-content: center
margin-bottom: -#{$tabs-border-bottom-width}
padding: $tabs-link-padding
vertical-align: top
&:hover
border-bottom-color: $tabs-link-hover-border-bottom-color
color: $tabs-link-hover-color
li
display: block
&.is-active
a
border-bottom-color: $tabs-link-active-border-bottom-color
color: $tabs-link-active-color
ul
align-items: center
border-bottom-color: $tabs-border-bottom-color
border-bottom-style: $tabs-border-bottom-style
border-bottom-width: $tabs-border-bottom-width
display: flex
flex-grow: 1
flex-shrink: 0
justify-content: flex-start
&.is-left
padding-right: 0.75em
&.is-center
flex: none
justify-content: center
padding-left: 0.75em
padding-right: 0.75em
&.is-right
justify-content: flex-end
padding-left: 0.75em
.icon
&:first-child
margin-right: 0.5em
&:last-child
margin-left: 0.5em
// Alignment
&.is-centered
ul
justify-content: center
&.is-right
ul
justify-content: flex-end
// Styles
&.is-boxed
a
border: 1px solid transparent
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
&:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
li
&.is-active
a
background-color: $tabs-boxed-link-active-background-color
border-color: $tabs-boxed-link-active-border-color
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
&.is-fullwidth
li
flex-grow: 1
flex-shrink: 0
&.is-toggle
a
border-color: $tabs-toggle-link-border-color
border-style: $tabs-toggle-link-border-style
border-width: $tabs-toggle-link-border-width
margin-bottom: 0
position: relative
&:hover
background-color: $tabs-toggle-link-hover-background-color
border-color: $tabs-toggle-link-hover-border-color
z-index: 2
li
& + li
margin-left: -#{$tabs-toggle-link-border-width}
&:first-child a
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
&:last-child a
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
&.is-active
a
background-color: $tabs-toggle-link-active-background-color
border-color: $tabs-toggle-link-active-border-color
color: $tabs-toggle-link-active-color
z-index: 1
ul
border-bottom: none
&.is-toggle-rounded
li
&:first-child a
border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded
padding-left: 1.25em
&:last-child a
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large

View file

@ -0,0 +1,16 @@
@charset "utf-8"
@import "box.sass"
@import "button.sass"
@import "container.sass"
@import "content.sass"
@import "form.sass"
@import "icon.sass"
@import "image.sass"
@import "notification.sass"
@import "progress.sass"
@import "table.sass"
@import "tag.sass"
@import "title.sass"
@import "other.sass"

View file

@ -0,0 +1,24 @@
$box-color: $text !default
$box-background-color: $white !default
$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
.box
@extend %block
background-color: $box-background-color
border-radius: $box-radius
box-shadow: $box-shadow
color: $box-color
display: block
padding: $box-padding
a.box
&:hover,
&:focus
box-shadow: $box-link-hover-shadow
&:active
box-shadow: $box-link-active-shadow

View file

@ -0,0 +1,275 @@
$button-color: $grey-darker !default
$button-background-color: $white !default
$button-border-color: $grey-lighter !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
$button-padding-horizontal: 0.75em !default
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
$button-text-color: $text !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
font-size: $size-small
=button-normal
font-size: $size-normal
=button-medium
font-size: $size-medium
=button-large
font-size: $size-large
.button
@extend %control
@extend %unselectable
background-color: $button-background-color
border-color: $button-border-color
border-width: $button-border-width
color: $button-color
cursor: pointer
justify-content: center
padding-bottom: $button-padding-vertical
padding-left: $button-padding-horizontal
padding-right: $button-padding-horizontal
padding-top: $button-padding-vertical
text-align: center
white-space: nowrap
strong
color: inherit
.icon
&,
&.is-small,
&.is-medium,
&.is-large
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: 0.1875em
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: calc(-0.375em - #{$button-border-width})
&:first-child:last-child
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: calc(-0.375em - #{$button-border-width})
// States
&:hover,
&.is-hovered
border-color: $button-hover-border-color
color: $button-hover-color
&:focus,
&.is-focused
border-color: $button-focus-border-color
color: $button-focus-color
&:not(:active)
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
&:active,
&.is-active
border-color: $button-active-border-color
color: $button-active-color
// Colors
&.is-text
background-color: transparent
border-color: transparent
color: $button-text-color
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused
background-color: $button-text-hover-background-color
color: $button-text-hover-color
&:active,
&.is-active
background-color: darken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: transparent
box-shadow: none
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
border-color: transparent
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
&:active,
&.is-active
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled],
fieldset[disabled] &
background-color: $color
border-color: transparent
box-shadow: none
&.is-inverted
background-color: $color-invert
color: $color
&:hover
background-color: darken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
&.is-loading
&::after
border-color: transparent transparent $color-invert $color-invert !important
&.is-outlined
background-color: transparent
border-color: $color
color: $color
&:hover,
&:focus
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&::after
border-color: transparent transparent $color $color !important
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color
box-shadow: none
color: $color
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover,
&:focus
background-color: $color-invert
color: $color
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
// Sizes
&.is-small
+button-small
&.is-normal
+button-normal
&.is-medium
+button-medium
&.is-large
+button-large
// Modifiers
&[disabled],
fieldset[disabled] &
background-color: $button-disabled-background-color
border-color: $button-disabled-border-color
box-shadow: $button-disabled-shadow
opacity: $button-disabled-opacity
&.is-fullwidth
display: flex
width: 100%
&.is-loading
color: transparent !important
pointer-events: none
&::after
@extend %loader
+center(1em)
position: absolute !important
&.is-static
background-color: $button-static-background-color
border-color: $button-static-border-color
color: $button-static-color
box-shadow: none
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
.buttons
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.button
margin-bottom: 0.5rem
&:not(:last-child):not(.is-fullwidth)
margin-right: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
// Sizes
&.are-small
.button:not(.is-normal):not(.is-medium):not(.is-large)
+button-small
&.are-medium
.button:not(.is-small):not(.is-normal):not(.is-large)
+button-medium
&.are-large
.button:not(.is-small):not(.is-normal):not(.is-medium)
+button-large
&.has-addons
.button
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
margin-right: -1px
&:last-child
margin-right: 0
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active,
&.is-selected
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
&.is-centered
justify-content: center
&.is-right
justify-content: flex-end

View file

@ -0,0 +1,25 @@
.container
margin: 0 auto
position: relative
+desktop
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
+until-widescreen
&.is-widescreen
max-width: $widescreen - (2 * $gap)
width: auto
+until-fullhd
&.is-fullhd
max-width: $fullhd - (2 * $gap)
width: auto
+widescreen
max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
+fullhd
max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)

View file

@ -0,0 +1,151 @@
$content-heading-color: $text-strong !default
$content-heading-weight: $weight-semibold !default
$content-heading-line-height: 1.125 !default
$content-blockquote-background-color: $background !default
$content-blockquote-border-left: 5px solid $border !default
$content-blockquote-padding: 1.25em 1.5em !default
$content-pre-padding: 1.25em 1.5em !default
$content-table-cell-border: 1px solid $border !default
$content-table-cell-border-width: 0 0 1px !default
$content-table-cell-padding: 0.5em 0.75em !default
$content-table-cell-heading-color: $text-strong !default
$content-table-head-cell-border-width: 0 0 2px !default
$content-table-head-cell-color: $text-strong !default
$content-table-foot-cell-border-width: 2px 0 0 !default
$content-table-foot-cell-color: $text-strong !default
.content
@extend %block
// Inline
li + li
margin-top: 0.25em
// Block
p,
dl,
ol,
ul,
blockquote,
pre,
table
&:not(:last-child)
margin-bottom: 1em
h1,
h2,
h3,
h4,
h5,
h6
color: $content-heading-color
font-weight: $content-heading-weight
line-height: $content-heading-line-height
h1
font-size: 2em
margin-bottom: 0.5em
&:not(:first-child)
margin-top: 1em
h2
font-size: 1.75em
margin-bottom: 0.5714em
&:not(:first-child)
margin-top: 1.1428em
h3
font-size: 1.5em
margin-bottom: 0.6666em
&:not(:first-child)
margin-top: 1.3333em
h4
font-size: 1.25em
margin-bottom: 0.8em
h5
font-size: 1.125em
margin-bottom: 0.8888em
h6
font-size: 1em
margin-bottom: 1em
blockquote
background-color: $content-blockquote-background-color
border-left: $content-blockquote-border-left
padding: $content-blockquote-padding
ol
list-style-position: outside
margin-left: 2em
margin-top: 1em
&:not([type])
list-style-type: decimal
&.is-lower-alpha
list-style-type: lower-alpha
&.is-lower-roman
list-style-type: lower-roman
&.is-upper-alpha
list-style-type: upper-alpha
&.is-upper-roman
list-style-type: upper-roman
ul
list-style: disc outside
margin-left: 2em
margin-top: 1em
ul
list-style-type: circle
margin-top: 0.5em
ul
list-style-type: square
dd
margin-left: 2em
figure
margin-left: 2em
margin-right: 2em
text-align: center
&:not(:first-child)
margin-top: 2em
&:not(:last-child)
margin-bottom: 2em
img
display: inline-block
figcaption
font-style: italic
pre
+overflow-touch
overflow-x: auto
padding: $content-pre-padding
white-space: pre
word-wrap: normal
sup,
sub
font-size: 75%
table
width: 100%
td,
th
border: $content-table-cell-border
border-width: $content-table-cell-border-width
padding: $content-table-cell-padding
vertical-align: top
th
color: $content-table-cell-heading-color
text-align: left
thead
td,
th
border-width: $content-table-head-cell-border-width
color: $content-table-head-cell-color
tfoot
td,
th
border-width: $content-table-foot-cell-border-width
color: $content-table-foot-cell-color
tbody
tr
&:last-child
td,
th
border-bottom-width: 0
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large

View file

@ -0,0 +1,602 @@
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-height: $control-height !default
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-placeholder-color: rgba($input-color, 0.3) !default
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
$input-radius: $radius !default
$file-border-color: $border !default
$file-radius: $radius !default
$file-cta-background-color: $white-ter !default
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !default
$file-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
$label-color: $grey-darker !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
=input
@extend %control
background-color: $input-background-color
border-color: $input-border-color
color: $input-color
+placeholder
color: $input-placeholder-color
&:hover,
&.is-hovered
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled-color
+placeholder
color: $input-disabled-placeholder-color
.input,
.textarea
+input
box-shadow: $input-shadow
max-width: 100%
width: 100%
&[readonly]
box-shadow: none
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.input
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
&.is-static
background-color: transparent
border-color: transparent
box-shadow: none
padding-left: 0
padding-right: 0
.textarea
display: block
max-width: 100%
min-width: 100%
padding: 0.625em
resize: vertical
&:not([rows])
max-height: 600px
min-height: 120px
&[rows]
height: initial
// Modifiers
&.has-fixed-size
resize: none
.checkbox,
.radio
cursor: pointer
display: inline-block
line-height: 1.25
position: relative
input
cursor: pointer
&:hover
color: $input-hover-color
&[disabled],
fieldset[disabled] &
color: $input-disabled-color
cursor: not-allowed
.radio
& + .radio
margin-left: 0.5em
.select
display: inline-block
max-width: 100%
position: relative
vertical-align: top
&:not(.is-multiple)
height: $input-height
&:not(.is-multiple):not(.is-loading)
&::after
@extend %arrow
border-color: $input-arrow
right: 1.125em
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
padding-left: 1em
select
+input
cursor: pointer
display: block
font-size: 1em
max-width: 100%
outline: none
&::-ms-expand
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
padding-right: 2.5em
&[multiple]
height: auto
padding: 0
option
padding: 0.5em 1em
// States
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: darken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&::after
@extend %loader
margin-top: 0
position: absolute
right: 0.625em
top: 0.625em
transform: none
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
.file
@extend %unselectable
align-items: stretch
display: flex
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
.file-cta
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
.file-cta
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
.file-icon
.fa
font-size: 28px
// Modifiers
&.has-name
.file-cta
border-bottom-right-radius: 0
border-top-right-radius: 0
.file-name
border-bottom-left-radius: 0
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
.file-name
display: none
&.is-boxed
.file-label
flex-direction: column
.file-cta
flex-direction: column
height: auto
padding: 1em 3em
.file-name
border-width: 0 1px 1px
.file-icon
height: 1.5em
width: 1.5em
.fa
font-size: 21px
&.is-small
.file-icon .fa
font-size: 14px
&.is-medium
.file-icon .fa
font-size: 28px
&.is-large
.file-icon .fa
font-size: 35px
&.has-name
.file-cta
border-radius: $file-radius $file-radius 0 0
.file-name
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
&.is-centered
justify-content: center
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
.file-label
align-items: stretch
display: flex
cursor: pointer
justify-content: flex-start
overflow: hidden
position: relative
&:hover
.file-cta
background-color: darken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
.file-name
border-color: darken($file-name-border-color, 2.5%)
&:active
.file-cta
background-color: darken($file-cta-background-color, 5%)
color: $file-cta-active-color
.file-name
border-color: darken($file-name-border-color, 5%)
.file-input
height: 100%
left: 0
opacity: 0
outline: none
position: absolute
top: 0
width: 100%
.file-cta,
.file-name
@extend %control
border-color: $file-border-color
border-radius: $file-radius
font-size: 1em
padding-left: 1em
padding-right: 1em
white-space: nowrap
.file-cta
background-color: $file-cta-background-color
color: $file-cta-color
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
display: block
max-width: $file-name-max-width
overflow: hidden
text-align: left
text-overflow: ellipsis
.file-icon
align-items: center
display: flex
height: 1em
justify-content: center
margin-right: 0.5em
width: 1em
.fa
font-size: 14px
.label
color: $label-color
display: block
font-size: $size-normal
font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.help
display: block
font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
// Containers
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
&:not(:last-child)
margin-right: -1px
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
.button,
.input,
.select select
border-bottom-right-radius: 0
border-top-right-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
border-bottom-left-radius: 0
border-top-left-radius: 0
.button,
.input,
.select select
&:not([disabled])
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-grouped-multiline
flex-wrap: wrap
& > .control
&:last-child,
&:not(:last-child)
margin-bottom: 0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
&.is-horizontal
+tablet
display: flex
.field-label
.label
font-size: inherit
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5rem
text-align: right
&.is-small
font-size: $size-small
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
padding-top: 0.375em
&.is-large
font-size: $size-large
padding-top: 0.375em
.field-body
.field .field
margin-bottom: 0
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
margin-bottom: 0
& > .field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
margin-right: 0.75rem
.control
box-sizing: border-box
clear: both //fixes the icon floating out of the input when help text is floated right
font-size: $size-normal
position: relative
text-align: left
// Modifiers
&.has-icons-left,
&.has-icons-right
.input,
.select
&:focus
& ~ .icon
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
color: $input-icon-color
height: $input-height
pointer-events: none
position: absolute
top: 0
width: $input-height
z-index: 4
&.has-icons-left
.input,
.select select
padding-left: $input-height
.icon.is-left
left: 0
&.has-icons-right
.input,
.select select
padding-right: $input-height
.icon.is-right
right: 0
&.is-loading
&::after
@extend %loader
position: absolute !important
right: 0.625em
top: 0.625em
z-index: 4
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large

View file

@ -0,0 +1,21 @@
$icon-dimensions: 1.5rem !default
$icon-dimensions-small: 1rem !default
$icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default
.icon
align-items: center
display: inline-flex
justify-content: center
height: $icon-dimensions
width: $icon-dimensions
// Sizes
&.is-small
height: $icon-dimensions-small
width: $icon-dimensions-small
&.is-medium
height: $icon-dimensions-medium
width: $icon-dimensions-medium
&.is-large
height: $icon-dimensions-large
width: $icon-dimensions-large

View file

@ -0,0 +1,69 @@
$dimensions: 16 24 32 48 64 96 128 !default
.image
display: block
position: relative
img
display: block
height: auto
width: 100%
&.is-rounded
border-radius: $radius-rounded
// Ratio
&.is-square,
&.is-1by1,
&.is-5by4,
&.is-4by3,
&.is-3by2,
&.is-5by3,
&.is-16by9,
&.is-2by1,
&.is-3by1,
&.is-4by5,
&.is-3by4,
&.is-2by3,
&.is-3by5,
&.is-9by16,
&.is-1by2,
&.is-1by3
img,
.has-ratio
@extend %overlay
height: 100%
width: 100%
&.is-square,
&.is-1by1
padding-top: 100%
&.is-5by4
padding-top: 80%
&.is-4by3
padding-top: 75%
&.is-3by2
padding-top: 66.6666%
&.is-5by3
padding-top: 60%
&.is-16by9
padding-top: 56.25%
&.is-2by1
padding-top: 50%
&.is-3by1
padding-top: 33.3333%
&.is-4by5
padding-top: 125%
&.is-3by4
padding-top: 133.3333%
&.is-2by3
padding-top: 150%
&.is-3by5
padding-top: 166.6666%
&.is-9by16
padding-top: 177.7777%
&.is-1by2
padding-top: 200%
&.is-1by3
padding-top: 300%
// Sizes
@each $dimension in $dimensions
&.is-#{$dimension}x#{$dimension}
height: $dimension * 1px
width: $dimension * 1px

View file

@ -0,0 +1,35 @@
$notification-background-color: $background !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
.notification
@extend %block
background-color: $notification-background-color
border-radius: $notification-radius
padding: $notification-padding
position: relative
a:not(.button):not(.dropdown-item)
color: currentColor
text-decoration: underline
strong
color: currentColor
code,
pre
background: $white
pre code
background: transparent
& > .delete
position: absolute
right: 0.5rem
top: 0.5rem
.title,
.subtitle,
.content
color: currentColor
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert

View file

@ -0,0 +1,39 @@
.block
@extend %block
.delete
@extend %delete
.heading
display: block
font-size: 11px
letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase
.highlight
@extend %block
font-weight: $weight-normal
max-width: 100%
overflow: hidden
padding: 0
pre
overflow: auto
max-width: 100%
.loader
@extend %loader
.number
align-items: center
background-color: $background
border-radius: $radius-rounded
display: inline-flex
font-size: $size-medium
height: 2em
justify-content: center
margin-right: 1.5rem
min-width: 2.5em
padding: 0.25rem 0.5rem
text-align: center
vertical-align: top

View file

@ -0,0 +1,65 @@
$progress-bar-background-color: $border !default
$progress-value-background-color: $text !default
$progress-indeterminate-duration: 1.5s !default
.progress
@extend %block
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $radius-rounded
display: block
height: $size-normal
overflow: hidden
padding: 0
width: 100%
&::-webkit-progress-bar
background-color: $progress-bar-background-color
&::-webkit-progress-value
background-color: $progress-value-background-color
&::-moz-progress-bar
background-color: $progress-value-background-color
&::-ms-fill
background-color: $progress-value-background-color
border: none
&:indeterminate
animation-duration: $progress-indeterminate-duration
animation-iteration-count: infinite
animation-name: moveIndeterminate
animation-timing-function: linear
background-color: $progress-bar-background-color
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
background-position: top left
background-repeat: no-repeat
background-size: 150% 150%
&::-webkit-progress-bar
background-color: transparent
&::-moz-progress-bar
background-color: transparent
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
&::-moz-progress-bar
background-color: $color
&::-ms-fill
background-color: $color
&:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
// Sizes
&.is-small
height: $size-small
&.is-medium
height: $size-medium
&.is-large
height: $size-large
@keyframes moveIndeterminate
from
background-position: 200% 0
to
background-position: -200% 0

View file

@ -0,0 +1,126 @@
$table-color: $grey-darker !default
$table-background-color: $white !default
$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default
$table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $white-bis !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
.table
@extend %block
background-color: $table-background-color
color: $table-color
td,
th
border: $table-cell-border
border-width: $table-cell-border-width
padding: $table-cell-padding
vertical-align: top
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: $color
color: $color-invert
// Modifiers
&.is-narrow
white-space: nowrap
width: 1%
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
th
color: $table-cell-heading-color
text-align: left
tr
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
td,
th
border-color: $table-row-active-color
color: currentColor
thead
background-color: $table-head-background-color
td,
th
border-width: $table-head-cell-border-width
color: $table-head-cell-color
tfoot
background-color: $table-foot-background-color
td,
th
border-width: $table-foot-cell-border-width
color: $table-foot-cell-color
tbody
background-color: $table-body-background-color
tr
&:last-child
td,
th
border-bottom-width: 0
// Modifiers
&.is-bordered
td,
th
border-width: 1px
tr
&:last-child
td,
th
border-bottom-width: 1px
&.is-fullwidth
width: 100%
&.is-hoverable
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
&.is-striped
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
&:nth-child(even)
background-color: $table-striped-row-even-hover-background-color
&.is-narrow
td,
th
padding: 0.25em 0.5em
&.is-striped
tbody
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-striped-row-even-background-color
.table-container
@extend %block
+overflow-touch
overflow: auto
overflow-y: hidden
max-width: 100%

View file

@ -0,0 +1,130 @@
$tag-background-color: $background !default
$tag-color: $text !default
$tag-radius: $radius !default
$tag-delete-margin: 1px !default
.tags
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.tag
margin-bottom: 0.5rem
&:not(:last-child)
margin-right: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
// Sizes
&.are-medium
.tag:not(.is-normal):not(.is-large)
font-size: $size-normal
&.are-large
.tag:not(.is-normal):not(.is-medium)
font-size: $size-medium
&.has-addons
.tag
margin-right: 0
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
&.is-centered
justify-content: center
.tag
margin-right: 0.25rem
margin-left: 0.25rem
&.is-right
justify-content: flex-end
.tag
&:not(:first-child)
margin-left: 0.5rem
&:not(:last-child)
margin-right: 0
&.has-addons
.tag
margin-right: 0
&:not(:first-child)
margin-left: 0
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
.tag:not(body)
align-items: center
background-color: $tag-background-color
border-radius: $tag-radius
color: $tag-color
display: inline-flex
font-size: $size-small
height: 2em
justify-content: center
line-height: 1.5
padding-left: 0.75em
padding-right: 0.75em
white-space: nowrap
.delete
margin-left: 0.25rem
margin-right: -0.375rem
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// Sizes
&.is-normal
font-size: $size-small
&.is-medium
font-size: $size-normal
&.is-large
font-size: $size-medium
.icon
&:first-child:not(:last-child)
margin-left: -0.375em
margin-right: 0.1875em
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: -0.375em
&:first-child:last-child
margin-left: -0.375em
margin-right: -0.375em
// Modifiers
&.is-delete
margin-left: $tag-delete-margin
padding: 0
position: relative
width: 2em
&::before,
&::after
background-color: currentColor
content: ""
display: block
left: 50%
position: absolute
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
&::before
height: 1px
width: 50%
&::after
height: 50%
width: 1px
&:hover,
&:focus
background-color: darken($tag-background-color, 5%)
&:active
background-color: darken($tag-background-color, 10%)
&.is-rounded
border-radius: $radius-rounded
a.tag
&:hover
text-decoration: underline

View file

@ -0,0 +1,64 @@
$title-color: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
$title-strong-color: inherit !default
$title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
$subtitle-color: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default
.title,
.subtitle
@extend %block
word-break: break-word
em,
span
font-weight: inherit
sub
font-size: $title-sub-size
sup
font-size: $title-sup-size
.tag
vertical-align: middle
.title
color: $title-color
font-size: $title-size
font-weight: $title-weight
line-height: $title-line-height
strong
color: $title-strong-color
font-weight: $title-strong-weight
& + .highlight
margin-top: -0.75rem
&:not(.is-spaced) + .subtitle
margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
.subtitle
color: $subtitle-color
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: $subtitle-line-height
strong
color: $subtitle-strong-color
font-weight: $subtitle-strong-weight
&:not(.is-spaced) + .title
margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size

View file

@ -0,0 +1,4 @@
@charset "utf-8"
@import "columns.sass"
@import "tiles.sass"

View file

@ -0,0 +1,504 @@
$column-gap: 0.75rem !default
.column
display: block
flex-basis: 0
flex-grow: 1
flex-shrink: 1
padding: $column-gap
.columns.is-mobile > &.is-narrow
flex: none
.columns.is-mobile > &.is-full
flex: none
width: 100%
.columns.is-mobile > &.is-three-quarters
flex: none
width: 75%
.columns.is-mobile > &.is-two-thirds
flex: none
width: 66.6666%
.columns.is-mobile > &.is-half
flex: none
width: 50%
.columns.is-mobile > &.is-one-third
flex: none
width: 33.3333%
.columns.is-mobile > &.is-one-quarter
flex: none
width: 25%
.columns.is-mobile > &.is-one-fifth
flex: none
width: 20%
.columns.is-mobile > &.is-two-fifths
flex: none
width: 40%
.columns.is-mobile > &.is-three-fifths
flex: none
width: 60%
.columns.is-mobile > &.is-four-fifths
flex: none
width: 80%
.columns.is-mobile > &.is-offset-three-quarters
margin-left: 75%
.columns.is-mobile > &.is-offset-two-thirds
margin-left: 66.6666%
.columns.is-mobile > &.is-offset-half
margin-left: 50%
.columns.is-mobile > &.is-offset-one-third
margin-left: 33.3333%
.columns.is-mobile > &.is-offset-one-quarter
margin-left: 25%
.columns.is-mobile > &.is-offset-one-fifth
margin-left: 20%
.columns.is-mobile > &.is-offset-two-fifths
margin-left: 40%
.columns.is-mobile > &.is-offset-three-fifths
margin-left: 60%
.columns.is-mobile > &.is-offset-four-fifths
margin-left: 80%
@for $i from 1 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage($i / 12)
.columns.is-mobile > &.is-offset-#{$i}
margin-left: percentage($i / 12)
+mobile
&.is-narrow-mobile
flex: none
&.is-full-mobile
flex: none
width: 100%
&.is-three-quarters-mobile
flex: none
width: 75%
&.is-two-thirds-mobile
flex: none
width: 66.6666%
&.is-half-mobile
flex: none
width: 50%
&.is-one-third-mobile
flex: none
width: 33.3333%
&.is-one-quarter-mobile
flex: none
width: 25%
&.is-one-fifth-mobile
flex: none
width: 20%
&.is-two-fifths-mobile
flex: none
width: 40%
&.is-three-fifths-mobile
flex: none
width: 60%
&.is-four-fifths-mobile
flex: none
width: 80%
&.is-offset-three-quarters-mobile
margin-left: 75%
&.is-offset-two-thirds-mobile
margin-left: 66.6666%
&.is-offset-half-mobile
margin-left: 50%
&.is-offset-one-third-mobile
margin-left: 33.3333%
&.is-offset-one-quarter-mobile
margin-left: 25%
&.is-offset-one-fifth-mobile
margin-left: 20%
&.is-offset-two-fifths-mobile
margin-left: 40%
&.is-offset-three-fifths-mobile
margin-left: 60%
&.is-offset-four-fifths-mobile
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-mobile
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-mobile
margin-left: percentage($i / 12)
+tablet
&.is-narrow,
&.is-narrow-tablet
flex: none
&.is-full,
&.is-full-tablet
flex: none
width: 100%
&.is-three-quarters,
&.is-three-quarters-tablet
flex: none
width: 75%
&.is-two-thirds,
&.is-two-thirds-tablet
flex: none
width: 66.6666%
&.is-half,
&.is-half-tablet
flex: none
width: 50%
&.is-one-third,
&.is-one-third-tablet
flex: none
width: 33.3333%
&.is-one-quarter,
&.is-one-quarter-tablet
flex: none
width: 25%
&.is-one-fifth,
&.is-one-fifth-tablet
flex: none
width: 20%
&.is-two-fifths,
&.is-two-fifths-tablet
flex: none
width: 40%
&.is-three-fifths,
&.is-three-fifths-tablet
flex: none
width: 60%
&.is-four-fifths,
&.is-four-fifths-tablet
flex: none
width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
margin-left: 75%
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
margin-left: 66.6666%
&.is-offset-half,
&.is-offset-half-tablet
margin-left: 50%
&.is-offset-one-third,
&.is-offset-one-third-tablet
margin-left: 33.3333%
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
margin-left: 25%
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
margin-left: 20%
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
margin-left: 40%
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
margin-left: 60%
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: percentage($i / 12)
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: percentage($i / 12)
+touch
&.is-narrow-touch
flex: none
&.is-full-touch
flex: none
width: 100%
&.is-three-quarters-touch
flex: none
width: 75%
&.is-two-thirds-touch
flex: none
width: 66.6666%
&.is-half-touch
flex: none
width: 50%
&.is-one-third-touch
flex: none
width: 33.3333%
&.is-one-quarter-touch
flex: none
width: 25%
&.is-one-fifth-touch
flex: none
width: 20%
&.is-two-fifths-touch
flex: none
width: 40%
&.is-three-fifths-touch
flex: none
width: 60%
&.is-four-fifths-touch
flex: none
width: 80%
&.is-offset-three-quarters-touch
margin-left: 75%
&.is-offset-two-thirds-touch
margin-left: 66.6666%
&.is-offset-half-touch
margin-left: 50%
&.is-offset-one-third-touch
margin-left: 33.3333%
&.is-offset-one-quarter-touch
margin-left: 25%
&.is-offset-one-fifth-touch
margin-left: 20%
&.is-offset-two-fifths-touch
margin-left: 40%
&.is-offset-three-fifths-touch
margin-left: 60%
&.is-offset-four-fifths-touch
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-touch
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-touch
margin-left: percentage($i / 12)
+desktop
&.is-narrow-desktop
flex: none
&.is-full-desktop
flex: none
width: 100%
&.is-three-quarters-desktop
flex: none
width: 75%
&.is-two-thirds-desktop
flex: none
width: 66.6666%
&.is-half-desktop
flex: none
width: 50%
&.is-one-third-desktop
flex: none
width: 33.3333%
&.is-one-quarter-desktop
flex: none
width: 25%
&.is-one-fifth-desktop
flex: none
width: 20%
&.is-two-fifths-desktop
flex: none
width: 40%
&.is-three-fifths-desktop
flex: none
width: 60%
&.is-four-fifths-desktop
flex: none
width: 80%
&.is-offset-three-quarters-desktop
margin-left: 75%
&.is-offset-two-thirds-desktop
margin-left: 66.6666%
&.is-offset-half-desktop
margin-left: 50%
&.is-offset-one-third-desktop
margin-left: 33.3333%
&.is-offset-one-quarter-desktop
margin-left: 25%
&.is-offset-one-fifth-desktop
margin-left: 20%
&.is-offset-two-fifths-desktop
margin-left: 40%
&.is-offset-three-fifths-desktop
margin-left: 60%
&.is-offset-four-fifths-desktop
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-desktop
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-desktop
margin-left: percentage($i / 12)
+widescreen
&.is-narrow-widescreen
flex: none
&.is-full-widescreen
flex: none
width: 100%
&.is-three-quarters-widescreen
flex: none
width: 75%
&.is-two-thirds-widescreen
flex: none
width: 66.6666%
&.is-half-widescreen
flex: none
width: 50%
&.is-one-third-widescreen
flex: none
width: 33.3333%
&.is-one-quarter-widescreen
flex: none
width: 25%
&.is-one-fifth-widescreen
flex: none
width: 20%
&.is-two-fifths-widescreen
flex: none
width: 40%
&.is-three-fifths-widescreen
flex: none
width: 60%
&.is-four-fifths-widescreen
flex: none
width: 80%
&.is-offset-three-quarters-widescreen
margin-left: 75%
&.is-offset-two-thirds-widescreen
margin-left: 66.6666%
&.is-offset-half-widescreen
margin-left: 50%
&.is-offset-one-third-widescreen
margin-left: 33.3333%
&.is-offset-one-quarter-widescreen
margin-left: 25%
&.is-offset-one-fifth-widescreen
margin-left: 20%
&.is-offset-two-fifths-widescreen
margin-left: 40%
&.is-offset-three-fifths-widescreen
margin-left: 60%
&.is-offset-four-fifths-widescreen
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-widescreen
margin-left: percentage($i / 12)
+fullhd
&.is-narrow-fullhd
flex: none
&.is-full-fullhd
flex: none
width: 100%
&.is-three-quarters-fullhd
flex: none
width: 75%
&.is-two-thirds-fullhd
flex: none
width: 66.6666%
&.is-half-fullhd
flex: none
width: 50%
&.is-one-third-fullhd
flex: none
width: 33.3333%
&.is-one-quarter-fullhd
flex: none
width: 25%
&.is-one-fifth-fullhd
flex: none
width: 20%
&.is-two-fifths-fullhd
flex: none
width: 40%
&.is-three-fifths-fullhd
flex: none
width: 60%
&.is-four-fifths-fullhd
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
margin-left: 75%
&.is-offset-two-thirds-fullhd
margin-left: 66.6666%
&.is-offset-half-fullhd
margin-left: 50%
&.is-offset-one-third-fullhd
margin-left: 33.3333%
&.is-offset-one-quarter-fullhd
margin-left: 25%
&.is-offset-one-fifth-fullhd
margin-left: 20%
&.is-offset-two-fifths-fullhd
margin-left: 40%
&.is-offset-three-fifths-fullhd
margin-left: 60%
&.is-offset-four-fifths-fullhd
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage($i / 12)
&.is-offset-#{$i}-fullhd
margin-left: percentage($i / 12)
.columns
margin-left: (-$column-gap)
margin-right: (-$column-gap)
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
&:not(:last-child)
margin-bottom: calc(1.5rem - #{$column-gap})
// Modifiers
&.is-centered
justify-content: center
&.is-gapless
margin-left: 0
margin-right: 0
margin-top: 0
& > .column
margin: 0
padding: 0 !important
&:not(:last-child)
margin-bottom: 1.5rem
&:last-child
margin-bottom: 0
&.is-mobile
display: flex
&.is-multiline
flex-wrap: wrap
&.is-vcentered
align-items: center
// Responsiveness
+tablet
&:not(.is-desktop)
display: flex
+desktop
// Modifiers
&.is-desktop
display: flex
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))
.column
padding-left: var(--columnGap)
padding-right: var(--columnGap)
@for $i from 0 through 8
&.is-#{$i}
--columnGap: #{$i * 0.25rem}
+mobile
&.is-#{$i}-mobile
--columnGap: #{$i * 0.25rem}
+tablet
&.is-#{$i}-tablet
--columnGap: #{$i * 0.25rem}
+tablet-only
&.is-#{$i}-tablet-only
--columnGap: #{$i * 0.25rem}
+touch
&.is-#{$i}-touch
--columnGap: #{$i * 0.25rem}
+desktop
&.is-#{$i}-desktop
--columnGap: #{$i * 0.25rem}
+desktop-only
&.is-#{$i}-desktop-only
--columnGap: #{$i * 0.25rem}
+widescreen
&.is-#{$i}-widescreen
--columnGap: #{$i * 0.25rem}
+widescreen-only
&.is-#{$i}-widescreen-only
--columnGap: #{$i * 0.25rem}
+fullhd
&.is-#{$i}-fullhd
--columnGap: #{$i * 0.25rem}

View file

@ -0,0 +1,32 @@
.tile
align-items: stretch
display: block
flex-basis: 0
flex-grow: 1
flex-shrink: 1
min-height: min-content
// Modifiers
&.is-ancestor
margin-left: -0.75rem
margin-right: -0.75rem
margin-top: -0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0.75rem
&.is-child
margin: 0 !important
&.is-parent
padding: 0.75rem
&.is-vertical
flex-direction: column
& > .tile.is-child:not(:last-child)
margin-bottom: 1.5rem !important
// Responsiveness
+tablet
&:not(.is-child)
display: flex
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%

View file

@ -0,0 +1,5 @@
@charset "utf-8"
@import "hero.sass"
@import "section.sass"
@import "footer.sass"

View file

@ -0,0 +1,6 @@
$footer-background-color: $white-bis !default
$footer-padding: 3rem 1.5rem 6rem !default
.footer
background-color: $footer-background-color
padding: $footer-padding

View file

@ -0,0 +1,156 @@
// Main container
.hero
align-items: stretch
display: flex
flex-direction: column
justify-content: space-between
.navbar
background: none
.tabs
ul
border-bottom: none
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
a:not(.button):not(.dropdown-item):not(.tag),
strong
color: inherit
.title
color: $color-invert
.subtitle
color: rgba($color-invert, 0.9)
a:not(.button),
strong
color: $color-invert
.navbar-menu
+touch
background-color: $color
.navbar-item,
.navbar-link
color: rgba($color-invert, 0.7)
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
color: $color-invert
.tabs
a
color: $color-invert
opacity: 0.9
&:hover
opacity: 1
li
&.is-active a
opacity: 1
&.is-boxed,
&.is-toggle
a
color: $color-invert
&:hover
background-color: rgba($black, 0.1)
li.is-active a
&,
&:hover
background-color: $color-invert
border-color: $color-invert
color: $color
// Modifiers
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Responsiveness
// +mobile
// .nav-toggle
// span
// background-color: $color-invert
// &:hover
// background-color: rgba($black, 0.1)
// &.is-active
// span
// background-color: $color-invert
// .nav-menu
// .nav-item
// border-top-color: rgba($color-invert, 0.2)
// Sizes
&.is-small
.hero-body
padding-bottom: 1.5rem
padding-top: 1.5rem
&.is-medium
+tablet
.hero-body
padding-bottom: 9rem
padding-top: 9rem
&.is-large
+tablet
.hero-body
padding-bottom: 18rem
padding-top: 18rem
&.is-halfheight,
&.is-fullheight,
&.is-fullheight-with-navbar
.hero-body
align-items: center
display: flex
& > .container
flex-grow: 1
flex-shrink: 1
&.is-halfheight
min-height: 50vh
&.is-fullheight
min-height: 100vh
// Components
.hero-video
@extend %overlay
overflow: hidden
video
left: 50%
min-height: 100%
min-width: 100%
position: absolute
top: 50%
transform: translate3d(-50%, -50%, 0)
// Modifiers
&.is-transparent
opacity: 0.3
// Responsiveness
+mobile
display: none
.hero-buttons
margin-top: 1.5rem
// Responsiveness
+mobile
.button
display: flex
&:not(:last-child)
margin-bottom: 0.75rem
+tablet
display: flex
justify-content: center
.button:not(:last-child)
margin-right: 1.5rem
// Containers
.hero-head,
.hero-foot
flex-grow: 0
flex-shrink: 0
.hero-body
flex-grow: 1
flex-shrink: 0
padding: 3rem 1.5rem

View file

@ -0,0 +1,13 @@
$section-padding: 3rem 1.5rem !default
$section-padding-medium: 9rem 1.5rem !default
$section-padding-large: 18rem 1.5rem !default
.section
padding: $section-padding
// Responsiveness
+desktop
// Sizes
&.is-medium
padding: $section-padding-medium
&.is-large
padding: $section-padding-large

View file

@ -0,0 +1,8 @@
@charset "utf-8"
@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.sass"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"

View file

@ -0,0 +1,5 @@
@keyframes spinAround
from
transform: rotate(0deg)
to
transform: rotate(359deg)

View file

@ -0,0 +1,50 @@
$control-radius: $radius !default
$control-radius-small: $radius-small !default
$control-border-width: 1px !default
$control-height: 2.25em !default
$control-line-height: 1.5 !default
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
=control
-moz-appearance: none
-webkit-appearance: none
align-items: center
border: $control-border-width solid transparent
border-radius: $control-radius
box-shadow: none
display: inline-flex
font-size: $size-normal
height: $control-height
justify-content: flex-start
line-height: $control-line-height
padding-bottom: $control-padding-vertical
padding-left: $control-padding-horizontal
padding-right: $control-padding-horizontal
padding-top: $control-padding-vertical
position: relative
vertical-align: top
// States
&:focus,
&.is-focused,
&:active,
&.is-active
outline: none
&[disabled],
fieldset[disabled] &
cursor: not-allowed
%control
+control
// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small
font-size: $size-small
=control-medium
font-size: $size-medium
=control-large
font-size: $size-large

View file

@ -0,0 +1,85 @@
$primary: $turquoise !default
$info: $cyan !default
$success: $green !default
$warning: $yellow !default
$danger: $red !default
$light: $white-ter !default
$dark: $grey-darker !default
// Invert colors
$orange-invert: findColorInvert($orange) !default
$yellow-invert: findColorInvert($yellow) !default
$green-invert: findColorInvert($green) !default
$turquoise-invert: findColorInvert($turquoise) !default
$cyan-invert: findColorInvert($cyan) !default
$blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $cyan-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
$light-invert: $dark !default
$dark-invert: $light !default
// General colors
$background: $white-ter !default
$border: $grey-lighter !default
$border-hover: $grey-light !default
// Text colors
$text: $grey-dark !default
$text-invert: findColorInvert($text) !default
$text-light: $grey !default
$text-strong: $grey-darker !default
// Code colors
$code: $red !default
$code-background: $background !default
$pre: $text !default
$pre-background: $background !default
// Link colors
$link: $blue !default
$link-invert: $blue-invert !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
$link-hover-border: $grey-light !default
$link-focus: $grey-darker !default
$link-focus-border: $blue !default
$link-active: $grey-darker !default
$link-active-border: $grey-dark !default
// Typography
$family-primary: $family-sans-serif !default
$family-secondary: $family-sans-serif !default
$family-code: $family-monospace !default
$size-small: $size-7 !default
$size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default
// Lists and maps
$custom-colors: null !default
$custom-shades: null !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

View file

@ -0,0 +1,62 @@
@function mergeColorMaps($bulma-colors, $custom-colors)
// we return at least bulma hardcoded colors
$merged-colors: $bulma-colors
// we want a map as input
@if type-of($custom-colors) == 'map'
@each $name, $components in $custom-colors
// color name should be a string and colors pair a list with at least one element
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
$color-base: null
// the param can either be a single color
// or a list of 2 colors
@if type-of($components) == 'color'
$color-base: $components
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
$color-invert: null
// is an inverted color provided in the list
@if length($components) > 1
$color-invert: nth($components, 2)
// we only want a color as base color
@if type-of($color-base) == 'color'
// if inverted color is not provided or is not a color we compute it
@if type-of($color-invert) != 'color'
$color-invert: findColorInvert($color-base)
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
@return $merged-colors
@function powerNumber($number, $exp)
$value: 1
@if $exp > 0
@for $i from 1 through $exp
$value: $value * $number
@else if $exp < 0
@for $i from 1 through -$exp
$value: $value / $number
@return $value
@function colorLuminance($color)
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $color-rgb
$adjusted: 0
$value: $value / 255
@if $value < 0.03928
$value: $value / 12.92
@else
$value: ($value + .055) / 1.055
$value: powerNumber($value, 2)
$color-rgb: map-merge($color-rgb, ($name: $value))
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@function findColorInvert($color)
@if (colorLuminance($color) > 0.55)
@return rgba(#000, 0.7)
@else
@return #fff

View file

@ -0,0 +1,72 @@
// Colors
$black: hsl(0, 0%, 4%) !default
$black-bis: hsl(0, 0%, 7%) !default
$black-ter: hsl(0, 0%, 14%) !default
$grey-darker: hsl(0, 0%, 21%) !default
$grey-dark: hsl(0, 0%, 29%) !default
$grey: hsl(0, 0%, 48%) !default
$grey-light: hsl(0, 0%, 71%) !default
$grey-lighter: hsl(0, 0%, 86%) !default
$white-ter: hsl(0, 0%, 96%) !default
$white-bis: hsl(0, 0%, 98%) !default
$white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 71%, 48%) !default
$turquoise: hsl(171, 100%, 41%) !default
$cyan: hsl(204, 86%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 100%, 61%) !default
// Typography
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: monospace !default
$render-mode: optimizeLegibility !default
$size-1: 3rem !default
$size-2: 2.5rem !default
$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 1rem !default
$size-7: 0.75rem !default
$weight-light: 300 !default
$weight-normal: 400 !default
$weight-medium: 500 !default
$weight-semibold: 600 !default
$weight-bold: 700 !default
// Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints
$gap: 64px !default
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 4rem
$desktop: 960px + (2 * $gap) !default
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap) !default
$widescreen-enabled: true !default
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap) !default
$fullhd-enabled: true !default
// Miscellaneous
$easing: ease-out !default
$radius-small: 2px !default
$radius: 4px !default
$radius-large: 6px !default
$radius-rounded: 290486px !default
$speed: 86ms !default
// Flags
$variable-columns: true !default

View file

@ -0,0 +1,261 @@
@import "initial-variables"
=clearfix
&::after
clear: both
content: " "
display: table
=center($width, $height: 0)
position: absolute
@if $height != 0
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$height} / 2))
@else
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$width} / 2))
=fa($size, $dimensions)
display: inline-block
font-size: $size
height: $dimensions
line-height: $dimensions
text-align: center
vertical-align: top
width: $dimensions
=hamburger($dimensions)
cursor: pointer
display: block
height: $dimensions
position: relative
width: $dimensions
span
background-color: currentColor
display: block
height: 1px
left: calc(50% - 8px)
position: absolute
transform-origin: center
transition-duration: $speed
transition-property: background-color, opacity, transform
transition-timing-function: $easing
width: 16px
&:nth-child(1)
top: calc(50% - 6px)
&:nth-child(2)
top: calc(50% - 1px)
&:nth-child(3)
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
// Modifers
&.is-active
span
&:nth-child(1)
transform: translateY(5px) rotate(45deg)
&:nth-child(2)
opacity: 0
&:nth-child(3)
transform: translateY(-5px) rotate(-45deg)
=overflow-touch
-webkit-overflow-scrolling: touch
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
&:#{$placeholder}-placeholder
@content
// Responsiveness
=from($device)
@media screen and (min-width: $device)
@content
=until($device)
@media screen and (max-width: $device - 1px)
@content
=mobile
@media screen and (max-width: $tablet - 1px)
@content
=tablet
@media screen and (min-width: $tablet), print
@content
=tablet-only
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
@content
=touch
@media screen and (max-width: $desktop - 1px)
@content
=desktop
@media screen and (min-width: $desktop)
@content
=desktop-only
@if $widescreen-enabled
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content
=until-widescreen
@if $widescreen-enabled
@media screen and (max-width: $widescreen - 1px)
@content
=widescreen
@if $widescreen-enabled
@media screen and (min-width: $widescreen)
@content
=widescreen-only
@if $widescreen-enabled and $fullhd-enabled
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=until-fullhd
@if $fullhd-enabled
@media screen and (max-width: $fullhd - 1px)
@content
=fullhd
@if $fullhd-enabled
@media screen and (min-width: $fullhd)
@content
// Placeholders
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
%unselectable
+unselectable
=arrow($color: transparent)
border: 3px solid $color
border-radius: 2px
border-right: 0
border-top: 0
content: " "
display: block
height: 0.625em
margin-top: -0.4375em
pointer-events: none
position: absolute
top: 50%
transform: rotate(-45deg)
transform-origin: center
width: 0.625em
%arrow
+arrow
=block
&:not(:last-child)
margin-bottom: 1.5rem
%block
+block
=delete
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
border: none
border-radius: $radius-rounded
cursor: pointer
pointer-events: auto
display: inline-block
flex-grow: 0
flex-shrink: 0
font-size: 0
height: 20px
max-height: 20px
max-width: 20px
min-height: 20px
min-width: 20px
outline: none
position: relative
vertical-align: top
width: 20px
&::before,
&::after
background-color: $white
content: ""
display: block
left: 50%
position: absolute
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
&::before
height: 2px
width: 50%
&::after
height: 50%
width: 2px
&:hover,
&:focus
background-color: rgba($black, 0.3)
&:active
background-color: rgba($black, 0.4)
// Sizes
&.is-small
height: 16px
max-height: 16px
max-width: 16px
min-height: 16px
min-width: 16px
width: 16px
&.is-medium
height: 24px
max-height: 24px
max-width: 24px
min-height: 24px
min-width: 24px
width: 24px
&.is-large
height: 32px
max-height: 32px
max-width: 32px
min-height: 32px
min-width: 32px
width: 32px
%delete
+delete
=loader
animation: spinAround 500ms infinite linear
border: 2px solid $grey-lighter
border-radius: $radius-rounded
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
height: 1em
position: relative
width: 1em
%loader
+loader
=overlay($offset: 0)
bottom: $offset
left: $offset
position: absolute
right: $offset
top: $offset
%overlay
+overlay

View file

@ -0,0 +1,300 @@
// Overrides
@if $bulmaswatch-import-font {
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic);
}
hr {
height: $border-width;
}
h6 {
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero {
background-color: $grey-dark;
}
a {
transition: all 200ms ease;
}
.button {
transition: all 200ms ease;
border-width: $border-width;
color: $white;
&.is-active,
&.is-focused,
&:active,
&:focus {
box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
&.is-hovered,
&:hover {
background-color: lighten($color, 7.5%);
}
&.is-active,
&.is-focused,
&:active,
&:focus {
border-color: $color;
box-shadow: 0 0 0 2px rgba($color, 0.5);
}
}
}
}
.label {
color: $grey-lighter;
}
.button,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select,
.select select,
.textarea {
height: 2.5em;
}
.input,
.textarea {
transition: all 200ms ease;
box-shadow: none;
border-width: $border-width;
padding-left: 1em;
padding-right: 1em;
}
.select {
&:after,
select {
border-width: $border-width;
}
}
.control {
&.has-addons {
.button,
.input,
.select {
margin-right: -$border-width;
}
}
}
.notification {
background-color: $grey-dark;
}
.card {
$card-border-color: lighten($grey-darker, 5);
box-shadow: none;
border: $border-width solid $card-border-color;
background-color: $grey-darker;
border-radius: $radius;
.card-image {
img {
border-radius: $radius $radius 0 0;
}
}
.card-header {
box-shadow: none;
background-color: rgba($black-bis, 0.2);
border-radius: $radius $radius 0 0;
}
.card-footer {
background-color: rgba($black-bis, 0.2);
}
.card-footer,
.card-footer-item {
border-width: $border-width;
border-color: $card-border-color;
}
}
.notification {
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
a:not(.button) {
color: $color-invert;
text-decoration: underline;
}
}
}
}
.tag {
border-radius: $radius;
}
.menu-list {
a {
transition: all 300ms ease;
}
}
.modal-card-body {
background-color: $grey-darker;
}
.modal-card-foot,
.modal-card-head {
border-color: $grey-dark;
}
.message-header {
font-weight: $weight-bold;
background-color: $grey-dark;
color: $white;
}
.message-body {
border-width: $border-width;
border-color: $grey-dark;
}
.navbar {
border-radius: $radius;
&.is-transparent {
background: none;
}
&.is-primary {
.navbar-dropdown {
a.navbar-item.is-active {
background-color: $link;
}
}
}
@include touch {
.navbar-menu {
background-color: $navbar-background-color;
border-radius: 0 0 $radius $radius;
}
}
}
.hero .navbar,
body > .navbar {
border-radius: 0;
}
.pagination-link,
.pagination-next,
.pagination-previous {
border-width: $border-width;
}
.panel-block,
.panel-heading,
.panel-tabs {
border-width: $border-width;
&:first-child {
border-top-width: $border-width;
}
}
.panel-heading {
font-weight: $weight-bold;
}
.panel-tabs {
a {
border-width: $border-width;
margin-bottom: -$border-width;
&.is-active {
border-bottom-color: $link-active;
}
}
}
.panel-block {
&:hover {
color: $link-hover;
.panel-icon {
color: $link-hover;
}
}
&.is-active {
.panel-icon {
color: $link-active;
}
}
}
.tabs {
a {
border-bottom-width: $border-width;
margin-bottom: -$border-width;
}
ul {
border-bottom-width: $border-width;
}
&.is-boxed {
a {
border-width: $border-width;
}
li.is-active a {
background-color: darken($grey-darker, 4);
}
}
&.is-toggle {
li a {
border-width: $border-width;
margin-bottom: 0;
}
li + li {
margin-left: -$border-width;
}
}
}
.hero {
// Colors
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
.navbar {
.navbar-dropdown {
.navbar-item:hover {
background-color: $navbar-dropdown-item-hover-background-color;
}
}
}
}
}
}

View file

@ -0,0 +1,105 @@
////////////////////////////////////////////////
// DARKLY
////////////////////////////////////////////////
$grey-lighter: #dbdee0;
$grey-light: #8c9b9d;
$grey: darken($grey-light, 18);
$grey-dark: darken($grey, 18);
$grey-darker: darken($grey, 23);
$orange: #e67e22;
$yellow: #f1b70e;
$green: #2ecc71;
$turquoise: #1abc9c;
$blue: #3498db;
$purple: #8e44ad;
$red: #e74c3c;
$white-ter: #ecf0f1;
$primary: #375a7f !default;
$yellow-invert: #fff;
$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
$radius-small: 3px;
$radius: .4em;
$radius-large: 8px;
$size-6: 15px;
$size-7: .85em;
$title-weight: 500;
$subtitle-weight: 400;
$subtitle-color: $grey-dark;
$border-width: 2px;
$border: $grey;
$body-background-color: darken($grey-darker, 4);
$body-size: 15px;
$background: $grey-darker;
$footer-background-color: $background;
$button-background-color: $background;
$button-border-color: lighten($button-background-color, 15);
$title-color: #fff;
$subtitle-color: $grey-light;
$subtitle-strong-color: $grey-light;
$text: #fff;
$text-light: lighten($text, 10);
$text-strong: darken($text, 5);
$box-color: $text;
$box-background-color: $grey-dark;
$box-shadow: none;
$link: $turquoise;
$link-hover: lighten($link, 5);
$link-focus: darken($link, 5);
$link-active: darken($link, 5);
$link-focus-border: $grey-light;
$button-color: $primary;
$button-hover-color: darken($text, 5); // text-dark
$button-focus: darken($text, 5); // text-dark
$button-active-color: darken($text, 5); // text-dark
$button-disabled-background-color: $grey-light;
$input-hover-color: $grey-light;
$input-disabled-background-color: $grey-light;
$input-disabled-border: $grey-lighter;
$table-color: $text;
$table-head: $grey-lighter;
$table-background-color: $grey-dark;
$table-cell-border: 1px solid $grey;
$table-row-hover-background-color: $grey-darker;
$table-striped-row-even-background-color: $grey-darker;
$table-striped-row-even-hover-background-color: lighten($grey-darker, 2);
$pagination-color: $link;
$pagination-border-color: $border;
$navbar-height: 4rem;
$navbar-background-color: $primary;
$navbar-item-color: $text;
$navbar-item-hover-color: $link;
$navbar-item-hover-background-color: transparent;
$navbar-item-active-color: $link;
$navbar-dropdown-arrow: #fff;
$navbar-divider-background-color: rgba(0, 0, 0, 0.2);
$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
$navbar-dropdown-background-color: $primary;
$navbar-dropdown-item-hover-color: $grey-lighter;
$navbar-dropdown-item-hover-background-color: transparent;
$navbar-dropdown-item-active-background-color: transparent;
$navbar-dropdown-item-active-color: $link;
$dropdown-content-background-color: $background;
$dropdown-item-color: $text;
$progress-value-background-color: $grey-lighter;
$bulmaswatch-import-font: true !default;

View file

@ -0,0 +1,302 @@
// Overrides
@if $bulmaswatch-import-font {
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic);
}
hr {
height: $border-width;
}
h6 {
text-transform: uppercase;
letter-spacing: 0.5px;
}
a {
transition: all 200ms ease;
}
.button {
transition: all 200ms ease;
border-width: $border-width;
&.is-active,
&.is-focused,
&:active,
&:focus {
box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25);
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
&.is-active,
&.is-focused,
&:active,
&:focus {
border-color: $color;
box-shadow: 0 0 0 2px rgba($color, 0.25);
}
}
}
}
.button,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select,
.select select,
.textarea {
height: 2.5em;
}
.input,
.textarea {
transition: all 200ms ease;
box-shadow: none;
border-width: $border-width;
}
.select {
&:after,
select {
border-width: $border-width;
}
}
.control {
&.has-addons {
.button,
.input,
.select {
margin-right: -$border-width;
}
}
}
.card {
box-shadow: none;
border: $border-width solid $grey-lighter;
background-color: $white-bis;
border-radius: $radius;
.card-image {
img {
border-radius: $radius $radius 0 0;
}
}
.card-header {
box-shadow: none;
background-color: rgba($white-ter, 0.8);
border-radius: $radius $radius 0 0;
}
.card-footer {
background-color: rgba($white-ter, 0.8);
}
.card-footer,
.card-footer-item {
border-width: $border-width;
}
}
.notification {
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
a:not(.button) {
color: $color-invert;
text-decoration: underline;
}
}
}
}
.tag {
border-radius: $radius;
}
.menu-list li a {
transition: all 300ms ease;
}
.message-header {
font-weight: $weight-bold;
}
.message-body {
border-width: $border-width;
}
.navbar {
border-radius: $radius;
.navbar-menu {
box-shadow: none;
}
.navbar-dropdown {
box-shadow: none;
.navbar-item {
color: $button-color;
}
}
@include touch {
color: $navbar-item-color;
.navbar-menu {
background-color: $navbar-dropdown-background-color;
border-radius: 0 0 $radius $radius;
}
.navbar-item,
.navbar-link {
&:not(.is-active):not(:hover) {
color: $button-color;
}
}
}
&.is-transparent {
background-color: transparent;
color: $text;
.navbar-item,
.navbar-link {
color: $button-color;
&:hover {
color: $link;
background-color: transparent;
}
&.is-active {
color: $link;
background-color: transparent;
}
}
.navbar-link:after {
border-color: $button-color;
}
.navbar-burger:hover {
background-color: $white-ter;
}
}
}
.hero .navbar,
body > .navbar {
border-radius: 0;
}
.pagination-link,
.pagination-next,
.pagination-previous {
border-width: $border-width;
}
.panel-block,
.panel-heading,
.panel-tabs {
border-width: $border-width;
&:first-child {
border-top-width: $border-width;
}
}
.panel-heading {
font-weight: $weight-bold;
}
.panel-tabs {
a {
border-width: $border-width;
margin-bottom: -$border-width;
}
}
.panel-block {
&:hover {
color: $button-hover-color;
.panel-icon {
color: $button-hover-color;
}
}
}
.tabs {
a {
border-bottom-width: $border-width;
margin-bottom: -$border-width;
}
ul {
border-bottom-width: $border-width;
}
&.is-boxed {
a {
border-width: $border-width;
}
}
&.is-toggle {
li a {
border-width: $border-width;
margin-bottom: 0;
}
li + li {
margin-left: -$border-width;
}
}
}
.hero {
.navbar {
background-color: $primary;
.navbar-menu {
border-radius: 0;
}
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
.navbar {
background-color: $color;
.navbar-item,
.navbar-link {
&:not(.is-active):not(:hover) {
color: $color-invert;
}
}
@include desktop {
.navbar-dropdown {
.navbar-item:not(.is-active):not(:hover) {
color: $button-color;
}
}
}
}
}
}
}

View file

@ -0,0 +1,68 @@
////////////////////////////////////////////////
// FLATLY
////////////////////////////////////////////////
$grey: #8c9b9d;
$grey-light: #a9afb7;
$grey-lighter: #dee2e5;
$orange: #e67e22;
$yellow: #f1b70e;
$green: #2ecc71;
$turquoise: #1abc9c;
$blue: #3498db;
$purple: #8e44ad;
$red: #e74c3c;
$white-ter: #ecf0f1;
$primary: #34495e !default;
$yellow-invert: #fff;
$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
$radius-small: 3px;
$radius: .4em;
$radius-large: 8px;
$size-7: .85em;
$title-weight: 500;
$subtitle-weight: 400;
$subtitle-color: darken($grey, 20);
$border-width: 2px;
$body-size: 15px;
$footer-background-color: $white-ter;
$text: $primary;
$text-light: lighten($primary, 10);
$text-strong: darken($primary, 5);
$box-color: $text;
$box-background-color: $white-ter;
$box-shadow: none;
$link: $turquoise;
$link-hover: darken($link, 10);
$link-focus: darken($link, 10);
$link-active: darken($link, 10);
$button-color: $primary;
$button-hover-color: darken($primary, 5); // primary-dark
$button-focus: darken($primary, 5); // primary-dark
$button-active-color: darken($primary, 5); // primary-dark
$navbar-height: 4rem;
$navbar-background-color: $primary;
$navbar-item-color: $white-ter;
$navbar-item-hover-color: $link;
$navbar-item-hover-background-color: transparent;
$navbar-item-active-color: $link;
$navbar-dropdown-arrow: #fff;
$navbar-dropdown-background-color: $white-ter;
$navbar-divider-background-color: $grey-lighter;
$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
$navbar-dropdown-item-hover-color: $link;
$navbar-dropdown-item-hover-background-color: transparent;
$navbar-dropdown-item-active-background-color: transparent;
$navbar-dropdown-item-active-color: $link;
$bulmaswatch-import-font: true !default;

View file

@ -0,0 +1,145 @@
// Overrides
@if $bulmaswatch-import-font {
@import url( 'https://fonts.googleapis.com/css?family=Muli:400,700');
}
.content blockquote {
border-color: $primary;
}
.button,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select,
.select select,
.textarea {
height: 2.572em;
}
.button {
&.is-active,
&:active {
box-shadow: inset 1px 1px 4px rgba($grey-darker, 0.3);
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
&.is-hovered,
&:hover {
background-color: darken($color, 10);
}
&.is-active,
&:active {
box-shadow: inset 1px 0 3px rgba($grey-darker, 0.3);
background-color: darken($color, 10);
}
}
}
}
.notification {
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
a:not(.button) {
color: $color-invert;
text-decoration: underline;
}
}
}
}
.progress {
height: $size-small;
}
.progress,
.tag {
border-radius: $radius;
}
.navbar {
border-radius: $radius;
.navbar-dropdown .navbar-item {
@include desktop {
color: $text;
&.is-active {
background-color: $navbar-dropdown-item-hover-background-color;
}
}
}
@include touch {
.navbar-menu {
background-color: inherit;
}
}
.navbar-burger {
span {
background-color: $white;
}
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
@include touch {
.navbar-item,
.navbar-link {
color: $color-invert;
}
.navbar-burger {
span {
background-color: $color-invert;
}
}
}
}
}
}
.hero {
// Colors
.navbar {
background-color: $primary;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
.navbar {
background: none;
}
}
}
}
.menu {
padding: 1em;
background-color: lighten($primary, 50);
.menu-list a:not(.is-active) {
transition: all 300ms;
&:hover {
background-color: lighten($primary, 40);
}
}
}

View file

@ -0,0 +1,56 @@
////////////////////////////////////////////////
// PULSE
////////////////////////////////////////////////
$orange: #FF7518;
$yellow: #f1c40f;
$green: #2ecc71;
$turquoise: #14a789;
$blue: #3498db;
$purple: #8e44ad;
$red: #e74c3c;
$primary: $purple !default;
$warning: $orange;
$orange-invert: #fff;
$warning-invert: $orange-invert;
$background: lighten($primary, 50);
$family-sans-serif: 'Muli', "Helvetica Neue", Arial, sans-serif;
$body-size: 14px;
$subtitle-color: darken($primary, 10);
$radius: 0;
$radius-small: 0;
$radius-large: 0;
$link: $turquoise;
$link-hover: lighten($link, 5);
$link-focus: darken($link, 10);
$link-active: darken($link, 10);
$button-hover-color: lighten($primary, 10);
$button-hover-border-color: lighten($primary, 10);
$button-focus-color: darken($primary, 10);
$button-focus-border-color: darken($primary, 10);
$button-focus-box-shadow-size: 0 0 0 0.125em;
$button-focus-box-shadow-color: rgba($primary, 0.25);
$button-active-color: darken($primary, 10);
$button-active-border-color: darken($primary, 10);
$navbar-background-color: $primary;
$navbar-item-color: #fff;
$navbar-item-hover-color: $navbar-item-color;
$navbar-item-active-color: $navbar-item-color;
$navbar-item-hover-background-color: rgba(#000, 0.2);
$navbar-item-active-background-color: rgba(#000, 0.2);
$navbar-dropdown-item-active-color: $primary;
$navbar-dropdown-arrow: $navbar-item-color;
$menu-item-active-background-color: $primary;
$bulmaswatch-import-font: true !default;

View file

@ -0,0 +1,124 @@
// Overrides
@if $bulmaswatch-import-font {
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
}
@mixin btn-shadow($color) {
background-image: linear-gradient(
180deg,
lighten($color, 3%) 0%,
$color 60%,
darken($color, 3%) 100%
);
filter: none;
}
.button,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select,
.select select,
.textarea {
height: 2.286em;
}
.button {
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
&:not(.is-outlined):not(.is-inverted) {
border: 1px solid darken($color, 6.5%);
@include btn-shadow($color);
}
}
}
}
.input,
.textarea {
box-shadow: none;
}
.card .card-header {
border-bottom: 1px solid $border;
}
.notification {
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
$color-lightning: max((100% - lightness($color)) - 2%, 0%);
&.is-#{$name} {
background-color: lighten($color, $color-lightning);
color: $color;
border: 1px solid lighten($color, 30);
}
}
}
.navbar {
@include btn-shadow($primary);
.has-dropdown .navbar-item {
@include desktop {
color: $text;
}
}
@include touch {
.navbar-menu {
background-color: inherit;
}
}
.navbar-burger span {
background-color: $navbar-item-color;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
@include btn-shadow($color);
@include touch {
.navbar-item,
.navbar-link {
color: rgba($color-invert, 0.7);
&.is-active {
color: $color-invert;
}
}
.navbar-burger span {
background-color: $color-invert;
}
}
}
}
}
.hero {
// Colors
.navbar {
background-color: $primary;
@include btn-shadow($primary);
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
.navbar {
background: none;
}
}
}
}

View file

@ -0,0 +1,41 @@
////////////////////////////////////////////////
// SIMPLEX
////////////////////////////////////////////////
$grey-darker: #373a3c;
$grey-dark: #444;
$grey: #777;
$grey-light: #bbb;
$grey-lighter: #ddd;
$orange: #d9831f;
$green: #469408;
$blue: #029acf;
$cyan: #0fc5d9;
$purple: #9b479f;
$red: #d9230f;
$white-bis: #fafafa;
$primary: $red !default;
$primary-dark: darken($primary, 10);
$warning: $purple;
$danger: $orange;
$orange-invert: #fff;
$warning-invert: $orange-invert;
$family-sans-serif: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$body-size: 14px;
$navbar-background-color: $primary;
$navbar-item-color: rgba(#fff, 0.7);
$navbar-item-hover-color: #fff;
$navbar-item-active-color: #fff;
$navbar-item-hover-background-color: rgba(#000, 0.1);
$navbar-dropdown-arrow: $navbar-item-color;
$bulmaswatch-import-font: true !default;
$box-shadow: 0 0 0 1px $grey-lighter;
$card-shadow: 0 0 0 1px $grey-lighter;
$card-header-shadow: none;
$card-background-color: $white-bis;

13
sass/darkly.scss Normal file
View file

@ -0,0 +1,13 @@
@import './_vendor/darkly/variables';
@import './_vendor/bulma-0.7.4/_bulma.sass';
@import './_vendor/darkly/overrides';
@import './blog';
.box {
$card-border-color: lighten($grey-darker, 5);
box-shadow: none;
border: $border-width solid $card-border-color;
background-color: $grey-darker;
border-radius: $radius;
}

2
sass/default.scss Normal file
View file

@ -0,0 +1,2 @@
@import './_vendor/bulma-0.7.4/_bulma.sass';
@import './blog';

5
sass/flatly.scss Normal file
View file

@ -0,0 +1,5 @@
@import './_vendor/flatly/variables';
@import './_vendor/bulma-0.7.4/_bulma.sass';
@import './_vendor/flatly/overrides';
@import './blog';

13
sass/pulse.scss Normal file
View file

@ -0,0 +1,13 @@
@import './_vendor/pulse/variables';
@import './_vendor/bulma-0.7.4/_bulma.sass';
@import './_vendor/pulse/overrides';
@import './blog';
// .box {
// $card-border-color: lighten($grey-darker, 5);
// box-shadow: none;
// border: $border-width solid $card-border-color;
// background-color: $grey-darker;
// border-radius: $radius;
// }

13
sass/simplex.scss Normal file
View file

@ -0,0 +1,13 @@
@import './_vendor/simplex/variables';
@import './_vendor/bulma-0.7.4/_bulma.sass';
@import './_vendor/simplex/overrides';
@import './blog';
// .box {
// $card-border-color: lighten($grey-darker, 5);
// box-shadow: none;
// border: $border-width solid $card-border-color;
// background-color: $grey-darker;
// border-radius: $radius;
// }

BIN
static/images/bulma.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

8
static/js/bulma.js Normal file
View file

@ -0,0 +1,8 @@
(function () {
var burger = document.querySelector('.burger');
var menu = document.querySelector('#' + burger.dataset.target);
burger.addEventListener('click', function () {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();

184
static/js/search.js Normal file
View file

@ -0,0 +1,184 @@
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function () {
timeout = null;
func.apply(context, args);
}, wait);
};
}
// Taken from mdbook
// The strategy is as follows:
// First, assign a value to each word in the document:
// Words that correspond to search terms (stemmer aware): 40
// Normal words: 2
// First word in a sentence: 8
// Then use a sliding window with a constant number of words and count the
// sum of the values of the words within the window. Then use the window that got the
// maximum sum. If there are multiple maximas, then get the last one.
// Enclose the terms in <b>.
function makeTeaser(body, terms) {
var TERM_WEIGHT = 40;
var NORMAL_WORD_WEIGHT = 2;
var FIRST_WORD_WEIGHT = 8;
var TEASER_MAX_WORDS = 30;
var stemmedTerms = terms.map(function (w) {
return elasticlunr.stemmer(w.toLowerCase());
});
var termFound = false;
var index = 0;
var weighted = []; // contains elements of ["word", weight, index_in_document]
// split in sentences, then words
var sentences = body.toLowerCase().split(". ");
for (var i in sentences) {
var words = sentences[i].split(" ");
var value = FIRST_WORD_WEIGHT;
for (var j in words) {
var word = words[j];
if (word.length > 0) {
for (var k in stemmedTerms) {
if (elasticlunr.stemmer(word).startsWith(stemmedTerms[k])) {
value = TERM_WEIGHT;
termFound = true;
}
}
weighted.push([word, value, index]);
value = NORMAL_WORD_WEIGHT;
}
index += word.length;
index += 1; // ' ' or '.' if last word in sentence
}
index += 1; // because we split at a two-char boundary '. '
}
if (weighted.length === 0) {
return body;
}
var windowWeights = [];
var windowSize = Math.min(weighted.length, TEASER_MAX_WORDS);
// We add a window with all the weights first
var curSum = 0;
for (var i = 0; i < windowSize; i++) {
curSum += weighted[i][1];
}
windowWeights.push(curSum);
for (var i = 0; i < weighted.length - windowSize; i++) {
curSum -= weighted[i][1];
curSum += weighted[i + windowSize][1];
windowWeights.push(curSum);
}
// If we didn't find the term, just pick the first window
var maxSumIndex = 0;
if (termFound) {
var maxFound = 0;
// backwards
for (var i = windowWeights.length - 1; i >= 0; i--) {
if (windowWeights[i] > maxFound) {
maxFound = windowWeights[i];
maxSumIndex = i;
}
}
}
var teaser = [];
var startIndex = weighted[maxSumIndex][2];
for (var i = maxSumIndex; i < maxSumIndex + windowSize; i++) {
var word = weighted[i];
if (startIndex < word[2]) {
// missing text from index to start of `word`
teaser.push(body.substring(startIndex, word[2]));
startIndex = word[2];
}
// add <em/> around search terms
if (word[1] === TERM_WEIGHT) {
teaser.push("<b>");
}
startIndex = word[2] + word[0].length;
teaser.push(body.substring(word[2], startIndex));
if (word[1] === TERM_WEIGHT) {
teaser.push("</b>");
}
}
teaser.push("…");
return teaser.join("");
}
function formatSearchResultItem(item, terms) {
return '<div class="search-results__item box">' +
`<a href="${item.ref}">${item.doc.title}</a>` +
`<div>${makeTeaser(item.doc.body, terms)}</div>` +
'</div>';
}
function initSearch() {
var $searchInput = document.getElementById("search");
var $searchResults = document.querySelector(".search-results");
var $searchResultsItems = document.querySelector(".search-results__items");
var MAX_ITEMS = 10;
var options = {
bool: "AND",
fields: {
title: {
boost: 2
},
body: {
boost: 1
},
}
};
var currentTerm = "";
var index = elasticlunr.Index.load(window.searchIndex);
$searchInput.addEventListener("keyup", debounce(function () {
var term = $searchInput.value.trim();
if (!index) {
return;
}
$searchResults.style.display = term === "" ? "none" : "block";
$searchResultsItems.innerHTML = "";
if (term === "") {
return;
}
var results = index.search(term, options);
if (results.length === 0) {
$searchResults.style.display = "none";
return;
}
currentTerm = term;
for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
var item = document.createElement("li");
item.innerHTML = formatSearchResultItem(results[i], term.split(" "));
$searchResultsItems.appendChild(item);
}
}, 150));
}
if (document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
initSearch();
} else {
document.addEventListener("DOMContentLoaded", initSearch);
}

View file

@ -0,0 +1,6 @@
{% extends "taxonomy_list.html" %}
{% block content %}
{% set title = "All Authors"%}
{{ super() }}
{% endblock content %}

View file

@ -0,0 +1,6 @@
{% extends "taxonomy_single.html" %}
{% block content %}
{% set title = "Author: " ~ term.name %}
{{ super() }}
{% endblock content %}

View file

@ -0,0 +1,6 @@
{% extends "taxonomy_list.html" %}
{% block content %}
{% set title = "All Categories"%}
{{ super() }}
{% endblock content %}

View file

@ -0,0 +1,6 @@
{% extends "taxonomy_single.html" %}
{% block content %}
{% set title = "Category: " ~ term.name %}
{{ super() }}
{% endblock content %}

85
templates/index.html Normal file
View file

@ -0,0 +1,85 @@
{% import "post_macros.html" as post_macros %}
{% import "index_macros.html" as index_macros %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
{% if config.extra.zulma_theme %}
<link rel="preload" as="style" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
{% else %}
<link rel="preload" as="style" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
{% endif %}
{% if config.generate_rss %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
{% endif %}
{% block css %}
{% if config.extra.zulma_theme %}
<link rel="stylesheet" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
{% else %}
<link rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
{% endif %}
{% endblock css %}
{% block extra_head %}
{% endblock extra_head %}
<noscript>
<style>
.navbar-menu {
display: block;
}
.js-only {
display: none;
}
</style>
</noscript>
</head>
<body>
{% block content %}
<!-- START NAV -->
{% block header %}
{{ index_macros::navbar() }}
{% endblock header %}
<!-- END NAV -->
<main class="index">
<!-- START HERO TITLE -->
{% if config.extra.zulma_title %}
{{ index_macros::hero(title=config.extra.zulma_title) }}
{% endif %}
<!-- END HERO TITLE -->
<div class="container">
<!-- START ARTICLE FEED -->
{% if paginator %}
{{ index_macros::list_articles(pages=paginator.pages) }}
{% else %}
{{ index_macros::list_articles(pages=section.pages) }}
{% endif %}
<!-- END ARTICLE FEED -->
<!-- START PAGINATION -->
{% if paginator %}
{{ index_macros::paginate(paginator=paginator) }}
{% endif %}
<!-- END PAGINATION -->
</div>
</main>
{% endblock content %}
<script async type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
<script async type="text/javascript" src="{{ get_url(path="search_index.en.js") }}"></script>
<script async type="text/javascript" src="{{ get_url(path="js/bulma.js") }}"></script>
<script async type="text/javascript" src="{{ get_url(path="js/search.js") }}"></script>
</body>
</html>

View file

@ -0,0 +1,94 @@
{% macro hero(title) %}
<section class="hero is-primary is-bold">
<header>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">{{title}}</h1>
</div>
</div>
</header>
</section>
{% endmacro hero %}
{% macro list_articles(pages) %}
<section class="articles">
<div class="columns is-desktop">
<div class="column is-10-desktop is-offset-1-desktop">
{% for page in pages %}
{{ post_macros::page_in_list(page=page) }}
{% endfor %}
</div>
</div>
</section>
{% endmacro list_articles %}
{% macro paginate(paginator) %}
<section class="paginator-container">
<div class="columns">
<div class="column is-10 is-offset-1">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
{% if paginator.previous %}
<a class="button is-primary pagination-previous" href="{{ paginator.previous }}">&laquo; Previous</a>
{% endif %}
<ul class="pagination-list">
<li>Page {{ paginator.current_index }} of {{ paginator.number_pagers }}</li>
</ul>
{% if paginator.next %}
<a class="button is-primary pagination-next" href="{{ paginator.next }}">Next &raquo;</a>
{% endif %}
</nav>
</div>
</div>
</section>
{% endmacro paginate %}
{% macro navbar() %}
{% if config.extra.zulma_menu or config.extra.zulma_brand or config.build_search_index %}
<header>
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
{% if config.extra.zulma_brand %}
<a class="navbar-item" href="/">
{% if config.extra.zulma_brand.image %}
<img src="{{ config.extra.zulma_brand.image | safe | replace(from="$BASE_URL", to=config.base_url) }}"
alt="{{ config.extra.zulma_brand.text }}">
{% else %}
<span>{{ config.extra.zulma_brand.text }}</span>
{% endif %}
</a>
{% endif %}
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
{% if config.extra.zulma_menu %}
{% for item in config.extra.zulma_menu %}
<a itemprop="url"
class="navbar-item {% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}is-active{% endif %}"
href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
<span itemprop="name">{{ item.name }}
</span>
</a>
{% endfor %}
{% endif %}
{% if config.build_search_index %}
<div class="navbar-item search-container js-only">
<input class="input is-primary" id="search" type="search" placeholder="Search">
<div class="search-results box">
<div class="search-results__items"></div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
{% endif %}
{% endmacro navbar %}

29
templates/page.html Normal file
View file

@ -0,0 +1,29 @@
{% extends "index.html" %}
{% import "post_macros.html" as post_macros %}
{% block content %}
<!-- START NAV -->
{% block header %}
{{ super() }}
{% endblock header %}
<!-- END NAV -->
<section class="container">
<div class="columns is-desktop">
<div class="column is-10-desktop is-offset-1-desktop">
<article itemscope itemtype="http://schema.org/BlogPosting">
<div class="card article">
<div class="card-content">
{{ post_macros::article_header(page = page) }}
<div itemprop="articleBody" class="content article-body">
{{ page.content | safe }}
</div>
</div>
{% block page_footer %}
{{ post_macros::post_footer(page=page) }}
{% endblock page_footer %}
</div>
</article>
</div>
</div>
</section>
{% endblock content %}

126
templates/post_macros.html Normal file
View file

@ -0,0 +1,126 @@
{% macro read_time(page) %}
<svg class="i-clock" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="6.25%">
<circle cx="16" cy="16" r="14" />
<path d="M16 8 L16 16 20 20" />
</svg>
<span>&nbsp;{{ page.reading_time }} minute read</span>
{% endmacro read_time %}
{% macro article_header(page) %}
<header>
<div class="has-text-centered">
<a href="{{ page.permalink | safe }}">
<p class="title article-title">{{ page.title }}</p>
</a>
<div class="tags has-addons level-item">
{% if page.extra.author %}
<span class="tag is-rounded is-info">{{ page.extra.author }}</span>
{% endif %}
<span class="tag is-rounded">{{ page.date | date(format="%F") }}</span>
<span class="tag is-rounded">{{ self::read_time(page=page) }}</span>
</div>
</div>
</header>
{% endmacro article_header %}
{% macro page_in_list(page) %}
<article itemscope itemtype="http://schema.org/CreativeWork">
<div class="card article">
<div class="card-content">
{{ self::article_header(page = page) }}
{% if page.summary %}
<div itemprop="summary" class="content article-body">
{{ page.summary | safe }}
<nav class="readmore">
<a itemprop="url" href="{{ page.permalink | safe }}">Read More&nbsp;&raquo;
</a>
</nav>
</div>
{% endif %}
</div>
</div>
</article>
{% endmacro page_in_list %}
{% macro post_footer(page) %}
<footer class="card-footer article-footer">
<div class="columns is-multiline">
<div class="column is-12">
<p>
Published
{{self::post_footer_date(page=page)}}
{{self::post_footer_authors(page=page)}}
{{self::post_footer_categories(page=page)}}
{{self::post_footer_tags(page=page)}}
</p>
</div>
<div class="column">
<a class="button is-pulled-right is-info" href="/">Back Home</a>
</div>
</div>
</footer>
{% endmacro post_footer %}
{% macro post_footer_date(page) %}
{% if page.date %}
<time datetime="{{ page.date | date(format="%F") }}">
{{ page.date | date(format="%F") }}
</time>
{% endif %}
{% endmacro post_footer_date %}
{% macro post_footer_authors(page) %}
{% if page.taxonomies.authors %}
by
{% for author in page.taxonomies.authors %}
<a href="{{ get_taxonomy_url(kind="authors", name=author) | safe }}">
<span class="tag is-success">{{ author }} </span>
</a>
{% if page.taxonomies.authors | length > 1 %}
{% if loop.index != page.taxonomies.authors | length %}
{% if loop.index == page.taxonomies.authors | length - 1 %}
and
{% else %}
,
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endmacro post_footer_authors %}
{% macro post_footer_categories(page) %}
{% if page.taxonomies.categories %}
{% set category = page.taxonomies.categories[0] %}
in <a href="{{ get_taxonomy_url(kind="categories", name=category) | safe }}">
<span class="tag is-primary">
{{ category }}
</span>
</a>
{% endif %}
{% endmacro post_footer_date %}
{% macro post_footer_tags(page) %}
{% if page.taxonomies.tags %}
and tagged
{% for tag in page.taxonomies.tags %}
<a href="{{ get_taxonomy_url(kind="tags", name=tag) | safe }}">
<span class="tag is-link">{{ tag }} </span>
</a>
{% if page.taxonomies.tags | length > 1 %}
{% if loop.index != page.taxonomies.tags | length %}
{% if loop.index == page.taxonomies.tags | length - 1 %}
and
{% else %}
,
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endmacro post_footer_tags %}

6
templates/tags/list.html Normal file
View file

@ -0,0 +1,6 @@
{% extends "taxonomy_list.html" %}
{% block content %}
{% set title = "All Tags"%}
{{ super() }}
{% endblock content %}

View file

@ -0,0 +1,6 @@
{% extends "taxonomy_single.html" %}
{% block content %}
{% set title = "Tag: " ~ term.name %}
{{ super() }}
{% endblock content %}

View file

@ -0,0 +1,19 @@
{% extends "index.html" %}
{% import "index_macros.html" as index_macros %}
{% import "taxonomy_macros.html" as taxonomy_macros %}
{% block content %}
<!-- START NAV -->
{% block header %}
{{ super() }}
{% endblock header %}
<!-- END NAV -->
<main>
<!-- START HERO TITLE -->
{{ index_macros::hero(title=title) }}
<!-- END HERO TITLE -->
<!-- START TAXONOMY LIST -->
{{ taxonomy_macros::list(terms=terms) }}
<!-- END TAXONOMY LIST -->
</main>
{% endblock content %}

View file

@ -0,0 +1,19 @@
{% macro list(terms) %}
<section>
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2">
{% if terms %}
<div class="list box">
{% for term in terms %}
<a href="{{ term.permalink | safe }}">
<span class="tag is-large is-primary">{{ term.name }}({{ term.pages | length }})</span>
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
{% endmacro list %}

View file

@ -0,0 +1,31 @@
{% extends "index.html" %}
{% import "post_macros.html" as post_macros %}
{% import "index_macros.html" as index_macros %}
{% block content %}
<!-- START NAV -->
{% block header %}
{{ super() }}
{% endblock header %}
<!-- END NAV -->
<main>
<!-- START HERO TITLE -->
{{ index_macros::hero(title=title) }}
<!-- END HERO TITLE -->
<div class="container">
<!-- START ARTICLE FEED -->
{% if paginator %}
{{ index_macros::list_articles(pages=paginator.pages) }}
{% else %}
{{ index_macros::list_articles(pages=term.pages) }}
{% endif %}
<!-- END ARTICLE FEED -->
<!-- START PAGINATION -->
{% if paginator %}
{{ index_macros::paginate(paginator=paginator) }}
{% endif %}
<!-- END PAGINATION -->
</div>
</main>
{% endblock content %}

4
theme.toml Normal file
View file

@ -0,0 +1,4 @@
name = "Zulma"
description = "A zola theme based off bulma.css"
license = "MIT"
min_version = "0.6.0"