Start working on custom zenn theme
This commit is contained in:
timvisee
parent
cf8ea776b9
commit
44c0e2259a
11
config.toml
11
config.toml
|
|
@ -22,6 +22,17 @@ taxonomies = [
|
|||
[extra]
|
||||
author = "Tim Visée"
|
||||
|
||||
zenn_title = "Tim Visée"
|
||||
zenn_menu = [
|
||||
{url = "$BASE_URL", name = "Home"},
|
||||
{url = "$BASE_URL/projects", name = "Projects"},
|
||||
{url = "$BASE_URL/blog", name = "Blog"},
|
||||
{url = "$BASE_URL/categories", name = "Categories"},
|
||||
{url = "$BASE_URL/tags", name = "Tags"},
|
||||
{url = "$BASE_URL/about", name = "About"},
|
||||
{url = "https://timvisee.com", name = "timvisee.com"},
|
||||
]
|
||||
|
||||
after_dark_title = "Tim Visée"
|
||||
after_dark_menu = [
|
||||
{url = "$BASE_URL", name = "Home"},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ tags = ["test"]
|
|||
categories = ["dev"]
|
||||
+++
|
||||
|
||||
# Sample article
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
<!-- more -->
|
||||
|
|
@ -17,6 +16,13 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
|||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
|
||||
```bash
|
||||
# A random command
|
||||
ffsend upload $file --copy
|
||||
|
||||
rm -rf /
|
||||
```
|
||||
```bash
|
||||
# A random command
|
||||
ffsend upload $file --copy
|
||||
|
|
|
|||
|
|
@ -7,15 +7,8 @@ tags = ["test"]
|
|||
categories = ["dev"]
|
||||
+++
|
||||
|
||||
# Sample article
|
||||
Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
<!-- more -->
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
```bash
|
||||
# A random command
|
||||
|
|
@ -24,6 +17,14 @@ ffsend upload $file --copy
|
|||
rm -rf /
|
||||
```
|
||||
|
||||
<!-- more -->
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
## Another section
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
+++
|
||||
paginate_by = 5
|
||||
title = "Blog"
|
||||
|
||||
sort_by = "date"
|
||||
paginate_by = 5
|
||||
insert_anchor_links = "right"
|
||||
|
||||
template = "index.html"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
|
|
@ -0,0 +1 @@
|
|||
/home/timvisee/git/blog.timvisee.com/themes/zenn/templates/
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
$light-text: #202020;
|
||||
$dark-text: #ccc;
|
||||
$background: #212931;
|
||||
$background-darker: darken($background, 4%);
|
||||
$background-border: darken($background, 8%);
|
||||
$header-color: #BEA38C;
|
||||
$link-color: $header-color;
|
||||
$link-color-hover: lighten($link-color, 15%);
|
||||
|
||||
$logo-color: #fff;
|
||||
$logo-color-hover: $link-color;
|
||||
|
||||
// Setup the function in your functions or helpers files, wherever you keep these bits.
|
||||
@function headings($from:1, $to:6) {
|
||||
@if $from == $to {
|
||||
@return 'h#{$from}';
|
||||
} @else {
|
||||
@return 'h#{$from},' + headings($from+1, $to);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
color: $light-text;
|
||||
|
||||
// TODO: check these
|
||||
// background-color: #212931;
|
||||
// background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("/images/background.jpg");
|
||||
// background-size: auto, 100% auto;
|
||||
// background-position: center, top center;
|
||||
// background-repeat: no-repeat, no-repeat;
|
||||
// background-attachment: scroll, scroll;
|
||||
font-family: 'Source Sans Pro', Ubuntu, sans-serif;
|
||||
background-color: #212931;
|
||||
background-image: url("/images/background.jpg");
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
#{headings(1,6)} {
|
||||
font-family: "Zilla Slab", "Open Sans", X-LocaleSpecific, sans-serif;
|
||||
color: $header-color;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2rem
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:1.75em
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:1.5em
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size:1.25em
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid $background-border;
|
||||
padding: 0.5em;
|
||||
box-shadow: 0 0 10px 5px rgba($background-border, 0.4);
|
||||
}
|
||||
|
||||
body > header {
|
||||
text-align: center;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
body > header {
|
||||
margin-top: 1em;
|
||||
min-height: auto;
|
||||
background: none
|
||||
}
|
||||
}
|
||||
|
||||
body > header .logo {
|
||||
display: inline-block;
|
||||
margin: 0.5em 0;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
||||
// TODO: update these!
|
||||
transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
|
||||
color: $logo-color;
|
||||
border-style: solid;
|
||||
border-color: $logo-color;
|
||||
border-width: 5px !important;
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1;
|
||||
padding: 1rem 1.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
body > header .logo:hover {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
}
|
||||
body > header .logo:active {
|
||||
background-color: rgba($logo-color-hover, 0.2) !important;
|
||||
color: $logo-color-hover !important;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-bottom: 1em;
|
||||
display: flex;
|
||||
color: $dark-text;
|
||||
border: 1px solid $background-border;
|
||||
box-shadow: 0 0 10px 5px rgba($background-border, 0.4);
|
||||
}
|
||||
|
||||
content {
|
||||
padding: 2.5em 3em;
|
||||
background: $background;
|
||||
flex: 1;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
content {
|
||||
padding: 2.5em 1em;
|
||||
}
|
||||
}
|
||||
content > #{headings(1,6)} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 1px solid $background-border;
|
||||
}
|
||||
|
||||
content .muted {
|
||||
color: darken($dark-text, 25%);
|
||||
}
|
||||
|
||||
sidebar {
|
||||
width: 20em;
|
||||
padding: 2.5em 1.5em;
|
||||
box-sizing: border-box;
|
||||
background: $background-darker;
|
||||
}
|
||||
sidebar h1 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
sidebar #{headings(1,6)} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
sidebar > section {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
sidebar {
|
||||
width: auto
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2.5em 0;
|
||||
font-family: 'Merriweather', serif;
|
||||
text-align: justify;
|
||||
border-bottom: 1px solid $background-border;
|
||||
}
|
||||
|
||||
article.single {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
article > header {
|
||||
#{headings(1,6)} {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
{% import "post_macros.html" as post_macros %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
|
||||
|
||||
{% block css %}
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Zilla+Slab:400,700|Merriweather:400,400i,700,700i&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ get_url(path="zenn.css", trailing_slash=false) | safe }}">
|
||||
{% endblock css %}
|
||||
|
||||
{% if config.generate_rss %}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
|
||||
{% endif %}
|
||||
|
||||
{% block extra_head %}
|
||||
{% endblock extra_head %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% if config.extra.zenn_title %}
|
||||
{% block header %}
|
||||
<header>
|
||||
<a href="/" class="logo">{{ config.extra.zenn_title }}</a>
|
||||
</header>
|
||||
{% endblock header %}
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<content>
|
||||
{% if section.title %}
|
||||
<h1>{{ section.title }}</h1>
|
||||
{% endif %}
|
||||
|
||||
{% for page in paginator.pages %}
|
||||
{{ post_macros::page_in_list(page=page) }}
|
||||
{% endfor %}
|
||||
|
||||
<nav>
|
||||
<p>
|
||||
{% if paginator.previous %}
|
||||
<a href="{{ paginator.previous }}">« Previous</a> |
|
||||
{% endif %}
|
||||
<span class="muted">Page {{ paginator.current_index }} of {{ paginator.number_pagers }}</span>
|
||||
{% if paginator.next %}
|
||||
| <a href="{{ paginator.next }}">Next »</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</nav>
|
||||
</content>
|
||||
<sidebar>
|
||||
{% if config.extra.zenn_menu %}
|
||||
<section>
|
||||
<h1>Menu</h1>
|
||||
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
{% for item in config.extra.after_dark_menu %}
|
||||
<a itemprop="url"
|
||||
class="{% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}active{% endif %}"
|
||||
href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
|
||||
<span itemprop="name">{{ item.name }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section>
|
||||
<h1>Categories</h1>
|
||||
<p>...</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Tags</h1>
|
||||
<p>...</p>
|
||||
</section>
|
||||
</sidebar>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{% macro meta(page) %}
|
||||
<span class="meta muted">
|
||||
<svg style="margin-bottom:-3px" class="i-clock" viewBox="0 0 32 32"
|
||||
width="16" height="16" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
|
||||
<circle cx="16" cy="16" r="14"/>
|
||||
<path d="M16 8 L16 16 20 20"/>
|
||||
</svg>
|
||||
<span>{{ page.reading_time }} minute read</span>
|
||||
|
||||
{% if page.date %}
|
||||
<svg style="margin-bottom: -3px" class="i-edit" viewBox="0 0 32 32"
|
||||
width="16" height="16" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
|
||||
<path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z"/>
|
||||
</svg>
|
||||
|
||||
Published: {{ page.date | date(format="%F") }}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endmacro meta %}
|
||||
|
||||
{% macro page_in_list(page) %}
|
||||
<article itemscope itemtype="http://schema.org/CreativeWork">
|
||||
<header>
|
||||
<h1 itemprop="name">
|
||||
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
|
||||
</h1>
|
||||
{{ self::meta(page=page) }}
|
||||
</header>
|
||||
{% if page.summary %}
|
||||
<div itemprop="summary">
|
||||
{{ page.summary | safe }}
|
||||
<nav class="readmore"><a itemprop="url" href="{{ page.permalink | safe }}">Read More »</a></nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endmacro page_in_list %}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
name = "zenn"
|
||||
description = "A robust, elegant dark theme"
|
||||
license = "GPL-3.0"
|
||||
homepage = "https://gitlab.com/timvisee/blog.timvisee.com"
|
||||
min_version = "0.8.0"
|
||||
demo = "https://blog.timvisee.com/"
|
||||
|
||||
[extra]
|
||||
|
||||
[author]
|
||||
name = "Tim Visée"
|
||||
homepage = "https://timvisee.com/"
|
||||
Loading…
Reference in New Issue