1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
+++
title = "Abridge Zola Theme"
date = 2022-05-17
updated = 2023-07-21
draft = false
[taxonomies]
categories = ["Features"]
tags = ["config"]
+++
Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons and syntax highlighting, no mandatory JS, and perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page.
<!-- more -->
For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used.
You can then edit or comment out the values in this file as necessary.
You should also uncomment out the line #theme = "abridge" in your root zola config.toml file. This tells your root zola site to use the abridge theme in the themes folder.
## Pagination
You can set the number of items that appear on the home page by editing `content\_index.md` file and adjusting `paginate_by = 3`
## Sass Overrides
Abridge SCSS variables can be overrided by editing `sass\abridge.scss` file in your project's root sass folder.
### Page Width
```scss
$mw:75%,// max-width
```
### Abridge Theme Modes
```scss
$abridgeMode: "switcher",//valid values: switcher, auto, dark, light
```
### Colors and Styles
You can specify which color template you want to use as a base:
```scss
$color: "orange",// color template to use/override: orange, blue, blueshade
```
Then override individual colors as needed:
```scss
/// Dark Colors
$f1d: #ccc,// Font Color Primary
$f2d: #ddd,// Font Color Headers
$c1d: #111,// Background Color Primary
$c2d: #222,// Background Color Secondary
...
```
### Footer Social Icons
You should configure which social icons you plan to use. (makes the css file size smaller)
To simply turn them all off you can set `$enable-icons: false`
Otherwise enable only the icons you need, eg for mail you would set `$icon-mail: true`
You should then disable all the icons that you do not use.
|
