From 4aff0378ac9a84141121b777bfb7d1f9554dcf01 Mon Sep 17 00:00:00 2001 From: finga Date: Sat, 20 Apr 2024 00:02:14 +0200 Subject: [PATCH] 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 | 9 +- README.md | 2 +- content/credits.md | 5 +- sass/normalize.scss | 1 + sass/onders.org.scss | 22 +++++ sass/onders.org/_color.scss | 13 +++ sass/onders.org/_dark.scss | 18 ++++ sass/onders.org/_gallery.scss | 131 ++++++++++++++++++++++++++ sass/onders.org/_layout.scss | 30 ++++++ sass/onders.org/_modal.scss | 46 ++++++++++ sass/onders.org/_util.scss | 3 + sass/style.scss | 147 ------------------------------ templates/404.html | 16 ++-- templates/base.html | 31 +++++-- templates/comments.html | 5 +- templates/credits.html | 25 ----- templates/footer.html | 10 -- templates/header.html | 12 --- templates/index.html | 1 - templates/navbar.html | 46 ++++++---- templates/page.html | 42 +++++---- templates/section.html | 42 ++++----- templates/shortcodes/gallery.html | 76 +++++---------- templates/shortcodes/modal.html | 6 +- vendor/bulma | 1 - vendor/milligram | 1 + vendor/normalize.css | 1 + 27 files changed, 408 insertions(+), 334 deletions(-) create mode 100644 sass/normalize.scss create mode 100644 sass/onders.org.scss create mode 100644 sass/onders.org/_color.scss create mode 100644 sass/onders.org/_dark.scss create mode 100644 sass/onders.org/_gallery.scss create mode 100644 sass/onders.org/_layout.scss create mode 100644 sass/onders.org/_modal.scss create mode 100644 sass/onders.org/_util.scss delete mode 100644 sass/style.scss delete mode 100644 templates/credits.html delete mode 100644 templates/footer.html delete mode 100644 templates/header.html delete mode 160000 vendor/bulma create mode 160000 vendor/milligram create mode 160000 vendor/normalize.css diff --git a/.gitmodules b/.gitmodules index 5ba7570..2669f73 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ -[submodule "vendor/bulma"] - path = vendor/bulma - url = https://github.com/jgthms/bulma.git +[submodule "vendor/normalize.css"] + path = vendor/normalize.css + url = https://github.com/necolas/normalize.css +[submodule "vendor/milligram"] + path = vendor/milligram + url = https://github.com/milligram/milligram diff --git a/README.md b/README.md index 9ddc5b0..340dc58 100644 --- a/README.md +++ b/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. diff --git a/content/credits.md b/content/credits.md index 80fb826..87ac122 100644 --- a/content/credits.md +++ b/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/) diff --git a/sass/normalize.scss b/sass/normalize.scss new file mode 100644 index 0000000..dd7febd --- /dev/null +++ b/sass/normalize.scss @@ -0,0 +1 @@ +@import "../vendor/normalize.css/normalize"; diff --git a/sass/onders.org.scss b/sass/onders.org.scss new file mode 100644 index 0000000..39500c7 --- /dev/null +++ b/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"; diff --git a/sass/onders.org/_color.scss b/sass/onders.org/_color.scss new file mode 100644 index 0000000..b4a5b2a --- /dev/null +++ b/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; diff --git a/sass/onders.org/_dark.scss b/sass/onders.org/_dark.scss new file mode 100644 index 0000000..fdc0a9d --- /dev/null +++ b/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; + } +} diff --git a/sass/onders.org/_gallery.scss b/sass/onders.org/_gallery.scss new file mode 100644 index 0000000..6ebbe5e --- /dev/null +++ b/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; +} diff --git a/sass/onders.org/_layout.scss b/sass/onders.org/_layout.scss new file mode 100644 index 0000000..c5c9002 --- /dev/null +++ b/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; +} diff --git a/sass/onders.org/_modal.scss b/sass/onders.org/_modal.scss new file mode 100644 index 0000000..72792e7 --- /dev/null +++ b/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; +} diff --git a/sass/onders.org/_util.scss b/sass/onders.org/_util.scss new file mode 100644 index 0000000..f6cd83c --- /dev/null +++ b/sass/onders.org/_util.scss @@ -0,0 +1,3 @@ +.align-right { + text-align: right; +} diff --git a/sass/style.scss b/sass/style.scss deleted file mode 100644 index 4c5d133..0000000 --- a/sass/style.scss +++ /dev/null @@ -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; -} diff --git a/templates/404.html b/templates/404.html index 6bd0988..b5c9ed4 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,11 +1,13 @@ {% extends "base.html" %} +{% block title %} +404 +{% endblock title %} + +{% block subtitle %} +

404

+{% endblock subtitle %} + {% block content %} - -
- home -
- -

404

-

Diese URL führt zu nichts!

