make fonts changeable. Fixes #10 (#15)

* make fonts changeable. Fixes #10 * Introduced variables for fonts.
1 year ago · 0565ff0f0a
parent 7466e194e1
commit 0565ff0f0a
5 changed files with 52 additions and 10 deletions
--- 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 %}
+    <link href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Babylonica&display=swap" rel="stylesheet">
+{% 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, ...)
--- 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;
    }
 </style>
 ```

 ### 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 %}
+    <link href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Babylonica&display=swap" rel="stylesheet">
+{% endblock fonts %}
+```
+
 # Configuration

 You can customize some builtin property in `config.toml` file:
--- 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;
--- 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;
        }
    }
 </style>
--- a/templates/index.html
+++ b/templates/index.html
@ -10,8 +10,10 @@
    <link rel="icon" type="image/png" href="/favicon.ico">
    {% endblock favicon %}
    {% include "_variables.html" %}
+    {% block fonts %}
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
+    {% endblock fonts %}
    <link rel="stylesheet" href="/normalize.css">
    <link rel="stylesheet" href="{{ get_url(path="juice.css") }}">
    {% block head %}