pages/de/bear/index.html
2025-09-25 12:46:56 +00:00

217 lines
4.7 KiB
HTML

<!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>