Giter VIP home page Giter VIP logo

speyll / anemone Goto Github PK

View Code? Open in Web Editor NEW
69.0 2.0 34.0 540 KB

A Zola theme embracing minimalism, focusing on clean CSS while steering clear of resource-heavy JavaScript. Immerse yourself in a seamless user experience, powered by lightning-fast load times. ⚡

Home Page: https://anemone.pages.dev/

License: MIT License

HTML 77.89% CSS 9.97% JavaScript 12.14%
zola zola-site zola-theme css css-grid css3 html html-css-javascript html5 javascript

anemone's Introduction

anemone

Introducing "anemone," a minimalist Zola theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas.

You can browse the demo website here I also use it on my own website.

Anemone is a versatile Zola theme that comes with both light and dark variants. You can easily switch between the light and dark themes to suit your preferences.

Anemone Light and Dark Theme

Installation

To get started with Anemone, follow these simple steps:

  1. Download the theme to your themes directory:
cd themes
git clone https://github.com/Speyll/anemone
  1. Enable Anemone in your config.toml:
theme = "anemone"

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

Options

Anemone provides various options to customize your website:

Default Taxonomies

To use tags, add the following code to a page's metadata:

[taxonomies]
tags = ["tag1", "tag2"]

Pages List in Homepage

Enable listing of pages in the homepage by adding the following code to config.toml:

[extra]
list_pages = true

Multilanguage

The theme has a built-in feature that allows you to use multiple languages. For detailed instructions on how to use this feature, you can refer to the Zola Multilingual documentation. This documentation provides additional information on how to make the most out of this multilingual capability.

[languages.fr]
weight = 2
title = "anemone"
languageName = "Français"
languageCode = "fr"

Multilanguage-Ready Navigation Bar

Customize the header navigation links with the following code in the extra section of config.toml:

[extra]

header_nav = [
  { url = "/", name_en = "/home/", name_fr = "/accueil/" },
  { url = "/about", name_en = "/about/", name_fr = "/concernant/" },
  { url = "/journal", name_en = "/journal/", name_fr = "/journal/" },
  { url = "/blog", name_en = "/blog/", name_fr = "/blog/" }
]

Add Table of Contents (TOC) to Pages

In a page's frontmatter, set extra.toc to true:

[extra]
toc = true

Display Author Name in Blog Posts

Customize the display of the author's name in your blog posts by toggling the display_author variable to either true or false:

[extra]
display_author = true

Webrings

Add a webring with a shortcode:

{{ webring(prev="#", webring="#", webringName="Random Webring", next="#") }}

Extra Data

  • 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.

Disable Twitter Card

Twitter metatags are generated by default. To disable them, set extra.twitter_card to false in config.toml:

[extra]
twitter_card = true

License

The Anemone theme is available as open source under the terms of the MIT License.

anemone's People

Contributors

astrale-sharp avatar heilasuka avatar horgix avatar speyll avatar wyvernixtl avatar zaaarf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

anemone's Issues

Minor bug with setting default between dark/light mode

Hi, I encountered a bug where the setting for default_theme in config.toml wasn't properly applying when default was set to "dark."

After some digging, I found that line 9 in static/js/script.js isn't working as intended:

if (!hasCodeRun) {
  const defaultTheme = "{{ config.extra.default_theme }}";
  setTheme(defaultTheme);
  localStorage.setItem('hasCodeRun', 'true');
}

{{ config.extra.default_theme}} was getting passed to defaultTheme instead of just dark.

I managed to get it to work as intended by copying the whole script into templates/head.html.

Love the theme, by the way.

Add multilingual header navigation

Hi, first of all, I really like your theme! Thank you for this contribution :>

However, what I am really missing is multilingual support for the header navigation.
I tried adding header_nav in both the [languages] section and the following:

[extra]
languages = [ { ..., header_nav = ... } ]

but none is working.

Is there a way how to achieve this? Or could you maybe add this feature?

Error when defining extra.nav_bar following instructions

Beautiful beautiful theme, loving the colors and style ❤️

Instruction followed :

here

Error :

Reason: Variable `nav_item[lang]` not found in context while rendering 'header.html': the evaluated version was `nav_item."en"`. Maybe the index is out of bounds?

Description

I believe the following in theme/anemone/config.toml must be added to/adapted when the header must be added.

[[extra.header_nav]]
en = { name = "/home/", url = "/" }
fr = { name = "/accueil/", url = "/fr" }

[[extra.header_nav]]
en = { name = "/about/", url = "/about" }
fr = { name = "/concernant/", url = "/about" }

[[extra.header_nav]]
en = { name = "/journal/", url = "/journal" }
fr = { name = "/journal/", url = "/journal" }

[[extra.header_nav]]
en = { name = "/blog/", url = "/blog" }
fr = { name = "/blog/", url = "/blog" }

Work Around

copy and adapt this in your config.toml

Scroll instead of wrapping in code blocks

First, I want to thank everybody involved in the project for creating and maintaining it.

On mobile, code wrapping makes it harder to read, and I'd like to have an option to enable scrolling instead. Would that be possible?

Missing Footer Options for Content License

I think the footer should look something like this:

license regarding content of the page && link to said license 
The theme is licensed under MIT
Built with Zola using anemone theme & veqev colors.

As an example:

Content of this webpage if not expressly stated otherwise is licensed under CC BY.
Theme licensed under MIT
Built with Zola using anemone theme & veqev colors.

How to move toc underneath title?

Is there a way to include a # Heading above the table of contents? I usually want my title to be above it. In particular, it would be awesome if there was a way to choose an arbitrary location for the table of contents.

How to set header_nav links for hosting in a domain subfolder?

Hello, I am facing an issue with header_nav links:
I added

[[extra.header_nav]]
en = { name = "/home", url = "/" }
# fr = { name = "/accueil", url = "/fr" }

[[extra.header_nav]]
en = { name = "/about", url = "/about" }

[[extra.header_nav]]
en = { name = "/m1", url = "/m1" }

to my config.toml file, and uses zola build with --base-url <my-subfolder> option.
The links with get_url works well, but those header_nav links does not use get_url, so it redirects me out of my zola website.
How could I correct this ?
I would like to avoid hard-coding the subfolder in the url value...

Thanks in advance

Hugo port?

I really liked this theme, can you try porting it to hugo?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.