commit 536c3856e11f3f792cabfb14f0a094a638b7f3f4 Author: Robert Clarke Date: Fri May 3 23:36:05 2019 +0000 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d298be1 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +public/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..9ed0d46 --- /dev/null +++ b/README.md @@ -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. \ No newline at end of file diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..88f5f93 --- /dev/null +++ b/config.toml @@ -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 \ No newline at end of file diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..32fcd0a --- /dev/null +++ b/content/_index.md @@ -0,0 +1,3 @@ ++++ +paginate_by = 5 ++++ \ No newline at end of file diff --git a/content/some-article.md b/content/some-article.md new file mode 100644 index 0000000..a5a1e1e --- /dev/null +++ b/content/some-article.md @@ -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. + +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. diff --git a/content/some-other-article.md b/content/some-other-article.md new file mode 100644 index 0000000..9dc1056 --- /dev/null +++ b/content/some-other-article.md @@ -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. + +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. diff --git a/sass/_blog.scss b/sass/_blog.scss new file mode 100644 index 0000000..c30a253 --- /dev/null +++ b/sass/_blog.scss @@ -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%; +} + diff --git a/sass/_vendor/bulma-0.7.4/CHANGELOG.md b/sass/_vendor/bulma-0.7.4/CHANGELOG.md new file mode 100644 index 0000000..7fa0bae --- /dev/null +++ b/sass/_vendor/bulma-0.7.4/CHANGELOG.md @@ -0,0 +1,1162 @@ +# Bulma Changelog + +## 0.7.3 + +### New features + +* #2145 Fix #372 -> New indeterminate progress bars +* #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element +* #592 -> Give arbitrary elements access to the image/ratio classes +* #1682 Fix #1681 -> Adds disabled styles for `
` +* #2201 Fix #1875 -> `.buttons` and `.tags` group sizing (`.are-small`, `.are-medium`, `.are-large`) + +### Improvements + +* #1978 Fix #1696 -> Force `box-sizing: border-box` on `details` element +* #2167 Fix #1878 -> New `$footer-padding` variable +* #2168 -> New `$input-placeholder-color` and `$input-disabled-placeholder-color` variables + +### Bug fixes + +* #2157 Fix #1656 -> Allow border radius if only one `.control` in `.field` +* #2091 Fix #2091 -> Remove CSS rule which causes `.tag.has-addons` to not work correctly +* #2186 Fix #1130 -> Prevent `.dropdown` links underlining in `.message` component +* Fix #2154 -> Move `.hero.is-fullheight-with-navbar` to `navbar.sass` file + +### Deprecation + +* `.control.has-icon` deprecated in favor of `.control.has-icons` + +## 0.7.2 + +### New features + +* #1884 New `$navbar-burger-color` variable +* #1679 Add breakpoint based column gaps +* #1905 Fix `modal` for IE11 #1902 +* #1919 New `is-arrowless` class for navbar items +* #1949 New `is-fullheight-with-navbar` class for heros +* #1764 New `.is-sr-only` helper +* #2109 Add and use `$navbar-breakpoint` variable +* New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height` +* #1720 Add list element feature +* #2123 Add `.content ol` types: `.is-lower-roman`, `.is-upper-roman`, `.is-lower-alpha`, `.is-upper-alpha`, and support for the `type=` HTML attribute + +### Improvements + +* #1964 Allow `.notification` to have a `.dropdown-item` +* #1999 Change `$border` to `$grey-lighter` in mixins +* #2085 `.media-content` will allow scrolling horizontally if the content is too wide +* #1744 Fix #1710 by using `$table-striped-row-even-hover-background-color` only for even rows +* #2074 Allow `