Cybrkyd's Git Repositories

page-with-py - commit: 573f9ae

commit 573f9ae18a65639315d09e6ac5b40226f2b7fec4ee91155c95aba7c0db6bd0dd
author cybrkyd <git@cybrkyd.com> 2026-02-19 21:34:56 +0000
committer cybrkyd <git@cybrkyd.com> 2026-02-19 21:34:56 +0000

Commit Message

koala theme

📊 Diffstat

pa-py/themes/koala/archive.html 10
pa-py/themes/koala/footer.html 5
pa-py/themes/koala/head.html 254
pa-py/themes/koala/header.html 9
pa-py/themes/koala/main.html 17
pa-py/themes/koala/page.html 15
pa-py/themes/koala/single.html 33
pa-py/themes/koala/tags.html 9
8 files changed, 352 insertions(+), 0 deletions(-)

Diff

diff --git a/pa-py/themes/koala/archive.html b/pa-py/themes/koala/archive.html
new file mode 100644
index 0000000..4ab694c
--- /dev/null
+++ b/pa-py/themes/koala/archive.html
@@ -0,0 +1,10 @@
+ <main class="list-page">
+ <h1>Archive</h1>
+ <p>This is the archive of all posts. It is an optional page, configurable from pa.py</p>
+
+ <ul class="post-list">
+ {% for post in posts %}
+ <li>{date|format:%d %b %Y} - <a href="{post.url}">{post.title}</a></li>
+ {% endfor %}
+ </ul>
+ </main>
diff --git a/pa-py/themes/koala/footer.html b/pa-py/themes/koala/footer.html
new file mode 100644
index 0000000..c7e8fd2
--- /dev/null
+++ b/pa-py/themes/koala/footer.html
@@ -0,0 +1,5 @@
+ <footer style="padding:25px 0;">
+ <p>Subscribe via <a href='/index.xml'>rss</a></p>
+ <span class="power">Site generated by <a href="https://codeberg.org/cybrkyd/page-with-py" target="_blank" rel="noopener">PaPy</a></span>
+
+ </footer>
diff --git a/pa-py/themes/koala/head.html b/pa-py/themes/koala/head.html
new file mode 100644
index 0000000..c6f7f77
--- /dev/null
+++ b/pa-py/themes/koala/head.html
@@ -0,0 +1,254 @@
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>{PAGE_TITLE}</title>
+ <meta name="description" content="{PAGE_DESC}">
+ <link rel="icon" href="/img/favicon.png" type="image/png">
+
+ <!-- Open Graph -->
+ <meta property="og:site_name" content="{SITE_TITLE}">
+ <meta property="og:url" content="{PAGE_URL}">
+ <meta property="og:title" content="{PAGE_TITLE}">
+ <meta property="og:description" content="{PAGE_DESC}">
+ <meta property="og:type" content="website">
+ <meta property="og:image" content="{PAGE_IMAGE}">
+ <meta property="og:locale" content="en_GB">
+
+ <!-- Twitter Card -->
+ <meta property="twitter:card" content="summary">
+ <meta property="twitter:url" content="{PAGE_URL}">
+ <meta property="twitter:title" content="{PAGE_TITLE}">
+ <meta property="twitter:description" content="{PAGE_DESC}">
+ <meta property="twitter:image" content="{PAGE_IMAGE}">
+
+ <!-- Microdata -->
+ <script type="application/ld+json">
+ {
+ "@context": "http://schema.org",
+ "@type": "{SCHEMA_TYPE}",
+ "name": "{PAGE_TITLE}",
+ "headline": "{PAGE_TITLE}",
+ "url": "{PAGE_URL}",
+ "description": "{PAGE_DESC}",
+ "image": "{PAGE_IMAGE}"
+ }
+ </script>
+
+ <style>
+ :root {
+ --width: 720px;
+ --font-main: Verdana, sans-serif;
+ --font-secondary: Verdana, sans-serif;
+ --font-scale: 1.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;
+ }
+
+ 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);
+ }
+
+ h1 {
+ font-size: 1.5em;
+ }
+
+ h2 {
+ font-size: 1.3em;
+ }
+
+ h3 {
+ font-size: 1.1em;
+ }
+
+ a {
+ color: var(--link-color);
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ nav a {
+ margin-right: 8px;
+ }
+
+ strong,
+ b {
+ color: var(--heading-color);
+ }
+
+ button {
+ margin: 0;
+ cursor: pointer;
+ }
+
+ .time {
+ font-size: 15px;
+ }
+
+ .power {
+ font-size: 14px;
+ }
+
+ main {
+ line-height: 1.6;
+ }
+
+ table {
+ width: 100%;
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px dashed;
+ margin: 10px 0;
+ padding: 10px 0;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ blockquote {
+ border-left: 1px solid #999;
+ color: var(--code-color);
+ padding-left: 20px;
+ font-style: italic;
+ }
+
+ footer {
+ padding: 25px 0;
+ text-align: center;
+ }
+
+ footer p {
+ margin-bottom: 0;
+ }
+
+ .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;
+ }
+
+ 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:not(:has(a)) .tag-label {
+ display: none;
+ }
+
+ .tag-label,
+ .tags a {
+ font-size: 16px;
+ }
+
+ .pager.blog-pager {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .pager.blog-pager .previous {
+ margin-right: auto;
+ }
+
+ .pager.blog-pager .next {
+ margin-left: auto;
+ }
+
+ code,
+ pre {
+ font-family: "Courier New", monospace;
+ font-size: 1em;
+ }
+ code {
+ padding: 2px 4px;
+ font-size: 1rem;
+ color: #000;
+ background-color: #ffe0e0;
+ border-radius: 4px;
+ }
+ pre {
+ display: block;
+ padding: 9.5px;
+ margin-top: 20px;
+ margin-bottom: 3rem;
+ font-size: 1rem;
+ line-height: 1.42857143;
+ word-break: break-all;
+ word-wrap: break-word;
+ background-color: #f9f9f9;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+ pre code {
+ padding: 0;
+ font-size: inherit;
+ color: #000;
+ white-space: pre-wrap;
+ background-color: transparent;
+ border-radius: 0;
+ }
+ </style>
+ </head>
+
diff --git a/pa-py/themes/koala/header.html b/pa-py/themes/koala/header.html
new file mode 100644
index 0000000..86435e8
--- /dev/null
+++ b/pa-py/themes/koala/header.html
@@ -0,0 +1,9 @@
+
+ <header>
+ <a class="title" href="/">
+ <h1>My blog</h1>
+ </a>
+ <nav>
+ <p><a href='/'>Home</a> <a href='/about'>About</a> <a href='/archive'>Archive</a> <a href='/tags'>Tags</a></p>
+ </nav>
+ </header>
diff --git a/pa-py/themes/koala/main.html b/pa-py/themes/koala/main.html
new file mode 100644
index 0000000..52f8fc1
--- /dev/null
+++ b/pa-py/themes/koala/main.html
@@ -0,0 +1,17 @@
+ <main class="list-page">
+ <h1>Hi, I'm Koala.</h1>
+
+ <h3>I'm a copy of the excellent Bear Blog layout.</h3>
+ <p>Welcome to my blog. This is where I write and drop the occasional random thought and opinion.</p>
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+ <p>Thank you for stopping by. I hope you find this interesting.</p>
+ <h3>My most recent posts</h3>
+
+ <ul class="post-list">
+ {% for post in posts %}
+ <li>{date|format:%d %b %Y} - <a href="{post.url}">{post.title}</a></li>
+ {% endfor %}
+ </ul>
+
+ {pagination}
+ </main>
diff --git a/pa-py/themes/koala/page.html b/pa-py/themes/koala/page.html
new file mode 100644
index 0000000..f9e5cfd
--- /dev/null
+++ b/pa-py/themes/koala/page.html
@@ -0,0 +1,15 @@
+ <main class="single-page">
+ <article class="post-content">
+ <h1>{title}</h1>
+ <hr>
+ {% for image in image_data %}
+ <img src="{image.src}" alt="{image.alt}" class="img-title" width="544" height="306" fetchpriority="high">
+ {% endfor %}
+ {% for caption in caption_data %}
+ <div class="article-image-caption"><span>{caption}</span></div>
+ {% endfor %}
+ {content}
+ </article>
+ <hr>
+
+ </main>
diff --git a/pa-py/themes/koala/single.html b/pa-py/themes/koala/single.html
new file mode 100644
index 0000000..f8633d1
--- /dev/null
+++ b/pa-py/themes/koala/single.html
@@ -0,0 +1,33 @@
+ <main class="single-page">
+ <article class="post-content">
+ <h1>{title}</h1>
+ <p class="time">Published: {date|format:%d %b %Y}</p>
+ <hr>
+ {% for image in image_data %}
+ <img src="{image.src}" alt="{image.alt}" class="img-title" width="544" height="306" fetchpriority="high">
+ {% endfor %}
+ {% for caption in caption_data %}
+ <div class="article-image-caption"><span>{caption}</span></div>
+ {% endfor %}
+ {content}
+
+ <div class="tags">
+ <span class="tag-label">Tagged in:</span>
+ {% for tag in tags %}
+ <a href="/tags/{tag.url}/">#{tag.label}</a>
+ {% endfor %}
+ </div>
+ </article>
+ <hr>
+
+ <nav aria-label="Post navigation">
+ <div class="pager blog-pager">
+ {% for nav in nav_items %}
+ <span class="{nav.type}">
+ <a href="{nav.url}" title="{nav.title}" aria-label="{nav.type} post: {nav.title}">{nav.label}</a>
+ </span>
+ {% endfor %}
+ </div>
+ </nav>
+
+ </main>
diff --git a/pa-py/themes/koala/tags.html b/pa-py/themes/koala/tags.html
new file mode 100644
index 0000000..1fec170
--- /dev/null
+++ b/pa-py/themes/koala/tags.html
@@ -0,0 +1,9 @@
+ <main class="list-page">
+ <h1>{title}</h1>
+
+ <ul class="post-list">
+ {% for post in posts %}
+ <li><a href="{post.url}">{post.title}</a></li>
+ {% endfor %}
+ </ul>
+ </main>