Create a theme out of my page
This commit is contained in:
commit
c3fd40c135
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