xenua 2 years ago
parent
commit
06c39ebb60
  1. 80
      sass/code-highlight-dark.scss
  2. 74
      sass/style.sass
  3. 14
      static/script.js
  4. 37
      templates/base.html
  5. 14
      templates/index.html
  6. 26
      templates/macros.html
  7. 9
      templates/page.html
  8. 17
      templates/section.html
  9. 8
      theme.toml

80
sass/code-highlight-dark.scss

@ -1,80 +0,0 @@
/*
* based on Monokai, modified to fit reasonable colors
*/
@import 'reasonable-colors';
.z-comment {
color: $color-gray-3;
}
.z-string {
color: $color-amber-2;
}
.z-constant.z-numeric {
color: $color-purple-3;
}
.z-constant.z-language {
color: $color-purple-3;
}
.z-constant.z-character, .z-constant.z-other {
color: $color-purple-3;
}
.z-keyword {
color: $color-raspberry-3;
}
.z-storage {
color: $color-raspberry-3;
}
.z-storage.z-type {
color: $color-powder-2;
font-style: italic;
}
.z-entity.z-name.z-class {
color: $color-green-2;
font-style: underline;
}
.z-entity.z-other.z-inherited-class {
color: $color-green-2;
font-style: underline;
font-style: italic;
}
.z-entity.z-name.z-function {
color: $color-green-2;
}
.z-variable.z-parameter {
color: $color-cinnamon-2;
font-style: italic;
}
.z-entity.z-name.z-tag {
color: $color-raspberry-3;
}
.z-entity.z-other.z-attribute-name {
color: $color-green-2;
}
.z-support.z-function {
color: $color-powder-2;
}
.z-support.z-constant {
color: $color-powder-2;
}
.z-support.z-type, .z-support.z-class {
color: $color-powder-2;
font-style: italic;
}
.z-invalid {
color: $color-gray-1;
background-color: $color-raspberry-3;
}
.z-invalid.z-deprecated {
color: $color-gray-1;
background-color: $color-purple-3;
}
.z-path {
color: $color-indigo-3;
}
.z-generic {
color: $color-green-3;
}
.z-return-type {
color: $color-green-2;
}

74
sass/style.sass

@ -14,9 +14,9 @@
body body
display: grid display: grid
grid-template-areas: "nav content" "sidebar content" "footer content" grid-template-areas: "sidebar content" "footer content"
grid-template-rows: 50px 1fr 50px grid-template-rows: 1fr 50px
grid-template-columns: 20rem 1fr grid-template-columns: 20rem 1fr
grid-column-gap: 2rem grid-column-gap: 2rem
@ -34,6 +34,13 @@ body
div.debug div.debug
padding-left: 2ch padding-left: 2ch
div.sections
display: flex
flex-flow: column nowrap
padding-bottom: 0.5rem
border-bottom: 2px solid silver
margin-bottom: 0.5rem
a a
color: #0053a7 color: #0053a7
text-decoration: underline 0.1em rgba(0, 83, 167, 0) text-decoration: underline 0.1em rgba(0, 83, 167, 0)
@ -71,18 +78,6 @@ body
a a
white-space: nowrap white-space: nowrap
nav
@include padding-horiz(1rem)
grid-area: nav
height: 50px
display: flex
flex-flow: row nowrap
justify-content: space-between
align-items: center
background-color: #f2f2e1
article article
@include padding-horiz(2rem) @include padding-horiz(2rem)
margin: 1rem 0 margin: 1rem 0
@ -141,7 +136,6 @@ body
grid-area: sidebar grid-area: sidebar
overflow-y: scroll overflow-y: scroll
background-color: #f2f2e1 background-color: #f2f2e1
border-top: 2px solid rgba(0, 0, 0, 0.1)
border-bottom: 2px solid rgba(0, 0, 0, 0.1) border-bottom: 2px solid rgba(0, 0, 0, 0.1)
display: flex display: flex
flex-flow: column nowrap flex-flow: column nowrap
@ -158,56 +152,6 @@ body
cursor: pointer cursor: pointer
body.dark
// todo: fix lmao
background-color: #232327
color: #e7e3d5
a
color: #207edb
text-decoration-color: rgba(30, 115, 201, 0)
&:hover
text-decoration-color: rgba(30, 115, 201, 0.5)
&:visited
color: #aa99ff
&:active
color: #ed4523
article
font-family: "Iosevka Etoile Web"
color: #e9e3d3
background-color: #0a0b0c
background-image: url("rocky-wall-50.png")
pre
background-color: rgba(5, 5, 5, 0.6)
box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.5) inset
table td
mark
color: #e9e3d3
code
@import code-highlight-dark
mark
background-color: rgba($color-yellow-2, 0.1)
aside
background-color: #18181a
nav
background-color: #18181a
footer
background-color: #18181a
@media print @media print
body body
grid-template-areas: "sidebar" "content" "footer" grid-template-areas: "sidebar" "content" "footer"

