ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Converting from sass to nested vanilla css with layers (#147)

Browse source
This commit is contained in:
Fredrik Jonsson 2026-03-10 14:14:55 +01:00 • committed by GitHub
commit 57244c3f33
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 2687 additions and 2751 deletions
Download patch file Download diff file Expand all files Collapse all files

46
README.md
View file

@ -18,6 +18,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
## Table of contents
* [Version 6.x](#version-6x)
* [Version 5.x](#version-5x)
* [Version 4.x](#version-4x)
* [Version 3.x](#version-3x)
@ -41,14 +42,19 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
* [Podcast](#podcast)
* [Shortcodes](#shortcodes)
* [Content security policy headers](#Content-security-policy-headers)
* [Use npm to lint Sass and JavaScript](#use-npm-to-lint-sass-and-javascript)
* [Use npm to lint CSS and JavaScript](#use-npm-to-lint-css-and-javascript)
* [Repository links](#repository-links)
* [Math typesetting with KaTeX](#math-typesetting-with-katex)
* [Getting help](#getting-help)
* [Credits](#credits)
## Version 5.x
## Version 6.x 2026-03-10
* Converted from sass to modern vanilla css with nesting and layers. Please check [CSS Nesting | Can I use](https://caniuse.com/css-nesting) to see if you are comfortable with css nesting support in browsers before updating to v6.
* No changes to styles or templates so sites should look identical, if the browser support nesting.
## Version 5.x 2025-03-26
* Minimum Hugo version is now v0.146.0. This plus the rearranged variables are the reasons for making this v5.
* Rearranged a lot of variables. This will require some work to upgrade if you have customisations. I'm working towards using vanilla css only.
@ -69,14 +75,15 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
4. Update/remove/convert variables you overridden in projects `_extra.scss` so they match changes in themes `_variables.scss` and `_sass_variables.scss`.
5. If you have overridden templates you will need to use the new template structure in your root layout directory.
## Version 4.x
## Version 4.x 2024-08-14
* Minimum Hugo version is now v0.124.0. This is the reason for making this v4.
* Updated a number of things to remove all "WARN deprecated".
* No other significant changes.
## Version 3.x
## Version 3.x 2023-04-04
* Implement modern CSS like flex, grid and variables throughout.
* All sass variables now have a css variable version. All styles use the css variable version.
@ -113,7 +120,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
5. Replace sass variables with css variables, e.g. `$zen-gutters` with `var(--gutters)`.
## Version 2.x
## Version 2.x 2022-03-11
* Replaced "normalize" with slimmer and updated "reset". Removed everything for old IE versions.
* Use of css4 variables. Colours are now used like this `var(--color-brand)`.
@ -136,7 +143,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
* Contact form (PHP)
* CSS grid and flex throughout
* HTML5
* Hugo Pipes for images, js and sass
* Hugo Pipes for images, js and css
* Math typesetting with KaTeX
* Micro.blog
* Meta tags and JSON-LD
@ -150,7 +157,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
## Minimum Hugo version
Hugo Extended version 0.146.0 or higher is required.
Hugo version 0.146.0 or higher is required.
## Installation
@ -311,7 +318,6 @@ params:
poweredby: true # Show powered by hugo in footer
privacyPolicyUrl: "" # If set will add link to cookie consent form.
relatedposts: true # Show related posts under a "See also" section, default false.
sassTranspiler: "dartsass"# The Sass transpiler to use, default "libsass".
searchLimit: 20 # Max number of search hits, default 20.
sidebar: true # Show a sidebar to the right, default false.
siteName: false # Hide the site name (visually-hidden), default true.
@ -358,13 +364,11 @@ If you do not specify any sections in the "mainSections" param (see configuratio
This is another part that almost everyone will like to customise.
They are found in the theme `assets/sass/_colors.scss`, `assets/sass/_variables.scss` and `assets/sass/_sass_variables.scss` files. You can copy them to the root `assets/sass/` directory to set your own values.
They are found in the theme `assets/css/_colors.css` and `assets/css/_variables.css` files. You can copy them to the root `assets/css/` directory to set your own values.
In most cases you likely only need to override a few values and then it is easier to set these in the extra and custom sass files.
In most cases you likely only need to override a few values and then it is easier to set these in the custom css files.
Root `assets/sass/_extra.scss`: Loaded first so use to override sass variables only.
Root `assets/sass/_custom.scss`: Loaded last so use to override css variables and add any custom styles you need.
Root `assets/css/_custom.css`: Loaded last so use to override css variables and add any custom styles you need.
### Logo
@ -409,20 +413,20 @@ They are set up in `layouts/partials/menu.html`, `layouts/partials/mobilmenu.htm
Modern CSS grid is the easiest and cleanest way to layout your pages.
The CSS grid layout are in `assets/sass/layouts/_layouts.scss`. A lot can be done by just reordering "grid-template-rows".
The CSS grid layout are in `assets/css/layouts/_layouts.css`. A lot can be done by just reordering "grid-template-rows".
### Other styles and scripts
Styles and scripts are processed with Hugo pipes that was added in Hugo 0.46.
To customise a js or sass file, copy it to the root assets directory and edit it there. Make sure to maintain the directory structure inside the assets/sass directory.
To customise a js or css file, copy it to the root assets directory and edit it there. Make sure to maintain the directory structure inside the assets/css directory.
There is an `assets/sass/_custom.scss` file meant for your custom styles. Copy it to the root `assets/sass/_custom.scss` to use it.
There is an `assets/css/_custom.css` file meant for your custom styles. Copy it to the root `assets/css/_custom.css` to use it.
The default styles in `assets/sass/_zen.scss` are boring but functional. You can easily override them completely by placing an empty file named "_zen.scss" in root assets/sass directory.
The default styles in `assets/css/_zen.css` are boring but functional. You can easily override them completely by placing an empty file named "_zen.css" in root assets/css directory.
The sass files are by default built for production, compressed with fingerprint.
The css files are by default built for production, compressed with fingerprint.
By setting the Hugo environment variable to "development" (default when running `hugo server`) they will instead be nested with sourcemaps.
@ -825,9 +829,9 @@ The **content** that should be wrapped. Some more content.
Includes tracking code for Matomo or Google in a way that supports Content security policy headers. Read more in my blog post [Content security policy headers when using Matomo or Google analytics](https://xdeb.org/post/2020/01/14/content-security-policy-headers-when-using-matomo-or-google-analytics/).
## Use npm to lint Sass and JavaScript
## Use npm to lint CSS and JavaScript
* Lint your Sass using stylelint.
* Lint your CSS using stylelint.
* Lint your JavaScript using biome.
* Can lint files in the theme as well as the project assets directory.
@ -839,7 +843,7 @@ Node.js software you need. To install them run:
npm install
3. Run the following commands to lint your theme and projects Sass and JavaScript code.
3. Run the following commands to lint your theme and projects CSS and JavaScript code.
npm run lint-theme
npm run lint-project