Compare commits

...

No commits in common. "pages" and "microformats2" have entirely different histories.

58 changed files with 1045 additions and 3909 deletions

1
.envrc Normal file
View file

@ -0,0 +1 @@
use flake

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
/public/

210
404.html
View file

@ -1,210 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<h1>404</h1>
<h2>ʕノ•ᴥ•ʔノ ︵ ┻━┻</h2>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2023 Alan Pearce
Copyright (c) 2020 Jan Raasch
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

110
README.md Normal file
View file

@ -0,0 +1,110 @@
# Zola ʕ•ᴥ•ʔ Bear Blog
[![Netlify Status](https://api.netlify.com/api/v1/badges/121b53ce-c913-4604-9179-eb3cca31cd2c/deploy-status)](https://app.netlify.com/sites/zola-bearblog/deploys)
🧸 A [Zola](https://www.getzola.org/)-theme based on [Bear Blog](https://bearblog.dev).
> Free, no-nonsense, super-fast blogging.
## Demo
For a current & working demo of this theme, please check out <https://zola-bearblog.netlify.app/> 🎯.
## Screenshot
![Screenshot][screenshot]
When the user's browser is running »dark mode«, the dark color scheme will be used automatically. The default is the light/white color scheme. Check out the [`style.html`](https://codeberg.org/alanpearce/zola-bearblog/src/branch/main/templates/style.html)-file for the implementation.
## Installation
If you already have a Zola site on your machine, you can simply add this theme via
```
git submodule add https://codeberg.org/alanpearce/zola-bearblog themes/zola-bearblog
```
Then, adjust the `config.toml` as detailed below.
For more information, read the official [setup guide][zola-setup-guide] of Zola.
Alternatively, you can quickly deploy a copy of the theme site to Netlify using this button:
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://gitlab.com/alanpearce/zola-bearblog)
(Note that this method makes it harder to keep up-to-date with theme updates, which might be necessary for newer versions of Zola.)
## Adjust configuration / config.toml
Please check out the included [config.toml](https://codeberg.org/alanpearce/zola-bearblog/src/branch/main/config.toml)
## Content & structure
### Menu
Create an array in `extra` with a key of `main_menu`. `url` is passed to [`get_url`](https://www.getzola.org/documentation/templates/overview/#get-url)
```toml
[[extra.main_menu]]
name = "Home"
url = "/"
[[extra.main_menu]]
name = "Bear"
url = "@/bear.md"
[[extra.main_menu]]
name = "Zola"
url = "@/zola.md"
[[extra.main_menu]]
name = "Blog"
url = "@/blog/_index.md"
```
### Adding / editing content
#### Index-Page
The contents of the `index`-page may be changed by editing your `content/_index.md`-file.
### Adding your branding / colors / css
Add a `custom_head.html`-file to your `templates/`-directory. In there you may add a `<style>`-tag, *or* you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Check out the [`style.html`](https://codeberg.org/alanpearce/zola-bearblog/src/branch/main/templates/style.html)-file to find out which CSS-styles are applied by default.
### Table of contents
Table of contents are not rendered by default. To render them, set `extra.table_of_contents.show = true` in `config.toml`.
The table of contents is rendered inside a `details` element.
If you want the section to be collapsed on page load, set `extra.table_of_contents.visible_on_load = false`.
This defaults to `true`.
In addition, `extra.table_of_contents.max_level` can limit the maximum level of headers to show.
To show only `h1`s, set `max_level = 1`, to show `h1`s and `h2`s, set `max_level = 2`, and so on.
By default, `max_level` is set to 6, so all headers on the page are shown.
Below is an example of how to configure the table of contents in `config.toml`.
```toml
[extra.table_of_contents]
show = true
max_level = 2
visible_on_load = false
```
It can also be toggled on page-by-page basis. Add `extra.hide_table_of_contents = true` to the page's frontmatter to hide the table of contents for that specific page.
## Issues / Feedback / Contributing
Please use [Codeberg issues](https://codeberg.org/alanpearce/zola-bearblog/issues) and [Pull Requests](https://codeberg.org/alanpearce/zola-bearblog/pulls).
## Special Thanks 🎁
A special thank you goes out to [Herman](https://herman.bearblog.dev), for creating the original [ʕ•ᴥ•ʔ Bear Blog](https://bearblog.dev/) and [Jan Raasch](https://www.janraasch.com) for creating the hugo port of the Bear Blog theme.
## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License) © [Alan Pearce](https://www.alanpearce.eu/)
[zola-setup-guide]: https://www.getzola.org/documentation/getting-started/installation/
[screenshot]: https://codeberg.org/alanpearce/zola-bearblog/raw/branch/main/screenshot.png

View file

@ -1,13 +0,0 @@
# This _headers file is used to set headers on cloudflare pages: https://developers.cloudflare.com/pages/configuration/headers/
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy (disabled everything except autoplay, local-fonts, screen-wake-lock, speaker-selection)
# opt out of Federated Learning of Cohorts (aka "FLoC") - https://amifloced.org/
/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security: max-age=63072000; includeSubdomains
Permissions-Policy: interest-cohort=(), accelerometer=(), ambient-light-sensor=(), battery=(), bluetooth=(), browsing-topics=(), camera=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), gamepad=(), geolocation=(), gyroscope=(), hid=(), identity-credentials-get=(), idle-detection=(), magnetometer=(), microphone=(), midi=(), otp-credentials=(), payment=(), picture-in-picture=(), publickey-credentials-create=(), publickey-credentials-get=(), serial=(), storage-access=(), sync-xhr=(), usb=(), web-share=(), window-management=(), xr-spatial-tracking=()
Content-Security-Policy: default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'sha256-p5EfRIhWJi7Zh7WJil3mpIVCZvcu+zebWbMe6B0so8A='; form-action 'none'; base-uri 'self'; frame-ancestors 'none'
Cross-Origin-Resource-Policy: same-site
Cache-Control: max-age=300, s-maxage=86400, stale-while-revalidate

View file

@ -1,31 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<subtitle>A Zola-theme based on Bear Blog.</subtitle>
<link rel="self" type="application/atom+xml" href="/atom.xml"/>
<link rel="alternate" type="text/html" href="/"/>
<generator uri="https://www.getzola.org/">Zola</generator>
<updated>2020-01-03T00:00:00+00:00</updated>
<id>/atom.xml</id>
<entry xml:lang="en">
<title>Markdown Syntax Guide</title>
<published>2020-01-03T00:00:00+00:00</published>
<updated>2020-01-03T00:00:00+00:00</updated>
<author>
<name>
Unknown
</name>
</author>
<link rel="alternate" type="text/html" href="/blog/markdown-syntax/"/>
<id>/blog/markdown-syntax/</id>
<summary type="html">&lt;p&gt;For a quick cheatsheet, check out &lt;a href=&quot;https:&#x2F;&#x2F;simplemde.com&#x2F;markdown-guide&quot;&gt;https:&#x2F;&#x2F;simplemde.com&#x2F;markdown-guide&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Zola theme.&lt;&#x2F;p&gt;</summary>
</entry>
</feed>

View file

@ -1,219 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bear | Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Bear">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/bear/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<h1>Bear</h1>
<main>
<p>Website: <a href="https://bearblog.dev">https://bearblog.dev</a></p>
<p>There is a website obesity crisis. Bloated websites are full of scripts, ads, and trackers slowing your readers down every time they try to read your well-crafted content.</p>
<p>Bear is all you need to build a fantastic and optimized site or blog. It works perfectly on <strong>any</strong> viewing device. All you need to focus on is writing good content.</p>
<p>Bear makes it simple to publish content online and grow an audience while keeping pages tiny, fast, and <strong>optimized for search engines.</strong></p>
<p>Each page is ~5kb.</p>
<p>Learn more and contribute on <a href="https://github.com/HermanMartinus/bearblog">GitHub</a>.</p>
</main>
<p>
</p>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,224 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/blog/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<ul class="blog-posts">
<li>
<span>
<i>
<time datetime="2020-01-03T00:00:00+00:00" pubdate>
2020-01-03
</time>
</i>
</span>
<a href="&#x2F;blog&#x2F;markdown-syntax&#x2F;">Markdown Syntax Guide</a>
</li></ul>
<div class="tags">
<a href="&#x2F;tags&#x2F;markdown&#x2F;">#markdown</a>&nbsp;
<a href="&#x2F;tags&#x2F;syntax&#x2F;">#syntax</a>&nbsp;
</div>
</main>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,354 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Syntax Guide | Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Markdown Syntax Guide">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/blog/markdown-syntax/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<h1>Markdown Syntax Guide</h1>
<p>
<i>
<time datetime="2020-01-03T00:00:00+00:00" pubdate>2020-01-03</time>
</i>
</p>
<details open>
<summary>Table of contents</summary>
<ul>
<li>
<a href="/blog/markdown-syntax/#headings">Headings</a>
</li>
<li>
<a href="/blog/markdown-syntax/#h1">H1</a>
<ul>
<li>
<a href="/blog/markdown-syntax/#h2">H2</a>
</li>
<li>
<a href="/blog/markdown-syntax/#paragraph">Paragraph</a>
</li>
<li>
<a href="/blog/markdown-syntax/#blockquotes">Blockquotes</a>
</li>
<li>
<a href="/blog/markdown-syntax/#tables">Tables</a>
</li>
<li>
<a href="/blog/markdown-syntax/#code-blocks">Code Blocks</a>
</li>
<li>
<a href="/blog/markdown-syntax/#list-types">List Types</a>
</li>
<li>
<a href="/blog/markdown-syntax/#other-elements-abbr-sub-sup-kbd-mark">Other Elements — abbr, sub, sup, kbd, mark</a>
</li>
</ul>
</li>
</ul>
</details>
<main>
<p>For a quick cheatsheet, check out <a href="https://simplemde.com/markdown-guide">https://simplemde.com/markdown-guide</a>.</p>
<hr />
<p>This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Zola theme.</p>
<span id="continue-reading"></span><h2 id="headings">Headings</h2>
<p>The following HTML <code>&lt;h1&gt;</code><code>&lt;h6&gt;</code> elements represent six levels of section headings. <code>&lt;h1&gt;</code> is the highest section level while <code>&lt;h6&gt;</code> is the lowest.</p>
<h1 id="h1">H1</h1>
<h2 id="h2">H2</h2>
<h3 id="h3">H3</h3>
<h4 id="h4">H4</h4>
<h5 id="h5">H5</h5>
<h6 id="h6">H6</h6>
<h2 id="paragraph">Paragraph</h2>
<p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.</p>
<p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p>
<h2 id="blockquotes">Blockquotes</h2>
<p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p>
<h4 id="blockquote-without-attribution">Blockquote without attribution</h4>
<blockquote>
<p>Tiam, ad mint andaepu dandae nostion secatur sequo quae.
<strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p>
</blockquote>
<h4 id="blockquote-with-attribution">Blockquote with attribution</h4>
<blockquote>
<p>Don't communicate by sharing memory, share memory by communicating.<br>
<cite>Rob Pike<sup class="footnote-reference"><a href="#1">1</a></sup></cite></p>
</blockquote>
<div class="footnote-definition" id="1"><sup class="footnote-definition-label">1</sup>
<p>The above quote is excerpted from Rob Pike's <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk</a> during Gopherfest, November 18, 2015.</p>
</div>
<h2 id="tables">Tables</h2>
<p>Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.</p>
<table><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody>
<tr><td>Bob</td><td>27</td></tr>
<tr><td>Alice</td><td>23</td></tr>
</tbody></table>
<h4 id="inline-markdown-within-tables">Inline Markdown within tables</h4>
<table><thead><tr><th>Italics</th><th>Bold</th><th>Code</th></tr></thead><tbody>
<tr><td><em>italics</em></td><td><strong>bold</strong></td><td><code>code</code></td></tr>
</tbody></table>
<h2 id="code-blocks">Code Blocks</h2>
<h4 id="code-block-with-backticks">Code block with backticks</h4>
<pre data-lang="html" class="language-html "><code class="language-html" data-lang="html">&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Example HTML5 Document&lt;&#x2F;title&gt;
&lt;&#x2F;head&gt;
&lt;body&gt;
&lt;p&gt;Test&lt;&#x2F;p&gt;
&lt;&#x2F;body&gt;
&lt;&#x2F;html&gt;
</code></pre>
<h4 id="code-block-indented-with-four-spaces">Code block indented with four spaces</h4>
<pre><code>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Example HTML5 Document&lt;&#x2F;title&gt;
&lt;&#x2F;head&gt;
&lt;body&gt;
&lt;p&gt;Test&lt;&#x2F;p&gt;
&lt;&#x2F;body&gt;
&lt;&#x2F;html&gt;
</code></pre>
<h2 id="list-types">List Types</h2>
<h4 id="ordered-list">Ordered List</h4>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h4 id="unordered-list">Unordered List</h4>
<ul>
<li>List item</li>
<li>Another item</li>
<li>And another item</li>
</ul>
<h4 id="nested-list">Nested list</h4>
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese</li>
</ul>
</li>
</ul>
<h2 id="other-elements-abbr-sub-sup-kbd-mark">Other Elements — abbr, sub, sup, kbd, mark</h2>
<p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p>
<p>H<sub>2</sub>O</p>
<p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p>
<p>Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.</p>
<p>Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.</p>
</main>
<p>
Tags:
<a href="/tags/markdown/">#markdown</a>
<a href="/tags/syntax/">#syntax</a>
</p>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

76
config.toml Normal file
View file

@ -0,0 +1,76 @@
title = "Zola ʕ•ᴥ•ʔ Bear Blog"
base_url = "https://zola-bearblog.netlify.app/"
description = "A Zola-theme based on Bear Blog."
# Whether to automatically compile all Sass files in the sass directory
compile_sass = false
# Whether to build a search index to be used later on by a JavaScript library
build_search_index = false
taxonomies = [
{name = "categories", feed = true},
{name = "tags", feed = true},
]
default_language = "en"
[translations]
no_posts = "No posts yet"
remove_filter = "Remove filter"
filtering_for = "Filtering for"
made_with = "Made with"
[languages.de]
title = "Zola ʕ•ᴥ•ʔ Bear Blog"
description = "Ein Zola-theme basiert auf Bear Blog."
taxonomies = [
{name = "categories", feed = true},
{name = "tags", feed = true},
]
[languages.de.translations]
no_posts = "Keine Einträge"
remove_filter = "Filter entfernen"
filtering_for = "Filtern nach"
made_with = "Erstellt mit"
[markdown]
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = true
[extra]
date_format="%Y-%m-%d"
webserver_sends_csp_headers=true
language_switcher=true
translations = [
{ code="en", name="English" },
{ code="de", name="Deutsch" },
]
[extra.table_of_contents]
show=true
max_level=2
visible_on_load=true
[[extra.main_menu]]
name = "Home"
name_de = "Startseite"
url = "/"
[[extra.main_menu]]
name = "Bear"
name_de = "Bear"
url = "@/bear.md"
[[extra.main_menu]]
name = "Zola"
name_de = "Zola"
url = "@/zola.md"
[[extra.main_menu]]
name = "Blog"
name_de = "Blog"
url = "@/blog/_index.md"

23
content/_index.de.md Normal file
View file

@ -0,0 +1,23 @@
+++
+++
# Eine himmlische Verbindung
Es gibt eine Krise der Website-Fettleibigkeit. Aufgeblähte Websites voller Skripte, Werbung und Tracker bremsen deine Leser jedes Mal aus, wenn sie versuchen, deine gut gestalteten Inhalte zu lesen.
Zola Bear Blog ist alles, was du brauchst, um eine fantastische und optimierte Website oder einen Blog zu erstellen. Es funktioniert perfekt auf **jedem** Anzeigegerät. Alles, worauf du dich konzentrieren müssen, ist das Schreiben guter Inhalte.
[Zum ursprünglichen Bear-Blog](https://bearblog.dev/).
---
Was passiert, wenn du den weltweit schnellsten und leichtesten Generator für statische Websites mit einem Design-Theme kombinieren, das dir kostenlose, unkomplizierte und superschnelle Blogging-Funktionen bietet?
**Benutze dieses Theme und finde es heraus!**
Erstellt mit 💚 von [Alan Pearce](https://alanpearce.eu).
---
Veröffentliche einfach deine Inhalte online, bau ein Publikum auf und halte deine Seiten klein, schnell und **für Suchmaschinen optimiert**.
Jede Seite ist ~5kb groß, und du kannst dein Blog selbst **hosten**.

23
content/_index.md Normal file
View file

@ -0,0 +1,23 @@
+++
+++
# A match made in heaven
There is a website obesity crisis. Bloated websites full of scripts, ads, and trackers are slowing your readers down every time they try to read your well-crafted content.
Zola Bear Blog is all you need to build a fantastic and optimized site or blog. It works perfectly on **any** viewing device. All you need to focus on is writing good content.
[Go to the original bear blog](https://bearblog.dev/).
---
What happens when you combine the worlds' fastest, most lightweight static site generator with a design theme built to provide you with free, no-nonsense, super-fast blogging capabilities?
**Use this theme, and find out!**
Made with 💚 by [Alan Pearce](https://alanpearce.eu).
---
Simply publish content online, grow an audience, and keep your pages tiny, fast, and **optimized for search engines**.
Each page is ~5kb, and you can **host your blog yourself**.

15
content/bear.de.md Normal file
View file

@ -0,0 +1,15 @@
+++
title = "Bear"
+++
Webseite: [https://bearblog.dev](https://bearblog.dev)
Es gibt eine Krise der Website-Fettleibigkeit. Aufgeblähte Websites voller Skripte, Werbung und Tracker bremsen deine Leser jedes Mal aus, wenn sie versuchen, deine gut gestalteten Inhalte zu lesen.
Zola Bear Blog ist alles, was du brauchst, um eine fantastische und optimierte Website oder einen Blog zu erstellen. Es funktioniert perfekt auf **jedem** Anzeigegerät. Alles, worauf du dich konzentrieren müssen, ist das Schreiben guter Inhalte.
Bear macht es einfach, Inhalte online zu veröffentlichen und ein Publikum aufzubauen, während die Seiten klein, schnell und **für Suchmaschinen optimiert** bleiben.
Jede Seite ist ~5kb.
Weitere Informationen und Beiträge unter [GitHub](https://github.com/HermanMartinus/bearblog).

15
content/bear.md Normal file
View file

@ -0,0 +1,15 @@
+++
title = "Bear"
+++
Website: [https://bearblog.dev](https://bearblog.dev)
There is a website obesity crisis. Bloated websites are full of scripts, ads, and trackers slowing your readers down every time they try to read your well-crafted content.
Bear is all you need to build a fantastic and optimized site or blog. It works perfectly on **any** viewing device. All you need to focus on is writing good content.
Bear makes it simple to publish content online and grow an audience while keeping pages tiny, fast, and **optimized for search engines.**
Each page is ~5kb.
Learn more and contribute on [GitHub](https://github.com/HermanMartinus/bearblog).

View file

@ -0,0 +1,3 @@
+++
title = "Blog"
+++

3
content/blog/_index.md Normal file
View file

@ -0,0 +1,3 @@
+++
title = "Blog"
+++

View file

@ -0,0 +1,130 @@
+++
title = "Markdown Syntax Guide"
date = "2020-01-03"
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
taxonomies.tags = [
"markdown",
"syntax",
]
+++
For a quick cheatsheet, check out [https://simplemde.com/markdown-guide](https://simplemde.com/markdown-guide).
---
This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Zola theme.
<!--more-->
## Headings
The following HTML `<h1>``<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
#### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.
#### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
Name | Age
--------|------
Bob | 27
Alice | 23
#### Inline Markdown within tables
| Italics | Bold | Code |
| -------- | -------- | ------ |
| *italics* | **bold** | `code` |
## Code Blocks
#### Code block with backticks
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block indented with four spaces
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
## List Types
#### Ordered List
1. First item
2. Second item
3. Third item
#### Unordered List
* List item
* Another item
* And another item
#### Nested list
* Fruit
* Apple
* Orange
* Banana
* Dairy
* Milk
* Cheese
## Other Elements — abbr, sub, sup, kbd, mark
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

36
content/zola.de.md Normal file
View file

@ -0,0 +1,36 @@
+++
title = "Zola"
+++
## Keine Abhängigkeiten
Zola wird als einzelne ausführbare Datei mit Sass-Kompilierung, Syntax
Syntaxhervorhebung, Inhaltsverzeichnis und vielen anderen Funktionen, die
die normalerweise das Einrichten einer Entwicklungsumgebung oder das Hinzufügen einiger
JavaScript-Bibliotheken zu deiner Website.
## Rasend schnell
Die durchschnittliche Website wird in weniger als einer Sekunde erstellt, einschließlich
Sass-Kompilierung und Syntaxhervorhebung.
## Skalierbar
Zola rendert deine gesamte Website als statische Dateien, was es trivial macht
jede Art von Datenverkehr zu bewältigen, ohne dass du dich um die
ohne sich um die Verwaltung eines Servers oder einer Datenbank kümmern zu müssen.
## Einfach zu bedienen
Von der CLI bis zur Template-Engine ist alles so konzipiert, dass es
intuitiv. Verlasse dich jedoch nicht auf mein Wort, sondern schaue in die Dokumentation
und überzeug dich selbst.
## Flexibel
Zola geht dir aus dem Weg, damit du dich auf deine Inhalte konzentrieren kannst, sei es ein
Blog, eine Wissensdatenbank, eine Landing Page oder eine Kombination aus beidem.
## Erweitertes Markdown
Zola verfügt über Shortcodes und interne Links, die das Schreiben von
deine Inhalte zu schreiben.

37
content/zola.md Normal file
View file

@ -0,0 +1,37 @@
+++
title = "Zola"
extra.hide_table_of_contents = true
+++
## No dependencies
Zola comes as a single executable with Sass compilation, syntax
highlighting, table of contents and many other features that
traditionally require setting up a dev environment or adding some
JavaScript libraries to your site.
## Blazing fast
The average site will be generated in less than a second, including
Sass compilation and syntax highlighting.
## Scalable
Zola renders your whole site as static files, making it trivial to
handle any kind of traffic you will throw at it at no cost without
having to worry about managing a server or a database.
## Easy to use
From the CLI to the template engine, everything is designed to be
intuitive. Don't take my word for it though, look at the documentation
and see for yourself.
## Flexible
Zola gets out of your way so you can focus on your content, be it a
blog, a knowledge base, a landing page or a combination of them.
## Augmented Markdown
Zola comes with shortcodes and internal links to make it easier to
write your content.

View file

@ -1,217 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bear | Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Bear">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/bear/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Startseite</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<h1>Bear</h1>
<main>
<p>Webseite: <a href="https://bearblog.dev">https://bearblog.dev</a></p>
<p>Es gibt eine Krise der Website-Fettleibigkeit. Aufgeblähte Websites voller Skripte, Werbung und Tracker bremsen deine Leser jedes Mal aus, wenn sie versuchen, deine gut gestalteten Inhalte zu lesen.</p>
<p>Zola Bear Blog ist alles, was du brauchst, um eine fantastische und optimierte Website oder einen Blog zu erstellen. Es funktioniert perfekt auf <strong>jedem</strong> Anzeigegerät. Alles, worauf du dich konzentrieren müssen, ist das Schreiben guter Inhalte.</p>
<p>Bear macht es einfach, Inhalte online zu veröffentlichen und ein Publikum aufzubauen, während die Seiten klein, schnell und <strong>für Suchmaschinen optimiert</strong> bleiben.</p>
<p>Jede Seite ist ~5kb.</p>
<p>Weitere Informationen und Beiträge unter <a href="https://github.com/HermanMartinus/bearblog">GitHub</a>.</p>
</main>
<p>
</p>
<footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,240 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wortbergen | Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Wortbergen">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/blog/beispiel/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Startseite</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<h1>Wortbergen</h1>
<p>
<i>
<time datetime="2024-08-18T00:00:00+00:00" pubdate>2024-08-18</time>
</i>
</p>
<main>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in
Buchstabhausen an der Küste des Semantik, eines großen
Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort
und versorgt sie mit den nötigen Regelialien.</p>
<p>Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in
den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion
werden die Blindtexte beherrscht ein geradezu unorthographisches
Leben.</p>
<p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war
Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox
riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden
Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ
sich nicht beirren.</p>
<p>Es packte seine sieben Versalien, schob sich sein Initial in den
Gürtel und machte sich auf den Weg. Als es die ersten Hügel des
Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf
die Skyline seiner Heimatstadt Buchstabhausen, die Headline von
Alphabetdorf und die Subline seiner eigenen Straße, der
Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange,
dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy
warnte das Blindtextchen, da, wo sie herkäme wäre sie</p>
</main>
<p>
Tags:
<a href="/de/tags/test/">#test</a>
</p>
<footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,221 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/blog/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Startseite</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<main>
<ul class="blog-posts">
<li>
<span>
<i>
<time datetime="2024-08-18T00:00:00+00:00" pubdate>
2024-08-18
</time>
</i>
</span>
<a href="&#x2F;de&#x2F;blog&#x2F;beispiel&#x2F;">Wortbergen</a>
</li></ul>
<div class="tags">
<a href="&#x2F;de&#x2F;tags&#x2F;test&#x2F;">#test</a>&nbsp;
</div>
</main>
<footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,220 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Startseite</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<main>
<h1 id="eine-himmlische-verbindung">Eine himmlische Verbindung</h1>
<p>Es gibt eine Krise der Website-Fettleibigkeit. Aufgeblähte Websites voller Skripte, Werbung und Tracker bremsen deine Leser jedes Mal aus, wenn sie versuchen, deine gut gestalteten Inhalte zu lesen.</p>
<p>Zola Bear Blog ist alles, was du brauchst, um eine fantastische und optimierte Website oder einen Blog zu erstellen. Es funktioniert perfekt auf <strong>jedem</strong> Anzeigegerät. Alles, worauf du dich konzentrieren müssen, ist das Schreiben guter Inhalte.</p>
<p><a href="https://bearblog.dev/">Zum ursprünglichen Bear-Blog</a>.</p>
<hr />
<p>Was passiert, wenn du den weltweit schnellsten und leichtesten Generator für statische Websites mit einem Design-Theme kombinieren, das dir kostenlose, unkomplizierte und superschnelle Blogging-Funktionen bietet?</p>
<p><strong>Benutze dieses Theme und finde es heraus!</strong></p>
<p>Erstellt mit 💚 von <a href="https://alanpearce.eu">Alan Pearce</a>.</p>
<hr />
<p>Veröffentliche einfach deine Inhalte online, bau ein Publikum auf und halte deine Seiten klein, schnell und <strong>für Suchmaschinen optimiert</strong>.</p>
<p>Jede Seite ist ~5kb groß, und du kannst dein Blog selbst <strong>hosten</strong>.</p>
</main>
<footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,212 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/tags/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Home</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<main>
<h1>Tags</h1>
<div class="tags">
<a href="&#x2F;de&#x2F;tags&#x2F;test&#x2F;">#test</a>&nbsp;
</div>
</main>
<footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,51 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="de">
<title>Zola ʕ•ᴥ•ʔ Bear Blog - test</title>
<subtitle>Ein Zola-theme basiert auf Bear Blog.</subtitle>
<link rel="self" type="application/atom+xml" href="/de/tags/test/atom.xml"/>
<link rel="alternate" type="text/html" href="/"/>
<generator uri="https://www.getzola.org/">Zola</generator>
<updated>2024-08-18T00:00:00+00:00</updated>
<id>/de/tags/test/atom.xml</id>
<entry xml:lang="de">
<title>Wortbergen</title>
<published>2024-08-18T00:00:00+00:00</published>
<updated>2024-08-18T00:00:00+00:00</updated>
<author>
<name>
Unknown
</name>
</author>
<link rel="alternate" type="text/html" href="/de/blog/beispiel/"/>
<id>/de/blog/beispiel/</id>
<content type="html" xml:base="/de/blog/beispiel/">&lt;p&gt;Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in
Buchstabhausen an der Küste des Semantik, eines großen
Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort
und versorgt sie mit den nötigen Regelialien.&lt;&#x2F;p&gt;
&lt;p&gt;Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in
den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion
werden die Blindtexte beherrscht ein geradezu unorthographisches
Leben.&lt;&#x2F;p&gt;
&lt;p&gt;Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war
Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox
riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden
Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ
sich nicht beirren.&lt;&#x2F;p&gt;
&lt;p&gt;Es packte seine sieben Versalien, schob sich sein Initial in den
Gürtel und machte sich auf den Weg. Als es die ersten Hügel des
Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf
die Skyline seiner Heimatstadt Buchstabhausen, die Headline von
Alphabetdorf und die Subline seiner eigenen Straße, der
Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange,
dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy
warnte das Blindtextchen, da, wo sie herkäme wäre sie&lt;&#x2F;p&gt;
</content>
</entry>
</feed>

View file

@ -1,222 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/tags/test/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Home</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<main>
<h3 class="filter">Filtern nach "test"</h3>
<small>
<a href="/de/blog/">Filter entfernen</a>
</small>
<ul class="blog-posts">
<li>
<span>
<i>
<time datetime="2024-08-18T00:00:00+00:00" pubdate>
2024-08-18
</time>
</i>
</span>
<a href="&#x2F;de&#x2F;blog&#x2F;beispiel&#x2F;">Wortbergen</a>
</li>
</ul>
</main><footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,233 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola | Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola">
<meta name="description" content="Ein Zola-theme basiert auf Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="Sprache">
<a href="/zola/" hreflang="en" lang="en">English</a>
<span class="active">Deutsch</span>
</nav>
<a href="/de/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="Site">
<a href="/de/">Startseite</a>
<a href="/de/bear/">Bear</a>
<a href="/de/zola/">Zola</a>
<a href="/de/blog/">Blog</a>
</nav>
</header>
<h1>Zola</h1>
<main>
<h2 id="keine-abhangigkeiten">Keine Abhängigkeiten</h2>
<p>Zola wird als einzelne ausführbare Datei mit Sass-Kompilierung, Syntax
Syntaxhervorhebung, Inhaltsverzeichnis und vielen anderen Funktionen, die
die normalerweise das Einrichten einer Entwicklungsumgebung oder das Hinzufügen einiger
JavaScript-Bibliotheken zu deiner Website.</p>
<h2 id="rasend-schnell">Rasend schnell</h2>
<p>Die durchschnittliche Website wird in weniger als einer Sekunde erstellt, einschließlich
Sass-Kompilierung und Syntaxhervorhebung.</p>
<h2 id="skalierbar">Skalierbar</h2>
<p>Zola rendert deine gesamte Website als statische Dateien, was es trivial macht
jede Art von Datenverkehr zu bewältigen, ohne dass du dich um die
ohne sich um die Verwaltung eines Servers oder einer Datenbank kümmern zu müssen.</p>
<h2 id="einfach-zu-bedienen">Einfach zu bedienen</h2>
<p>Von der CLI bis zur Template-Engine ist alles so konzipiert, dass es
intuitiv. Verlasse dich jedoch nicht auf mein Wort, sondern schaue in die Dokumentation
und überzeug dich selbst.</p>
<h2 id="flexibel">Flexibel</h2>
<p>Zola geht dir aus dem Weg, damit du dich auf deine Inhalte konzentrieren kannst, sei es ein
Blog, eine Wissensdatenbank, eine Landing Page oder eine Kombination aus beidem.</p>
<h2 id="erweitertes-markdown">Erweitertes Markdown</h2>
<p>Zola verfügt über Shortcodes und interne Links, die das Schreiben von
deine Inhalte zu schreiben.</p>
</main>
<p>
</p>
<footer>
Erstellt mit <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

61
flake.lock generated Normal file
View file

@ -0,0 +1,61 @@
{
"nodes": {
"flake-utils": {
"inputs": {
"systems": "systems"
},
"locked": {
"lastModified": 1710146030,
"narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1715413075,
"narHash": "sha256-FCi3R1MeS5bVp0M0xTheveP6hhcCYfW/aghSTPebYL4=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "e4e7a43a9db7e22613accfeb1005cca1b2b1ee0d",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "nixpkgs-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"root": {
"inputs": {
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs"
}
},
"systems": {
"locked": {
"lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems",
"repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github"
},
"original": {
"owner": "nix-systems",
"repo": "default",
"type": "github"
}
}
},
"root": "root",
"version": 7
}

20
flake.nix Normal file
View file

@ -0,0 +1,20 @@
{
description = "A bear blog theme for Zola";
inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
inputs.flake-utils.url = "github:numtide/flake-utils";
outputs = { self, nixpkgs, flake-utils }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = nixpkgs.legacyPackages.${system};
in
{
devShells.default = pkgs.mkShell {
packages = with pkgs; [
git
gnugrep
zola
];
};
});
}

View file

@ -1,222 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<h1 id="a-match-made-in-heaven">A match made in heaven</h1>
<p>There is a website obesity crisis. Bloated websites full of scripts, ads, and trackers are slowing your readers down every time they try to read your well-crafted content.</p>
<p>Zola Bear Blog is all you need to build a fantastic and optimized site or blog. It works perfectly on <strong>any</strong> viewing device. All you need to focus on is writing good content.</p>
<p><a href="https://bearblog.dev/">Go to the original bear blog</a>.</p>
<hr />
<p>What happens when you combine the worlds' fastest, most lightweight static site generator with a design theme built to provide you with free, no-nonsense, super-fast blogging capabilities?</p>
<p><strong>Use this theme, and find out!</strong></p>
<p>Made with 💚 by <a href="https://alanpearce.eu">Alan Pearce</a>.</p>
<hr />
<p>Simply publish content online, grow an audience, and keep your pages tiny, fast, and <strong>optimized for search engines</strong>.</p>
<p>Each page is ~5kb, and you can <strong>host your blog yourself</strong>.</p>
</main>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

27
netlify.toml Normal file
View file

@ -0,0 +1,27 @@
[build]
publish = "public"
command = "zola build"
[build.environment]
# Set the version name that you want to use and Netlify will automatically use it.
ZOLA_VERSION = "0.17.2"
# The magic for deploying previews of branches.
# We need to override the base url with whatever url Netlify assigns to our
# preview site. We do this using the Netlify environment variable
# `$DEPLOY_PRIME_URL`.
[context.deploy-preview]
command = "zola build --base-url $DEPLOY_PRIME_URL"
[context.branch-deploy]
command = "zola build --base-url $DEPLOY_PRIME_URL"
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-Content-Type-Options = "nosniff"
X-XSS-Protection = "1; mode=block"
Referrer-Policy = "strict-origin-when-cross-origin"
Strict-Transport-Security = "max-age=63072000; includeSubdomains"
Content-Security-Policy = "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'sha256-iJQfPEEzY1fjDE/sJElXzaTdtJI+vxkKM//fXwJj/cI='; form-action 'none'; base-uri 'self'; frame-ancestors 'none'"

View file

@ -1,4 +0,0 @@
User-agent: *
Disallow:
Allow: /
Sitemap: /sitemap.xml

BIN
screenshot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

View file

@ -1,56 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>/</loc>
</url>
<url>
<loc>/bear/</loc>
</url>
<url>
<loc>/blog/</loc>
</url>
<url>
<loc>/blog/markdown-syntax/</loc>
<lastmod>2020-01-03</lastmod>
</url>
<url>
<loc>/categories/</loc>
</url>
<url>
<loc>/de/</loc>
</url>
<url>
<loc>/de/bear/</loc>
</url>
<url>
<loc>/de/blog/</loc>
</url>
<url>
<loc>/de/blog/beispiel/</loc>
<lastmod>2024-08-18</lastmod>
</url>
<url>
<loc>/de/categories/</loc>
</url>
<url>
<loc>/de/tags/</loc>
</url>
<url>
<loc>/de/tags/test/</loc>
</url>
<url>
<loc>/de/zola/</loc>
</url>
<url>
<loc>/tags/</loc>
</url>
<url>
<loc>/tags/markdown/</loc>
</url>
<url>
<loc>/tags/syntax/</loc>
</url>
<url>
<loc>/zola/</loc>
</url>
</urlset>

View file

@ -1,215 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/tags/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<h1>Tags</h1>
<div class="tags">
<a href="&#x2F;tags&#x2F;markdown&#x2F;">#markdown</a>&nbsp;
<a href="&#x2F;tags&#x2F;syntax&#x2F;">#syntax</a>&nbsp;
</div>
</main>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,31 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
<title>Zola ʕ•ᴥ•ʔ Bear Blog - markdown</title>
<subtitle>A Zola-theme based on Bear Blog.</subtitle>
<link rel="self" type="application/atom+xml" href="/tags/markdown/atom.xml"/>
<link rel="alternate" type="text/html" href="/"/>
<generator uri="https://www.getzola.org/">Zola</generator>
<updated>2020-01-03T00:00:00+00:00</updated>
<id>/tags/markdown/atom.xml</id>
<entry xml:lang="en">
<title>Markdown Syntax Guide</title>
<published>2020-01-03T00:00:00+00:00</published>
<updated>2020-01-03T00:00:00+00:00</updated>
<author>
<name>
Unknown
</name>
</author>
<link rel="alternate" type="text/html" href="/blog/markdown-syntax/"/>
<id>/blog/markdown-syntax/</id>
<summary type="html">&lt;p&gt;For a quick cheatsheet, check out &lt;a href=&quot;https:&#x2F;&#x2F;simplemde.com&#x2F;markdown-guide&quot;&gt;https:&#x2F;&#x2F;simplemde.com&#x2F;markdown-guide&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Zola theme.&lt;&#x2F;p&gt;</summary>
</entry>
</feed>

View file

@ -1,224 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/tags/markdown/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<h3 class="filter">Filtering for "markdown"</h3>
<small>
<a href="/blog/">Remove filter</a>
</small>
<ul class="blog-posts">
<li>
<span>
<i>
<time datetime="2020-01-03T00:00:00+00:00" pubdate>
2020-01-03
</time>
</i>
</span>
<a href="&#x2F;blog&#x2F;markdown-syntax&#x2F;">Markdown Syntax Guide</a>
</li>
</ul>
</main><footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

View file

@ -1,31 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
<title>Zola ʕ•ᴥ•ʔ Bear Blog - syntax</title>
<subtitle>A Zola-theme based on Bear Blog.</subtitle>
<link rel="self" type="application/atom+xml" href="/tags/syntax/atom.xml"/>
<link rel="alternate" type="text/html" href="/"/>
<generator uri="https://www.getzola.org/">Zola</generator>
<updated>2020-01-03T00:00:00+00:00</updated>
<id>/tags/syntax/atom.xml</id>
<entry xml:lang="en">
<title>Markdown Syntax Guide</title>
<published>2020-01-03T00:00:00+00:00</published>
<updated>2020-01-03T00:00:00+00:00</updated>
<author>
<name>
Unknown
</name>
</author>
<link rel="alternate" type="text/html" href="/blog/markdown-syntax/"/>
<id>/blog/markdown-syntax/</id>
<summary type="html">&lt;p&gt;For a quick cheatsheet, check out &lt;a href=&quot;https:&#x2F;&#x2F;simplemde.com&#x2F;markdown-guide&quot;&gt;https:&#x2F;&#x2F;simplemde.com&#x2F;markdown-guide&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Zola theme.&lt;&#x2F;p&gt;</summary>
</entry>
</feed>

View file

@ -1,224 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola ʕ•ᴥ•ʔ Bear Blog">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/tags/syntax/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<h3 class="filter">Filtering for "syntax"</h3>
<small>
<a href="/blog/">Remove filter</a>
</small>
<ul class="blog-posts">
<li>
<span>
<i>
<time datetime="2020-01-03T00:00:00+00:00" pubdate>
2020-01-03
</time>
</i>
</span>
<a href="&#x2F;blog&#x2F;markdown-syntax&#x2F;">Markdown Syntax Guide</a>
</li>
</ul>
</main><footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>

8
templates/404.html Normal file
View file

@ -0,0 +1,8 @@
{% extends "base.html" %}
{% block title %}404{% endblock %}
{% block main %}
<h1>404</h1>
<h2>ʕノ•ᴥ•ʔノ ︵ ┻━┻</h2>
{% endblock %}

29
templates/base.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="{{ lang | default(value="en-US" ) }}">
<head>
{%- if config.webserver_sends_csp_headers %}
{%- include "security_tags.html" ignore missing %}
{%- endif %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% include "favicon.html" ignore missing -%}
<title>{%- block title %}{{ config.title }}{%- endblock %}</title>
{% include "seo_tags.html" ignore missing %}
<meta name="referrer" content="no-referrer-when-downgrade">
{%- if config.generate_feed %}
{% block rss -%}
<link rel="alternate" type={% if config.feed_filename == "atom.xml" %}"application/atom+xml"{% else %}"application/rss+xml"{% endif %} title="{{ config.title }}" href="{{ get_url(path=config.feed_filename) | safe }}">
{%- endblock -%}
{%- endif %}
<style>
{%- include "style.css.html" ignore missing -%}
</style>
{% include "custom_head.html" ignore missing -%}
</head>
<body>
{% include "header.html" ignore missing -%}
{% block main %}{%- endblock -%}
{% include "footer.html" ignore missing -%}
{% include "custom_body.html" ignore missing -%}
</body>
</html>

3
templates/favicon.html Normal file
View file

@ -0,0 +1,3 @@
{% if config.extra.favicon %}
<link rel="shortcut icon" href="{{ config.extra.favicon }}">
{%- endif -%}

5
templates/footer.html Normal file
View file

@ -0,0 +1,5 @@
<footer>
{%- if not config.extra.hide_made_with_line %}
{{ trans(key="made_with", lang=lang) }} <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
{%- endif %}
</footer>

9
templates/header.html Normal file
View file

@ -0,0 +1,9 @@
<header>
{% include "language_switcher.html" %}
<a href="{{ get_url(path="@/_index.md", lang=lang) }}" class="title">
<h1>{{ config.title }}</h1>
</a>
<nav>
{% include "nav.html" %}
</nav>
</header>

7
templates/index.html Normal file
View file

@ -0,0 +1,7 @@
{% extends "base.html" %}
{% block main %}
<main>
{{ section.content | safe }}
</main>
{% endblock %}

View file

@ -0,0 +1,12 @@
{% if config.extra.language_switcher %}
<nav class="lang">
{%- set language_agnostic_path = current_path | default(value="/") | replace(from='/' ~ lang ~ '/', to = '/') | trim_start_matches(pat = '/') -%}
{%- for tr in config.extra.translations %}
{%- if tr.code == lang %}
<active>{{ tr.name }}</active>
{%- else %}
<a href="{{ get_url(path=language_agnostic_path, lang=tr.code) ~ "/" }}" hreflang="{{ tr.code }}">{{ tr.name }}</a>
{%- endif %}
{%- endfor %}
</nav>
{% endif %}

12
templates/macros.html Normal file
View file

@ -0,0 +1,12 @@
{% macro table_of_contents(toc, max_level) %}
<ul>
{% for header in toc %}
<li>
<a href="{{ header.permalink | safe }}">{{ header.title }}</a>
{% if header.children and header.level < max_level %}
{{ self::table_of_contents(toc=header.children, max_level=max_level) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}

21
templates/nav.html Normal file
View file

@ -0,0 +1,21 @@
{% set current_lang = config.default_language %}
{% if page %}
{% set current_lang = page.lang %}
{% elif section %}
{% set current_lang = section.lang %}
{% endif %}
{%- if config.extra.main_menu %}
{%- for item in config.extra.main_menu %}
{% if current_lang == config.default_language %}
{% set title = item.name %}
{% else %}
{% set language_key = 'name_' ~ current_lang %}
{% set title = item[language_key] %}
{% endif %}
{%- if item.url is matching("https?://") %}
<a href="{{ item.url }}">{{ title }}</a>
{%- else %}
<a href="{{ get_url(path=item.url, lang=lang )}}">{{ title }}</a>
{%- endif %}
{%- endfor %}
{%- endif -%}

38
templates/page.html Normal file
View file

@ -0,0 +1,38 @@
{% import "macros.html" as macros %}
{% extends "base.html" %}
{% block title %}{{ page.title }} | {{ super() }}{% endblock %}
{% block main %}
{%- if not page.extra.menu %}
<h1>{{ page.title }}</h1>
{%- if page.date %}
<p>
<i>
<time datetime='{{ page.date | date(format='%+') }}' pubdate>
{{- page.date | date(format=config.extra.date_format) -}}
</time>
</i>
</p>
{%- endif %}
{%- endif %}
{%- if config.extra.table_of_contents.show and not page.extra.hide_table_of_contents and page.toc %}
<details {%if config.extra.table_of_contents.visible_on_load %}open{% endif %}>
<summary>Table of Contents</summary>
{{ macros::table_of_contents(toc=page.toc, max_level=config.extra.table_of_contents.max_level) }}
</details>
{%- endif %}
<main>
{{ page.content | safe }}
</main>
<p>
{%- if page.taxonomies %}
{%- for name, taxon in page.taxonomies %}
{{ name | capitalize }}:
{%- for item in taxon %}
<a href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">#{{ item }}</a>
{%- endfor %}
{%- endfor %}
{%- endif %}
</p>
{% endblock %}

38
templates/section.html Normal file
View file

@ -0,0 +1,38 @@
{% extends "base.html" %}
{% block main %}
<main>
{%- if taxonomy.term %}
<h3 class="filter">{{ trans(key="filtering_for",lang=lang)}} "{{ section.title }}"</h3>
<small>
<a href="{{ get_url(path="@/blog/_index.md", lang=lang) }}">{{ trans(key="remove_filter", lang=lang) }}</a>
</small>
{%- endif %}
<ul class="blog-posts">
{% for page in section.pages %}
<li>
<span>
<i>
<time datetime='{{ page.date | date(format='%+') }}' pubdate>
{{ page.date | date(format=config.extra.date_format) }}
</time>
</i>
</span>
<a href="{{ page.permalink }}">{{ page.title }}</a>
</li>
{% else %}
<li>
{{ trans(key="no_posts", lang=lang) }}
</li>
{% endfor %}
</ul>
<small>
<div>
{% set tags = get_taxonomy(kind="tags", lang=lang) %}
{% for post in tags.items %}
<a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
{% endfor %}
</div>
</small>
</main>
{% endblock %}

View file

@ -0,0 +1,2 @@
<!-- These tags are here for demostration. It's recommended to send them via HTTP headers instead. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'unsafe-inline'">

2
templates/seo_tags.html Normal file
View file

@ -0,0 +1,2 @@
<meta name="title" content="{% if page.title %}{{ page.title }}{% else %}{{ config.title }}{% endif %}">
<meta name="description" content="{{ config.description }}" />

182
templates/style.css.html Normal file
View file

@ -0,0 +1,182 @@
body {
font-family: Verdana, sans-serif;
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: #fff;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: #444;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
color: #222;
}
a {
color: #3273dc;
}
.title {
text-decoration: none;
border: 0;
}
.title h1 {
font-size: 1.5em;
}
.title span {
font-weight: 400;
}
.filter {
margin-bottom: 0;
}
nav a {
margin-right: 10px;
}
nav active {
font-weight: bold;
margin-right: 10px;
}
textarea {
width: 100%;
font-size: 1rem;
}
input {
font-size: 1rem;
}
main,article {
line-height: 1.6;
}
table {
width: 100%;
}
img {
max-width: 100%;
}
code {
padding: 2px 5px;
background-color: #f2f2f2;
}
pre code {
color: #222;
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
div.highlight pre {
background-color: initial;
color: initial;
}
div.highlight code {
background-color: unset;
color: unset;
}
blockquote {
border-left: 1px solid #999;
color: #222;
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px;
text-align: center;
}
.helptext {
color: #777;
font-size: small;
}
.errorlist {
color: #eba613;
font-size: small;
}
/* blog posts */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: #8b6fcb;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #ddd;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
color: #eee;
}
a {
color: #8cc2dd;
}
code {
background-color: #777;
}
pre code {
color: #ddd;
}
blockquote {
color: #ccc;
}
textarea,
input {
background-color: #252525;
color: #ddd;
}
.helptext {
color: #aaa;
}
}

View file

@ -0,0 +1,15 @@
{% extends "base.html" %}
{% block main %}
<main>
<h1>{{ taxonomy.name | capitalize }}</h1>
<small>
<div>
{% set tags = get_taxonomy(kind="tags", lang=lang) %}
{% for post in tags.items %}
<a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
{% endfor %}
</div>
</small>
</main>
{% endblock %}

View file

@ -0,0 +1,30 @@
{% extends "base.html" %}
{% block main %}
<main>
{%- if term %}
<h3 class="filter">Filtering for "{{ term.name }}"</h3>
<small>
<a href="{{ get_url(path="@/blog/_index.md", lang=lang) }}">{{ trans(key="remove_filter", lang=lang) }}</a>
</small>
{%- endif %}
<ul class="blog-posts">
{% for page in term.pages %}
<li>
<span>
<i>
<time datetime='{{ page.date | date(format='%+') }}' pubdate>
{{ page.date | date(format=config.extra.date_format) }}
</time>
</i>
</span>
<a href="{{ page.permalink }}">{{ page.title }}</a>
</li>
{% else %}
<li>
{{ trans(key="no_posts", lang=lang) }}
</li>
{% endfor %}
</ul>
</main>
{% endblock %}

30
theme.toml Normal file
View file

@ -0,0 +1,30 @@
name = "Bear"
description = "Bear blog theme"
license = "MIT"
homepage = "https://codeberg.org/alanpearce/zola-bearblog"
# The minimum version of Zola required
min_version = "0.4.0"
# An optional live demo URL
demo = "https://zola-bearblog.netlify.app/"
# Any variable there can be overridden in the end user `config.toml`
# You don't need to prefix variables by the theme name but as this will
# be merged with user data, some kind of prefix or nesting is preferable
# Use snake_casing to be consistent with the rest of Zola
[extra]
date_format="%d %b, %Y"
webserver_sends_csp_headers=false
[extra.table_of_contents]
show=false
max_level=6
visible_on_load=true
[author]
name = "Alan Pearce"
homepage = "https://alanpearce.eu"
[original]
author = "janraasch"
repo = "https://github.com/janraasch/hugo-bearblog/"
homepage = "https://www.janraasch.com"

View file

@ -1,235 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zola | Zola ʕ•ᴥ•ʔ Bear Blog</title>
<meta name="title" content="Zola">
<meta name="description" content="A Zola-theme based on Bear Blog.">
<meta name="referrer" content="strict-origin-when-cross-origin">
<link rel="alternate" type="application/atom+xml" title="Zola ʕ•ᴥ•ʔ Bear Blog" href="/atom.xml">
<style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
nav span.active {
font-weight: bold;
margin-right: 10px;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
pre code {
background-color: var(--code-background-color);
color: var(--code-color);
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 0.875rem;
overflow-x: auto;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
.tags {
font-size: smaller;
}
</style>
</head>
<body>
<header>
<nav class="lang" aria-label="language">
<span class="active">English</span>
<a href="/de/zola/" hreflang="de" lang="de">Deutsch</a>
</nav>
<a href="/" class="title">
<h1>Zola ʕ•ᴥ•ʔ Bear Blog</h1>
</a>
<nav aria-label="site">
<a href="/">Home</a>
<a href="/bear/">Bear</a>
<a href="/zola/">Zola</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<h1>Zola</h1>
<main>
<h2 id="no-dependencies">No dependencies</h2>
<p>Zola comes as a single executable with Sass compilation, syntax
highlighting, table of contents and many other features that
traditionally require setting up a dev environment or adding some
JavaScript libraries to your site.</p>
<h2 id="blazing-fast">Blazing fast</h2>
<p>The average site will be generated in less than a second, including
Sass compilation and syntax highlighting.</p>
<h2 id="scalable">Scalable</h2>
<p>Zola renders your whole site as static files, making it trivial to
handle any kind of traffic you will throw at it at no cost without
having to worry about managing a server or a database.</p>
<h2 id="easy-to-use">Easy to use</h2>
<p>From the CLI to the template engine, everything is designed to be
intuitive. Don't take my word for it though, look at the documentation
and see for yourself.</p>
<h2 id="flexible">Flexible</h2>
<p>Zola gets out of your way so you can focus on your content, be it a
blog, a knowledge base, a landing page or a combination of them.</p>
<h2 id="augmented-markdown">Augmented Markdown</h2>
<p>Zola comes with shortcodes and internal links to make it easier to
write your content.</p>
</main>
<p>
</p>
<footer>
Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
</footer>
</body>
</html>