14
static/script.js

@ -1,14 +0,0 @@
let placeholder = document.getElementById('theme-toggle-placeholder');
if (placeholder) {
let toggle = document.createElement("span");
toggle.id = "theme-toggle";
toggle.addEventListener("click", () => {
toggle_theme_pref();
update_theme();
update_theme_toggle();
});
placeholder.replaceWith(toggle);
update_theme_toggle();
}

37
templates/base.html

@ -20,42 +20,7 @@
{% endblock css -%} {% endblock css -%}
</head> </head>
<body {% if config.extra.default_dark %}class="dark"{% endif %}> <body>
<script>
function get_theme_pref() {
let pref_dark = false
if(localStorage.getItem('prefers-color') === 'dark') {
pref_dark = true;
} else if(localStorage.getItem('prefers-color') === 'light') {
pref_dark = false;
} else {
pref_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
}
return pref_dark;
}
function set_theme_pref(dark = false) {
localStorage.setItem('prefers-color', dark ? "dark" : "light");
}
function toggle_theme_pref() {
set_theme_pref(!get_theme_pref());
}
function update_theme() {
if (get_theme_pref()) {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
}
function update_theme_toggle() {
let toggle = document.getElementById('theme-toggle');
if (toggle) {
toggle.innerHTML = get_theme_pref() ? '☀' : '🌙';
}
}
update_theme();
</script>
<nav>{% block nav %}{% endblock %}</nav>
<aside>{% block aside %}{% endblock %}</aside> <aside>{% block aside %}{% endblock %}</aside>
<article> <article>
{%- block content %}<h1>override the content block in a template</h1>{% endblock -%} {%- block content %}<h1>override the content block in a template</h1>{% endblock -%}

14
templates/index.html

@ -20,14 +20,9 @@
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
{% block nav %}
<span>{{ config.extra.index_nav_text | default(value="") }}</span>
<noscript id="theme-toggle-placeholder"></noscript>
{% endblock nav %}
{% block footer %} {% block footer %}
<span> <span>
&copy; {{ now() | date(format='%Y') }} {{ now() | date(format='%Y') }}
{% if section.extra.author %} {% if section.extra.author %}
{{ section.extra.author }} {{ section.extra.author }}
{% elif config.extra.author %} {% elif config.extra.author %}
@ -45,12 +40,7 @@
{% endif %} {% endif %}
{% if section.subsections %} {% if section.subsections %}
{{ config.extra.subsections_string | default(value="Subsections:") }} {{ config.extra.subsections_string | default(value="Subsections:") }}
<ul> {{ macros::subsection_tree(subs=section.subsections) }}
{% for sub in section.subsections %}
{% set dom = sub | trim_end_matches(pat="/_index.md") %}
<li><a class="stealth" href="{{ dom }}">{{ dom }}</a></li>
{% endfor %}
</ul>
{% endif %} {% endif %}
{% if config.extra.xscratch_debug_info %} {% if config.extra.xscratch_debug_info %}
<span><strong>Debug info:</strong></span> <span><strong>Debug info:</strong></span>

26
templates/macros.html

@ -44,4 +44,28 @@
{{ thing }} {{ thing }}
{% endif %} {% endif %}
</div> </div>
{% endmacro %} {% endmacro debug %}
{% macro parent_tree(ancestors) %}
<div class="sections">
{% for sect in ancestors %}
{% set sect = get_section(path=sect) %}
<span style="padding-left: {{ loop.index0 }}em;">
<a href="{{ sect.permalink }}" class="stealth">
{{ sect.title }}/
</a>
</span>
{% endfor %}
</div>
{% endmacro section_tree %}
{% macro subsection_tree(subs) %}
<ul>
{% for sub in subs %}
{% set sub = get_section(path=sub) %}
<li><a href="{{ sub.permalink }}" class="stealth">
{{ sub.title }}
</a></li>
{% endfor %}
</ul>
{% endmacro subsection_tree %}

9
templates/page.html

@ -15,17 +15,14 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block nav %}
<span><a class="stealth" href="..">../{{ page.slug }}</a></span>
<noscript id="theme-toggle-placeholder"></noscript>
{% endblock %}
{% block content %} {% block content %}
<h1 id="page-title">{{ page.title }}</h1> <h1 id="page-title">{{ page.title }}</h1>
{{ page.content | safe }} {{ page.content | safe }}
{% endblock %} {% endblock %}
{% block aside %} {% block aside %}
{{ macros::parent_tree(ancestors=page.ancestors) }}
{% if page.date -%} {% if page.date -%}
<span id="page-publish-date">Published: <time>{{ page.date }}</time>{% if page.updated %}, Updated: <time>{{ page.updated }}</time>{% endif %}</span> <span id="page-publish-date">Published: <time>{{ page.date }}</time>{% if page.updated %}, Updated: <time>{{ page.updated }}</time>{% endif %}</span>
{%- endif %} {%- endif %}
@ -51,7 +48,7 @@
{% block footer %} {% block footer %}
<span> <span>
&copy; {{ now() | date(format='%Y') }} {{ now() | date(format='%Y') }}
{% if page.extra.author %} {% if page.extra.author %}
{{ page.extra.author }} {{ page.extra.author }}
{% elif config.extra.author %} {% elif config.extra.author %}

