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.
This commit is contained in:
finga 2024-04-20 00:02:14 +02:00
parent be9da23070
commit 4aff0378ac
27 changed files with 408 additions and 334 deletions

9
.gitmodules vendored
View file

@ -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

View file

@ -1,3 +1,3 @@
# onders.org Zola theme # 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.

View file

@ -1,6 +1,5 @@
+++ +++
title = "Credits" title = "Credits"
template = "credits.html"
+++ +++
This website uses the This website uses the
@ -9,4 +8,6 @@ Zola theme.
### Technology ### Technology
* Websitegenerator: [zola](https://www.getzola.org/) * 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/)

1
sass/normalize.scss vendored Normal file
View file

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

22
sass/onders.org.scss Normal file
View file

@ -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";

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

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

View file

@ -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;
}

View file

@ -1,11 +1,13 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}
404
{% endblock title %}
{% block subtitle %}
<h2>404</h2>
{% endblock subtitle %}
{% block content %} {% 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 %} {% endblock content %}

View file

@ -1,12 +1,12 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <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="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ config.description }}"> <meta name="description" content="{{ config.description }}">
<title>{% block title %}{% endblock title %}</title> <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"> <link rel="icon" href="/favicon.png" type="image/png" sizes="16x16">
{% if config.generate_feed %} {% if config.generate_feed %}
<link rel="alternate" type="application/rss+xml" title="rss" href="/rss.xml"> <link rel="alternate" type="application/rss+xml" title="rss" href="/rss.xml">
@ -15,11 +15,24 @@
{% endblock js %} {% endblock js %}
</head> </head>
<body> <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 %} {% 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> </body>
</html> </html>

View file

@ -1,5 +1,6 @@
{% block js %} {% 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 %} {% 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>

View file

@ -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 %}

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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 %} {% 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>
<div class="level-right has-text-right"> {% endif %}
<ul>
<a href="{{ section.path }}">Reiseindex</a>
{% if page.lower %} {% 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> </div>
</navbar> {% endif %}
</div>
</nav>
{% endif %}

View file

@ -1,23 +1,33 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} {% 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 %} {% 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 %} {% 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 }} {{ page.content | safe }}
</div> {% if page.date %}
<div class="block">
{% include "comments.html" %} {% include "comments.html" %}
</div> {% endif %}
</div>
{% include "navbar.html" %}
{% endblock content %} {% endblock content %}

View file

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

View file

@ -1,4 +1,4 @@
<div class="gallery is-flex is-flex-wrap-wrap"> <div class="gallery">
{% for path in images %} {% for path in images %}
{% if section %} {% if section %}
{% set full_path = section.path ~ path %} {% set full_path = section.path ~ path %}
@ -7,61 +7,31 @@
{% set full_path = page.path ~ path %} {% set full_path = page.path ~ path %}
{% endif %} {% endif %}
{% set thumb = resize_image(path=full_path, width=120, height=120) %} {% 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> </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> </div>
{% endfor %} {% endfor %}
</div> </div>

View file

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

1
vendor/bulma vendored

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

1
vendor/milligram vendored Submodule

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

1
vendor/normalize.css vendored Submodule

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