From c82f806d8c039d7d02a88dd984247dfe210abe91 Mon Sep 17 00:00:00 2001 From: Regis Philibert <login@regisphilibert.com> Date: Tue, 15 Jun 2021 13:57:49 +0000 Subject: [PATCH] Refactor styling to drop PostCSS Update custom_css logic (ensure retrocompat) --- README.md | 45 +++++++++++++++++---------------------------- 1 files changed, 17 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index ce8c13b..9f88248 100644 --- a/README.md +++ b/README.md @@ -148,40 +148,29 @@ _n.b. in future versions we will likely separate the typeface and other body classes._ -### Custom CSS +### CSS -You can override the built-in css by using your own. Just put your own css files in the `static` directory of your website (the one in the theme directory also works but is not recommended) and modify the `custom_css` parameter in your config file. The path referenced in the parameter should be relative to the `static` folder. These css files will be added through the `header` partial after the built-in css file. +Ananke stylesheet is built with Hugo Pipes's [Asset Bundling](https://gohugo.io/hugo-pipes/bundling/#readout) alone to maximize compatibiliy. The theme simply bundles its several files into one minified and fingerprinted (in production) CSS file. -For example, if your css files are `static/css/custom.css` and `static/css/custom2.css` then add the following to the config file: +Ananke uses [Tachyon.io](http://tachyons.io/) utility class library. + +#### Custom CSS + +In order to complement the default CSS with your own, you can add custom css files to the project. + +1. Just add a `assets/ananke/css` directory to your project and add the file(s) in it. +2. Register the files using the `custom_css` key in your site's parameter. The path referenced in the parameter should be relative to the `assets/ananke/css` folder. + +The css files will be added in their registered order to final `main.css` file. + +For example, if your css files are `assets/ananke/css/custom.css` and `assets/ananke/special.css` then add the following to the config file: ``` - [params] - custom_css = ["css/custom.css","css/custom2.css"] + [params] + custom_css = ["custom.css","special.css"] ``` -### Processed CSS - -By default, Ananke will read a preprocessed stylesheet from `/assets/ananke/dist/main.[hash].css`. If you want to have Hugo process the stylesheet for you thus allowing better customisation using Hugo's unison file system, you need to: - -1. From the root of your project: `$ hugo mod npm pack`. -This will generate a `package.json` for your project, or append the npm packages required by the theme to your existing `package.json`. -2. Still from the root of your project: `$ npm install` -3. Set the following site Parameter to true: - -``` - [params] - ananke_process_css = true -``` - -You're all set an can run Hugo. - -#### Overwrite some imported file - -To have your own `_code.css` imported and processed by the theme. Add `/assets/ananke/css/_code.css` to your project. - -#### Add a new import - -Create your own `/assets/ananke/css/` directory at the root of your project, drop your files in there, and create your own `/main.css` with your own import statements. Don't forget to include the existing import statement from the theme's own `main.css`. +__Note on retrocompatibiliy for custom css__: If the files registered through the `custom_css` setting are not found in `assets/ananke/css` the theme will expect them to live at the given path relative to the static directory and load them as <link> requests. ### Show Reading Time and Word Count -- Gitblit v1.10.0