17
templates/section.html

@ -20,15 +20,9 @@
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
{% block nav %}
{% set dom = section.relative_path | trim_end_matches(pat="/_index.md") %}
<span><a class="stealth" href="..">../{{ dom }}</a></span>
<noscript id="theme-toggle-placeholder"></noscript>
{% endblock %}
{% block footer %} {% block footer %}
<span> <span>
&copy; {{ now() | date(format='%Y') }} {{ now() | date(format='%Y') }}
{% if section.extra.author %} {% if section.extra.author %}
{{ section.extra.author }} {{ section.extra.author }}
{% elif config.extra.author %} {% elif config.extra.author %}
@ -38,6 +32,8 @@
{% endblock %} {% endblock %}
{% block aside %} {% block aside %}
{{ macros::parent_tree(ancestors=section.ancestors) }}
{% if section.title %} {% if section.title %}
<h1>{{ section.title }}</h1> <h1>{{ section.title }}</h1>
{% endif %} {% endif %}
@ -46,12 +42,7 @@
{% endif %} {% endif %}
{% if section.subsections %} {% if section.subsections %}
{{ config.extra.subsections_string | default(value="Subsections:") }} {{ config.extra.subsections_string | default(value="Subsections:") }}
<ul> {{ macros::subsection_tree(subs=section.subsections) }}
{% for sub in section.subsections %}
{% set dom = sub | trim_end_matches(pat="/_index.md") %}
<li><a class="stealth" href="{{ dom }}">{{ dom }}</a></li>
{% endfor %}
</ul>
{% endif %} {% endif %}
{% if config.extra.xscratch_debug_info %} {% if config.extra.xscratch_debug_info %}

8
theme.toml

@ -7,14 +7,6 @@ min_version = "0.4.0"
# An optional live demo URL # An optional live demo URL
demo = "" demo = ""
# 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]
default_dark = false
# The theme author info: you! # The theme author info: you!
[author] [author]
name = "xenua" name = "xenua"

Loading…
Cancel
Save