34 changed files with 1777 additions and 0 deletions
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
# The URL the site will be built for |
||||
base_url = "https://dns-witch.eu.org" |
||||
|
||||
# Whether to automatically compile all Sass files in the sass directory |
||||
compile_sass = true |
||||
|
||||
# Whether to build a search index to be used later on by a JavaScript library |
||||
build_search_index = false |
||||
|
||||
theme = "juice" |
||||
|
||||
[markdown] |
||||
# Whether to do syntax highlighting |
||||
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola |
||||
highlight_code = false |
||||
|
||||
[extra] |
||||
# Put all your custom variables here |
||||
juice_logo_name = "DNS Witch" |
||||
juice_logo_path = "static/img/undraw_web_browsing_p77h.svg" |
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 64 KiB |
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
.text-center{text-align:center}.pos-absolute{right:0;left:0;position:absolute}.box-shadow{box-shadow:0 2px 10px 2px #ddd}.heading-text{font-family:"b612", sans-serif;font-size:32px;font-weight:600;padding:10px 0 25px 0;color:var(--primary-text-color)}h1,.title-text{font-family:"b612", sans-serif;font-size:25px;font-weight:500;color:var(--primary-text-color);border-left:var(--primary-color) 8px solid;padding-left:10px}h2,.subtitle-text{font-family:"b612", sans-serif;font-size:20px;font-weight:500;color:var(--primary-text-color)}.text{font-family:"b612", sans-serif;font-size:18px;font-weight:400;line-height:26px;letter-spacing:0.2px;color:var(--primary-text-color)}.subtext{font-family:"b612", sans-serif;font-size:16px;font-weight:400;letter-spacing:0.1px}.content{padding:0 40px;display:flex;flex-direction:column;overflow-x:auto}.content pre{overflow-x:auto;padding:1.25em 1.5em;white-space:pre;word-wrap:normal;background-color:white;color:#4a4a4a;font-size:.875em;font-family:monospace}.content code{background-color:white;color:#4a4a4a;font-size:.875em;font-weight:normal;padding:0.25em 0.5em;font-family:monospace}.content pre code{padding:0}.content a{color:var(--primary-link-color)}.content a:hover{text-decoration:underline}.content blockquote{border-left:#e2dede 8px solid;margin:0;background-color:#f2f1f0;padding:0 20px}:root{--font-family: 'b612';--font: 'b612', sans-serif;--background: #282a36;--selection:#44475a;--comment:#6272a4;--purple:#bd93f9;--white:#f8f8f2;--pink:#ff79c6;--orange: #ffb86c}@font-face{font-family:'b612';src:url("fonts/b612-regular.ttf") format("truetype")}body{padding:0;margin:0;box-sizing:border-box;background-color:var(--secondary-color);display:flex;flex-direction:column;min-height:100vh}a{text-decoration:none}ul{margin-top:0.5rem}ul>li{padding:0.3rem 0}p>img{width:100%;height:auto}header{background-color:var(--primary-color);color:black;padding:20px 50px;display:flex;align-items:center;justify-content:space-between}.logo{font-family:"b612", serif;font-size:32px;color:var(--primary-text-color);display:flex;align-items:center;margin:0 40px}.logo img{width:60px;margin:0 25px}.nav-item{margin:0 10px;text-decoration:none;font-size:18px;font-weight:bold}.nav-item:hover{color:#000;text-decoration:underline}.hero{display:flex;align-items:center;justify-content:space-evenly;height:100vh;background-color:var(--primary-color);overflow-x:hidden;padding:0 40px}.hero .explore-more{position:absolute;bottom:20px;cursor:pointer}main{display:flex;padding:50px 100px;flex-grow:1}main .toc{max-width:260px;min-width:240px}main .toc-item{padding:10px 20px;color:#424242}main .toc-item a,main .toc-item-child a{color:var(--secondary-text-color)}main .toc-item a:hover,main .toc-item-child a:hover{cursor:pointer;text-decoration:underline}main .toc-item a.active,main .toc-item-child a.active{color:var(--toc-highlight-text-color)}main .toc-item-child{padding:0 30px 5px;color:#424242}.toc-sticky{border-radius:3px;border-top:5px solid var(--primary-color);background-color:white;position:sticky;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;top:10px;padding:10px 0 20px;max-height:100vh;overflow:auto}footer{padding:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#202020;color:#fcfcfc}footer a{color:#fcfcfc;text-decoration:underline}@media screen and (min-width: 1280px){.content{max-width:60%;min-width:800px}}@media screen and (max-width: 768px){header{padding:10px 30px;flex-direction:column;align-items:center;justify-content:center}.logo{font-size:28px;margin:10px}.logo img{width:45px;margin:0 10px 0 0}.nav-item{margin:0 5px;font-size:14px}.hero{padding:40px 30px}main{padding:30px}.content{padding:0}.explore-more,.toc{display:none}} |
||||
@ -0,0 +1,349 @@
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
||||
|
||||
/* Document |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Correct the line height in all browsers. |
||||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
||||
*/ |
||||
|
||||
html { |
||||
line-height: 1.15; /* 1 */ |
||||
-webkit-text-size-adjust: 100%; /* 2 */ |
||||
} |
||||
|
||||
/* Sections |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the margin in all browsers. |
||||
*/ |
||||
|
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
/** |
||||
* Render the `main` element consistently in IE. |
||||
*/ |
||||
|
||||
main { |
||||
display: block; |
||||
} |
||||
|
||||
/** |
||||
* Correct the font size and margin on `h1` elements within `section` and |
||||
* `article` contexts in Chrome, Firefox, and Safari. |
||||
*/ |
||||
|
||||
h1 { |
||||
font-size: 2em; |
||||
margin: 0.67em 0; |
||||
} |
||||
|
||||
/* Grouping content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Add the correct box sizing in Firefox. |
||||
* 2. Show the overflow in Edge and IE. |
||||
*/ |
||||
|
||||
hr { |
||||
box-sizing: content-box; /* 1 */ |
||||
height: 0; /* 1 */ |
||||
overflow: visible; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
* 2. Correct the odd `em` font sizing in all browsers. |
||||
*/ |
||||
|
||||
pre { |
||||
font-family: monospace, monospace; /* 1 */ |
||||
font-size: 1em; /* 2 */ |
||||
} |
||||
|
||||
/* Text-level semantics |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the gray background on active links in IE 10. |
||||
*/ |
||||
|
||||
a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
/** |
||||
* 1. Remove the bottom border in Chrome 57- |
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
||||
*/ |
||||
|
||||
abbr[title] { |
||||
border-bottom: none; /* 1 */ |
||||
text-decoration: underline; /* 2 */ |
||||
text-decoration: underline dotted; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct font weight in Chrome, Edge, and Safari. |
||||
*/ |
||||
|
||||
b, |
||||
strong { |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
* 2. Correct the odd `em` font sizing in all browsers. |
||||
*/ |
||||
|
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: monospace, monospace; /* 1 */ |
||||
font-size: 1em; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct font size in all browsers. |
||||
*/ |
||||
|
||||
small { |
||||
font-size: 80%; |
||||
} |
||||
|
||||
/** |
||||
* Prevent `sub` and `sup` elements from affecting the line height in |
||||
* all browsers. |
||||
*/ |
||||
|
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
/* Embedded content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the border on images inside links in IE 10. |
||||
*/ |
||||
|
||||
img { |
||||
border-style: none; |
||||
} |
||||
|
||||
/* Forms |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Change the font styles in all browsers. |
||||
* 2. Remove the margin in Firefox and Safari. |
||||
*/ |
||||
|
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea { |
||||
font-family: inherit; /* 1 */ |
||||
font-size: 100%; /* 1 */ |
||||
line-height: 1.15; /* 1 */ |
||||
margin: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Show the overflow in IE. |
||||
* 1. Show the overflow in Edge. |
||||
*/ |
||||
|
||||
button, |
||||
input { /* 1 */ |
||||
overflow: visible; |
||||
} |
||||
|
||||
/** |
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
||||
* 1. Remove the inheritance of text transform in Firefox. |
||||
*/ |
||||
|
||||
button, |
||||
select { /* 1 */ |
||||
text-transform: none; |
||||
} |
||||
|
||||
/** |
||||
* Correct the inability to style clickable types in iOS and Safari. |
||||
*/ |
||||
|
||||
button, |
||||
[type="button"], |
||||
[type="reset"], |
||||
[type="submit"] { |
||||
-webkit-appearance: button; |
||||
} |
||||
|
||||
/** |
||||
* Remove the inner border and padding in Firefox. |
||||
*/ |
||||
|
||||
button::-moz-focus-inner, |
||||
[type="button"]::-moz-focus-inner, |
||||
[type="reset"]::-moz-focus-inner, |
||||
[type="submit"]::-moz-focus-inner { |
||||
border-style: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
/** |
||||
* Restore the focus styles unset by the previous rule. |
||||
*/ |
||||
|
||||
button:-moz-focusring, |
||||
[type="button"]:-moz-focusring, |
||||
[type="reset"]:-moz-focusring, |
||||
[type="submit"]:-moz-focusring { |
||||
outline: 1px dotted ButtonText; |
||||
} |
||||
|
||||
/** |
||||
* Correct the padding in Firefox. |
||||
*/ |
||||
|
||||
fieldset { |
||||
padding: 0.35em 0.75em 0.625em; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the text wrapping in Edge and IE. |
||||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||
* 3. Remove the padding so developers are not caught out when they zero out |
||||
* `fieldset` elements in all browsers. |
||||
*/ |
||||
|
||||
legend { |
||||
box-sizing: border-box; /* 1 */ |
||||
color: inherit; /* 2 */ |
||||
display: table; /* 1 */ |
||||
max-width: 100%; /* 1 */ |
||||
padding: 0; /* 3 */ |
||||
white-space: normal; /* 1 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||
*/ |
||||
|
||||
progress { |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
/** |
||||
* Remove the default vertical scrollbar in IE 10+. |
||||
*/ |
||||
|
||||
textarea { |
||||
overflow: auto; |
||||
} |
||||
|
||||
/** |
||||
* 1. Add the correct box sizing in IE 10. |
||||
* 2. Remove the padding in IE 10. |
||||
*/ |
||||
|
||||
[type="checkbox"], |
||||
[type="radio"] { |
||||
box-sizing: border-box; /* 1 */ |
||||
padding: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||
*/ |
||||
|
||||
[type="number"]::-webkit-inner-spin-button, |
||||
[type="number"]::-webkit-outer-spin-button { |
||||
height: auto; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the odd appearance in Chrome and Safari. |
||||
* 2. Correct the outline style in Safari. |
||||
*/ |
||||
|
||||
[type="search"] { |
||||
-webkit-appearance: textfield; /* 1 */ |
||||
outline-offset: -2px; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Remove the inner padding in Chrome and Safari on macOS. |
||||
*/ |
||||
|
||||
[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||
* 2. Change font properties to `inherit` in Safari. |
||||
*/ |
||||
|
||||
::-webkit-file-upload-button { |
||||
-webkit-appearance: button; /* 1 */ |
||||
font: inherit; /* 2 */ |
||||
} |
||||
|
||||
/* Interactive |
||||
========================================================================== */ |
||||
|
||||
/* |
||||
* Add the correct display in Edge, IE 10+, and Firefox. |
||||
*/ |
||||
|
||||
details { |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
* Add the correct display in all browsers. |
||||
*/ |
||||
|
||||
summary { |
||||
display: list-item; |
||||
} |
||||
|
||||
/* Misc |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Add the correct display in IE 10+. |
||||
*/ |
||||
|
||||
template { |
||||
display: none; |
||||
} |
||||
|
||||
/** |
||||
* Add the correct display in IE 10. |
||||
*/ |
||||
|
||||
[hidden] { |
||||
display: none; |
||||
} |
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 64 KiB |
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
.idea |
||||
.DS_Store |
||||
public |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2020 Huhu |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,130 @@
@@ -0,0 +1,130 @@
|
||||
# Juice |
||||
|
||||
<img align="right" width="150" height="150" src="/content/juice.svg"> |
||||
|
||||
**Juice** is an intuitive, elegant, and responsive Zola theme for product sites. |
||||
|
||||
- Build for product sites |
||||
- Simple and intuitive structure |
||||
- Clean and elegant design |
||||
- Responsive and mobile device compatible |
||||
- Customize and extend friendly |
||||
|
||||
https://juice.huhu.io |
||||
|
||||
# Installation |
||||
|
||||
First download this theme to your `themes` directory: |
||||
|
||||
```bash |
||||
$ cd themes |
||||
$ git clone https://github.com/huhu/juice.git |
||||
``` |
||||
|
||||
or add as a submodule |
||||
```bash |
||||
$ git submodule add https://github.com/huhu/juice themes/juice |
||||
``` |
||||
|
||||
and then enable it in your `config.toml`: |
||||
|
||||
```toml |
||||
theme = "juice" |
||||
``` |
||||
|
||||
# Structure |
||||
|
||||
### 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`. |
||||
|
||||
```html |
||||
{% extends "juice/templates/index.html" %} |
||||
{% block hero %} |
||||
<div> |
||||
Your cool hero html... |
||||
</div> |
||||
{% endblock hero %} |
||||
``` |
||||
|
||||
### 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. |
||||
You can change the frontmatter's `weight` value to sort the order (ascending order). |
||||
|
||||
``` |
||||
+++ |
||||
title = "Changelog" |
||||
description = "Changelog" |
||||
weight = 2 |
||||
+++ |
||||
|
||||
``` |
||||
|
||||
### CSS variables |
||||
|
||||
You can override theme variable by creating a file named `_variables.html` in your `templates` directory. |
||||
|
||||
```html |
||||
<style> |
||||
:root { |
||||
/* Primary theme color */ |
||||
--primary-color: #FED43F; |
||||
/* Primary theme text color */ |
||||
--primary-text-color: #543631; |
||||
/* Primary theme link color */ |
||||
--primary-link-color: #F9BB2D; |
||||
/* Secondary color: the background body color */ |
||||
--secondary-color: #fcfaf6; |
||||
--secondary-text-color: #303030; |
||||
/* Highlight text color of table of content */ |
||||
--toc-highlight-text-color: #d46e13; |
||||
} |
||||
</style> |
||||
``` |
||||
|
||||
### Favicon |
||||
|
||||
```html |
||||
{% extends "juice/templates/index.html" %} |
||||
{% block favicon %} |
||||
<link rel="icon" type="image/png" href="/favicon.ico"> |
||||
{% endblock favicon %} |
||||
``` |
||||
|
||||
# Configuration |
||||
|
||||
You can customize some builtin property in `config.toml` file: |
||||
|
||||
```toml |
||||
[extra] |
||||
juice_logo_name = "Juice" |
||||
juice_logo_path = "juice.svg" |
||||
juice_extra_menu = [ |
||||
{ title = "Github", link = "https://github.com/huhu/juice"} |
||||
] |
||||
repository_url = "https://github.com/huhu/juice" |
||||
``` |
||||
|
||||
# Shortcodes |
||||
|
||||
**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 |
||||
|
||||
Please see the [showcases page](https://juice.huhu.io/showcases). |
||||
|
||||
# Contributing |
||||
|
||||
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, ...) |
||||
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
# The URL the site will be built for |
||||
base_url = "/" |
||||
|
||||
title = "Juice - An intuitive, elegant, and lightweight Zola theme for product sites." |
||||
|
||||
# Whether to automatically compile all Sass files in the sass directory |
||||
compile_sass = true |
||||
|
||||
# Whether to build a search index to be used later on by a JavaScript library |
||||
build_search_index = false |
||||
|
||||
# Configuration of the Markdown rendering |
||||
[markdown] |
||||
# Whether to do syntax highlighting |
||||
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola |
||||
highlight_code = true |
||||
highlight_theme = "inspired-github" |
||||
|
||||
[extra] |
||||
juice_logo_name = "Juice" |
||||
juice_logo_path = "juice.svg" |
||||
juice_extra_menu = [ |
||||
{ title = "Github", link = "https://github.com/huhu/juice" } |
||||
] |
||||
repository_url = "https://github.com/huhu/juice" |
||||
@ -0,0 +1,133 @@
@@ -0,0 +1,133 @@
|
||||
+++ |
||||
title = "Juice" |
||||
sort_by = "weight" |
||||
+++ |
||||
|
||||
# Juice |
||||
|
||||
**Juice** is an intuitive, elegant, and responsive Zola theme for product sites. |
||||
|
||||
- Build for product sites |
||||
- Simple and intuitive structure |
||||
- Clean and elegant design |
||||
- Responsive and mobile device compatible |
||||
- Customize and extend friendly |
||||
|
||||
# Installation |
||||
|
||||
> **Zola** is a prerequisite. Please refer to the [Zola installation](https://www.getzola.org/documentation/getting-started/installation/) docs. |
||||
|
||||
First download this theme to your `themes` directory: |
||||
|
||||
```bash |
||||
$ cd themes |
||||
$ git clone https://github.com/huhu/juice.git |
||||
``` |
||||
|
||||
or add as a submodule |
||||
```bash |
||||
$ git submodule add https://github.com/huhu/juice themes/juice |
||||
``` |
||||
|
||||
and then enable it in your `config.toml`: |
||||
|
||||
```toml |
||||
theme = "juice" |
||||
``` |
||||
|
||||
# Structure |
||||
|
||||
### 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 `templates/index.html`. |
||||
|
||||
```html |
||||
{% extends "juice/templates/index.html" %} |
||||
{% block hero %} |
||||
<div> |
||||
Your cool hero html... |
||||
</div> |
||||
{% endblock hero %} |
||||
``` |
||||
|
||||
### 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. |
||||
You can change the frontmatter's `weight` value to sort the order (ascending order). |
||||
|
||||
``` |
||||
+++ |
||||
title = "Changelog" |
||||
description = "Changelog" |
||||
weight = 2 |
||||
+++ |
||||
|
||||
``` |
||||
|
||||
### CSS variables |
||||
|
||||
You can override theme variable by creating a file named `_variables.html` in your `templates` directory. |
||||
|
||||
```html |
||||
<style> |
||||
:root { |
||||
/* Primary theme color */ |
||||
--primary-color: #FED43F; |
||||
/* Primary theme text color */ |
||||
--primary-text-color: #543631; |
||||
/* Primary theme link color */ |
||||
--primary-link-color: #F9BB2D; |
||||
/* Secondary color: the background body color */ |
||||
--secondary-color: #fcfaf6; |
||||
--secondary-text-color: #303030; |
||||
/* Highlight text color of table of content */ |
||||
--toc-highlight-text-color: #d46e13; |
||||
} |
||||
</style> |
||||
``` |
||||
|
||||
### Favicon |
||||
|
||||
```html |
||||
{% extends "juice/templates/index.html" %} |
||||
{% block favicon %} |
||||
<link rel="icon" type="image/png" href="/favicon.ico"> |
||||
{% endblock favicon %} |
||||
``` |
||||
|
||||
# Configuration |
||||
|
||||
You can customize some builtin property in `config.toml` file: |
||||
|
||||
```toml |
||||
[extra] |
||||
juice_logo_name = "Juice" |
||||
juice_logo_path = "juice.svg" |
||||
juice_extra_menu = [ |
||||
{ title = "Github", link = "https://github.com/huhu/juice"} |
||||
] |
||||
repository_url = "https://github.com/huhu/juice" |
||||
``` |
||||
|
||||
# Shortcodes |
||||
|
||||
**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 |
||||
|
||||
Please see the [showcases page](/showcases). |
||||
|
||||
# Contributing |
||||
|
||||
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, ...) |
||||
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
+++ |
||||
title = "About" |
||||
description = "About" |
||||
weight = 3 |
||||
+++ |
||||
|
||||
# Juice |
||||
|
||||
**Juice** is an intuitive, elegant, and responsive Zola theme for product sites. |
||||
Built by [Huhu.io](https://huhu.io), adopted by a several product sites. |
||||
|
||||
# Logo |
||||
|
||||
 |
||||
|
||||
# Zola |
||||
|
||||
[Zola](https://www.getzola.org) is a fast static site generator in a single binary with everything built-in. |
||||
|
||||
|
||||
# Huhu.io |
||||
|
||||
[Huhu.io](https://huhu.io) is a global community of coders dedicated to making cool stuff coders need and want. |
||||
We focus on enabling the developer community by curating, incubating, and launching tools based on great ideas, |
||||
providing support and funding that allows our engineers to develop what they want, the way they want. |
||||
@ -0,0 +1,43 @@
@@ -0,0 +1,43 @@
|
||||
+++ |
||||
title = "Changelog" |
||||
description = "Changelog" |
||||
weight = 2 |
||||
+++ |
||||
|
||||
# v0.6.0 - 2021-10-05 |
||||
|
||||
- Add `favicon` block. |
||||
- Always align footer bottom. {{ issue(id=4) }} |
||||
- Support config favicon. Fixes {{ issue(id=5) }}. |
||||
- Table of Content supports auto-scroll if the list is too long. |
||||
|
||||
# v0.5.0 - 2021-03-02 |
||||
|
||||
- Add `issue` shortcode. |
||||
- Add `sidebar` block. |
||||
- Adjust blockquote background color. |
||||
- Fix explore-more class left align. |
||||
|
||||
# v0.4.0 - 2020-11-18 |
||||
|
||||
- Prevent showcase images be included by downstream Zola project. |
||||
- Fix TOC highlight in localhost mode. See {{ issue(id=1) }}. |
||||
- Hide TOC for empty markdown content page. |
||||
|
||||
# v0.3.0 - 2020-07-17 |
||||
|
||||
- Rename css filename to avoid conflicts. |
||||
- Replace sass variables with css variable. |
||||
- Add `--toc-highlight-text-color` variable. |
||||
- Add normalize.css. |
||||
|
||||
# v0.2.0 - 2020-06-28 |
||||
|
||||
- Add extra juice_extra_menu config. |
||||
- Add color customization CSS variables. |
||||
- Improve docs and blockquote style. |
||||
- Support customize logo and name. |
||||
|
||||
# v0.1.0 - 2020-06-21 |
||||
|
||||
- First release! |
||||
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,99 @@
@@ -0,0 +1,99 @@
|
||||
+++ |
||||
title = "Showcases" |
||||
description = "Showcases" |
||||
weight = 1 |
||||
+++ |
||||
|
||||
# Pull request |
||||
|
||||
If you use **Juice** as your theme, feel free to make Pull request. |
||||
|
||||
Here are some steps to help you get started: |
||||
|
||||
- Change the [content/showcases.md](https://github.com/huhu/juice/blob/master/content/showcases.md) file, add your product site. Make sure the lexicographical order. |
||||
- Add a link to your product site. |
||||
|
||||
# Gallery |
||||
|
||||
Here are some product websites which use **Juice** as the theme. |
||||
Sort by lexicographical order. For more showcases, please visit [here](https://github.com/search?l=&p=1&q=theme+%3D+%22juice%22+filename%3Aconfig.toml&ref=advsearch&type=Code). |
||||
|
||||
## Arara |
||||
|
||||
[https://islandoftex.gitlab.io/arara/](https://islandoftex.gitlab.io/arara/) |
||||
|
||||
## Angular Rust |
||||
|
||||
[https://angular-rust.github.io/](https://angular-rust.github.io/) |
||||
|
||||
## C/C++ Search Extension |
||||
|
||||
[https://cpp.extension.sh/](https://cpp.extension.sh/) |
||||
|
||||
## Drogue IOT |
||||
|
||||
[https://www.drogue.io/](https://www.drogue.io/) |
||||
|
||||
## El Monitorro |
||||
|
||||
[https://elmonitorro.badykov.com/](https://elmonitorro.badykov.com/) |
||||
|
||||
## Godot-rust |
||||
|
||||
[https://godot-rust.github.io/](https://godot-rust.github.io/) |
||||
|
||||
## GoToFix (JP) |
||||
|
||||
[https://gotofix.kumassy.com/](https://gotofix.kumassy.com/) |
||||
|
||||
## Go Search Extension |
||||
|
||||
[https://go.extension.sh/](https://go.extension.sh/) |
||||
|
||||
## Gradecoin |
||||
|
||||
[https://gradecoin.xyz/](https://gradecoin.xyz/) |
||||
|
||||
## Insta.rs |
||||
|
||||
[https://insta.rs/](https://insta.rs/) |
||||
|
||||
## Instant markdown |
||||
|
||||
[https://instant-markdown.github.io/](https://instant-markdown.github.io/) |
||||
|
||||
## ImpftHessen (DE) |
||||
|
||||
[https://impft-hessen.de/](https://impft-hessen.de/) |
||||
|
||||
## JS Search Extension |
||||
|
||||
[https://js.extension.sh/](https://js.extension.sh/) |
||||
|
||||
## Rust Search Extension |
||||
|
||||
[https://rust.extension.sh/](https://rust.extension.sh/) |
||||
|
||||
## Stitcherd |
||||
|
||||
[https://stitcherd.vhodges.dev/](https://stitcherd.vhodges.dev/) |
||||
|
||||
## Streamson |
||||
|
||||
[https://streamson.henek.name/](https://streamson.henek.name/) |
||||
|
||||
## Tokay lang |
||||
|
||||
[https://tokay.dev](https://tokay.dev) |
||||
|
||||
## Trunk |
||||
|
||||
[https://trunkrs.dev/](https://trunkrs.dev/) |
||||
|
||||
## Vidar |
||||
|
||||
[https://calebsacks.me/vidar/](https://calebsacks.me/vidar/) |
||||
|
||||
## zDevelopers |
||||
|
||||
[https://dev.zcraft.fr/](https://dev.zcraft.fr/) |
||||
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
.content { |
||||
padding: 0 40px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.content pre { |
||||
overflow-x: auto; |
||||
padding: 1.25em 1.5em; |
||||
white-space: pre; |
||||
word-wrap: normal; |
||||
background-color: white; |
||||
color: #4a4a4a; |
||||
font-size: .875em; |
||||
font-family: monospace; |
||||
} |
||||
|
||||
.content code { |
||||
background-color: white; |
||||
color: #4a4a4a; |
||||
font-size: .875em; |
||||
font-weight: normal; |
||||
padding: 0.25em 0.5em; |
||||
font-family: monospace; |
||||
} |
||||
|
||||
.content pre code { |
||||
padding: 0; |
||||
} |
||||
|
||||
.content a { |
||||
color: var(--primary-link-color); |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
.content blockquote { |
||||
border-left: #e2dede 8px solid; |
||||
margin: 0; |
||||
background-color: #f2f1f0; |
||||
padding: 0 20px; |
||||
} |
||||
@ -0,0 +1,39 @@
@@ -0,0 +1,39 @@
|
||||
.heading-text { |
||||
font-family: "b612", sans-serif; |
||||
font-size: 32px; |
||||
font-weight: 600; |
||||
padding: 10px 0 25px 0; |
||||
color: var(--primary-text-color); |
||||
} |
||||
|
||||
h1, .title-text { |
||||
font-family: "b612", sans-serif; |
||||
font-size: 25px; |
||||
font-weight: 500; |
||||
color: var(--primary-text-color); |
||||
border-left: var(--primary-color) 8px solid; |
||||
padding-left: 10px; |
||||
} |
||||
|
||||
h2, .subtitle-text { |
||||
font-family: "b612", sans-serif; |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
color: var(--primary-text-color); |
||||
} |
||||
|
||||
.text { |
||||
font-family: "b612", sans-serif; |
||||
font-size: 18px; |
||||
font-weight: 400; |
||||
line-height: 26px; |
||||
letter-spacing: 0.2px; |
||||
color: var(--primary-text-color); |
||||
} |
||||
|
||||
.subtext { |
||||
font-family: "b612", sans-serif; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
letter-spacing: 0.1px; |
||||
} |
||||
@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
|
||||
.text-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
.pos-absolute { |
||||
right: 0; |
||||
left: 0; |
||||
position: absolute; |
||||
} |
||||
|
||||
.box-shadow { |
||||
box-shadow: 0 2px 10px 2px #ddd; |
||||
} |
||||
@ -0,0 +1,212 @@
@@ -0,0 +1,212 @@
|
||||
@import "_ultility.scss"; |
||||
@import "_text.scss"; |
||||
@import "_markdown.scss"; |
||||
|
||||
:root { |
||||
--font-family: 'b612'; |
||||
--font: 'b612', sans-serif; |
||||
|
||||
--background: #282a36; |
||||
--selection:#44475a; |
||||
--comment:#6272a4; |
||||
--purple:#bd93f9; |
||||
--white:#f8f8f2; |
||||
--pink:#ff79c6; |
||||
--orange: #ffb86c; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'b612'; |
||||
src: url('fonts/b612-regular.ttf') format('truetype'); |
||||
} |
||||
|
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
background-color: var(--secondary-color); |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
ul { |
||||
margin-top: 0.5rem; |
||||
} |
||||
|
||||
ul > li { |
||||
padding: 0.3rem 0; |
||||
} |
||||
|
||||
p > img { |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
|
||||
header { |
||||
background-color: var(--primary-color); |
||||
color: black; |
||||
padding: 20px 50px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "b612", serif; |
||||
font-size: 32px; |
||||
color: var(--primary-text-color); |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 0 40px; |
||||
|
||||
img { |
||||
width: 60px; |
||||
margin: 0 25px; |
||||
} |
||||
} |
||||
|
||||
.nav-item { |
||||
margin: 0 10px; |
||||
text-decoration: none; |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
|
||||
&:hover { |
||||
color: #000; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
.hero { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-evenly; |
||||
height: 100vh; |
||||
background-color: var(--primary-color); |
||||
overflow-x: hidden; |
||||
padding: 0 40px; |
||||
|
||||
.explore-more { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
main { |
||||
display: flex; |
||||
padding: 50px 100px; |
||||
flex-grow: 1; |
||||
|
||||
.toc { |
||||
max-width: 260px; |
||||
min-width: 240px; |
||||
} |
||||
|
||||
.toc-item { |
||||
padding: 10px 20px; |
||||
color: #424242; |
||||
} |
||||
|
||||
.toc-item a, .toc-item-child a { |
||||
color: var(--secondary-text-color); |
||||
|
||||
&:hover { |
||||
cursor: pointer; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
.toc-item a.active, .toc-item-child a.active { |
||||
color: var(--toc-highlight-text-color); |
||||
} |
||||
|
||||
.toc-item-child { |
||||
padding: 0 30px 5px; |
||||
color: #424242; |
||||
} |
||||
|
||||
} |
||||
|
||||
.toc-sticky { |
||||
border-radius: 3px; |
||||
border-top: 5px solid var(--primary-color); |
||||
background-color: white; |
||||
position: sticky; |
||||
position: -webkit-sticky; |
||||
position: -moz-sticky; |
||||
position: -ms-sticky; |
||||
position: -o-sticky; |
||||
top: 10px; |
||||
padding: 10px 0 20px; |
||||
max-height: 100vh; |
||||
overflow: auto; |
||||
} |
||||
|
||||
footer { |
||||
padding: 50px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #202020; |
||||
color: #fcfcfc; |
||||
|
||||
a { |
||||
color: #fcfcfc; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1280px) { |
||||
.content { |
||||
max-width: 60%; |
||||
min-width: 800px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 768px) { |
||||
header { |
||||
padding: 10px 30px; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.logo { |
||||
font-size: 28px; |
||||
margin: 10px; |
||||
|
||||
img { |
||||
width: 45px; |
||||
margin: 0 10px 0 0; |
||||
} |
||||
} |
||||
|
||||
.nav-item { |
||||
margin: 0 5px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.hero { |
||||
padding: 40px 30px; |
||||
} |
||||
|
||||
main { |
||||
padding: 30px; |
||||
} |
||||
|
||||
.content { |
||||
padding: 0; |
||||
} |
||||
|
||||
.explore-more, .toc { |
||||
display: none; |
||||
} |
||||
|
||||
} |
||||
|
After Width: | Height: | Size: 150 KiB |
@ -0,0 +1,349 @@
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
||||
|
||||
/* Document |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Correct the line height in all browsers. |
||||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
||||
*/ |
||||
|
||||
html { |
||||
line-height: 1.15; /* 1 */ |
||||
-webkit-text-size-adjust: 100%; /* 2 */ |
||||
} |
||||
|
||||
/* Sections |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the margin in all browsers. |
||||
*/ |
||||
|
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
/** |
||||
* Render the `main` element consistently in IE. |
||||
*/ |
||||
|
||||
main { |
||||
display: block; |
||||
} |
||||
|
||||
/** |
||||
* Correct the font size and margin on `h1` elements within `section` and |
||||
* `article` contexts in Chrome, Firefox, and Safari. |
||||
*/ |
||||
|
||||
h1 { |
||||
font-size: 2em; |
||||
margin: 0.67em 0; |
||||
} |
||||
|
||||
/* Grouping content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Add the correct box sizing in Firefox. |
||||
* 2. Show the overflow in Edge and IE. |
||||
*/ |
||||
|
||||
hr { |
||||
box-sizing: content-box; /* 1 */ |
||||
height: 0; /* 1 */ |
||||
overflow: visible; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
* 2. Correct the odd `em` font sizing in all browsers. |
||||
*/ |
||||
|
||||
pre { |
||||
font-family: monospace, monospace; /* 1 */ |
||||
font-size: 1em; /* 2 */ |
||||
} |
||||
|
||||
/* Text-level semantics |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the gray background on active links in IE 10. |
||||
*/ |
||||
|
||||
a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
/** |
||||
* 1. Remove the bottom border in Chrome 57- |
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
||||
*/ |
||||
|
||||
abbr[title] { |
||||
border-bottom: none; /* 1 */ |
||||
text-decoration: underline; /* 2 */ |
||||
text-decoration: underline dotted; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct font weight in Chrome, Edge, and Safari. |
||||
*/ |
||||
|
||||
b, |
||||
strong { |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct the inheritance and scaling of font size in all browsers. |
||||
* 2. Correct the odd `em` font sizing in all browsers. |
||||
*/ |
||||
|
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: monospace, monospace; /* 1 */ |
||||
font-size: 1em; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Add the correct font size in all browsers. |
||||
*/ |
||||
|
||||
small { |
||||
font-size: 80%; |
||||
} |
||||
|
||||
/** |
||||
* Prevent `sub` and `sup` elements from affecting the line height in |
||||
* all browsers. |
||||
*/ |
||||
|
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
/* Embedded content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the border on images inside links in IE 10. |
||||
*/ |
||||
|
||||
img { |
||||
border-style: none; |
||||
} |
||||
|
||||
/* Forms |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* 1. Change the font styles in all browsers. |
||||
* 2. Remove the margin in Firefox and Safari. |
||||
*/ |
||||
|
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea { |
||||
font-family: inherit; /* 1 */ |
||||
font-size: 100%; /* 1 */ |
||||
line-height: 1.15; /* 1 */ |
||||
margin: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Show the overflow in IE. |
||||
* 1. Show the overflow in Edge. |
||||
*/ |
||||
|
||||
button, |
||||
input { /* 1 */ |
||||
overflow: visible; |
||||
} |
||||
|
||||
/** |
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
||||
* 1. Remove the inheritance of text transform in Firefox. |
||||
*/ |
||||
|
||||
button, |
||||
select { /* 1 */ |
||||
text-transform: none; |
||||
} |
||||
|
||||
/** |
||||
* Correct the inability to style clickable types in iOS and Safari. |
||||
*/ |
||||
|
||||
button, |
||||
[type="button"], |
||||
[type="reset"], |
||||
[type="submit"] { |
||||
-webkit-appearance: button; |
||||
} |
||||
|
||||
/** |
||||
* Remove the inner border and padding in Firefox. |
||||
*/ |
||||
|
||||
button::-moz-focus-inner, |
||||
[type="button"]::-moz-focus-inner, |
||||
[type="reset"]::-moz-focus-inner, |
||||
[type="submit"]::-moz-focus-inner { |
||||
border-style: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
/** |
||||
* Restore the focus styles unset by the previous rule. |
||||
*/ |
||||
|
||||
button:-moz-focusring, |
||||
[type="button"]:-moz-focusring, |
||||
[type="reset"]:-moz-focusring, |
||||
[type="submit"]:-moz-focusring { |
||||
outline: 1px dotted ButtonText; |
||||
} |
||||
|
||||
/** |
||||
* Correct the padding in Firefox. |
||||