README.md

@@ -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,23 +26,7 @@ git clone https://github.com/Speyll/anemone
 theme = "anemone"
 ```
 
-## Release Notes
+### Options
-
-#### 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:
 
@@ -90,13 +74,13 @@ header_nav = [
 ]
 ```
 
-#### Add Table of Contents (TOC) to Pages
+#### Default Theme
 
-In a page's frontmatter, set `extra.toc` to `true`:
+To configure the default theme, simply utilize the `default_theme` variable and set it to either `light` or `dark`:
 
 ```toml
 [extra]
-toc = true
+default_theme = "light"
 ```
 
 #### Display Author Name in Blog Posts
@@ -116,9 +100,18 @@ 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.

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="center") }}
+{{ youtube(id="pS6zJ7IsJkM" class="textCenter") }}

static/css/style.css

@@ -1,30 +1,294 @@
-#nav-bar {
+:root,
-  padding: .625rem 0 0 0;
+: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;
   display: flex;
   flex-direction: row;
-  gap: .25rem;
+  gap: .4rem;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   align-content: flex-end
 }
 
-#footer-container {
+.themeButton {
-  display: flex;
+  cursor: pointer;
-  flex-wrap: wrap;
+  border: none;
-  justify-content: space-between;
+  font-size: 1.8rem;
-  align-items: center;
+  background-color: transparent
 }
 
