diff --git a/README.md b/README.md
index 5c4edd0..3254cf9 100644
--- a/README.md
+++ b/README.md
@@ -149,12 +149,19 @@ In extra, setting `zulma_theme` to a valid value will change the current colour
- pulse
- simplex
-Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
+All valid themes can also be found under the `extras.zulma_themes` variable in the `config.toml`. 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"
```
+Additionally, in extra, you can also set the `zulma_allow_theme_selection` boolean. Setting this to true will allow a menu in the footer to allow users to select their own theme. This requires javascript to be enabled to function; if the page detects javascript is disabled on the clients machine, it will hide itself.
+
+```toml
+[extra]
+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/). 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
index 88f5f93..aac6322 100644
--- a/config.toml
+++ b/config.toml
@@ -2,4 +2,13 @@
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
+
+build_search_index = true
+
+[extra]
+zulma_title = "Blog"
+zulma_brand = { image = "$BASE_URL/images/bulma.png", text = "Home" }
+zulma_theme = "darkly"
+zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex"]
+zulma_allow_theme_selection = true
\ No newline at end of file
diff --git a/content/_index.md b/content/_index.md
deleted file mode 100644
index 32fcd0a..0000000
--- a/content/_index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-+++
-paginate_by = 5
-+++
\ No newline at end of file
diff --git a/content/some-article.md b/content/some-article.md
index a5a1e1e..e222fac 100644
--- a/content/some-article.md
+++ b/content/some-article.md
@@ -1,10 +1,6 @@
+++
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.
diff --git a/content/some-other-article.md b/content/some-other-article.md
index 9dc1056..61d1946 100644
--- a/content/some-other-article.md
+++ b/content/some-other-article.md
@@ -1,10 +1,6 @@
+++
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.
diff --git a/sass/_blog.scss b/sass/_blog.scss
index 7158dda..0678f51 100644
--- a/sass/_blog.scss
+++ b/sass/_blog.scss
@@ -2,11 +2,6 @@ html,
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
- //background: #F0F2F4;
-}
-
-.navbar.is-white {
- //background: #F0F2F4;
}
.navbar-brand .brand-text {
@@ -26,17 +21,6 @@ body {
}
}
-.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;
@@ -74,10 +58,7 @@ body {
.article-footer {
font-style: italic;
padding: 1.5rem;
-
- .columns {
- width: 100%;
- }
+ width:100%;
.button,
.tag {
@@ -128,4 +109,9 @@ body {
input#search::placeholder{
color: $grey-darker;
+}
+
+.footer{
+ margin-top: 4rem;
+ padding: 2rem;
}
\ No newline at end of file
diff --git a/static/js/switchcss.js b/static/js/switchcss.js
new file mode 100644
index 0000000..403ece2
--- /dev/null
+++ b/static/js/switchcss.js
@@ -0,0 +1,42 @@
+const THEME_KEY = "ZULMA_THEME";
+
+function changeTheme(themeName) {
+ let alternates = [];
+
+ document.querySelectorAll('link.stylesheet').forEach(element => {
+ if (element.id === themeName) {
+ element.media = '';
+ }
+ else {
+ alternates.push(element);
+ }
+ });
+
+ alternates.forEach(element => {
+ element.media = 'none';
+ });
+
+ saveTheme(themeName);
+}
+
+function saveTheme(themeName) {
+ localStorage.setItem(THEME_KEY, themeName);
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+ let theme = localStorage.getItem(THEME_KEY);
+ if (theme) {
+ changeTheme(theme);
+ document.querySelectorAll('#theme-select>option').forEach(element => {
+ if (element.value === theme) {
+ element.selected = 'selected';
+ }
+ });
+ }
+});
+
+window.addEventListener('load', () => {
+ document.getElementById('theme-select').onchange = function () {
+ changeTheme(this.value);
+ }
+});
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 8ae52dc..f52a8f4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,6 +5,7 @@
+ {% block head %}
@@ -15,28 +16,27 @@
{% block title %}{{ config.title }}{% endblock title %}
- {% if config.extra.zulma_theme %}
-
- {% else %}
-
- {% endif %}
+ {% for theme in config.extra.zulma_themes %}
+
+ {% endfor %}
+
+ {% block css %}
+ {{ index_macros::css() }}
+ {% endblock css %}
{% if config.generate_rss %}
{% endif %}
- {% block css %}
- {% if config.extra.zulma_theme %}
-
- {% else %}
-
- {% endif %}
- {% endblock css %}
-
+ {% block js %}
{% if config.build_search_index %}
- {% endif }
+ {% if config.extra.zulma_allow_theme_selection %}
+
+ {% endif %}
+ {% endif %}
+ {% endblock js %}
{% block extra_head %}
{% endblock extra_head %}
@@ -52,6 +52,7 @@
}
+ {% endblock head %}
@@ -84,6 +85,8 @@
{% endblock content %}
+ {{ index_macros::footer() }}
+
{% if config.build_search_index %}
diff --git a/templates/index_macros.html b/templates/index_macros.html
index 3ec0a81..2216021 100644
--- a/templates/index_macros.html
+++ b/templates/index_macros.html
@@ -76,6 +76,7 @@
{% endfor %}
{% endif %}
+
{% if config.build_search_index %}
@@ -91,4 +92,57 @@
{% endif %}
-{% endmacro navbar %}
\ No newline at end of file
+{% endmacro navbar %}
+
+{% macro footer() %}
+{% if config.extra.zulma_allow_theme_selection %}
+
+{% endif %}
+{% endmacro footer %}
+
+{% macro css() %}
+{% if config.extra.zulma_allow_theme_selection %}
+{% for theme in config.extra.zulma_themes %}
+{% if config.extra.zulma_theme %}
+{% set default_theme = config.extra.zulma_theme %}
+{% else %}
+{% set default_theme = "default" %}
+{% endif %}
+{% if default_theme == theme %}
+
+{% else %}
+
+{% endif %}
+{% endfor %}
+{% elif config.extra.zulma_theme %}
+
+{% else %}
+
+{% endif %}
+{% endmacro css %}
\ No newline at end of file
diff --git a/templates/post_macros.html b/templates/post_macros.html
index 15d43b7..98a9281 100644
--- a/templates/post_macros.html
+++ b/templates/post_macros.html
@@ -46,19 +46,21 @@
{% endmacro page_in_list %}
{% macro post_footer(page) %}
-