added sticky footer, new SVG icons, and some minor fixes to the layout

This commit is contained in:
Speyll 2023-09-09 18:20:39 +01:00
parent de633ec8f2
commit d27284fecb
13 changed files with 367 additions and 345 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 59 KiB

View file

@ -62,7 +62,9 @@
html { html {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font-size: 62.5% font-size: 62.5%;
scrollbar-color: var(--metaColor) var(--bgColor);
scrollbar-width: thin;
} }
body { body {
@ -71,7 +73,6 @@ body {
line-height: 1.35; line-height: 1.35;
max-width: 64rem; max-width: 64rem;
margin: auto; margin: auto;
padding: 1rem;
overflow-wrap: break-word; overflow-wrap: break-word;
background: var(--bgColor); background: var(--bgColor);
color: var(--fgColor); color: var(--fgColor);
@ -79,7 +80,6 @@ body {
h1 { h1 {
font-size: 2.4rem; font-size: 2.4rem;
margin: 1rem 1rem 1.5rem 0;
color: var(--bgColor); color: var(--bgColor);
background-color: var(--metaColor); background-color: var(--metaColor);
text-align: center; text-align: center;
@ -101,6 +101,9 @@ h6::before {
} }
a { a {
text-decoration: none;
padding: 0 .2rem 0 .2rem;
border-radius: .3rem;
color: var(--linkColor); color: var(--linkColor);
} }
@ -128,13 +131,6 @@ ul li:hover::marker {
color: var(--linkColor) color: var(--linkColor)
} }
li:hover {
transform: scale(1.02);
-webkit-transition: .1s ease-in;
-moz-transition: .1s ease-in;
-o-transition: .1s ease-in;
}
blockquote { blockquote {
border-left: 5px solid var(--metaColor); border-left: 5px solid var(--metaColor);
margin: 1rem; margin: 1rem;
@ -172,11 +168,15 @@ pre {
p code, p code,
li code, li code,
div code { div code {
padding: 0 .2rem 0 .2rem;
border-radius: .3rem;
color: var(--bgColor); color: var(--bgColor);
background-color: var(--fgColor); background-color: var(--fgColor);
} }
pre code { pre code {
padding: 0;
border-radius: 0;
color: inherit; color: inherit;
background-color: inherit; background-color: inherit;
} }
@ -229,9 +229,33 @@ textarea {
color: var(--metaColor) color: var(--metaColor)
} }
/* Site Specific Styling */
.wrapper {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2rem;
}
/* Icons settings */
.icons {
width: 2.0rem;
height: 2.0rem;
aspect-ratio: 1/1;
top: .3rem;
position: relative;
color: var(--fgColor);
fill: var(--fgColor);
background-color: transparent;
}
.icons__background:hover {
background-color: transparent;
color: var(--metaColor);
}
.navBar { .navBar {
margin: .5rem; padding: 1rem 0 0 0;
margin-bottom: 2rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: .4rem; gap: .4rem;
@ -273,32 +297,21 @@ textarea {
.footnote-definition { .footnote-definition {
margin: 0 0 0 2rem; margin: 0 0 0 2rem;
} }
.footnote-definition-label { .footnote-definition-label {
color: var(--metaColor); color: var(--metaColor);
} }
.footnote-definition p { .footnote-definition p {
display: inline; display: inline;
padding: 0 0 0 1rem; padding: 0 0 0 1rem;
} }
.footContainer,
.footRight {
display: flex;
align-content: center
}
.footContainer { .footContainer {
flex-direction: row; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: flex-start align-items: center;
}
.footRight {
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center
} }
.noStyle { .noStyle {
@ -323,3 +336,10 @@ textarea {
.webring { .webring {
margin: 0.5rem; margin: 0.5rem;
} }
/* Add Padding */
@media (max-width: 650px) {
.wrapper {
margin: 1rem;
}
}

21
static/icons.svg Normal file
View file

@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="rss" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
<path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
</symbol>
<symbol id="darkMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
<path fill="currentColor" d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21Z"/>
</symbol>
<symbol id="lightMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
<path fill="currentColor" d="M12 17q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288Z"/>
</symbol>
<symbol id="chevronLeft" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
<path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42Z"/>
</symbol>
<symbol id="chevronRight" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
<path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z"/>
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1,148 +1,18 @@
<!doctype html> <!doctype html>
<html lang="{{ lang }}"> <html lang="{{ lang }}">
<head> <head>
<meta charset="UTF-8"> {% include "head.html" %}
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
{% if page.title %}
{% set title = page.title %}
{% elif section.title %}
{% set title = section.title %}
{% elif config.title %}
{% set title = config.title %}
{% endif %}
{% if page.extra.author %}
{% set author = page.extra.author %}
{% elif section.extra.author %}
{% set author = section.extra.author %}
{% elif config.extra.author %}
{% set author = config.extra.author %}
{% endif %}
{% if page.description %}
{% set description = page.description | truncate(length=150) %}
{% elif section.description %}
{% set description = section.description | truncate(length=150) %}
{% elif config.description %}
{% set description = config.description | truncate(length=150) %}
{% endif %}
{% if page.extra.image %}
{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
{% elif section.extra.image %}
{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
{% elif config.extra.favicon %}
{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
{% endif %}
{% if page.permalink %}
{% set url = page.permalink %}
{% elif section.permalink %}
{% set url = section.permalink %}
{% elif config.base_url %}
{% set url = config.base_url %}
{% endif %}
{% if title %}
<title>{{ title }}</title>
{% endif %}
{% block metatags %}
{% if title %}
<meta name="title" content="{{ title }}">
{% endif %}
{% if author %}
<meta name="author" content="{{ author }}">
{% endif %}
{% if description %}
<meta name="description" content="{{ description }}">
{% endif %}
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url | safe }}">
{% if title %}
<meta property="og:site_name" content="{{ config.title }}">
{% endif %}
{% if title %}
<meta property="og:title" content="{{ title }}">
{% endif %}
{% if description %}
<meta property="og:description" content="{{ description }}">
{% endif %}
{% if image %}
<meta property="og:image" content="{{ image }}">
{% endif %}
{% set twitter_card = config.extra.twitter_card | default(value=true) %}
{% if twitter_card != false %}
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ url | safe }}">
{% if title %}
<meta property="twitter:title" content="{{ title }}">
{% endif %}
{% if description %}
<meta property="twitter:description" content="{{ description }}">
{% endif %}
{% if image %}
<meta property="twitter:image" content="{{ image }}">
{% endif %}
{% endif %}
<link rel="canonical" href="{{ url | safe }}">
{% if image %}
<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
{% endif %}
{% endblock metatags %}
{% if config.generate_feed %}
{% block feed %}
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
{% endblock feed %}
{% endif %}
{% block css %}
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header> <header>
{% if config.extra.header_nav %} {% include "header.html" %}
<nav class="navBar">
{% for nav_item in config.extra.header_nav %}
{% set current_nav_item = nav_item[lang] %}
{% if current_nav_item and current_nav_item.name %}
<a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
{% endif %}
{% endfor %}
<div class="themeSwitch">
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"></button>
</div>
</nav>
{% endif %}
<script>
const setTheme = (theme) => {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
}
getTheme()
</script>
</header> </header>
<main> <main>
{% block content %}{% endblock content %} {% block content %}{% endblock content %}
</main> </main>
<footer> <footer>
{% block footer %}{% endblock footer %} {% include "footer.html" %}
<hr>
<div class=footContainer>
<div class="footLeft">
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
</p>
</div>
<div class="footRight">
<!-- Size 46x46 -->
<img class="footGif noStyle" loading="lazy" src="https://i.ibb.co/XYDpfcs/foot.gif" alt="footGif">
<a class="metaData" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates.">RSS</a>
</div>
</div>
</footer> </footer>
</div> </div>
</body> </body>

View file

@ -1,12 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block header %} {% block content %}
<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div> <div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time> <time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
{% endblock header %}
{% block content %}
{% if page.toc and page.extra.toc %} {% if page.toc and page.extra.toc %}
<h2>Table of contents</h2> <h2>Table of contents</h2>
@ -35,11 +32,8 @@
</ul> </ul>
{% endif %} {% endif %}
{{ page.content | safe }} {{ page.content | safe }}
{% endblock content %}
{% block footer %}
<p class="tagsData"> <p class="tagsData">
{% if page.taxonomies.tags %} {% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %} {% for tag in page.taxonomies.tags %}
@ -47,4 +41,4 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</p> </p>
{% endblock footer %} {% endblock content %}

11
templates/footer.html Normal file
View file

@ -0,0 +1,11 @@
<hr>
<div class=footContainer>
<div class="footLeft">
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
</p>
</div>
<div class="footRight">
<a class="icons__background" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
</div>
</div>

94
templates/head.html Normal file
View file

@ -0,0 +1,94 @@
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
{% if page.title %}
{% set title = page.title %}
{% elif section.title %}
{% set title = section.title %}
{% elif config.title %}
{% set title = config.title %}
{% endif %}
{% if page.extra.author %}
{% set author = page.extra.author %}
{% elif section.extra.author %}
{% set author = section.extra.author %}
{% elif config.extra.author %}
{% set author = config.extra.author %}
{% endif %}
{% if page.description %}
{% set description = page.description | truncate(length=150) %}
{% elif section.description %}
{% set description = section.description | truncate(length=150) %}
{% elif config.description %}
{% set description = config.description | truncate(length=150) %}
{% endif %}
{% if page.extra.image %}
{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
{% elif section.extra.image %}
{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
{% elif config.extra.favicon %}
{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
{% endif %}
{% if page.permalink %}
{% set url = page.permalink %}
{% elif section.permalink %}
{% set url = section.permalink %}
{% elif config.base_url %}
{% set url = config.base_url %}
{% endif %}
{% if title %}
<title>{{ title }}</title>
{% endif %}
{% block metatags %}
{% if title %}
<meta name="title" content="{{ title }}">
{% endif %}
{% if author %}
<meta name="author" content="{{ author }}">
{% endif %}
{% if description %}
<meta name="description" content="{{ description }}">
{% endif %}
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url | safe }}">
{% if title %}
<meta property="og:site_name" content="{{ config.title }}">
{% endif %}
{% if title %}
<meta property="og:title" content="{{ title }}">
{% endif %}
{% if description %}
<meta property="og:description" content="{{ description }}">
{% endif %}
{% if image %}
<meta property="og:image" content="{{ image }}">
{% endif %}
{% set twitter_card = config.extra.twitter_card | default(value=true) %}
{% if twitter_card != false %}
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ url | safe }}">
{% if title %}
<meta property="twitter:title" content="{{ title }}">
{% endif %}
{% if description %}
<meta property="twitter:description" content="{{ description }}">
{% endif %}
{% if image %}
<meta property="twitter:image" content="{{ image }}">
{% endif %}
{% endif %}
<link rel="canonical" href="{{ url | safe }}">
{% if image %}
<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
{% endif %}
{% endblock metatags %}
{% if config.generate_feed %}
{% block feed %}
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
{% endblock feed %}
{% endif %}
{% block css %}
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}

25
templates/header.html Normal file
View file

@ -0,0 +1,25 @@
{% if config.extra.header_nav %}
<nav class="navBar">
{% for nav_item in config.extra.header_nav %}
{% set current_nav_item = nav_item[lang] %}
{% if current_nav_item and current_nav_item.name %}
<a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
{% endif %}
{% endfor %}
<div class="themeSwitch">
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
</div>
</nav>
{% endif %}
<script>
const setTheme = (theme) => {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
}
getTheme()
</script>

View file

@ -1,10 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block header %}
<h1>{{ page.title }}</h1>
{% endblock header %}
{% block content %} {% block content %}
<h1>{{ page.title }}</h1>
{% if page.toc and page.extra.toc %} {% if page.toc and page.extra.toc %}
<h2>Table of contents</h2> <h2>Table of contents</h2>
@ -34,9 +31,7 @@
{% endif %} {% endif %}
{{ page.content | safe }} {{ page.content | safe }}
{% endblock content %}
{% block footer %}
<p class="tagsData"> <p class="tagsData">
{% if page.taxonomies.tags %} {% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %} {% for tag in page.taxonomies.tags %}
@ -44,4 +39,4 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</p> </p>
{% endblock footer %} {% endblock content %}

View file

@ -1,10 +1,8 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block header %}
<h1>{{ section.title }}</h1>
{% endblock header %}
{% block content %} {% block content %}
<h1>{{ section.title }}</h1>
{{ section.content | safe }} {{ section.content | safe }}
{% if paginator %} {% if paginator %}

View file

@ -1,4 +1,4 @@
<span class="webring"> <span class="webring">
<a href={{prev}}></a> <a class="icons__background" href={{prev}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a>
<a href={{webring}}>{{webringName}}</a> <a href={{webring}}>{{webringName}}</a>
<a href={{next}}></a></span> <a class="icons__background" href={{next}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>

View file

@ -1,10 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block header %}
<h1>{{ taxonomy.name }}</h1>
{% endblock header %}
{% block content %} {% block content %}
<h1>{{ taxonomy.name }}</h1>
<p> <p>
{% for term in terms %} {% for term in terms %}
<a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}] <a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]

View file

@ -1,10 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block header %}
<h1>{{ term.name }}</h1>
{% endblock header %}
{% block content %} {% block content %}
<h1>{{ term.name }}</h1>
{% if paginator %} {% if paginator %}
{% set pages = paginator.pages %} {% set pages = paginator.pages %}
{% else %} {% else %}