-.accent-data {
+.dark .themeButton.dark,
-  color: var(--accent);
+.themeButton.light {
+  display: none
 }
 
-.theme-transition {
+.dark .themeButton.light {
-  transition: color 0.3s ease, background-color 0.3s ease;
+  display: block
 }
 
-.tags-data {
+.tagsData {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
@@ -33,73 +297,56 @@
   align-content: flex-end
 }
 
-.title-list li {
+.titleList li {
-  margin-bottom: .375rem;
+  margin-bottom: .75rem;
 }
 
-/* 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 .125rem;
+  margin: 0 0 0 2rem;
 }
 
 .footnote-definition-label {
-  color: var(--accent);
+  color: var(--metaColor);
 }
 
 .footnote-definition p {
   display: inline;
-  margin: .625rem 0 0 .625rem;
+  padding: 0 0 0 1rem;
 }
 
-/* general classes */
+.footContainer {
-.no-style {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.noStyle {
   padding: 0;
   margin: 0;
   border: none;
   border-radius: 0
 }
 
-.no-style:hover {
+.textCenter {
-  background-color: transparent;
-  color: var(--accent);
-}
-
-.center {
   text-align: center;
 }
 
-.center img {
+.floatRight {
-  display: block;
-  margin: 1rem auto;
-}
-
-.float-right {
   float: right
 }
 
-.float-left {
+.floatLeft {
   float: left
 }
 
-/* shortcodes css */
 .webring {
-  margin: .375rem;
+  margin: 0.5rem;
+}
+
+/* Add Padding */
+@media (max-width: 650px) {
+  .wrapper {
+    margin: 1rem;
+  }
 }

static/js/script.js

@@ -1,49 +1,21 @@
-const toggleButton = document.getElementById('theme-toggle');
+const setTheme = (theme) => {
-const themeIcon = document.getElementById('theme-icon');
+  document.documentElement.className = theme;
-const themeSound = document.getElementById('theme-sound');
+  localStorage.setItem('theme', theme);
+}
 
-// Function to update the theme icon based on the current theme
+const hasCodeRun = localStorage.getItem('hasCodeRun');
-const updateThemeIcon = (isDarkMode) => {
-    const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
-    const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
-    themeIcon.querySelector('use').setAttribute('href', iconPath);
-};
 
-// Function to update the theme based on the current mode
+if (!hasCodeRun) {
-const updateTheme = (isDarkMode) => {
+  const defaultTheme = "{{ config.extra.default_theme }}";
-    const theme = isDarkMode ? 'dark' : 'light';
+  setTheme(defaultTheme);
-    document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('hasCodeRun', 'true');
-    updateThemeIcon(isDarkMode);
+}
-};
 
-// Function to toggle the theme
+const getTheme = () => {
-const toggleTheme = () => {
+  const theme = localStorage.getItem('theme');
-    const isDarkMode = toggleButton.checked;
+  if (theme) {
-    updateTheme(isDarkMode);
+    setTheme(theme);
-    themeSound.play();
+  }
-    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+}
 
-    // Add transition class to body for smooth transition
+getTheme();
-    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);

templates/base.html

@@ -4,6 +4,7 @@
     {% include "head.html" %}
 </head>
 <body>
+    <div class="wrapper">
       <header>
           {% include "header.html" %}
       </header>
@@ -14,5 +15,6 @@
       <footer>
           {% include "footer.html" %}
       </footer>
+    </div>
 </body>
 </html>

templates/blog-page.html

@@ -1,10 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div><a href="..">..</a>/<span class="accent-data">{{ page.slug }}</span></div>
+<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
-<time datetime="{{ page.date }}">Published on: <span class="accent-data">{{ page.date }}</span></time>
+<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
 {% if config.extra.author and config.extra.display_author == true %}
-<address rel="author">By <span class="accent-data">{{config.extra.author}}</span></address>
+<address rel="author">By <span class="metaData">{{config.extra.author}}</span></address>
 {% endif %}
 <h1>{{ page.title }}</h1>
 
@@ -37,7 +37,7 @@
 
 {{ page.content | safe }}
 
-<p class="tags-data">
+<p class="tagsData">
   {% if page.taxonomies.tags %}
   {% for tag in page.taxonomies.tags %}
   <a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>

templates/footer.html

@@ -1,5 +1,5 @@
 <hr>
-<div id="footer-container">
+<div class=footContainer>
   {% 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,15 +9,14 @@
     {% endif %}
     license.</div>
   {% endif %}
-  <div>
+  <div class="footLeft">
     <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://speyll.github.io/suCSS/">suCSS</a> framework &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</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>
   {% if config.generate_feed %}
-  <div>
+  <div class="footRight">
-    <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>
+    <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>
   {% endif %}
 </div>

templates/head.html

@@ -90,9 +90,7 @@
 {% endblock feed %}
 {% endif %}
 {% block css %}
-<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/reset-min.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/suCSS-min.css"/>
-<link rel="stylesheet" type="text/css" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
 {% endblock css %}
 <script src="{{ get_url(path='js/script.js', trailing_slash=false) | safe }}" defer></script>
 

templates/header.html

@@ -5,19 +5,27 @@
   {% set current_lang = section.lang %}
 {% endif %}
 {% if config.extra.header_nav %}
-  <nav id="nav-bar">
+  <nav class="navBar">
     {% 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>
+
-      <input type="checkbox" id="theme-toggle" style="display: none;">
+  <div class="themeSwitch">
-      <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>
+    {% if not config.extra.default_theme %}
-      <audio id="theme-sound">
+    <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>
-        <source src="{{ get_url(path='click.ogg', trailing_slash=false) | safe }}" type="audio/ogg">
+    <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>
-      </audio>
+
+    {% 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>
+</nav>
 {% endif %}

templates/page.html

@@ -32,7 +32,7 @@
 
 {{ page.content | safe }}
 
-<p class="tags-data">
+<p class="tagsData">
 {% if page.taxonomies.tags %}
 {% for tag in page.taxonomies.tags %}
 <a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>

templates/section.html

@@ -11,7 +11,7 @@
 {% set pages = section.pages %}
 {% endif %}
 
-<ul class="title-list">
+<ul class="titleList">
 {% for page in pages %}
   <li>
     <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
@@ -20,6 +20,6 @@
 </ul>
 
 {% if paginator %}
-<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>
+<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>
 {% endif %}
 {% endblock content %}

templates/shortcodes/mark.html

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

templates/shortcodes/metaData.html

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

templates/shortcodes/webring.html

@@ -1,4 +1,4 @@
 <span class="webring">
-<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 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 class="no-style" href={{next}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></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>