Merge pull request #21 from Speyll/beta

Beta
This commit is contained in:
Lyes 2024-03-02 04:08:40 +01:00 committed by GitHub
commit 757e0fc82b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 151 additions and 369 deletions

View file

@ -9,7 +9,7 @@ Anemone is a versatile Zola theme that comes with both light and dark variants.
![Anemone Light and Dark Theme](screenshot.png)
### 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.

View file

@ -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") }}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 141 KiB

BIN
static/click.ogg Normal file

Binary file not shown.

View file

@ -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;
}

View file

@ -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);

View file

@ -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>

View file

@ -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 }}">&#47;{{ tag }}&#47;</a>

View file

@ -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 &amp; <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 &amp; <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>

View file

@ -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>

View file

@ -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>
</nav>
<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>
{% endif %}

View file

@ -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 }}">&#47;{{ tag }}&#47;</a>

View file

@ -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> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}"></a>{% endif %}</div>
<div class="accent-data">{% if paginator.previous %}<a href="{{ paginator.first }}"></a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}"></a>{% endif %}</div>
{% endif %}
{% endblock content %}

View file

@ -0,0 +1 @@
<mark>{{content}}</mark>

View file

@ -1 +0,0 @@
<span class="metaData">{{content}}</span>

View file

@ -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>