Deprecate bulma in favor of normalize and milligram

Deprecate the bulma css framework in favor of normalize and
milligram. Adapt the templates to work with the new css libraries.

.gitmodules

@@ -1,3 +1,6 @@
-[submodule "vendor/bulma"]
+[submodule "vendor/normalize.css"]
-	path = vendor/bulma
+	path = vendor/normalize.css
-	url = https://github.com/jgthms/bulma.git
+	url = https://github.com/necolas/normalize.css
+[submodule "vendor/milligram"]
+	path = vendor/milligram
+	url = https://github.com/milligram/milligram

README.md

@@ -1,3 +1,3 @@
 # onders.org Zola theme
 
-Before using it make sure you update init the Bulma submodule.
+Before using it make sure you update init the submodules.

content/credits.md

@@ -1,6 +1,5 @@
 +++
 title = "Credits"
-template = "credits.html"
 +++
 
 This website uses the
@@ -9,4 +8,6 @@ Zola theme.
 
 ### Technology
 * Websitegenerator: [zola](https://www.getzola.org/)
-* CSS Framework: [bulma](https://www.bulma.io/)
+* CSS Frameworks
+  * [normalize.css](https://necolas.github.io/normalize.css/)
+  * [milligram.io](https://milligram.io/)

sass/normalize.scss

@@ -0,0 +1 @@
+@import "../vendor/normalize.css/normalize";

sass/onders.org.scss

@@ -0,0 +1,22 @@
+@import "onders.org/color";
+
+@import "../vendor/milligram/src/Base";
+@import "../vendor/milligram/src/Blockquote";
+@import "../vendor/milligram/src/Button";
+@import "../vendor/milligram/src/Code";
+@import "../vendor/milligram/src/Divider";
+@import "../vendor/milligram/src/Form";
+@import "../vendor/milligram/src/Grid";
+@import "../vendor/milligram/src/Image";
+@import "../vendor/milligram/src/Link";
+@import "../vendor/milligram/src/List";
+@import "../vendor/milligram/src/Spacing";
+@import "../vendor/milligram/src/Table";
+@import "../vendor/milligram/src/Typography";
+@import "../vendor/milligram/src/Utility";
+
+@import "onders.org/layout";
+@import "onders.org/modal";
+@import "onders.org/gallery";
+@import "onders.org/util";
+@import "onders.org/dark";

sass/onders.org/_color.scss

@@ -0,0 +1,13 @@
+$color-initial: #eee !default;
+$color-primary: #4d4dff !default;
+$color-secondary: #606c76 !default;
+$color-tertiary: #f4f5f6 !default;
+$color-quaternary: #9b4dca !default;
+$color-quinary: #505a62 !default;
+$color-black: #000 !default;
+
+$color-dark-initial: #333 !default;
+$color-dark-primary: #7777ff !default;
+$color-dark-secondary: #d5d9dd !default;
+$color-dark-tertiary: #5c6670 !default;
+$color-dark-quaternary: #a662d0 !default;

sass/onders.org/_dark.scss

@@ -0,0 +1,18 @@
+@media (prefers-color-scheme: dark) {
+    html, body {
+        background-color: $color-dark-initial;
+        color: $color-dark-secondary;
+    }
+
+    a {
+        color: $color-dark-primary;
+    }
+
+    a:visited {
+        color: $color-dark-quaternary;
+    }
+
+    a:hover {
+        color: $color-dark-tertiary;
+    }
+}

sass/onders.org/_gallery.scss

@@ -0,0 +1,131 @@
+div.gallery {
+    width: calc(100% + 10px);
+    margin-left: -5px;
+    line-height: 0;
+    margin-bottom: 2.5rem;
+}
+
+div.gallery img.thumbnail {
+    padding: 5px;
+}
+
+div.gallery a img.thumbnail:hover {
+    box-shadow: 0 0 0px $color-tertiary !important;
+    transform: scale(1.1);
+    transition: transform .2s;
+}
+
+div.lightbox {
+    opacity: 0;
+    z-index: 700;
+    transition: opacity 0.2s linear;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba($color-black, 0.7);
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        -webkit-backdrop-filter: blur(5px);
+        backdrop-filter: blur(5px);
+    }
+}
+
+div.lightbox:target {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+div.lightbox a.full {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+div.lightbox span {
+    font-size: 2em;
+    line-height: normal;
+    position: absolute;
+    color: $color-tertiary;
+    cursor: pointer;
+}
+
+div.lightbox span:hover {
+    color: $color-secondary;
+}
+
+
+div.lightbox span.close {
+    z-index: 900;
+    top: 0;
+    right: 0;
+    padding: .7em 1em;
+}
+
+div.lightbox span.close:before {
+    content: "✖";
+    font-size: 1.2em;
+}
+
+div.lightbox span.prev {
+    z-index: 800;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    font-size: 6em;
+    height: 100%;
+    padding: 0 .3em;
+}
+
+div.lightbox span.prev:before {
+    content: "‹";
+}
+
+div.lightbox span.end:before {
+    content:  "⟳";
+    font-size: .7em;
+}
+
+div.lightbox span.next {
+    z-index: 800;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    font-size: 6em;
+    height: 100%;
+    padding: 0 .3em;
+}
+
+div.lightbox span.next:before {
+    content: "›";
+}
+
+div.lightbox span.start:before {
+    content:  "⟲";
+    font-size: .7em;
+}
+
+div.lightbox div.image {
+    display: flex;
+    justify-content: center;
+    width: 80%;
+    height: 80%;
+}
+
+div.lightbox div.image img {
+    filter: drop-shadow(0 0 10px $color-black);
+    object-fit: contain;
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+}

sass/onders.org/_layout.scss

@@ -0,0 +1,30 @@
+html {
+    background-color: $color-initial;
+}
+
+header {
+    padding-top: 7rem;
+}
+
+nav {
+    margin-bottom: 2rem;
+}
+
+ul {
+    line-height: 2rem
+}
+
+footer ul {
+    list-style: none;
+    font-size: 1.2rem;
+    text-align: center;
+    line-height: 1rem
+}
+
+a:visited {
+    color: $color-quaternary;
+}
+
+a:hover {
+    color: $color-quinary;
+}

sass/onders.org/_modal.scss

@@ -0,0 +1,46 @@
+div.modal-thumbnail {
+    margin-bottom: 2.5rem;
+}
+
+div.modal {
+    opacity: 0;
+    z-index: 900;
+    position: fixed;
+    transition: opacity 0.2s linear;
+    height: 100%;
+    width: 100%;
+    background-color: rgba($color-black, 0.5);
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    text-align: center;
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+            -webkit-backdrop-filter: blur(5px);
+            backdrop-filter: blur(5px);
+    }
+}
+
+div.modal a {
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+}
+
+div.modal a img {
+    display: inline-block;
+    box-shadow: 0 0 20px $color-black;
+    max-width: 90%;
+    max-height: 90%;
+    vertical-align: middle;
+}
+
+span.spacer {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+div.modal:target {
+    opacity: 1;
+    pointer-events: auto;
+}

sass/onders.org/_util.scss

@@ -0,0 +1,3 @@
+.align-right {
+    text-align: right;
+}

sass/style.scss

@@ -1,147 +0,0 @@
-@charset "utf-8";
-@import "../vendor/bulma/bulma.sass";
-
-html, .navbar, .footer {
-    background-color: $light;
-}
-
-.footer {
-    padding-bottom: 0;
-}
-
-a:visited {
-  color: hsl(280, 100%, 50%);
-}
-
-@media (prefers-color-scheme: dark) {
-    html, .navbar, .footer, p, strong, .title, li {
-        background-color: $dark;
-        color: $white;
-    }
-
-    .subtitle, a:hover {
-        color: $light;
-    }
-
-    a {
-        color: hsl(217, 71%, 70%);
-    }
-}
-
-.lightbox {
-    opacity: 0;
-    z-index: 900;
-    position: fixed;
-    transition: opacity 0.2s linear;
-    height: 100%;
-    width: 100%;
-    background-color: rgba($black, 0.5);
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
-            -webkit-backdrop-filter: blur(5px);
-            backdrop-filter: blur(5px);
-    }
-}
-
-.lightbox span.spacer {
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-}
-
-.lightbox img {
-    display: inline-block;
-    box-shadow: 0 0 20px $black;
-    max-width: 90%;
-    max-height: 90%;
-    width: auto;
-    vertical-align: middle;
-    @include touch {
-        margin-top: 35px;
-        max-height: 80%;
-    }
-}
-
-.lightbox a {
-    font-size: $size-1;
-    color: $light;
-    z-index: 900;
-    @include touch {
-        height: 100%;
-        width: 50%;
-        font-size: $size-3;
-    }
-}
-
-.lightbox a.lightbox-nav-previous {
-    z-index: 900;
-    @include touch {
-        position: absolute;
-        left: 0%;
-        font-size: $size-3;
-    }
-}
-
-.lightbox a.lightbox-nav-next {
-    z-index: 900;
-    @include touch {
-        position: absolute;
-        left: 50%;
-    }
-}
-
-.lightbox a.close {
-    display: block;
-    height: 100%;
-    width: 100%;
-    z-index: 999;
-}
-
-.lightbox a.delete {
-    z-index: 999;
-    position: fixed;
-    top: 1%;
-    right: 1%;
-}
-
-.lightbox:target {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.lightbox-previous {
-    position: absolute;
-    height: 100%;
-    width: 50%;
-    top: 0%;
-    left: 0%;
-}
-
-.lightbox-next {
-    position: absolute;
-    height: 100%;
-    width: 50%;
-    top: 0%;
-    left: 50%;
-}
-
-.gallery {
-    gap: $gap / 4;
-}
-
-.thumbnail {
-    width: 120px;
-    height: 120px;
-    vertical-align: middle;
-    transition: transform .2s;
-}
-
-.thumbnail:hover {
-    transform: scale(1.1);
-}
-
-.isso-postbox .form-wrapper .textarea-wrapper .textarea {
-    overflow-y: auto;
-}

templates/404.html

@@ -1,11 +1,13 @@
 {% extends "base.html" %}
 
+{% block title %}
+404
+{% endblock title %}
+
+{% block subtitle %}
+<h2>404</h2>
+{% endblock subtitle %}
+
 {% block content %}
-<navbar class="navbar level">
+Diese URL führt zu nichts!
-  <div class="level-left">
-    <a href="{{ config.base_url }}">home</a>
-  </div>
-</navbar>
-<h1 class="title">404</h1>
-<h2 class="subtitle">Diese URL führt zu nichts!</h2>
 {% endblock content %}

templates/base.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="utf-8">
-    <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="{{ config.description }}">
     <title>{% block title %}{% endblock title %}</title>
-    <link href="{{ config.base_url | safe}}/style.css" rel="stylesheet">
+    <link href="{{ get_url(path="normalize.css", trailing_slash=false) }}" rel="stylesheet">
+    <link href="{{ config.base_url | safe}}/onders.org.css" rel="stylesheet">
     <link rel="icon" href="/favicon.png" type="image/png" sizes="16x16">
     {% if config.generate_feed %}
     <link rel="alternate" type="application/rss+xml" title="rss" href="/rss.xml">
@@ -15,11 +15,24 @@
     {% endblock js %}
   </head>
   <body>
-    <section class="section">
+    <main class="container">
-      <div class="container">
+      <header>
+        <h1>{{ config.title }}</h1>
+        {% block subtitle %}{% endblock subtitle %}
+      </header>
+      {% include "navbar.html" %}
       {% block content %} {% endblock content %}
-      </div>
+      {% include "navbar.html" %}
-      {% include "footer.html" %}
+      <footer>
-    </section>
+        <ul>
+          <li>
+            <a href="/credits">credits</a>
+          </li>
+          <li>
+            <a href="/rss.xml">RSS feed</a>
+          </li>
+        </ul>
+      </footer>
+    </main>
   </body>
 </html>

templates/comments.html

@@ -1,5 +1,6 @@
 {% block js %}
-<script data-isso-lang="de" data-isso-require-author="true" src="{{ config.base_url }}/comments/js/embed.min.js"></script>
+<script data-isso-lang="de" src="{{ config.base_url }}/comments/js/embed.min.js"></script>
 {% endblock js %}
 
-<section id="isso-thread"></section>
+{# <embed type="text/html" src="http://localhost:3000/"> #}
+<section data-title="{{ page.title }}" data-isso-id="{{ page.path }}" id="isso-thread"></section>

templates/credits.html

@@ -1,25 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}
-{{ config.title }} - {{ page.title }}
-{% endblock title %}
-
-{% block content %}
-<h1 class="title">{{ config.title }}</h1>
-<h2 class="subtitle">{{ page.title }}</h2>
-<navbar class="navbar level">
-  <div class="level-left">
-    <a href="{{ config.base_url }}">home</a>
-  </div>
-</navbar>
-<div class="content">
-  <div class="block">
-    {{ page.content | safe }}
-  </div>
-</div>
-<navbar class="navbar level">
-  <div class="level-left">
-    <a href="{{ config.base_url }}">home</a>
-  </div>
-</navbar>
-{% endblock content %}

templates/footer.html

@@ -1,10 +0,0 @@
-<footer class="footer has-text-centered is-size-7">
-  <ul class="has-text-centered">
-    <li>
-      <a href="/credits">credits</a>
-    </li>
-    <li>
-      <a href="/rss.xml">RSS feed</a>
-    </li>
-  </ul>
-</footer>

templates/header.html

@@ -1,12 +0,0 @@
-<header class="header">
-  <h1 class="title">{{ config.title }}</h1>
-  {% if section.title %}
-  <h2 class="subtitle">{{ section.title }}</h2>
-  {% endif %}
-  {% if page.title %}
-  <h3 class="subtitle">{{ page.title }}</h3>
-  {% endif %}
-  <navbar class="navbar">
-    <a href="{{ config.base_url }}">home</a>
-  </navbar>
-</header>

templates/index.html

@@ -5,7 +5,6 @@
 {% endblock title %}
 
 {% block content %}
-<h1 class="title">{{ config.title }}</h1>
 <div class="content">
   <div class="block">
     {{ section.content | safe }}

templates/navbar.html

@@ -1,19 +1,31 @@
-{% set section = get_section(path=page.ancestors | last) %}
+{% if page.ancestors %}
-<navbar class="navbar level">
+{% set ancestor = get_section(path=page.ancestors | last) %}
-  <div class="level-left">
+{% endif %}
-    <ul>
+
-      <li><a href="{{ config.base_url }}">home</a></li>
+{% if current_path and current_path == "/" %}
+{% else %}
+<nav>
+  <div class="row">
+    <div class="column">
+      <a href="{{ config.base_url }}">home</a>
+    </div>
+    {% if ancestor.extra %}
+    <div class="column align-right">
+      <a href="{{ ancestor.path }}">Reiseindex</a>
+    </div>
+    {% endif %}
+  </div>
+  <div class="row">
     {% if page.higher %}
-      <li><a href="{{ page.higher.path }}">{{ page.higher.title }}</a></li>
+    <div class="column">
-      {% endif %}
+      <a href="{{ page.higher.path }}">{{ page.higher.title }}</a>
-    </ul>
     </div>
-  <div class="level-right has-text-right">
+    {% endif %}
-    <ul>
-      <a href="{{ section.path }}">Reiseindex</a>
     {% if page.lower %}
-      <li><a href="{{ page.lower.path }}">{{ page.lower.title }}</a></li>
+    <div class="column align-right">
-      {% endif %}
+      <a href="{{ page.lower.path }}">{{ page.lower.title }}</a>
-    </ul>
     </div>
-</navbar>
+    {% endif %}
+  </div>
+</nav>
+{% endif %}

templates/page.html

@@ -1,23 +1,33 @@
 {% extends "base.html" %}
 
 {% block title %}
-{% set section = get_section(path=page.ancestors | last) %}
+{% if page.ancestors %}
-{{ config.title }} - {{ section.title }} - {{ page.title }}: {{ page.date }}
+{% set ancestor = get_section(path=page.ancestors | last) %}
+{% if ancestor.extra %}
+{{ config.title }} | {{ page.date }} - {{ page.title }} ({{ ancestor.title }})
+{% else %}
+{{ config.title }} | {{ page.title }}
+{% endif %}
+{% endif %}
 {% endblock title %}
 
+{% block subtitle %}
+{% if page.ancestors %}
+{% set ancestor = get_section(path=page.ancestors | last) %}
+{% if ancestor.extra %}
+<h2>{{ ancestor.extra.start }} - {{ ancestor.extra.end }}: {{ ancestor.title }}</h2>
+{% else %}
+<h2>{{ page.title }}</h2>
+{% endif %}
+{% endif %}
+{% endblock subtitle %}
+
 {% block content %}
-{% set section = get_section(path=page.ancestors | last) %}
+{% if page.date %}
-<h1 class="title">{{ config.title }}</h1>
+<h3>{{ page.title }} ({{ page.date }})</h3>
-<h2 class="subtitle">{{ section.title }}</h2>
+{% endif %}
-{% include "navbar.html" %}
-<h3 class="subtitle">{{ page.title }} ({{ page.date }})</h3>
-<div class="content">
-  <div class="block">
 {{ page.content | safe }}
-  </div>
+{% if page.date %}
-  <div class="block">
 {% include "comments.html" %}
-  </div>
+{% endif %}
-</div>
-{% include "navbar.html" %}
 {% endblock content %}

templates/section.html

@@ -1,32 +1,24 @@
 {% extends "base.html" %}
 
 {% block title %}
-{{ config.title }} - {{ section.title }}
+{% if section.extra.start %}
+{{ config.title }} | {{ section.extra.start }} - {{ section.extra.end }}: {{ section.title }}
+{% else %}
+{{ config.title }}
+{% endif %}
 {% endblock title %}
 
+{% block subtitle %}
+{% if section.extra.start %}
+<h2>{{ section.extra.start }} - {{ section.extra.end }}: {{ section.title }}</h2>
+{% endif %}
+{% endblock subtitle %}
+
 {% block content %}
-<h1 class="title">{{ config.title }}</h1>
-<h2 class="subtitle">{{ section.title }}</h2>
-<navbar class="navbar level">
-  <div class="level-left">
-    <a href="{{ config.base_url }}">home</a>
-  </div>
-</navbar>
-<div class="content">
-  <div class="block">
 {{ section.content | safe }}
-  </div>
-  <div class="block">
 <ul>
   {% for page in section.pages | reverse %}
   <li><a href="{{ page.permalink | safe }}">{{ page.date | safe }} - {{ page.title | safe }}</a></li>
   {% endfor %}
 </ul>
-  </div>
-</div>
-<navbar class="navbar level">
-  <div class="level-left">
-    <a href="{{ config.base_url }}">home</a>
-  </div>
-</navbar>
 {% endblock content %}

templates/shortcodes/gallery.html

@@ -1,4 +1,4 @@
-<div class="gallery is-flex is-flex-wrap-wrap">
+<div class="gallery">
   {% for path in images %}
   {% if section %}
   {% set full_path = section.path ~ path %}
@@ -7,61 +7,31 @@
   {% set full_path = page.path ~ path %}
   {% endif %}
   {% set thumb = resize_image(path=full_path, width=120, height=120) %}
+  <a href="#{{ loop.index }}"><img class="thumbnail" src="{{ thumb.url }}"></a>
 
-  <div class="gallery-item">
+  <div class="lightbox" id="{{ loop.index }}">
-    <a href="#{{ path }}">
+    {% if loop.first and loop.last %}
-      <img src="{{ thumb.url }}" class="thumbnail" />
+    <a href="#" class="close full">
-    </a>
+      <div class="image">
-    <div class="lightbox has-text-centered" id="{{ path }}">
+          <img src="{{ path }}">
-      {% if images | length > 1 %}
-      <span class="spacer"></span>
-      {% if loop.first %}
-      <a href="#{{ images | nth(n=images | length - 1) }}" class="lightbox-nav-previous">
-        ⟳
-      </a>
-      {% else %}
-      <a href="#{{ images | nth(n=loop.index0 - 1) }}" class="lightbox-nav-previous">
-        &lt;
-      </a>
-      {% endif %}
-      <img src="{{ path }}" />
-      <a class="delete is-large" href="#"></a>
-      {% if loop.last %}
-      <a href="#{{ images | nth(n=0) }}" class="lightbox-nav-next">
-        ⟲
-      </a>
-      {% else %}
-      <a href="#{{ images | nth(n=loop.index) }}" class="lightbox-nav-next">
-        &gt;
-      </a>
-      {% endif %}
-      {% else %}
-      <a href="#" class="close">
-        <span class="spacer"></span>
-        <img src="{{ path }}" />
-      </a>
-      {% endif %}
-      {% if images | length > 1 %}
-      {% if loop.first %}
-      <a href="#{{ images | nth(n=images | length - 1) }}" class="is-desktop">
-        <span class="lightbox-previous"></span>
-      </a>
-      {% else %}
-      <a href="#{{ images | nth(n=loop.index0 - 1) }}" class="is-desktop">
-        <span class="lightbox-previous"></span>
-      </a>
-      {% endif %}
-      {% if loop.last %}
-      <a href="#{{ images | nth(n=0) }}" class="is-desktop">
-        <span class="lightbox-next"></span>
-      </a>
-      {% else %}
-      <a href="#{{ images | nth(n=loop.index) }}" class="is-desktop">
-        <span class="lightbox-next"></span>
-      </a>
-      {% endif %}
-      {% endif %}
       </div>
+    </a>
+    {% else %}
+    <a href="#"><span class="close"></span></a>
+    {% if loop.first %}
+    <a href="#{{ images | length }}"><span class="prev end"></span></a>
+    {% else %}
+    <a href="#{{ loop.index - 1 }}"><span class="prev"></span></a>
+    {% endif %}
+    {% if loop.last %}
+    <a href="#1"><span class="next start"></span></a>
+    {% else %}
+    <a href="#{{ loop.index + 1 }}"><span class="next"></span></a>
+    {% endif %}
+    <div class="image">
+      <img src="{{ path }}">
+    </div>
+    {% endif %}
   </div>
   {% endfor %}
 </div>

templates/shortcodes/modal.html

@@ -6,11 +6,11 @@
 {% endif %}
 {% set thumb = resize_image(path=full_path, width=400, height=400, op="fit") %}
 
-<div class="item">
+<div>
   <a href="#{{ path }}">
-    <img src="{{ thumb.url }}"/>
+    <img class="modal-thumbnail" src="{{ thumb.url }}"/>
   </a>
-  <div class="lightbox image has-text-centered" id="{{ path }}">
+  <div class="modal" id="{{ path }}">
     <a href="#" class="close">
       <span class="spacer"></span>
       <img src="{{ path }}" />

vendor/bulma

@@ -1 +0,0 @@
-Subproject commit 3958430d1baa0130d0f2c219172facbd22b73e1b

vendor/milligram

@@ -0,0 +1 @@
+Subproject commit d895f179623b56f3a741854998649c6d0c354533

vendor/normalize.css

@@ -0,0 +1 @@
+Subproject commit fc091cce1534909334c1911709a39c22d406977b