+Diese URL führt zu nichts! {% endblock content %} diff --git a/templates/base.html b/templates/base.html index b63d144..0be8872 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,12 +1,12 @@ - + - {% block title %}{% endblock title %} - + + {% if config.generate_feed %} @@ -15,11 +15,24 @@ {% endblock js %} -
-
- {% block content %} {% endblock content %} -
- {% include "footer.html" %} -
+
+
+

{{ config.title }}

+ {% block subtitle %}{% endblock subtitle %} +
+ {% include "navbar.html" %} + {% block content %} {% endblock content %} + {% include "navbar.html" %} + +
diff --git a/templates/comments.html b/templates/comments.html index 0600e3b..e4c98ce 100644 --- a/templates/comments.html +++ b/templates/comments.html @@ -1,5 +1,6 @@ {% block js %} - + {% endblock js %} -
+{# #} +
diff --git a/templates/credits.html b/templates/credits.html deleted file mode 100644 index 35fa3d7..0000000 --- a/templates/credits.html +++ /dev/null @@ -1,25 +0,0 @@ -{% extends "base.html" %} - -{% block title %} -{{ config.title }} - {{ page.title }} -{% endblock title %} - -{% block content %} -

{{ config.title }}

-

{{ page.title }}

- -
- home -
- -
-
- {{ page.content | safe }} -
-
- -
- home -
- -{% endblock content %} diff --git a/templates/footer.html b/templates/footer.html deleted file mode 100644 index fba31da..0000000 --- a/templates/footer.html +++ /dev/null @@ -1,10 +0,0 @@ - diff --git a/templates/header.html b/templates/header.html deleted file mode 100644 index e623825..0000000 --- a/templates/header.html +++ /dev/null @@ -1,12 +0,0 @@ -
-

{{ config.title }}

- {% if section.title %} -

{{ section.title }}

- {% endif %} - {% if page.title %} -

{{ page.title }}

- {% endif %} - - home - -
diff --git a/templates/index.html b/templates/index.html index d059f77..452c053 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,7 +5,6 @@ {% endblock title %} {% block content %} -

{{ config.title }}

{{ section.content | safe }} diff --git a/templates/navbar.html b/templates/navbar.html index c4d7e68..ae106ce 100644 --- a/templates/navbar.html +++ b/templates/navbar.html @@ -1,19 +1,31 @@ -{% set section = get_section(path=page.ancestors | last) %} - -
- +{% if page.ancestors %} +{% set ancestor = get_section(path=page.ancestors | last) %} +{% endif %} + +{% if current_path and current_path == "/" %} +{% else %} + +{% endif %} diff --git a/templates/page.html b/templates/page.html index 6c54f04..42f98fc 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,23 +1,33 @@ {% extends "base.html" %} {% block title %} -{% set section = get_section(path=page.ancestors | last) %} -{{ config.title }} - {{ section.title }} - {{ page.title }}: {{ page.date }} +{% if page.ancestors %} +{% 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 %} +

{{ ancestor.extra.start }} - {{ ancestor.extra.end }}: {{ ancestor.title }}

+{% else %} +

{{ page.title }}

+{% endif %} +{% endif %} +{% endblock subtitle %} + {% block content %} -{% set section = get_section(path=page.ancestors | last) %} -

{{ config.title }}

-

{{ section.title }}

-{% include "navbar.html" %} -

{{ page.title }} ({{ page.date }})

-
-
- {{ page.content | safe }} -
-
- {% include "comments.html" %} -
-
-{% include "navbar.html" %} +{% if page.date %} +

{{ page.title }} ({{ page.date }})

+{% endif %} +{{ page.content | safe }} +{% if page.date %} +{% include "comments.html" %} +{% endif %} {% endblock content %} diff --git a/templates/section.html b/templates/section.html index 56edc0a..9a53c36 100644 --- a/templates/section.html +++ b/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 %} +

{{ section.extra.start }} - {{ section.extra.end }}: {{ section.title }}

+{% endif %} +{% endblock subtitle %} + {% block content %} -

{{ config.title }}

-

{{ section.title }}

- -
- home -
- -
-
- {{ section.content | safe }} -
-
- -
-
- -
- home -
- +{{ section.content | safe }} + {% endblock content %} diff --git a/templates/shortcodes/gallery.html b/templates/shortcodes/gallery.html index 134fb2b..6d2c1cc 100644 --- a/templates/shortcodes/gallery.html +++ b/templates/shortcodes/gallery.html @@ -1,4 +1,4 @@ -
+
{% 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) %} + -
- - + diff --git a/templates/shortcodes/modal.html b/templates/shortcodes/modal.html index 63c9d75..5bf2ceb 100644 --- a/templates/shortcodes/modal.html +++ b/templates/shortcodes/modal.html @@ -6,11 +6,11 @@ {% endif %} {% set thumb = resize_image(path=full_path, width=400, height=400, op="fit") %} -
+