Junon
1 year ago
29 changed files with 1509 additions and 0 deletions
@ -0,0 +1,28 @@
@@ -0,0 +1,28 @@
|
||||
backend: |
||||
name: gitlab |
||||
repo: june/netlify-test # Path to your GitLab repository |
||||
auth_type: implicit # Required for implicit grant |
||||
app_id: 96748343d3dd5b9f9cf52f3869fdc248150fae1a7096424632058bca9968cb87 # Application ID from your GitLab settings |
||||
api_root: https://framagit.org/api/v4 |
||||
base_url: https://framagit.org |
||||
auth_endpoint: oauth/authorize |
||||
|
||||
locale: 'fr' |
||||
|
||||
# This line should *not* be indented |
||||
publish_mode: editorial_workflow |
||||
|
||||
# These lines should *not* be indented |
||||
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads |
||||
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads |
||||
|
||||
collections: |
||||
- name: "page" # Used in routes, e.g., /admin/collections/pages |
||||
label: "Page" # Used in the UI |
||||
folder: "content" # The path to the folder where the documents are stored |
||||
create: true #Allow users to create new documents in this collection |
||||
slug: "{{slug}}" # Filename template, e.g., title.md |
||||
fields: # The fields for each document, usually in front matter |
||||
- {label: "Titre", name: "title", widget: "string"} |
||||
- {label: "Ordre", name: "weight", widget: "number", default :1, value_type: "int"} |
||||
- {label: "Texte", name: "body", widget: "markdown"} |
||||
@ -0,0 +1,19 @@
@@ -0,0 +1,19 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Content Manager</title> |
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> |
||||
</head> |
||||
<body> |
||||
<!-- Include the script that builds the page and powers Netlify CMS --> |
||||
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> |
||||
<script> |
||||
import CMS from 'netlify-cms-app'; |
||||
import { fr } from 'netlify-cms-locales'; |
||||
|
||||
CMS.registerLocale('fr', fr); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -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,111 @@
@@ -0,0 +1,111 @@
|
||||
# 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 |
||||
{% 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> |
||||
``` |
||||
|
||||
# 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"} |
||||
] |
||||
``` |
||||
|
||||
# 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,23 @@
@@ -0,0 +1,23 @@
|
||||
# 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 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" |
||||
|
||||
# Whether to build a search index to be used later on by a JavaScript library |
||||
build_search_index = false |
||||
|
||||
|
||||
[extra] |
||||
juice_logo_name = "Juice" |
||||
juice_logo_path = "juice.svg" |
||||
juice_extra_menu = [ |
||||
{ title = "Github", link = "https://github.com/huhu/juice" } |
||||
] |
||||
@ -0,0 +1,114 @@
@@ -0,0 +1,114 @@
|
||||
+++ |
||||
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 `index.html`. |
||||
|
||||
```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> |
||||
``` |
||||
|
||||
# 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"} |
||||
] |
||||
``` |
||||
|
||||
# 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,62 @@
@@ -0,0 +1,62 @@
|
||||
+++ |
||||
title = "Changelog" |
||||
description = "Changelog" |
||||
weight = 2 |
||||
+++ |
||||
|
||||
# v0.7 - 2020-07-01 |
||||
|
||||
- Introduction 1 |
||||
- New Features: |
||||
- feature 1 |
||||
- Bugfix: |
||||
- Fix bug #10 |
||||
- Fix bug #11 |
||||
|
||||
# v0.6 - 2020-06-01 |
||||
|
||||
- Introduction 1 |
||||
- New Features: |
||||
- feature 1 |
||||
- Bugfix: |
||||
- Fix bug #8 |
||||
- Fix bug #9 |
||||
|
||||
# v0.5 - 2020-05-01 |
||||
|
||||
- Introduction 1 |
||||
- New Features: |
||||
- feature 1 |
||||
- Bugfix: |
||||
- Fix bug #6 |
||||
- Fix bug #7 |
||||
|
||||
# v0.4 - 2020-04-01 |
||||
|
||||
- Introduction 1 |
||||
- New Features: |
||||
- feature 1 |
||||
- Bugfix: |
||||
- Fix bug #4 |
||||
- Fix bug #5 |
||||
|
||||
# v0.3 - 2020-03-01 |
||||
|
||||
- Introduction 1 |
||||
- New Features: |
||||
- feature 1 |
||||
- Bugfix: |
||||
- Fix bug #2 |
||||
- Fix bug #3 |
||||
|
||||
# v0.2 - 2020-02-04 |
||||
|
||||
- Introduction 1 |
||||
- New Features: |
||||
- feature 1 |
||||
- Bugfix: |
||||
- Fix bug #1 |
||||
|
||||
# v0.1 - 2020-01-01 |
||||
|
||||
- First release! |
||||
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 601 KiB |
@ -0,0 +1,44 @@
@@ -0,0 +1,44 @@
|
||||
+++ |
||||
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 your screenshots to [content](https://github.com/huhu/juice/tree/master/static/showcases) directory, then link the screenshot in the markdown file. |
||||
- Add a link to your product site. |
||||
|
||||
# Gallery |
||||
|
||||
Here are some product websites which use **Juice** as the theme. |
||||
Sort by lexicographical order. |
||||
|
||||
## C/C++ Search Extension |
||||
|
||||
 |
||||
|
||||
Link: [https://cpp.extension.sh/](https://cpp.extension.sh/) |
||||
|
||||
## Go Search Extension |
||||
|
||||
 |
||||
|
||||
Link: [https://go.extension.sh/](https://go.extension.sh/) |
||||
|
||||
## JS Search Extension |
||||
|
||||
 |
||||
|
||||
Link: [https://js.extension.sh/](https://js.extension.sh/) |
||||
|
||||
## Rust Search Extension |
||||
|
||||
 |
||||
|
||||
Link: [https://rust.extension.sh/](https://rust.extension.sh/) |
||||
@ -0,0 +1,42 @@
@@ -0,0 +1,42 @@
|
||||
.content { |
||||
padding: 0 40px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
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: #2b303b; |
||||
color: var(--code-text-color); |
||||
font-size: .875em; |
||||
font-weight: normal; |
||||
padding: 0.25em 0.5em 0.25em; |
||||
font-family: monospace; |
||||
} |
||||
|
||||
.content a { |
||||
color: var(--primary-link-color); |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
.content blockquote { |
||||
border-left: #e2dede 8px solid; |
||||
margin: 0; |
||||
background-color: var(--blockquote-color); |
||||
padding: 0 20px; |
||||
} |
||||
@ -0,0 +1,41 @@
@@ -0,0 +1,41 @@
|
||||
.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: 2rem; |
||||
font-weight: 500; |
||||
color: var(--primary-text-color); |
||||
border-left: var(--primary-color) 8px solid; |
||||
padding-left: 0.3em; |
||||
} |
||||
|
||||
h2, .subtitle-text { |
||||
font-family: b612, sans-serif; |
||||
font-size: 1.7rem; |
||||
font-weight: 500; |
||||
color: var(--primary-text-color); |
||||
} |
||||
|
||||
.text { |
||||
font-family: b612, sans-serif; |
||||
font-size: 1.2rem; |
||||
font-weight: 400; |
||||
line-height: 1.7rem; |
||||
letter-spacing: 0.216rem; |
||||
word-spacing: 0.432rem; |
||||
color: var(--primary-text-color); |
||||
} |
||||
|
||||
.subtext { |
||||
font-family: b612, sans-serif; |
||||
font-size: 1em; |
||||
font-weight: 400; |
||||
//letter-spacing: 0.14em; |
||||
//word-spacing: 0.28em; |
||||
} |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
.text-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
.pos-absolute { |
||||
right: 0; |
||||
left: 0; |
||||
position: absolute; |
||||
} |
||||
@ -0,0 +1,197 @@
@@ -0,0 +1,197 @@
|
||||
@import "_ultility.scss"; |
||||
@import "_text.scss"; |
||||
@import "_markdown.scss"; |
||||
|
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
background-color: var(--secondary-color); |
||||
} |
||||
|
||||
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, sans-serif; |
||||
font-size: 2rem; |
||||
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: 1.2rem; |
||||
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; |
||||
left: 45%; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.content a { |
||||
background-color: var(--outer-space); |
||||
} |
||||
|
||||
.content a:hover { |
||||
background-color: var(--chyornyi-black); |
||||
} |
||||
|
||||
main { |
||||
display: flex; |
||||
padding: 50px 100px; |
||||
|
||||
.toc { |
||||
max-width: 260px; |
||||
min-width: 240px; |
||||
} |
||||
|
||||
.toc-item { |
||||
padding: 10px 20px; |
||||
color: #424242; |
||||
} |
||||
|
||||
.toc-item a, .toc-item-child a { |
||||
color: var(--toc-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: var(--toc-background-color); |
||||
position: sticky; |
||||
position: -webkit-sticky; |
||||
position: -moz-sticky; |
||||
position: -ms-sticky; |
||||
position: -o-sticky; |
||||
top: 10px; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
footer { |
||||
padding: 50px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #202020; |
||||
color: #fcfcfc; |
||||
|
||||
a { |
||||
color: var(--christmas-silver); |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
@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 |
Binary file not shown.
@ -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; |
||||
} |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
{% macro render_header() %} |
||||
{% set section = get_section(path="_index.md") %} |
||||
<a href="{{ section.permalink }}"> |
||||
<div class="logo"> |
||||
<img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo"> |
||||
{{ config.extra.juice_logo_name }} |
||||
</div> |
||||
</a> |
||||
|
||||
<nav> |
||||
{% for page in section.pages %} |
||||
<a class="nav-item subtitle-text" href="{{ page.permalink }}">{{ page.title }}</a> |
||||
{% endfor %} |
||||
{% if config.extra.juice_extra_menu %} |
||||
{% for menu in config.extra.juice_extra_menu %} |
||||
<a class="nav-item subtitle-text" href="{{ menu.link }}">{{ menu.title }}</a> |
||||
{% endfor %} |
||||
{% endif %} |
||||
</nav> |
||||
{% endmacro render_header %} |
||||
@ -0,0 +1,39 @@
@@ -0,0 +1,39 @@
|
||||
<style> |
||||
:root { |
||||
/* Primary theme color */ |
||||
--primary-color: var(--chyornyi-black); |
||||
/* Primary theme text color */ |
||||
--primary-text-color: var(--christmas-silver); |
||||
/* Primary theme link color */ |
||||
--primary-link-color: var(---chyornyi-black); |
||||
/* Secondary color: the background body color */ |
||||
--secondary-color: var(--sitter-red); |
||||
--secondary-text-color: var(--night-rider); |
||||
/* The background color of the table of content */ |
||||
--toc-background-color: var(--sweet-grape); |
||||
/* Table of content text color */ |
||||
--toc-text-color: var(--christmas-silver); |
||||
/* Highlight text color of table of content */ |
||||
--toc-highlight-text-color: #FFFFFF; |
||||
/* Blockquote background color */ |
||||
--blockquote-color: var(--sweet-grape); |
||||
/* Code text color */ |
||||
--code-text-color: var(--christmas-silver); |
||||
|
||||
/* Color used in the theme */ |
||||
--sitter-red: #3a2333; |
||||
--chyornyi-black: #0c040b; |
||||
--christmas-silver: #e2e0e1; |
||||
--sweet-grape: #4a3a4e; |
||||
--dr-white: #faf9fa; |
||||
--night-rider: #303030; |
||||
--outer-space: #474747; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'b612'; |
||||
src: url('/fonts/b612-regular.ttf') format('truetype'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,154 @@
@@ -0,0 +1,154 @@
|
||||
{% import "_macros.html" as macros %} |
||||
<!DOCTYPE html> |
||||
<html lang="fr"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>{% block title %}{{ config.title }}{% endblock title %}</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||
{% include "_variables.html" %} |
||||
<link rel="stylesheet" href="/normalize.css"> |
||||
<link rel="stylesheet" href="{{ get_url(path="juice.css") }}"> |
||||
{% block head %} |
||||
{% endblock head %} |
||||
<!-- NETLIFY HEAD--> |
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
{% block header %} |
||||
|
||||
<header class="pos-absolute" style="background-color: transparent"> |
||||
{{ macros::render_header() }} |
||||
</header> |
||||
|
||||
<div class="hero"> |
||||
{% block hero %} |
||||
<section class="text-center"> |
||||
<h1 class="heading-text" style="font-size: 3rem"> |
||||
Build your static website |
||||
</h1> |
||||
<h3 class="title-text"> |
||||
<b>Juice</b> is an intuitive, elegant, and lightweight Zola theme for product websites. |
||||
</h3> |
||||
</section> |
||||
<img class="hero-image" style="width: 50%" src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="Describing my logo"> |
||||
|
||||
<nav role="banner"> |
||||
<div class="explore-more text" tabindex=0 |
||||
onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})" |
||||
onkeydown="document.getElementById('features').scrollIntoView({behavior: 'smooth'})"> |
||||
Explore More ⇩ |
||||
</div> |
||||
</nav> |
||||
<style> |
||||
.hero section { |
||||
padding: 0 5rem; |
||||
} |
||||
@media screen and (max-width: 768px) { |
||||
.hero section { |
||||
padding: 0 2rem; |
||||
} |
||||
|
||||
.hero-image { |
||||
display: none |
||||
} |
||||
} |
||||
</style> |
||||
{% endblock hero %} |
||||
</div> |
||||
|
||||
{% endblock header %} |
||||
|
||||
<main> |
||||
{% block toc %} |
||||
{% if section.toc %} |
||||
{% set toc = section.toc %} |
||||
{% elif page.toc %} |
||||
{% set toc = page.toc %} |
||||
{% endif %} |
||||
{% if toc %} |
||||
<div class="toc"> |
||||
<div class="toc-sticky"> |
||||
{% for h in toc %} |
||||
<div class="toc-item"> |
||||
<a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a> |
||||
</div> |
||||
{% if h.children %} |
||||
{% for h2 in h.children %} |
||||
<div class="toc-item-child"> |
||||
<a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a> |
||||
</div> |
||||
{% endfor %} |
||||
{% endif %} |
||||
{% endfor %} |
||||
</div> |
||||
</div> |
||||
{% endif %} |
||||
{% endblock toc %} |
||||
|
||||
<div class="content text"> |
||||
{% block content %} |
||||
<div id="features" class="heading-text">Overview</div> |
||||
{{ section.content | safe }} |
||||
{% endblock content %} |
||||
</div> |
||||
|
||||
</main> |
||||
|
||||
{% block footer %} |
||||
<footer> |
||||
<small class="subtext"> |
||||
<a href="https://huhu.io">Huhu.io</a> © 2020 |
||||
</small> |
||||
</footer> |
||||
{% endblock footer %} |
||||
</body> |
||||
<script> |
||||
function highlightNav(heading) { |
||||
let pathname = location.pathname; |
||||
document.querySelectorAll(".toc a").forEach((item) => { |
||||
item.classList.remove("active"); |
||||
}); |
||||
document.querySelector(".toc a[href$='" + pathname + "#" + heading + "']").classList.add("active"); |
||||
} |
||||
|
||||
let currentHeading = ""; |
||||
window.onscroll = function () { |
||||
let h = document.querySelectorAll("h1,h2,h3,h4,h5,h6"); |
||||
let elementArr = []; |
||||
|
||||
h.forEach(item => { |
||||
if (item.id !== "") { |
||||
elementArr[item.id] = item.getBoundingClientRect().top; |
||||
} |
||||
}); |
||||
elementArr.sort(); |
||||
for (let key in elementArr) { |
||||
if (!elementArr.hasOwnProperty(key)) { |
||||
continue; |
||||
} |
||||
if (elementArr[key] > 0 && elementArr[key] < 300) { |
||||
if (currentHeading !== key) { |
||||
highlightNav(key); |
||||
currentHeading = key; |
||||
} |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<!-- NETLIFY BODY--> |
||||
<script> |
||||
if (window.netlifyIdentity) { |
||||
window.netlifyIdentity.on("init", user => { |
||||
if (!user) { |
||||
window.netlifyIdentity.on("login", () => { |
||||
document.location.href = "/admin/"; |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
</html> |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
{% import "_macros.html" as macros %} |
||||
{% extends "index.html" %} |
||||
|
||||
{% block title %}{{ page.title }} | {{ super() }} {% endblock title %} |
||||
|
||||
{% block header %} |
||||
<header> |
||||
{{ macros::render_header() }} |
||||
</header> |
||||
{% endblock header %} |
||||
|
||||
{% block content %} |
||||
<div class="heading-text">{{ page.description }}</div> |
||||
{{ page.content | safe }} |
||||
{% endblock content %} |
||||
@ -0,0 +1,12 @@
@@ -0,0 +1,12 @@
|
||||
name = "juice" |
||||
description = "An intuitive, elegant, and lightweight Zola theme for product sites." |
||||
license = "MIT" |
||||
homepage = "https://github.com/huhu/juice" |
||||
min_version = "0.11.0" |
||||
demo = "https://juice.huhu.io" |
||||
|
||||
[extra] |
||||
|
||||
[author] |
||||
name = "Huhu teams" |
||||
homepage = "https://huhu.io" |
||||