afics/onders.org_zola_theme
1
0
Fork 0
forked from finga/onders.org_zola_theme
Code Pull requests Activity

Create a theme out of my page

Browse source
This commit is contained in:
finga 2023-02-06 12:20:18 +01:00
commit c3fd40c135
22 changed files with 452 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
config.toml Normal file
View 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
View 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
View 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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 715 KiB

4
content/_index.md Normal file
View file

@ -0,0 +1,4 @@
+++
+++
The landing page...

12
content/credits.md Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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">
&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>
{% endfor %}
</div>

19
templates/shortcodes/modal.html Normal file
View 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
View 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
View 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>