Move templating and stuff to theme repo

This commit is contained in:
CherryKitten 2023-08-01 19:56:59 +02:00
parent d580a80189
commit 396f7c59d6
Signed by: sammy
GPG key ID: 0B696A86A853E955
26 changed files with 6 additions and 1137 deletions

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "themes/cherrykitten"]
path = themes/cherrykitten
url = git@git.cherrykitten.dev:sammy/zola-theme-cherrykitten

View file

@ -2,6 +2,8 @@
base_url = "https://cherrykitten.dev"
title = "CherryKitten"
theme = "cherrykitten"
compile_sass = true
# Whether to build a search index to be used later on by a JavaScript library

View file

@ -1,92 +0,0 @@
.button-container {
display: table;
margin-left: auto;
margin-right: auto;
}
button,
.button,
a.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
text-align: center;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
/* variants */
&.outline {
background: transparent;
box-shadow: none;
padding: 8px 18px;
:hover {
transform: none;
box-shadow: none;
}
}
&.primary {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
&:hover {
box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
}
}
&.link {
background: none;
font-size: 1rem;
}
/* sizes */
&.small {
font-size: .8rem;
}
&.wide {
min-width: 200px;
padding: 14px 24px;
}
}
a.read-more,
a.read-more:hover,
a.read-more:active {
display: inline-flex;
background: none;
box-shadow: none;
padding: 0;
margin: 20px 0;
max-width: 100%;
}
.code-toolbar {
margin-bottom: 20px;
.toolbar-item a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
margin-bottom: 5px;
text-align: center;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
}
}

View file

@ -1,11 +0,0 @@
:root {
--accent: rgb(235, 111, 146);
--accent2: rgb(246, 193, 119);
--accent3: rgb(62, 143, 176);
--accent-alpha-70: rgba(235, 111, 146,.7);
--accent-alpha-20: rgba(235, 111, 146,.2);
--background: #232136;
--color: #e0def4;
--border-color: rgba(246, 193, 119, .1);
}

View file

@ -1,52 +0,0 @@
@import "variables";
.footer {
padding: 40px 0;
flex-grow: 0;
opacity: .5;
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
width: 760px;
max-width: 100%;
@media (max-width: $tablet-max-width) {
flex-direction: column;
}
}
a {
color: inherit;
}
.copyright {
display: flex;
flex-direction: row;
align-items: center;
font-size: 1rem;
color: var(--light-color-secondary);
&--user {
margin: auto;
text-align: center;
}
& > *:first-child:not(:only-child) {
margin-right: 10px;
@media (max-width: $tablet-max-width) {
border: none;
padding: 0;
margin: 0;
}
}
@media (max-width: $tablet-max-width) {
flex-direction: column;
margin-top: 10px;
}
}
}

View file

@ -1,98 +0,0 @@
@import "variables";
@mixin menu {
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
.header {
display: flex;
flex-direction: column;
position: relative;
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
&__logo {
display: flex;
flex: 1;
&:after {
content: '';
background: repeating-linear-gradient(90deg,var(--accent) 0%, transparent 8%, var(--accent2) 50%,var(--accent3) 100% );
display: block;
width: 100%;
right: 10px;
border-radius: 0 20px 20px 0;
}
a {
flex: 0 0 auto;
max-width: 100%;
}
}
.menu {
margin: 20px 0;
&__inner {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
li {
color: var(--accent3);
&.active {
color: var(--accent-alpha-70);
}
&:not(:last-of-type) {
margin-right: 20px;
margin-bottom: 10px;
flex: 0 0 auto;
}
}
}
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
margin: 0;
&:not(:only-child) {
margin-left: 20px;
}
&-more {
@include menu;
top: 35px;
left: 0;
&-trigger {
color: var(--accent);
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
}
}
}
}
}

View file

@ -1,9 +0,0 @@
.logo {
display: flex;
align-items: center;
text-decoration: none;
background: var(--accent);
color: black;
padding: 5px 10px;
border-radius: 20px 0 0 20px;
}

View file

