diff --git a/README.md b/README.md
index 0f0c811..32cc38a 100644
--- a/README.md
+++ b/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 `` 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.
diff --git a/content/about.md b/content/about.md
index c019ded..c116cfd 100644
--- a/content/about.md
+++ b/content/about.md
@@ -3,4 +3,4 @@ title = "About"
+++
This is an about page, nothing more nothing less `forget about it`.
-{{ youtube(id="pS6zJ7IsJkM" class="textCenter") }}
\ No newline at end of file
+{{ youtube(id="pS6zJ7IsJkM" class="center") }}
\ No newline at end of file
diff --git a/screenshot.png b/screenshot.png
index 5f27ba8..44c39a3 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/static/click.ogg b/static/click.ogg
new file mode 100644
index 0000000..f9c6dc0
Binary files /dev/null and b/static/click.ogg differ
diff --git a/static/css/style.css b/static/css/style.css
index ac94a3e..85c84ac 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -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;
}
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 205d215..298b900 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -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();
\ No newline at end of file
+ // 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);
diff --git a/templates/base.html b/templates/base.html
index b3ed6ca..7acec3b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,7 +4,6 @@
{% include "head.html" %}
-
{% include "header.html" %}
@@ -15,6 +14,5 @@
-