mirror of
https://github.com/Speyll/anemone.git
synced 2024-11-21 12:46:27 +00:00
Lyes
GitHub
commit
757e0fc82b
16 changed files with 151 additions and 369 deletions
37
README.md
37
README.md
|
|
@ -9,7 +9,7 @@ Anemone is a versatile Zola theme that comes with both light and dark variants.
|
|||
|
||||
|
||||
|
||||
### Installation
|
||||
## Installation
|
||||
|
||||
To get started with Anemone, follow these simple steps:
|
||||
|
||||
|
|
@ -26,7 +26,23 @@ git clone https://github.com/Speyll/anemone
|
|||
theme = "anemone"
|
||||
```
|
||||
|
||||
### Options
|
||||
## Release Notes
|
||||
|
||||
#### 02-03-2024
|
||||
This release brings several improvements and enhancements, focusing mainly on optimizing performance and user experience. Here's a summary of the key changes:
|
||||
|
||||
- **suCSS Integration:** The core CSS now leverages the lightweight [suCSS framework](https://speyll.github.io/suCSS/) made by yours truly, providing better maintainability, robustness, and scalability. With suCSS, the theme should maintain consistent appearance across different browsers.
|
||||
|
||||
- **Enhanced Theme Toggle:** The dark and light theme toggle has been revamped for more consistency. Now, the website respects the user's system-wide theme settings, ensuring a seamless experience. Additionally, the toggle retains the selected theme for future visits, offering improved usability.
|
||||
|
||||
- **Smooth Transition and Sound Effect:** Enjoy a smoother transition between the dark and light mode accompanied by a subtle sound effect. Rest assured, the added sound effect incurs minimal performance overhead, with the file size being just 1kb.
|
||||
|
||||
- **Class Names and Shortcodes Update:** Some class names and shortcodes have been modified for better organization and clarity. I apologize for any inconvenience this may cause.
|
||||
|
||||
- **Slight change in Color Choice:** Some dark mode colors have been changed for the sake of readability, still using [veqev](https://github.com/Speyll/veqev).
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
Anemone provides various options to customize your website:
|
||||
|
||||
|
|
@ -74,13 +90,13 @@ header_nav = [
|
|||
]
|
||||
```
|
||||
|
||||
#### Default Theme
|
||||
#### Add Table of Contents (TOC) to Pages
|
||||
|
||||
To configure the default theme, simply utilize the `default_theme` variable and set it to either `light` or `dark`:
|
||||
In a page's frontmatter, set `extra.toc` to `true`:
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
default_theme = "light"
|
||||
toc = true
|
||||
```
|
||||
|
||||
#### Display Author Name in Blog Posts
|
||||
|
|
@ -100,18 +116,9 @@ Add a webring with a shortcode:
|
|||
{{ webring(prev="#", webring="#", webringName="Random Webring", next="#") }}
|
||||
```
|
||||
|
||||
#### Add Table of Contents (TOC) to Pages
|
||||
|
||||
In a page's frontmatter, set `extra.toc` to `true`:
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
toc = true
|
||||
```
|
||||
|
||||
### Extra Data
|
||||
|
||||
- Set the `author` in both the main config and in pages' metadata.
|
||||
- Set the `author` in both the main config and in pages metadata.
|
||||
- Use the `image` variable in pages to add an image to HTML `<meta>` tags.
|
||||
- Similarly, set `favicon` in the main config, and it will be used as the site icon.
|
||||
- Set `footer_content_license` and `footer_content_license_link` if you wish to display content license information in the footer.
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ title = "About"
|
|||
+++
|
||||
This is an about page, nothing more nothing less `forget about it`.
|
||||
|
||||
{{ youtube(id="pS6zJ7IsJkM" class="textCenter") }}
|
||||
{{ youtube(id="pS6zJ7IsJkM" class="center") }}
|
||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 141 KiB |
BIN
static/click.ogg
Normal file
BIN
static/click.ogg
Normal file
Binary file not shown.
|
|
@ -1,294 +1,30 @@
|
|||
:root,
|
||||
:root.light {
|
||||
--bgColor: #EEEEEE;
|
||||
--fgColor: #41474E;
|
||||
--metaColor: #D26878;
|
||||
--headColor: #;
|
||||
--linkColor: #5690AF;
|
||||
--hovColor: #22453F;
|
||||
--bgSelect: #FFFAE1;
|
||||
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
|
||||
--red: #D26878;
|
||||
--dimRed: #623039;
|
||||
--orange: #e08f67;
|
||||
--dimOrange: #926048;
|
||||
--yellow: #FFFAE1;
|
||||
--dimYellow: #D5C5A1;
|
||||
--green: #56AFA0;
|
||||
--dimGreen: #22453F;
|
||||
--blue: #5690AF;
|
||||
--dimBlue: #223844;
|
||||
--purple: #9271D6;
|
||||
--dimPurple: #47356C;
|
||||
--grey: #CBCDCD;
|
||||
--dimGrey: #646868
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--bgColor: #222529;
|
||||
--fgColor: #D6D6D6;
|
||||
--metaColor: #78B6AD;
|
||||
--headColor: #;
|
||||
--linkColor: #DBD5BC;
|
||||
--hovColor: #E2AEA2;
|
||||
--bgSelect: #464949;
|
||||
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
|
||||
--red: #CD909B;
|
||||
--dimRed: #684249;
|
||||
--orange: #E2AEA2;
|
||||
--dimOrange: #704941;
|
||||
--yellow: #DBD5BC;
|
||||
--dimYellow: #6F6847;
|
||||
--green: #78B6AD;
|
||||
--dimGreen: #3E615C;
|
||||
--blue: #87C9E5;
|
||||
--dimBlue: #38494F;
|
||||
--purple: #CEA7DE;
|
||||
--dimPurple: #5E406A;
|
||||
--grey: #CBCDCD;
|
||||
--dimGrey: #464949
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--bgColor);
|
||||
background: var(--metaColor)
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--bgColor);
|
||||
background: var(--metaColor)
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
scrollbar-color: var(--metaColor) var(--bgColor);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.35;
|
||||
max-width: 64rem;
|
||||
margin: auto;
|
||||
overflow-wrap: break-word;
|
||||
background: var(--bgColor);
|
||||
color: var(--fgColor);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
color: var(--bgColor);
|
||||
background-color: var(--metaColor);
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
color: var(--bgColor);
|
||||
content: '# '
|
||||
}
|
||||
|
||||
h2::before,
|
||||
h3::before,
|
||||
h4::before,
|
||||
h5::before,
|
||||
h6::before {
|
||||
color: var(--metaColor);
|
||||
content: '# '
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
padding: 0 .2rem 0 .2rem;
|
||||
border-radius: .3rem;
|
||||
color: var(--linkColor);
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
background-color: var(--linkColor);
|
||||
color: var(--bgColor)
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
content: '» ';
|
||||
color: var(--metaColor)
|
||||
}
|
||||
|
||||
ul li:hover::marker {
|
||||
content: '# ';
|
||||
font-weight: 700;
|
||||
color: var(--linkColor)
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: .5rem solid var(--metaColor);
|
||||
margin: 1rem;
|
||||
padding: 0 0 0 1rem
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: 2px dotted;
|
||||
outline: 0;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
background-color: var(--bgColor)
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px dashed
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
margin: .2rem;
|
||||
padding: .2rem;
|
||||
border: dashed .2rem var(--metaColor);
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid var(--metaColor);
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
font-style: monospace;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
p code,
|
||||
li code,
|
||||
div code {
|
||||
padding: 0 .2rem 0 .2rem;
|
||||
border-radius: .3rem;
|
||||
color: var(--bgColor);
|
||||
background-color: var(--fgColor);
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.1
|
||||
}
|
||||
|
||||
thead th:first-child {
|
||||
width: 20%
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: .5rem;
|
||||
border: dashed .1rem var(--metaColor)
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 1.4rem;
|
||||
clear: both;
|
||||
color: var(--footColor)
|
||||
}
|
||||
|
||||
footer,
|
||||
td,
|
||||
th {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.metaData,
|
||||
.themeButton,
|
||||
hr,
|
||||
textarea {
|
||||
color: var(--metaColor)
|
||||
}
|
||||
|
||||
/* Site Specific Styling */
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 2rem;
|
||||
|
||||
}
|
||||
|
||||
/* Icons settings */
|
||||
.icons {
|
||||
width: 2.0rem;
|
||||
height: 2.0rem;
|
||||
aspect-ratio: 1/1;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: var(--fgColor);
|
||||
fill: var(--fgColor);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.icons__background:hover {
|
||||
background-color: transparent;
|
||||
color: var(--metaColor);
|
||||
}
|
||||
|
||||
.navBar {
|
||||
padding: 1rem 0 0 0;
|
||||
#nav-bar {
|
||||
padding: .625rem 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: .4rem;
|
||||
gap: .25rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
align-content: flex-end
|
||||
}
|
||||
|
||||
.themeButton {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
background-color: transparent
|
||||
#footer-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dark .themeButton.dark,
|
||||
.themeButton.light {
|
||||
display: none
|
||||
.accent-data {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.dark .themeButton.light {
|
||||
display: block
|
||||
.theme-transition {
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.tagsData {
|
||||
.tags-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -297,56 +33,73 @@ textarea {
|
|||
align-content: flex-end
|
||||
}
|
||||
|
||||
.titleList li {
|
||||
margin-bottom: .75rem;
|
||||
.title-list li {
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
|
||||
/* icons settings */
|
||||
.icons {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
aspect-ratio: 1/1;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: var(--text);
|
||||
fill: var(--text);
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icons:hover {
|
||||
background-color: transparent;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* footnotes */
|
||||
.footnote-definition {
|
||||
margin: 0 0 0 2rem;
|
||||
margin: 0 0 0 .125rem;
|
||||
}
|
||||
|
||||
.footnote-definition-label {
|
||||
color: var(--metaColor);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.footnote-definition p {
|
||||
display: inline;
|
||||
padding: 0 0 0 1rem;
|
||||
margin: .625rem 0 0 .625rem;
|
||||
}
|
||||
|
||||
.footContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.noStyle {
|
||||
/* general classes */
|
||||
.no-style {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.textCenter {
|
||||
.no-style:hover {
|
||||
background-color: transparent;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
.center img {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
.float-left {
|
||||
float: left
|
||||
}
|
||||
|
||||
/* shortcodes css */
|
||||
.webring {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
/* Add Padding */
|
||||
@media (max-width: 650px) {
|
||||
.wrapper {
|
||||
margin: 1rem;
|
||||
}
|
||||
margin: .375rem;
|
||||
}
|
||||
|
|
@ -1,21 +1,49 @@
|
|||
const setTheme = (theme) => {
|
||||
document.documentElement.className = theme;
|
||||
localStorage.setItem('theme', theme);
|
||||
}
|
||||
const toggleButton = document.getElementById('theme-toggle');
|
||||
const themeIcon = document.getElementById('theme-icon');
|
||||
const themeSound = document.getElementById('theme-sound');
|
||||
|
||||
const hasCodeRun = localStorage.getItem('hasCodeRun');
|
||||
// Function to update the theme icon based on the current theme
|
||||
const updateThemeIcon = (isDarkMode) => {
|
||||
const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
|
||||
const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
|
||||
themeIcon.querySelector('use').setAttribute('href', iconPath);
|
||||
};
|
||||
|
||||
if (!hasCodeRun) {
|
||||
const defaultTheme = "{{ config.extra.default_theme }}";
|
||||
setTheme(defaultTheme);
|
||||
localStorage.setItem('hasCodeRun', 'true');
|
||||
}
|
||||
// Function to update the theme based on the current mode
|
||||
const updateTheme = (isDarkMode) => {
|
||||
const theme = isDarkMode ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
updateThemeIcon(isDarkMode);
|
||||
};
|
||||
|
||||
const getTheme = () => {
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme) {
|
||||
setTheme(theme);
|
||||
}
|
||||
}
|
||||
// Function to toggle the theme
|
||||
const toggleTheme = () => {
|
||||
const isDarkMode = toggleButton.checked;
|
||||
updateTheme(isDarkMode);
|
||||
themeSound.play();
|
||||
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
|
||||
|
||||
getTheme();
|
||||
// Add transition class to body for smooth transition
|
||||
document.body.classList.add('theme-transition');
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove('theme-transition');
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// Event listener for theme toggle
|
||||
toggleButton.addEventListener('change', toggleTheme);
|
||||
|
||||
// Function to initialize the theme based on the stored preference
|
||||
const initializeTheme = () => {
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
|
||||
toggleButton.checked = isDarkMode;
|
||||
updateTheme(isDarkMode);
|
||||
};
|
||||
|
||||
// Initialize the theme
|
||||
initializeTheme();
|
||||
|
||||
// Listen for changes in system preference
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
{% include "head.html" %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
{% include "header.html" %}
|
||||
</header>
|
||||
|
|
@ -15,6 +14,5 @@
|
|||
<footer>
|
||||
{% include "footer.html" %}
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
|
||||
<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
|
||||
<div><a href="..">..</a>/<span class="accent-data">{{ page.slug }}</span></div>
|
||||
<time datetime="{{ page.date }}">Published on: <span class="accent-data">{{ page.date }}</span></time>
|
||||
{% if config.extra.author and config.extra.display_author == true %}
|
||||
<address rel="author">By <span class="metaData">{{config.extra.author}}</span></address>
|
||||
<address rel="author">By <span class="accent-data">{{config.extra.author}}</span></address>
|
||||
{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
{{ page.content | safe }}
|
||||
|
||||
<p class="tagsData">
|
||||
<p class="tags-data">
|
||||
{% if page.taxonomies.tags %}
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
<a href="/tags/{{ tag | slugify }}">/{{ tag }}/</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<hr>
|
||||
<div class=footContainer>
|
||||
<div id="footer-container">
|
||||
{% if config.extra.footer_content_license %}
|
||||
<div>Except where otherwise noted, content on this site is licensed under a
|
||||
{% if config.extra.footer_content_license_link %}
|
||||
|
|
@ -9,14 +9,15 @@
|
|||
{% endif %}
|
||||
license.</div>
|
||||
{% endif %}
|
||||
<div class="footLeft">
|
||||
<div>
|
||||
<p>Theme and color theme licensed under <a target="_blank" rel="noopener noreferrer" href="https://en.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 & <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<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, <a target="_blank" rel="noopener noreferrer" href="https://speyll.github.io/suCSS/">suCSS</a> framework & <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a>.<br>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
{% if config.generate_feed %}
|
||||
<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>
|
||||
<a class="no-style" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,10 @@
|
|||
{% endblock feed %}
|
||||
{% endif %}
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
|
||||
<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/reset-min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/suCSS-min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ get_url(path='css/custom.css', trailing_slash=false) | safe }}"/>
|
||||
{% endblock css %}
|
||||
<script src="{{ get_url(path='js/script.js', trailing_slash=false) | safe }}" defer></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,27 +5,19 @@
|
|||
{% set current_lang = section.lang %}
|
||||
{% endif %}
|
||||
{% if config.extra.header_nav %}
|
||||
<nav class="navBar">
|
||||
<nav id="nav-bar">
|
||||
{% for nav_item in config.extra.header_nav %}
|
||||
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
|
||||
{% set language_key = 'name_' ~ current_lang %}
|
||||
{{ nav_item[language_key] }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<div class="themeSwitch">
|
||||
{% if not config.extra.default_theme %}
|
||||
<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>
|
||||
|
||||
{% elif config.extra.default_theme and config.extra.default_theme == "light" %}
|
||||
<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>
|
||||
|
||||
{% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
|
||||
<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>
|
||||
<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>
|
||||
{% endif %}
|
||||
<div>
|
||||
<input type="checkbox" id="theme-toggle" style="display: none;">
|
||||
<label for="theme-toggle" id="theme-toggle-label"><svg id="theme-icon" class="icons"><use href="{{ get_url(path='/icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></label>
|
||||
<audio id="theme-sound">
|
||||
<source src="{{ get_url(path='click.ogg', trailing_slash=false) | safe }}" type="audio/ogg">
|
||||
</audio>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
{{ page.content | safe }}
|
||||
|
||||
<p class="tagsData">
|
||||
<p class="tags-data">
|
||||
{% if page.taxonomies.tags %}
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
<a href="/tags/{{ tag | slugify }}">/{{ tag }}/</a>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
{% set pages = section.pages %}
|
||||
{% endif %}
|
||||
|
||||
<ul class="titleList">
|
||||
<ul class="title-list">
|
||||
{% for page in pages %}
|
||||
<li>
|
||||
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
</ul>
|
||||
|
||||
{% if paginator %}
|
||||
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a>   <a href="{{ paginator.previous }}"><</a>{% endif %}   {{ paginator.current_index }} / {{ paginator.number_pagers }}   {% if paginator.next %}<a href="{{ paginator.next }}">></a>   <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
|
||||
<div class="accent-data">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a>   <a href="{{ paginator.previous }}"><</a>{% endif %}   {{ paginator.current_index }} / {{ paginator.number_pagers }}   {% if paginator.next %}<a href="{{ paginator.next }}">></a>   <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
1
templates/shortcodes/mark.html
Normal file
1
templates/shortcodes/mark.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<mark>{{content}}</mark>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<span class="metaData">{{content}}</span>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<span class="webring">
|
||||
<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 class="no-style" href={{prev}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a>
|
||||
<a href={{webring}}>{{webringName}}</a>
|
||||
<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>
|
||||
<a class="no-style" href={{next}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>
|
||||
Loading…
Reference in a new issue