@ -1,255 +0,0 @@
@import "variables";
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: Monaco, Consolas, Ubuntu Mono, monospace;
font-size: 1rem;
line-height: 1.54;
background-color: var(--background);
color: var(--color);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
@media (max-width: $phone-max-width) {
font-size: 1rem;
}
}
h1, h2, h3, h4, h5, h6 {
display: flex;
align-items: center;
font-weight: bold;
line-height: 1.3;
color: var(--accent2);
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.3rem;
}
h3 {
font-size: 1.2rem;
}
h4, h5, h6 {
font-size: 1.15rem;
}
a {
color: inherit;
}
img {
display: block;
max-width: 100%;
&.left {
margin-right: auto;
}
&.center {
margin-left: auto;
margin-right: auto;
}
&.right {
margin-left: auto;
}
}
p {
margin-bottom: 20px;
}
figure {
display: table;
max-width: 100%;
margin: 25px 0;
&.left {
img {
margin-right: auto;
}
}
&.center {
img {
margin-left: auto;
margin-right: auto;
}
}
&.right {
img {
margin-left: auto;
}
}
figcaption {
font-size: 14px;
padding: 5px 10px;
margin-top: 5px;
background: var(--accent);
color: var(--background);
&.left {
text-align: left;
}
&.center {
text-align: center;
}
&.right {
text-align: right;
}
}
}
code {
font-family: monospace;
font-feature-settings: normal;
background: var(--accent-alpha-20);
padding: 1px 6px;
margin: 0 2px;
font-size: .95rem;
}
pre {
font-family: monospace;
padding: 20px;
font-size: .95rem;
overflow: auto;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgba(255, 255, 255, .1);
@media (max-width: $phone-max-width) {
white-space: pre-wrap;
word-wrap: break-word;
}
code {
padding: 0;
margin: 0;
background: none;
}
}
blockquote {
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
margin: 40px 0;
padding: 25px;
@media (max-width: $phone-max-width) {
padding-right: 0;
}
&:before {
content: '';
font-family: Georgia, serif;
font-size: 3.875rem;
position: absolute;
left: -40px;
top: -20px;
}
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
p {
position: relative;
}
p:before {
content: '>';
display: block;
position: absolute;
left: -25px;
color: var(--accent);
}
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 40px 0;
}
table, th, td {
border: 1px dashed var(--accent);
padding: 10px;
}
th {
color: var(--accent);
}
ul, ol {
margin-left: 30px;
padding: 0;
li {
position: relative;
}
@media (max-width: $phone-max-width) {
margin-left: 20px;
}
}
ol ol {
list-style-type: lower-alpha;
}
.container {
display: flex;
flex-direction: column;
padding: 40px;
max-width: 864px;
min-height: 100vh;
margin: 0 auto;
@media (max-width: $phone-max-width) {
padding: 20px;
}
}
.content {
display: flex;
}
hr {
width: 100%;
border: none;
background: var(--border-color);
height: 1px;
}
.hidden {
display: none;
}

View file

@ -1,77 +0,0 @@
@import 'variables';
.pagination {
margin-top: 50px;
&__title {
display: flex;
text-align: center;
position: relative;
margin: 100px 0 20px;
&-h {
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: var(--background);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
z-index: 1;
}
hr {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 15px;
z-index: 0;
}
}
&__buttons {
display: flex;
align-items: center;
justify-content: center;
@media (max-width: $phone-max-width) {
flex-direction: column;
}
}
}
.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 8px;
max-width: 40%;
padding: 0;
cursor: pointer;
appearance: none;
@media (max-width: $phone-max-width) {
max-width: 80%;
}
+ .button {
margin-left: 10px;
}
a {
display: flex;
padding: 8px 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&__text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}

View file

@ -1,135 +0,0 @@
@import "variables";
.posts {
width: 100%;
margin: 0 auto;
}
.post {
width: 100%;
text-align: left;
margin: 20px auto;
padding: 20px 0;
@media (max-width: $tablet-max-width) {
max-width: 660px;
}
&:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
%meta {
font-size: 1rem;
margin-bottom: 10px;
color: var(--accent-alpha-70);
}
&-meta {
@extend %meta;
}
&-meta-inline {
@extend %meta;
display: inline;
}
&-title {
--border: 2px dashed var(--accent);
position: relative;
color: var(--accent2);
margin: 0 0 15px;
padding-bottom: 15px;
border-bottom: var(--border);
font-weight: normal;
a {
text-decoration: none;
}
}
%tags {
margin-bottom: 20px;
font-size: 1rem;
opacity: .5;
}
&-tags {
@extend %tags;
display: block;
}
&-tags-inline {
@extend %tags;
display: inline;
@media (max-width: $phone-max-width) {
display: block;
}
}
&-content {
margin-top: 30px;
}
&-cover {
border: 20px solid var(--accent);
background: transparent;
margin: 40px 0;
padding: 20px;
@media (max-width: $phone-max-width) {
padding: 10px;
border-width: 10px;
}
}
ul {
list-style: none;
li:before {
content: '';
position: absolute;
left: -20px;
color: var(--accent);
}
}
}
.post--regulation {
h1 {
justify-content: center;
}
h2 {
justify-content: center;
margin-bottom: 10px;
&+ h2 {
margin-top: -10px;
margin-bottom: 20px;
}
}
}
.post-list {
.post-date {
color: var(--accent3);
text-decoration: none;
}
a {
text-decoration: none;
}
.post-list-title {
text-decoration: underline;
}
.post-tag {
text-decoration: underline;
}
}

