Create a theme out of my page
This commit is contained in:
commit
c3fd40c135
22 changed files with 452 additions and 0 deletions
11
config.toml
Normal file
11
config.toml
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
base_url = "https://blog.onders.org"
|
||||||
|
title = "blog.onders.org"
|
||||||
|
description = "My humble blog."
|
||||||
|
default_language = "en"
|
||||||
|
compile_sass = true
|
||||||
|
minify_html = true
|
||||||
|
generate_feed = true
|
||||||
|
feed_filename = "rss.xml"
|
||||||
|
|
||||||
|
[markdown]
|
||||||
|
external_links_target_blank = true
|
||||||
6
content/2023-something/_index.md
Normal file
6
content/2023-something/_index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
+++
|
||||||
|
title = "Title of some section"
|
||||||
|
sort_by = "date"
|
||||||
|
+++
|
||||||
|
|
||||||
|
Content of some section.
|
||||||
10
content/2023-something/day0/index.md
Normal file
10
content/2023-something/day0/index.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
+++
|
||||||
|
title = "Day 0"
|
||||||
|
date = 2023-02-06
|
||||||
|
+++
|
||||||
|
|
||||||
|
{{ modal(path="pic.jpg") }}
|
||||||
|
|
||||||
|
Some content...
|
||||||
|
|
||||||
|
{{ gallery(images=["pic.jpg", "pic.jpg", "pic.jpg"]) }}
|
||||||
BIN
content/2023-something/day0/pic.jpg
Normal file
BIN
content/2023-something/day0/pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 715 KiB |
4
content/_index.md
Normal file
4
content/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
+++
|
||||||
|
+++
|
||||||
|
|
||||||
|
The landing page...
|
||||||
12
content/credits.md
Normal file
12
content/credits.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
+++
|
||||||
|
title = "Credits"
|
||||||
|
template = "credits.html"
|
||||||
|
+++
|
||||||
|
|
||||||
|
This webiste uses the
|
||||||
|
[onders.org](https://git.onders.org/finga/onders.org_zola_theme.git)
|
||||||
|
Zola theme.
|
||||||
|
|
||||||
|
### Technology
|
||||||
|
* Websitegenerator: [zola](https://www.getzola.org/)
|
||||||
|
* CSS Framework: [bulma](https://www.bulma.io/)
|
||||||
147
sass/style.scss
Normal file
147
sass/style.scss
Normal file
|
|
@ -0,0 +1,147 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
@import "../vendor/bulma/bulma.sass";
|
||||||
|
|
||||||
|
html, .navbar, .footer {
|
||||||
|
background-color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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 a.delete {
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
11
templates/404.html
Normal file
11
templates/404.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<navbar class="navbar level">
|
||||||
|
<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 %}
|
||||||
24
templates/base.html
Normal file
24
templates/base.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="{{ config.description }}">
|
||||||
|
<title>{{ config.title }}</title>
|
||||||
|
<link href="{{ config.base_url | safe}}/style.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">
|
||||||
|
{% endif %}
|
||||||
|
{% block js %}
|
||||||
|
{% endblock js %}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
{% block content %} {% endblock content %}
|
||||||
|
</div>
|
||||||
|
{% include "footer.html" %}
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5
templates/comments.html
Normal file
5
templates/comments.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% block js %}
|
||||||
|
<script data-isso-lang="de" data-isso-require-author="true" src="{{ config.base_url }}/comments/js/embed.min.js"></script>
|
||||||
|
{% endblock js %}
|
||||||
|
|
||||||
|
<section id="isso-thread"></section>
|
||||||
5
templates/comments.html
Normal file
5
templates/comments.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% block js %}
|
||||||
|
<script data-isso-lang="de" data-isso-require-author="true" src="//away.onders.org/comments/js/embed.min.js"></script>
|
||||||
|
{% endblock js %}
|
||||||
|
|
||||||
|
<section id="isso-thread"></section>
|
||||||
21
templates/credits.html
Normal file
21
templates/credits.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% 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 %}
|
||||||
10
templates/footer.html
Normal file
10
templates/footer.html
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<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>
|
||||||
12
templates/header.html
Normal file
12
templates/header.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<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>
|
||||||
18
templates/index.html
Normal file
18
templates/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1 class="title">{{ config.title }}</h1>
|
||||||
|
<div class="content">
|
||||||
|
<div class="block">
|
||||||
|
{{ section.content | safe }}
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<ul>
|
||||||
|
{% for subsection in section.subsections | reverse %}
|
||||||
|
{% set subsection = get_section(path=subsection) %}
|
||||||
|
<li><a href="{{ subsection.path | safe }}">{{ subsection.title | safe }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
||||||
19
templates/navbar.html
Normal file
19
templates/navbar.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{% set section = get_section(path=page.ancestors | last) %}
|
||||||
|
<navbar class="navbar level">
|
||||||
|
<div class="level-left">
|
||||||
|
<ul>
|
||||||
|
<li><a href="{{ config.base_url }}">home</a></li>
|
||||||
|
{% if page.higher %}
|
||||||
|
<li><a href="{{ page.higher.path }}">{{ page.higher.title }}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="level-right has-text-right">
|
||||||
|
<ul>
|
||||||
|
<a href="{{ section.path }}">Reiseindex</a>
|
||||||
|
{% if page.lower %}
|
||||||
|
<li><a href="{{ page.lower.path }}">{{ page.lower.title }}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</navbar>
|
||||||
18
templates/page.html
Normal file
18
templates/page.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
{% set section = get_section(path=page.ancestors | last) %}
|
||||||
|
<h1 class="title">{{ config.title }}</h1>
|
||||||
|
<h2 class="subtitle">{{ section.title }}</h2>
|
||||||
|
{% include "navbar.html" %}
|
||||||
|
<h3 class="subtitle">{{ page.title }} ({{ page.date }})</h3>
|
||||||
|
<div class="content">
|
||||||
|
<div class="block">
|
||||||
|
{{ page.content | safe }}
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
{% include "comments.html" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% include "navbar.html" %}
|
||||||
|
{% endblock content %}
|
||||||
28
templates/section.html
Normal file
28
templates/section.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% 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 %}
|
||||||
67
templates/shortcodes/gallery.html
Normal file
67
templates/shortcodes/gallery.html
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<div class="gallery is-flex is-flex-wrap-wrap">
|
||||||
|
{% for path in images %}
|
||||||
|
{% if section %}
|
||||||
|
{% set full_path = section.path ~ path %}
|
||||||
|
{% endif %}
|
||||||
|
{% if page %}
|
||||||
|
{% set full_path = page.path ~ path %}
|
||||||
|
{% endif %}
|
||||||
|
{% set thumb = resize_image(path=full_path, width=120, height=120) %}
|
||||||
|
|
||||||
|
<div class="gallery-item">
|
||||||
|
<a href="#{{ path }}">
|
||||||
|
<img src="{{ thumb.url }}" class="thumbnail" />
|
||||||
|
</a>
|
||||||
|
<div class="lightbox has-text-centered" id="{{ 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">
|
||||||
|
<
|
||||||
|
</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">
|
||||||
|
>
|
||||||
|
</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>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
19
templates/shortcodes/modal.html
Normal file
19
templates/shortcodes/modal.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{% if section %}
|
||||||
|
{% set full_path = section.path ~ path %}
|
||||||
|
{% endif %}
|
||||||
|
{% if page %}
|
||||||
|
{% set full_path = page.path ~ path %}
|
||||||
|
{% endif %}
|
||||||
|
{% set thumb = resize_image(path=full_path, width=400, height=400, op="fit") %}
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<a href="#{{ path }}">
|
||||||
|
<img src="{{ thumb.url }}"/>
|
||||||
|
</a>
|
||||||
|
<div class="lightbox image has-text-centered" id="{{ path }}">
|
||||||
|
<a href="#" class="close">
|
||||||
|
<span class="spacer"></span>
|
||||||
|
<img src="{{ path }}" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
4
templates/shortcodes/video.html
Normal file
4
templates/shortcodes/video.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<video width="512" height="288" controls>
|
||||||
|
<source src="{{ path }}" type="video/webm">
|
||||||
|
Your browser does not support the video tag.
|
||||||
|
</video>
|
||||||
1
templates/shortcodes/youtube.html
Normal file
1
templates/shortcodes/youtube.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<iframe src="{{ url }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||||
Loading…
Reference in a new issue