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:
parent
be9da23070
commit
4aff0378ac
27 changed files with 408 additions and 334 deletions
9
.gitmodules
vendored
9
.gitmodules
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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/)
|
||||
|
|
|
|||
1
sass/normalize.scss
vendored
Normal file
1
sass/normalize.scss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "../vendor/normalize.css/normalize";
|
||||
22
sass/onders.org.scss
Normal file
22
sass/onders.org.scss
Normal 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";
|
||||
13
sass/onders.org/_color.scss
Normal file
13
sass/onders.org/_color.scss
Normal 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;
|
||||
18
sass/onders.org/_dark.scss
Normal file
18
sass/onders.org/_dark.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
131
sass/onders.org/_gallery.scss
Normal file
131
sass/onders.org/_gallery.scss
Normal 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;
|
||||
}
|
||||
30
sass/onders.org/_layout.scss
Normal file
30
sass/onders.org/_layout.scss
Normal 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;
|
||||
}
|
||||
46
sass/onders.org/_modal.scss
Normal file
46
sass/onders.org/_modal.scss
Normal 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;
|
||||
}
|
||||
3
sass/onders.org/_util.scss
Normal file
3
sass/onders.org/_util.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
147
sass/style.scss
147
sass/style.scss
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
404
|
||||
{% endblock title %}
|
||||
|
||||
{% block subtitle %}
|
||||
<h2>404</h2>
|
||||
{% endblock subtitle %}
|
||||
|
||||
{% 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>
|
||||
Diese URL führt zu nichts!
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<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="description" content="{{ config.description }}">
|
||||
<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">
|
||||
{% if config.generate_feed %}
|
||||
<link rel="alternate" type="application/rss+xml" title="rss" href="/rss.xml">
|
||||
|
|
@ -15,11 +15,24 @@
|
|||
{% endblock js %}
|
||||
</head>
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% block content %} {% endblock content %}
|
||||
</div>
|
||||
{% include "footer.html" %}
|
||||
</section>
|
||||
<main class="container">
|
||||
<header>
|
||||
<h1>{{ config.title }}</h1>
|
||||
{% block subtitle %}{% endblock subtitle %}
|
||||
</header>
|
||||
{% include "navbar.html" %}
|
||||
{% block content %} {% endblock content %}
|
||||
{% include "navbar.html" %}
|
||||
<footer>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/credits">credits</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/rss.xml">RSS feed</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{% 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 %}
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="title">{{ config.title }}</h1>
|
||||
<div class="content">
|
||||
<div class="block">
|
||||
{{ section.content | safe }}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,31 @@
|
|||
{% 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>
|
||||
{% if page.ancestors %}
|
||||
{% set ancestor = get_section(path=page.ancestors | last) %}
|
||||
{% endif %}
|
||||
|
||||
{% 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="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 class="row">
|
||||
{% if page.higher %}
|
||||
<div class="column">
|
||||
<a href="{{ page.higher.path }}">{{ page.higher.title }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if page.lower %}
|
||||
<div class="column align-right">
|
||||
<a href="{{ page.lower.path }}">{{ page.lower.title }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</navbar>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<h2>{{ ancestor.extra.start }} - {{ ancestor.extra.end }}: {{ ancestor.title }}</h2>
|
||||
{% else %}
|
||||
<h2>{{ page.title }}</h2>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock subtitle %}
|
||||
|
||||
{% 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" %}
|
||||
{% if page.date %}
|
||||
<h3>{{ page.title }} ({{ page.date }})</h3>
|
||||
{% endif %}
|
||||
{{ page.content | safe }}
|
||||
{% if page.date %}
|
||||
{% include "comments.html" %}
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<h2>{{ section.extra.start }} - {{ section.extra.end }}: {{ section.title }}</h2>
|
||||
{% endif %}
|
||||
{% endblock subtitle %}
|
||||
|
||||
{% 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>
|
||||
{{ section.content | safe }}
|
||||
<ul>
|
||||
{% for page in section.pages | reverse %}
|
||||
<li><a href="{{ page.permalink | safe }}">{{ page.date | safe }} - {{ page.title | safe }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="gallery is-flex is-flex-wrap-wrap">
|
||||
<div class="gallery">
|
||||
{% 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) %}
|
||||
<a href="#{{ loop.index }}"><img class="thumbnail" src="{{ thumb.url }}"></a>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a href="#{{ path }}">
|
||||
<img src="{{ thumb.url }}" class="thumbnail" />
|
||||
<div class="lightbox" id="{{ loop.index }}">
|
||||
{% if loop.first and loop.last %}
|
||||
<a href="#" class="close full">
|
||||
<div class="image">
|
||||
<img src="{{ path }}">
|
||||
</div>
|
||||
</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 %}
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
{% endif %}
|
||||
{% set thumb = resize_image(path=full_path, width=400, height=400, op="fit") %}
|
||||
|
||||
<div class="item">
|
||||
<div>
|
||||
<a href="#{{ path }}">
|
||||
<img src="{{ thumb.url }}"/>
|
||||
<img class="modal-thumbnail" src="{{ thumb.url }}"/>
|
||||
</a>
|
||||
<div class="lightbox image has-text-centered" id="{{ path }}">
|
||||
<div class="modal" id="{{ path }}">
|
||||
<a href="#" class="close">
|
||||
<span class="spacer"></span>
|
||||
<img src="{{ path }}" />
|
||||
|
|
|
|||
1
vendor/bulma
vendored
1
vendor/bulma
vendored
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 3958430d1baa0130d0f2c219172facbd22b73e1b
|
||||
1
vendor/milligram
vendored
Submodule
1
vendor/milligram
vendored
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit d895f179623b56f3a741854998649c6d0c354533
|
||||
1
vendor/normalize.css
vendored
Submodule
1
vendor/normalize.css
vendored
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit fc091cce1534909334c1911709a39c22d406977b
|
||||
Loading…
Reference in a new issue