diff --git a/README.md b/README.md
index fbd288f..58836bb 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ theme = "juice"
### Hero
**Juice** is designed for product websites, hence we let **hero** part fills whole of screen.
-You can customize your **hero** by using `hero` block in the `index.html`.
+You can customize your **hero** by using `hero` block in the `templates/index.html`.
```html
{% extends "juice/templates/index.html" %}
@@ -70,6 +70,7 @@ You can override theme variable by creating a file named `_variables.html` in yo
See the default value [here](./templates/_variables.html)
### Favicon
+The same way as changing the `hero` block in the `templates/index.html`, you can change the **favicon**.
```html
{% extends "juice/templates/index.html" %}
@@ -78,6 +79,17 @@ See the default value [here](./templates/_variables.html)
{% endblock favicon %}
```
+### Fonts
+If you changed the `--xy-font-family`-variable in `_variables.html`, you have to load the mentioned fonts in the `templates/index.html`.
+
+```html
+{% extends "juice/templates/index.html" %}
+{% block fonts %}
+
+
+{% endblock fonts %}
+```
+
# Configuration
You can customize some builtin property in `config.toml` file:
@@ -100,7 +112,7 @@ repository_url = "https://github.com/huhu/juice"
**Juice** have some builtin shortcodes available in `templates/shortcodes` directory.
- `issue(id)` - A shortcode to render issue url, e.g. `issue(id=1)` would render to the link `https://github.com/huhu/juice/issue/1`.
-
+
> The `repository_url` is required.
# Showcases
@@ -114,4 +126,4 @@ Thank you very much for considering contributing to this project!
We appreciate any form of contribution:
- New issues (feature requests, bug reports, questions, ideas, ...)
-- Pull requests (documentation improvements, code improvements, new features, ...)
+- Pull requests (documentation improvements, code improvements, new features, ...)
\ No newline at end of file
diff --git a/content/_index.md b/content/_index.md
index ca21289..c82bafd 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -9,7 +9,7 @@ sort_by = "weight"
- Build for product sites
- Simple and intuitive structure
-- Clean and elegant design
+- Clean and elegant design
- Responsive and mobile device compatible
- Customize and extend friendly
@@ -54,7 +54,7 @@ You can customize your **hero** by using `hero` block in the `templates/index.ht
### Page
Every markdown file located in `content` directory will become a **Page**. There also will display as
-a navigate link on the top-right corner.
+a navigate link on the top-right corner.
You can change the frontmatter's `weight` value to sort the order (ascending order).
```
@@ -77,6 +77,7 @@ You can override theme variable by creating a file named `_variables.html` in yo
--primary-color: #FED43F;
/* Primary theme text color */
--primary-text-color: #543631;
+ --primary-text-color-over: #000;
/* Primary theme link color */
--primary-link-color: #F9BB2D;
/* Secondary color: the background body color */
@@ -84,11 +85,20 @@ You can override theme variable by creating a file named `_variables.html` in yo
--secondary-text-color: #303030;
/* Highlight text color of table of content */
--toc-highlight-text-color: #d46e13;
+ --toc-background-color: white;
+ --code-color: #4a4a4a;
+ --code-background-color: white;
+ --shadow-color: #ddd;
+ /* Font used for headers (h1 & h2) */
+ --header-font-family: "Fira Sans", sans-serif;
+ /* Font used for text */
+ --text-font-family: "Fira Sans", sans-serif;
}
```
### Favicon
+The same way as changing the `hero` block in the `templates/index.html`, you can change the **favicon**.
```html
{% extends "juice/templates/index.html" %}
@@ -97,6 +107,17 @@ You can override theme variable by creating a file named `_variables.html` in yo
{% endblock favicon %}
```
+### Fonts
+If you changed the `--xy-font-family`-variable in `_variables.html`, you have to load the mentioned fonts in the `templates/index.html`.
+
+```html
+{% extends "juice/templates/index.html" %}
+{% block fonts %}
+
+
+{% endblock fonts %}
+```
+
# Configuration
You can customize some builtin property in `config.toml` file:
diff --git a/sass/_text.scss b/sass/_text.scss
index 40f47c9..ca163bb 100644
--- a/sass/_text.scss
+++ b/sass/_text.scss
@@ -1,5 +1,5 @@
.heading-text {
- font-family: "Fira Sans", sans-serif;
+ font-family: var(--header-font-family);
font-size: 32px;
font-weight: 600;
padding: 10px 0 25px 0;
@@ -7,7 +7,7 @@
}
h1, .title-text {
- font-family: "Fira Sans", sans-serif;
+ font-family: var(--header-font-family);
font-size: 25px;
font-weight: 500;
color: var(--primary-text-color);
@@ -16,14 +16,14 @@ h1, .title-text {
}
h2, .subtitle-text {
- font-family: "Fira Sans", sans-serif;
+ font-family: var(--header-font-family);
font-size: 20px;
font-weight: 500;
color: var(--primary-text-color);
}
.text {
- font-family: "Fira Sans", sans-serif;
+ font-family: var(--text-font-family);
font-size: 18px;
font-weight: 400;
line-height: 26px;
@@ -32,7 +32,7 @@ h2, .subtitle-text {
}
.subtext {
- font-family: "Fira Sans", sans-serif;
+ font-family: var(--text-font-family);
font-size: 16px;
font-weight: 400;
letter-spacing: 0.1px;
diff --git a/templates/_variables.html b/templates/_variables.html
index 9fb4632..5fe3faa 100644
--- a/templates/_variables.html
+++ b/templates/_variables.html
@@ -17,6 +17,11 @@
--code-background-color: white;
--shadow-color: #ddd;
+
+ /* Font used for headers (h1 & h2) */
+ --header-font-family: "Fira Sans", sans-serif;
+ /* Font used for text */
+ --text-font-family: "Fira Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
@@ -33,6 +38,8 @@
--code-background-color: #4a4a4a;
--shadow-color: #202020;
+ --header-font-family: "Fira Sans", sans-serif;
+ --text-font-family: "Fira Sans", sans-serif;
}
}
diff --git a/templates/index.html b/templates/index.html
index 6bc901d..0bb4e60 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,8 +10,10 @@
{% endblock favicon %}
{% include "_variables.html" %}
+ {% block fonts %}
+ {% endblock fonts %}
{% block head %}