From 332cec838a405ba8096fedd10f480b25b903d25b Mon Sep 17 00:00:00 2001 From: Worble Date: Sun, 12 May 2019 21:41:02 +0100 Subject: [PATCH] added more themes, update readme.md --- README.md | 43 +++- config.toml | 23 +- content/some-article.md | 10 +- content/some-other-article.md | 10 +- sass/_blog.scss | 131 ++++++----- sass/_vendor/lux/_overrides.scss | 131 +++++++++++ sass/_vendor/lux/_variables.scss | 40 ++++ sass/_vendor/slate/_overrides.scss | 179 +++++++++++++++ sass/_vendor/slate/_variables.scss | 98 +++++++++ sass/_vendor/solar/_overrides.scss | 294 +++++++++++++++++++++++++ sass/_vendor/solar/_variables.scss | 117 ++++++++++ sass/_vendor/superhero/_overrides.scss | 123 +++++++++++ sass/_vendor/superhero/_variables.scss | 94 ++++++++ sass/lux.scss | 5 + sass/slate.scss | 5 + sass/solar.scss | 5 + sass/superhero.scss | 5 + templates/index_macros.html | 2 +- templates/post_macros.html | 19 +- theme.toml | 2 +- 20 files changed, 1248 insertions(+), 88 deletions(-) create mode 100644 sass/_vendor/lux/_overrides.scss create mode 100644 sass/_vendor/lux/_variables.scss create mode 100644 sass/_vendor/slate/_overrides.scss create mode 100644 sass/_vendor/slate/_variables.scss create mode 100644 sass/_vendor/solar/_overrides.scss create mode 100644 sass/_vendor/solar/_variables.scss create mode 100644 sass/_vendor/superhero/_overrides.scss create mode 100644 sass/_vendor/superhero/_variables.scss create mode 100644 sass/lux.scss create mode 100644 sass/slate.scss create mode 100644 sass/solar.scss create mode 100644 sass/superhero.scss diff --git a/README.md b/README.md index c90d984..a1ec7af 100644 --- a/README.md +++ b/README.md @@ -22,12 +22,14 @@ A Bulma theme for Zola. - [Known Bugs](#known-bugs) ## Installation + First download this theme to your `themes` directory: ```bash -$ cd themes -$ git clone https://github.com/Worble/Zulma +cd themes +git clone https://github.com/Worble/Zulma ``` + and then enable it in your `config.toml`: ```toml @@ -39,6 +41,7 @@ That's it! No more configuration should be required, however head to the [Option ## Javascript ### Sources + All the source javascript files live in `javascript/src`. Following is a list of the javascript files, their purpose, and their sources. All files are prefixed with `zulma_` to avoid any name clashes. - `zulma_search.js` - Used when a user types into the search box on the navbar (if enabled). Taken from [Zola's site](https://github.com/getzola/zola/blob/6100a43/docs/static/search.js). @@ -46,9 +49,10 @@ All the source javascript files live in `javascript/src`. Following is a list of - `zulma_switchcss.js` - Used for swapping themes (if enabled). ### Building + The javascript files are transpiled by babel, minified by webpack, sourcemaps are generated and then everything placed in `static/js`. The repo already contains the transpiled and minified files along with their corrosponding sourcemaps so you don't need to do anything to use these. If you would prefer to build it yourself, feel free to inspect the js files and then run the build process yourself (please ensure that you have [node, npm](https://nodejs.org/en/) and optionally [yarn](https://yarnpkg.com/lang/en/) installed.): -``` +```bash cd javascript yarn yarn webpack @@ -57,13 +61,17 @@ yarn webpack ## 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 @@ -98,11 +106,13 @@ and make the corrosponding folder in your templates, in this case: `templates\li And then for each, just inherit the taxonomy master page for that page. Before rendering the content block, you may optionally set a variable called `title` for the hero to display on that page, otherwise it will use the default for that taxonomy. In `single.html`: + ```handlebars {% extends "Zulma/templates/taxonomy_single.html" %} ``` In `list.html`: + ```handlebars {% extends "Zulma/templates/taxonomy_list.html" %} @@ -113,7 +123,8 @@ In `list.html`: ``` ### 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: + +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] @@ -127,7 +138,8 @@ zulma_menu = [ 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. + +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] @@ -135,11 +147,13 @@ 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 @@ -148,19 +162,22 @@ 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; + 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 @@ -186,7 +203,9 @@ zulma_allow_theme_selection = true ``` ## 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/). All themes were taken from [Bulmaswatch](https://jenil.github.io/bulmaswatch/). The code behind from originally adapted from the [after-dark](https://github.com/getzola/after-dark/blob/master/README.md) zola template. ## Known Bugs -- If user theme swapping is enabled and the user selects a theme different to the default, a slight delay will be introduced in page rendering as the css gets swapped out and in by the javascript. This is better than the alternative FOUC or flashes of the old theme, but still annoying. I don't know any way around this, but with browser caching it should be fast enough to not cause serious issues. \ No newline at end of file + +- If user theme swapping is enabled and the user selects a theme different to the default, a slight delay will be introduced in page rendering as the css gets swapped out and in by the javascript. This is better than the alternative FOUC or flashes of the old theme, but still annoying. I don't know any way around this, but with browser caching it should be fast enough to not cause serious issues. diff --git a/config.toml b/config.toml index 88f5f93..617687d 100644 --- a/config.toml +++ b/config.toml @@ -2,4 +2,25 @@ base_url = "https://example.com" # Whether to automatically compile all Sass files in the sass directory -compile_sass = true \ No newline at end of file +compile_sass = true + +taxonomies = [ + {name = "categories"}, + {name = "tags", paginate_by = 5, rss = true}, + {name = "authors", rss = true}, +] + +build_search_index = true + +[extra] +zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex", "lux", "slate", "solar", "superhero"] + +zulma_menu = [ + {url = "$BASE_URL/categories", name = "Categories"}, + {url = "$BASE_URL/tags", name = "Tags"}, + {url = "$BASE_URL/authors", name = "Authors"} +] +zulma_brand = {text = "Home"} +zulma_title = "My Blog" +zulma_theme = "darkly" +zulma_allow_theme_selection = true \ No newline at end of file diff --git a/content/some-article.md b/content/some-article.md index e222fac..5628905 100644 --- a/content/some-article.md +++ b/content/some-article.md @@ -1,12 +1,18 @@ +++ title = "What is Gutenberg" date = 2017-09-20 + +[taxonomies] +categories = ["Hello world"] +tags = ["rust", "ssg", "other", "test"] +authors = ["Joe Bloggs", "Jane Doe"] +++ 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. - -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. + + +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. diff --git a/content/some-other-article.md b/content/some-other-article.md index 61d1946..b4a9ecd 100644 --- a/content/some-other-article.md +++ b/content/some-other-article.md @@ -1,12 +1,18 @@ +++ title = "A first theme for Gutenberg" date = 2017-09-29 + +[taxonomies] +categories = ["Hello world"] +tags = ["rust", "ssg", "other", "test"] +authors = ["Joe Bloggs"] +++ 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. - -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. + + +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. diff --git a/sass/_blog.scss b/sass/_blog.scss index 5e120b9..e91eed1 100644 --- a/sass/_blog.scss +++ b/sass/_blog.scss @@ -1,138 +1,137 @@ html, body { - font-family: 'Open Sans', sans-serif; - font-size: 14px; - display: flex; - min-height: 100vh; - flex-direction: column; + font-family: "Open Sans", sans-serif; + font-size: 14px; + display: flex; + min-height: 100vh; + flex-direction: column; } main { - flex: 1; + flex: 1; } .navbar-brand .brand-text { - font-size: 1.11rem; - font-weight: bold; + font-size: 1.11rem; + font-weight: bold; } .hero .title { - font-size: 3rem; + font-size: 3rem; } .article, .tag-list { - .content p { - line-height: 1.9; - margin: 15px 0; - } + .content p { + line-height: 1.9; + margin: 15px 0; + } } .media-center { - display: block; - margin-bottom: 1rem; + display: block; + margin-bottom: 1rem; } .media-content { - margin-top: 1rem; + margin-top: 1rem; } .article { - margin-top: 1rem; + margin-top: 1rem; } .article-title { - font-size: 2rem; - font-weight: lighter; - line-height: 2; - margin-bottom: 0.5rem; + font-size: 2rem; + font-weight: lighter; + line-height: 2; + margin-bottom: 0.5rem; } .article-subtitle { - margin-bottom: 3rem; + margin-bottom: 3rem; } .article-footer, .article-body { - margin: 2rem 0; + margin: 2rem 0; - @include desktop { - margin: 2rem 6rem; - } + @include desktop { + margin: 2rem 6rem; + } } .article-body { - line-height: 1.4; + line-height: 1.4; } .article-footer { - font-style: italic; - padding: 1.5rem; - width: 100%; + font-style: italic; + padding: 1.5rem; + width: 100%; - .button, - .tag { - font-style: normal; - } + .button, + .tag { + font-style: normal; + } } .list.box { - margin-top: 1rem; - display: flex; - flex-direction: row; - flex-wrap: wrap; + margin-top: 1rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; - >a { - margin: 0.2rem; - } + > a { + margin: 0.2rem; + } } .paginator-container { - padding: 2rem 0; + padding: 2rem 0; } .search-results { - display: none; - max-height: 35rem; - overflow: auto; + display: none; + max-height: 35rem; + overflow: auto; - @include desktop { - position: absolute; - top: 0; - margin-top: 3rem; - width: 50rem; - right: 0; - margin-right: 0.75rem; - } + @include desktop { + position: absolute; + top: 100%; + width: 50rem; + right: 0; + margin-right: 0.75rem; + } } -.search-results__items>li { - list-style: none; - margin-top: 1rem; +.search-results__items > li { + list-style: none; + margin-top: 1rem; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } } .navbar-end { - height: 100%; + height: 100%; } input#search::placeholder { - color: $grey-darker; + color: $grey-darker; } .footer { - margin-top: 4rem; - padding: 2rem; + margin-top: 4rem; + padding: 2rem; } .pagination-previous, .pagination-next { - flex-grow: 0; + flex-grow: 0; } .theme-select-container { - margin-left: auto; -} \ No newline at end of file + margin-left: auto; +} diff --git a/sass/_vendor/lux/_overrides.scss b/sass/_vendor/lux/_overrides.scss new file mode 100644 index 0000000..08dd517 --- /dev/null +++ b/sass/_vendor/lux/_overrides.scss @@ -0,0 +1,131 @@ +// Overrides +@if $bulmaswatch-import-font { + @import url(https://fonts.googleapis.com/css?family=Nunito+Sans); +} + +body { + font-weight: 200; + letter-spacing: 1px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-transform: uppercase; + letter-spacing: 3px; +} + +.button { + transition: all 200ms ease; + text-transform: uppercase; + font-weight: 700; + + &.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, +.input, +.pagination-ellipsis, +.pagination-link, +.pagination-next, +.pagination-previous, +.select, +.select select, +.textarea, +.control.has-icons-left .icon, +.control.has-icons-right .icon { + height: 2.5em; +} + +.input, +.textarea { + transition: all 200ms ease; + box-shadow: none; +} + +.progress, +.tag { + border-radius: $radius; +} + +.card { + box-shadow: 0 0 0 1px $grey-lighter; + + .card-header { + box-shadow: 0 1px 0 0 $grey-lighter; + } +} + +.navbar { + .navbar-link, + .navbar-item { + text-transform: uppercase; + font-weight: bold; + } + + .has-dropdown .navbar-item { + text-transform: none; + } + + strong { + color: $white; + } + + @include touch { + .navbar-menu { + background-color: $primary; + border-radius: $radius; + } + } +} +.hero { + .navbar { + background-color: $navbar-background-color; + } + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + .navbar { + background-color: $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; + } + } + } +} diff --git a/sass/_vendor/lux/_variables.scss b/sass/_vendor/lux/_variables.scss new file mode 100644 index 0000000..c0e8642 --- /dev/null +++ b/sass/_vendor/lux/_variables.scss @@ -0,0 +1,40 @@ +//////////////////////////////////////////////// +// LUX +//////////////////////////////////////////////// +$grey: #7f888f; +$grey-light: lighten($grey, 10%); +$grey-lighter: lighten($grey, 20%); + +$green: #4bbf73; +$blue: #1f9bcf; +$red: #d9534f; + +$primary: #222 !default; +$link: $grey; + +$family-sans-serif: "Nunito Sans", -apple-system, system-ui, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +$body-size: 14px; + +$radius: 0; +$radius-small: $radius; + +$navbar-height: 5rem; +$navbar-background-color: $primary; +$navbar-item-color: $grey; +$navbar-item-hover-color: #fff; +$navbar-item-active-color: #fff; +$navbar-item-hover-background-color: transparent; +$navbar-item-active-background-color: transparent; +$navbar-dropdown-arrow: #fff; +$navbar-dropdown-background-color: $primary; +$navbar-dropdown-border-top: 1px solid lighten($primary, 10); +$navbar-divider-background-color: lighten($primary, 10); +$navbar-dropdown-item-active-color: #fff; +$navbar-dropdown-item-hover-color: $grey-lighter; +$navbar-dropdown-item-hover-background-color: transparent; +$navbar-dropdown-item-active-background-color: transparent; + +$bulmaswatch-import-font: true !default; + +$box-shadow: 0 0 0 1px $grey-lighter; diff --git a/sass/_vendor/slate/_overrides.scss b/sass/_vendor/slate/_overrides.scss new file mode 100644 index 0000000..983acd5 --- /dev/null +++ b/sass/_vendor/slate/_overrides.scss @@ -0,0 +1,179 @@ +// Overrides +@mixin btn-shadow($color) { + background-image: linear-gradient( + 180deg, + lighten($color, 6%) 0%, + $color 60%, + darken($color, 4%) 100% + ); + filter: none; +} +@mixin btn-shadow-inverse($color) { + background-image: linear-gradient( + 180deg, + darken($color, 8%) 0%, + darken($color, 4%) 40%, + darken($color, 0%) 100% + ); + filter: none; +} + +.section { + background-color: $body-background-color; +} + +.hero { + background-color: $grey-dark; +} + +.button, +.input, +.pagination-ellipsis, +.pagination-link, +.pagination-next, +.pagination-previous, +.select, +.select select, +.textarea, +.control.has-icons-left .icon, +.control.has-icons-right .icon { + height: 2.5em; +} + +.button { + transition: all 200ms ease; + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + &:not(.is-outlined):not(.is-inverted) { + @include btn-shadow($color); + + &.is-hovered, + &:hover { + @include btn-shadow-inverse($color); + text-shadow: 1px 1px 1px rgba($black, 0.3); + } + } + } + } +} + +.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; + } + } + } +} + +.card { + border: 1px solid $border; + border-radius: $radius; + + .card-image { + img { + border-radius: $radius $radius 0 0; + } + } + + .card-header { + border-radius: $radius $radius 0 0; + } + + .card-footer, + .card-footer-item { + border-width: 1px; + border-color: $border; + } +} + +.navbar { + border: 1px solid $dark; + + @include touch { + .navbar-menu { + background-color: inherit; + } + } + + .navbar-item, + .navbar-link { + color: rgba($white, 0.75); + border-left: 1px solid rgba($white, 0.1); + border-right: 1px solid rgba($black, 0.2); + + &.is-active { + background-color: rgba($dark, 0.1); + } + + &:hover { + color: $white; + border-left: 1px solid rgba($black, 0.2); + background-color: rgba($black, 0.2); + } + } + + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + .navbar-item, + .navbar-link { + color: rgba($color-invert, 0.75); + + &.is-active { + color: rgba($color-invert, 1); + } + } + } + } +} + +.hero { + .navbar { + background-color: $background; + } + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + .navbar { + background: none; + } + } + } +} + +.tabs { + a { + &:hover { + color: $link-hover; + border-bottom-color: $link-hover; + } + } + + li { + &.is-active { + a { + color: $primary-invert; + border-bottom-color: $primary-invert; + } + } + } +} + +.modal { + .modal-card-body { + background-color: $body-background-color; + } +} diff --git a/sass/_vendor/slate/_variables.scss b/sass/_vendor/slate/_variables.scss new file mode 100644 index 0000000..700521d --- /dev/null +++ b/sass/_vendor/slate/_variables.scss @@ -0,0 +1,98 @@ +//////////////////////////////////////////////// +// SLATE +//////////////////////////////////////////////// +$grey-lighter: #98a4ad; +$grey-light: #7a8288; +$grey: #52575c; +$grey-dark: #3a3f44; +$grey-darker: #272b30; + +$orange: #f89406; +$green: #62c462; +$blue: #5bc0de; +$red: #ee5f5b; + +$primary: $grey !default; +$warning: $orange; +$warning-invert: #fff; + +$black-bis: rgb(18, 18, 18); + +$dark: darken($grey-darker, 3); + +$border: $grey; + +$size-7: 0.85rem; + +$body-background-color: $grey-darker; +$background: $grey-dark; +$footer-background-color: $background; +$button-background-color: $background; +$button-border-color: lighten($button-background-color, 15); + +$title-color: #aaa; +$subtitle-color: $grey-light; +$subtitle-strong-color: $grey-light; + +$text: #aaa; +$text-light: lighten($text, 10); +$text-strong: darken($text, 5); + +$box-shadow: none; +$box-background-color: $grey-dark; + +$card-shadow: none; +$card-background-color: $grey-darker; +$card-header-shadow: none; +$card-header-background-color: rgba($black-bis, 0.2); +$card-footer-background-color: rgba($black-bis, 0.2); + +$link: #fafafa; +$link-invert: $grey; +$link-hover: lighten($link, 5); +$link-focus: darken($link, 5); +$link-active: darken($link, 15); +$link-focus-border: darken($link, 5); +$link-active-border: $link-focus-border; + +$button-color: #fafafa; + +$input-hover-color: $grey-light; +$input-disabled-background-color: $grey-lighter; +$input-disabled-border: $grey-lighter; +$input-arrow: $primary; +$label-color: $text; + +$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, 4); + +$pagination-border-color: $border; + +$navbar-height: 4rem; +$navbar-background-color: $background; +$navbar-item-color: rgba($link, 0.5); +$navbar-item-hover-color: $link; +$navbar-item-active-color: $link; +$navbar-item-hover-background-color: darken($grey-dark, 5); +$navbar-item-active-background-color: darken($grey-dark, 5); +$navbar-dropdown-background-color: $background; +$navbar-dropdown-item-hover-color: $link; +$navbar-dropdown-item-active-color: $link; +$navbar-dropdown-item-hover-background-color: darken($grey-dark, 5); +$navbar-dropdown-item-active-background-color: darken($grey-dark, 5); + +$dropdown-content-background-color: $background; +$dropdown-item-color: $text; + +$button-disabled-background-color: $grey-lighter; + +$tabs-toggle-link-active-background-color: $background; +$tabs-toggle-link-active-border-color: $border; +$tabs-toggle-link-active-color: #fff; +$tabs-boxed-link-active-background-color: $body-background-color; diff --git a/sass/_vendor/solar/_overrides.scss b/sass/_vendor/solar/_overrides.scss new file mode 100644 index 0000000..31b0a02 --- /dev/null +++ b/sass/_vendor/solar/_overrides.scss @@ -0,0 +1,294 @@ +// Overrides +@if $bulmaswatch-import-font { + @import url("https://fonts.googleapis.com/css?family=Lato:400, 700, 400italic"); +} + +.section { + background-color: $grey-darker; +} + +hr { + height: $border-width; +} + +h6 { + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.hero { + background-color: $grey-dark; +} + +a { + transition: all 200ms ease; +} + +.content blockquote { + border-color: $grey; +} + +.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.5); + } + + &.is-loading:after { + border-color: transparent transparent $button-border-color + $button-border-color; + } + @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, +.input, +.pagination-ellipsis, +.pagination-link, +.pagination-next, +.pagination-previous, +.select, +.select select, +.textarea, +.control.has-icons-left .icon, +.control.has-icons-right .icon { + 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; + } + } +} + +.progress { + &::-webkit-progress-value { + background-color: $grey; + } + + &::-moz-progress-bar { + background-color: $grey; + } +} + +.card { + $card-border-color: lighten($grey-darker, 5); + border: $border-width solid $card-border-color; + border-radius: $radius; + + .card-image { + img { + border-radius: $radius $radius 0 0; + } + } + + .card-header { + border-radius: $radius $radius 0 0; + } + + .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; +} + +.message-body { + border-width: $border-width; + border-color: $grey; +} + +.navbar { + border-radius: $radius; + + &.is-transparent { + background-color: transparent; + } + + @include touch { + .navbar-menu { + background-color: inherit; + } + } + + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + @include touch { + .navbar-item, + .navbar-link { + color: rgba($color-invert, 0.75); + + &.is-active { + color: $color-invert; + } + } + } + } + } +} + +.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: $background; + } + } + + &.is-toggle { + li a { + border-width: $border-width; + margin-bottom: 0; + } + + li + li { + margin-left: -$border-width; + } + } +} diff --git a/sass/_vendor/solar/_variables.scss b/sass/_vendor/solar/_variables.scss new file mode 100644 index 0000000..f7642d2 --- /dev/null +++ b/sass/_vendor/solar/_variables.scss @@ -0,0 +1,117 @@ +//////////////////////////////////////////////// +// DARKLY +//////////////////////////////////////////////// +$grey-lighter: #fdf6e3; +$grey-light: #eee8d5; +$grey: #839496; +$grey-alt: #586e75; +$grey-dark: #073642; +$grey-darker: #002b36; + +$orange: #cb4b16; +$yellow: #b58900; +$green: #859900; +$cyan: #2aa198; +$blue: #268bd2; +$purple: #6c71c4; +$red: #d33682; + +$black-bis: rgb(18, 18, 18); + +$primary: $cyan !default; +$warning: $orange; +$info: $blue; +$yellow-invert: #fff; + +$light: $grey-lighter; +$dark: darken($grey-darker, 3); + +$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: 0.4em; +$radius-large: 8px; + +$body-size: 15px; +$size-7: 0.85em; + +$title-weight: 500; +$subtitle-weight: 400; +$subtitle-color: $grey-dark; + +$border-width: 2px; +$border: $grey-dark; + +$body-background-color: $grey-darker; +$background: $grey-dark; +$footer-background-color: $background; + +$title-color: $grey; +$subtitle-color: $grey-alt; +$subtitle-strong-color: $grey-light; + +$text: $grey; +$text-light: lighten($text, 10); +$text-strong: darken($text, 5); + +$box-shadow: none; +$box-background-color: $grey-dark; + +$card-shadow: none; +$card-background-color: $grey-darker; +$card-header-box-shadow: none; +$card-header-background-color: rgba($black-bis, 0.2); +$card-footer-background-color: rgba($black-bis, 0.2); + +$link: $yellow; +$link-hover: $grey-light; +$link-hover-border: $grey-light; +$link-focus: darken($grey-light, 10); +$link-focus-border: $grey-light; +$link-active: darken($grey-light, 10); + +$button-color: $grey; +$button-background-color: $background; +$button-border-color: $grey; + +$input-color: $grey; +$input-icon-color: darken($grey-light, 10); +$input-background-color: $grey-lighter; +$input-border-color: darken($grey-light, 10); +$input-hover-color: $grey-light; +$input-disabled-background-color: $grey-dark; +$input-disabled-border-color: $grey-dark; + +$table-color: $text; +$table-head-color: $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, 4); + +$pagination-border-color: $border; + +$navbar-background-color: $grey-dark; +$navbar-item-color: $grey; +$navbar-item-hover-color: $grey-lighter; +$navbar-item-active-color: $grey-lighter; +$navbar-item-active-background-color: transparent; +$navbar-item-hover-background-color: transparent; +$navbar-dropdown-border-top: 1px solid $grey-darker; +$navbar-divider-background-color: $grey-darker; +$navbar-dropdown-arrow: #fff; +$navbar-dropdown-background-color: $grey-dark; +$navbar-dropdown-item-hover-color: $grey-lighter; +$navbar-dropdown-item-hover-background-color: lighten($grey-darker, 4); +$navbar-dropdown-item-active-background-color: lighten($grey-darker, 4); +$navbar-dropdown-item-active-color: $grey-lighter; + +$dropdown-content-background-color: $background; +$dropdown-item-color: $text; +$dropdown-item-hover-color: $link-hover; + +$bulmaswatch-import-font: true !default; diff --git a/sass/_vendor/superhero/_overrides.scss b/sass/_vendor/superhero/_overrides.scss new file mode 100644 index 0000000..6488d92 --- /dev/null +++ b/sass/_vendor/superhero/_overrides.scss @@ -0,0 +1,123 @@ +// Overrides +@if $bulmaswatch-import-font { + @import url("https://fonts.googleapis.com/css?family=Lato:300, 400, 700"); +} + +.section { + background-color: $body-background-color; +} + +.hero { + background-color: $body-background-color; +} + +.button { + &.is-hovered, + &:hover { + background-color: darken($button-background-color, 3%); + } + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + &.is-hovered, + &:hover { + background-color: darken($color, 3%); + } + } + } + + &.is-loading:after { + border-color: transparent transparent $grey-light $grey-light; + } +} + +.label { + color: $grey-lighter; +} + +.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; + } + } + } +} + +.card { + border: 1px solid $border; + border-radius: $radius; + + .card-image { + img { + border-radius: $radius $radius 0 0; + } + } + + .card-header { + border-radius: $radius $radius 0 0; + } + + .card-footer, + .card-footer-item { + border-width: 1px; + border-color: $border; + } +} + +.modal-card-body { + background-color: $body-background-color; +} + +.navbar { + &.is-transparent { + background-color: transparent; + } + + @include touch { + .navbar-menu { + background-color: transparent; + } + } + + @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; + + &.is-active { + color: rgba($color-invert, 0.7); + } + } + + .navbar-burger { + span { + background-color: $color-invert; + } + } + } + } + } +} + +.hero { + .navbar { + .navbar-dropdown { + .navbar-item { + color: $grey-lighter; + } + } + } +} diff --git a/sass/_vendor/superhero/_variables.scss b/sass/_vendor/superhero/_variables.scss new file mode 100644 index 0000000..0bbabbd --- /dev/null +++ b/sass/_vendor/superhero/_variables.scss @@ -0,0 +1,94 @@ +//////////////////////////////////////////////// +// SUPERHERO +//////////////////////////////////////////////// +$grey-darker: #1f2d3b; +$grey-dark: #2b3e50; +$grey: #4e5d6c; +$grey-light: #8694a4; +$grey-lighter: #dee5ed; + +$orange: #df691a; +$yellow: #f0ad4e; +$green: #5cb85c; +$blue: #5bc0de; +$red: #d9534f; + +$primary: $orange !default; + +$dark: darken($grey-darker, 3); + +$title-color: $grey-lighter; +$title-weight: 400; +$subtitle-strong-color: $grey-lighter; +$subtitle-color: darken($grey-lighter, 10); +$subtitle-strong-color: darken($grey-lighter, 10); + +$background: $grey-dark; +$body-background-color: $grey-darker; +$footer-background-color: $background; + +$border: $grey; + +$family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; + +$text: $grey-lighter; +$text-strong: darken($grey-lighter, 10); +$text-light: $grey-light; + +$box-background-color: $background; + +$card-shadow: none; +$card-background-color: darken($body-background-color, 1); +$card-header-box-shadow: none; +$card-header-background-color: darken($body-background-color, 3); +$card-footer-background-color: darken($body-background-color, 3); + +$link: $grey-light; +$link-hover: $grey-lighter; +$link-focus: $grey-lighter; +$link-active: $grey-lighter; + +$button-color: $grey-lighter; +$button-background-color: $grey; +$button-border-color: $grey; + +$button-hover-border: transparent; +$button-active-border-color: transparent; + +$radius: 0; +$radius-small: 0; + +$input-hover-color: $link-hover; + +$table-color: $text; +$table-head-color: $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, 4); + +$navbar-background-color: $background; +$navbar-item-color: $text; +$navbar-item-hover-color: $grey-light; +$navbar-item-active-color: $primary; +$navbar-item-hover-background-color: rgba($grey-darker, 0.1); +$navbar-item-active-background-color: rgba($grey-darker, 0.1); +$navbar-dropdown-item-hover-color: $grey-light; +$navbar-dropdown-item-active-color: $primary; +$navbar-dropdown-background-color: $background; +$navbar-dropdown-arrow: currentColor; + +$dropdown-content-background-color: $background; +$dropdown-item-color: $text; +$dropdown-item-hover-color: $text-light; + +$tabs-toggle-link-active-background-color: $background; +$tabs-toggle-link-active-border-color: $border; +$tabs-toggle-link-active-color: #fff; +$tabs-boxed-link-active-background-color: $body-background-color; + +$pagination-color: $link; +$pagination-border-color: $border; + +$bulmaswatch-import-font: true !default; diff --git a/sass/lux.scss b/sass/lux.scss new file mode 100644 index 0000000..29add62 --- /dev/null +++ b/sass/lux.scss @@ -0,0 +1,5 @@ +@import "./_vendor/lux/variables"; +@import "./_vendor/bulma-0.7.4/_bulma.sass"; +@import "./_vendor/lux/overrides"; + +@import "./blog"; diff --git a/sass/slate.scss b/sass/slate.scss new file mode 100644 index 0000000..2c717fc --- /dev/null +++ b/sass/slate.scss @@ -0,0 +1,5 @@ +@import "./_vendor/slate/variables"; +@import "./_vendor/bulma-0.7.4/_bulma.sass"; +@import "./_vendor/slate/overrides"; + +@import "./blog"; diff --git a/sass/solar.scss b/sass/solar.scss new file mode 100644 index 0000000..4d5e98a --- /dev/null +++ b/sass/solar.scss @@ -0,0 +1,5 @@ +@import "./_vendor/solar/variables"; +@import "./_vendor/bulma-0.7.4/_bulma.sass"; +@import "./_vendor/solar/overrides"; + +@import "./blog"; diff --git a/sass/superhero.scss b/sass/superhero.scss new file mode 100644 index 0000000..cb5c7bf --- /dev/null +++ b/sass/superhero.scss @@ -0,0 +1,5 @@ +@import "./_vendor/superhero/variables"; +@import "./_vendor/bulma-0.7.4/_bulma.sass"; +@import "./_vendor/superhero/overrides"; + +@import "./blog"; diff --git a/templates/index_macros.html b/templates/index_macros.html index e1a405a..91337de 100644 --- a/templates/index_macros.html +++ b/templates/index_macros.html @@ -88,7 +88,7 @@ {% if config.build_search_index %}
- +
diff --git a/templates/post_macros.html b/templates/post_macros.html index 98a9281..e25bd02 100644 --- a/templates/post_macros.html +++ b/templates/post_macros.html @@ -15,10 +15,23 @@

- {% if page.extra.author %} - {{ page.extra.author }} - {% endif %} {{ page.date | date(format="%F") }} + {% if page.taxonomies.authors %} + + {% for author in page.taxonomies.authors %} + {{ author }} + {% 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 %} {{ self::read_time(page=page) }}
diff --git a/theme.toml b/theme.toml index b700251..4368acd 100644 --- a/theme.toml +++ b/theme.toml @@ -4,4 +4,4 @@ license = "MIT" min_version = "0.6.0" [extra] -zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex"] +zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex", "lux", "slate", "solar", "superhero"]