View file

@ -1,8 +0,0 @@
@import 'buttons';
@import 'header';
@import 'logo';
@import 'main';
@import 'post';
@import 'pagination';
@import 'footer';

View file

@ -1,2 +0,0 @@
$phone-max-width: 683px;
$tablet-max-width: 899px;

View file

@ -1,16 +0,0 @@
{% extends "index.html" %}
{% block title %}
404
{% endblock title %}
{% block header_menu %}
{{ menu_macros::menu_for(config=config, current_item="") }}
{% endblock header_menu %}
{% block content %}
<div class="post">
<h1 class="post-title">{% block heading %}Lost?{% endblock heading %}</h1>
<p>{% block message %}This page does not exist.{% endblock message %}</p>
</div>
{% endblock content %}

View file

@ -1,15 +0,0 @@
{% extends "index.html" %}
{%- block title -%}
{{ title_macros::title(page_title=page.title, main_title=config.title) }}
{%- endblock -%}
{% block content %}
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
{% set section = get_section(path="_index.md") %}
{{ post_macros::list_posts(pages=section.pages) }}
</div>
{% endblock content %}

View file

@ -1,117 +0,0 @@
{% import "macros/date.html" as date_macros -%}
{% import "macros/head.html" as head_macros -%}
{% import "macros/menu.html" as menu_macros -%}
{% import "macros/post.html" as post_macros -%}
{% import "macros/title.html" as title_macros -%}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{%- block title %}{{ config.title }}{% endblock title -%}</title>
{{ head_macros::head(config=config) }}
{%- if config.generate_feed %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=" rss.xml
") | safe }}">
{% endif -%}
{%- if config.extra.favicon %}
<link rel="shortcut icon" type="{{ config.extra.favicon_mimetype | default(value=" image
/x-icon") | safe }}" href="{{ config.extra.favicon | safe }}">
{% endif -%}
{%- block extra_head %}
{% endblock extra_head -%}
</head>
<body class="">
<div class="container">
{% block header %}
<header class="header">
<div class="header__inner">
<div class="header__logo">
{%- if config.logo_home_link %}
{% set logo_link = config.logo_home_link %}
{% else %}
{% set logo_link = config.base_url %}
{% endif -%}
<a href="{{ logo_link | safe }}" style="text-decoration: none;">
<div class="logo">
{% block logo_content %}
{{ config.extra.logo_text }}
{% endblock logo_content %}
</div>
</a>
</div>
</div>
{% block header_menu %}
{{ menu_macros::menu(config=config, current_path=current_path) }}
{% endblock header_menu %}
</header>
{% endblock header %}
<div class="content">
{% block content %}
<div class="posts">
{%- if paginator %}
{%- set show_pages = paginator.pages -%}
{% else %}
{%- set show_pages = section.pages -%}
{% endif -%}
{%- for page in show_pages %}
<div class="post on-list">
{{ post_macros::header(page=page) }}
{{ post_macros::content(page=page, summary=true) }}
</div>
{% endfor -%}
<div class="pagination">
<div class="pagination__buttons">
{%- if paginator.previous %}
<span class="button previous">
<a href="{{ paginator.previous | safe }}">
<span class="button__icon"></span>&nbsp;
<span class="button__text">Newer posts</span>
</a>
</span>
{% endif -%}
{%- if paginator.next %}
<span class="button next">
<a href="{{ paginator.next | safe }}">
<span class="button__text">Older posts</span>&nbsp;
<span class="button__icon"></span>
</a>
</span>
{% endif -%}
</div>
</div>
</div>
{% endblock content %}
</div>
{% block footer %}
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<a href="https://liberapay.com/CherryKitten/donate"><img
alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a>
 
<span>&copy; {{ date_macros::now_year() }} - CherryKitten</span><br>
 
<span><a href="/impressum">Impressum</a></span>
 
<span><a href="/rss.xml">RSS</a></span>
 
<span onclick="alert('Nya!')">🐱</span></div>
</div>
</footer>
{% endblock footer %}
</div>
{%- block extra_body %}
{% endblock extra_body -%}
</body>
</html>

View file

@ -1,3 +0,0 @@
{% macro now_year() %}
{{ now() | date(format="%Y") }}
{% endmacro %}

View file

@ -1,9 +0,0 @@
{% macro head(config) %}
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="robots" content="noodp"/>
<link rel="stylesheet" href="{{ get_url(path="style.css", trailing_slash=false) | safe }}">
<link rel="stylesheet" href="{{ get_url(path="color.css", trailing_slash=false) | safe }}">
{% endmacro head %}

View file

@ -1,52 +0,0 @@
{% macro menu(config, current_path) %}
{%- set current_item = false -%}
{%- if config.extra.menu_items %}
{%- set menu_items = config.extra.menu_items -%}
{%- for item in menu_items %}
{%- set abs_item_url = item.url | replace(from="$BASE_URL", to=config.base_url) -%}
{%- set is_current = current_url == abs_item_url ~ "/"
or current_url is starting_with(abs_item_url)
-%}
{%- set is_base = abs_item_url == config.base_url
or abs_item_url == config.base_url ~ "/"
-%}
{%- if is_base %}
{%- set_global base_item = item -%}
{% endif -%}
{%- if is_current and not is_base %}
{%- set_global current_item = item -%}
{% endif -%}
{% endfor -%}
{%- if not current_item and base_item %}
{# Did not match any menu URLs -- assume it's a blog post #}
{%- set current_item = base_item -%}
{% endif -%}
{{ menu_macros::menu_for(config=config, current_item=current_item) }}
{% endif -%}
{% endmacro menu %}
{% macro menu_for(config, current_item) %}
{%- if config.extra.menu_items %}
{%- set menu_items = config.extra.menu_items -%}
<nav class="menu">
<ul class="menu__inner">
{%- for item in menu_items %}
<li {%- if current_item and current_item == item %} class="active" {%- endif %}>
{%- if item.newtab -%}
<a href="{{ item.url | replace(from="$BASE_URL", to=config.base_url) | safe }}" target="_blank" rel="noopener noreferrer">{{ item.name | safe }}</a>
{%- else -%}
<a href="{{ item.url | replace(from="$BASE_URL", to=config.base_url) | safe }}">{{ item.name | safe }}</a>
{%- endif -%}
</li>
{% endfor -%}
</ul>
</nav>
{% endif -%}
{% endmacro menu %}

View file

@ -1,103 +0,0 @@
{% macro content(page, summary) %}
{%- if summary and page.summary %}
<div class="post-content">
{{ page.summary | safe }}
</div>
<div>
<!-- &#xFE0E; -- force text style - some devices render this as emoji -->
<a class="read-more button" href="{{ page.permalink | safe }}">
<span class="button__text">Read more</span>&nbsp;
<span class="button__icon">&#8617;&#xFE0E;</span>
</a>
</div>
{% else %}
<div class="post-content">
{{ page.content | safe }}
</div>
{%- endif %}
{% endmacro content %}
{% macro date(page) %}
<span class="post-date">
{%- if page.date %}
{{ page.date | date(format="%Y-%m-%d") }}
{% endif -%}
</span>
{% endmacro post_date %}
{% macro earlier_later(page) %}
{%- if config.extra.enable_post_view_navigation and page.lower or page.higher %}
<div class="pagination">
<div class="pagination__title">
<span class="pagination__title-h">{{ config.extra.post_view_navigation_prompt }}</span>
<hr />
</div>
<div class="pagination__buttons">
{%- if page.higher %}
<span class="button previous">
<a href="{{ page.higher.permalink | safe }}">
<span class="button__icon"></span>&nbsp;
<span class="button__text">{{ page.higher.title }}</span>
</a>
</span>
{% endif %}
{% if page.lower %}
<span class="button next">
<a href="{{ page.lower.permalink | safe }}">
<span class="button__text">{{ page.lower.title }}</span>&nbsp;
<span class="button__icon"></span>
</a>
</span>
{% endif -%}
</div>
</div>
{% endif -%}
{% endmacro earlier_later %}
{% macro header(page) %}
<h1 class="post-title"><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1>
<div class="post-meta-inline">
{{ post_macros::date(page=page) }}
</div>
{{ post_macros::tags(page=page) }}
{% endmacro header %}
{% macro list_posts(pages) %}
<ul>
{%- for page in pages %}
{%- if page.draft %}
{% continue %}
{% endif -%}
<li class="post-list">
<a href="{{ page.permalink | safe }}">
<span class="post-date">{{ page.date }}</span>
:: <span class="post-list-title">{{ page.title }}</span></a>
{{ post_macros::tags(page=page, short=true) }}
</li>
{% endfor -%}
</ul>
{% endmacro list_posts %}
{% macro tags(page, short=false) %}
{%- if page.taxonomies and page.taxonomies.tags %}
<span class="post-tags-inline">
{%- if short %}
::
{%- set sep = "," -%}
{% else %}
:: tags:&nbsp;
{%- set sep = "&nbsp;" -%}
{% endif -%}
{%- for tag in page.taxonomies.tags %}
<a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
{%- if not loop.last %}{{ sep | safe }}{% endif -%}
{% endfor -%}
</span>
{% endif -%}
{% endmacro tags %}

View file

@ -1,17 +0,0 @@
{% macro title(page_title, main_title) %}
{%- if config.extra.page_titles == "combined" -%}
{%- if page_title -%}
{{ page_title }} | {{ main_title }}
{%- else -%}
{{ main_title }}
{%- endif -%}
{%- elif config.extra.page_titles == "page_only" -%}
{%- if page_title -%}
{{ page_title }}
{%- else -%}
{{ main_title }}
{%- endif -%}
{%- else -%}
{{ main_title }}
{%- endif -%}
{% endmacro title %}

View file

@ -1,13 +0,0 @@
{% extends "index.html" %}
{%- block title -%}
{{ title_macros::title(page_title=page.title, main_title=config.title) }}
{%- endblock -%}
{% block content %}
<div class="post">
{{ post_macros::header(page=page) }}
{{ post_macros::content(page=page, summary=false) }}
{{ post_macros::earlier_later(page=page) }}
</div>
{% endblock content %}

View file

@ -1,8 +0,0 @@
{% if src %}
<figure class="{% if position %}{{ position }}{% else -%} center {%- endif %}" >
<img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if style %} style="{{ style }}"{% endif %} />
{% if caption %}
<figcaption class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"{% if caption_style %} style="{{ caption_style | safe }}"{% endif %}>{{ caption }}</figcaption>
{% endif %}
</figure>
{% endif %}

View file

@ -1,3 +0,0 @@
{% if src %}
<img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %} class="{% if position %}{{ position }}{% else -%} center {%- endif %}" {%- if style %} style="{{ style | safe }}" {%- endif %} />
{% endif %}

View file

@ -1,21 +0,0 @@
{% extends "index.html" %}
{%- block title -%}
{{ title_macros::title(page_title="Tags", main_title=config.title) }}
{%- endblock -%}
{% block content %}
<div class="post">
<h1 class="post-title">all tags</h1>
<ul>
{% for term in terms %}
<li class="tag-list">
<a href="{{ term.permalink | safe }}">
{{ term.name }} ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
</a>
</li>
{% endfor %}
</ul>
</div>
{% endblock content %}

View file

@ -1,21 +0,0 @@
{% extends "index.html" %}
{%- block title -%}
{% set title = "Tag: " ~ term.name %}
{{ title_macros::title(page_title=title, main_title=config.title) }}
{%- endblock -%}
{% block content %}
<div class="post">
<h1 class="post-title">
tag: #{{ term.name }}
({{ term.pages | length }} post{{ term.pages | length | pluralize }})
</h1>
<a href="{{ config.base_url | safe }}/tags">
Show all tags
</a>
{{ post_macros::list_posts(pages=term.pages) }}
</div>
{% endblock content %}

1
themes/cherrykitten Submodule

@ -0,0 +1 @@
Subproject commit 32acca8d1f30355cde4c3b863e9c280467f005eb