Initial site with two plants
commit
4f58751ad0
@ -0,0 +1,2 @@
|
|||||||
|
public
|
||||||
|
static/processed_images
|
@ -0,0 +1,21 @@
|
|||||||
|
# The URL the site will be built for
|
||||||
|
base_url = "https://plants.trivernis.net"
|
||||||
|
|
||||||
|
# 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 = true
|
||||||
|
|
||||||
|
insert_anchor_links = "left"
|
||||||
|
|
||||||
|
[slugify]
|
||||||
|
paths = "safe"
|
||||||
|
|
||||||
|
[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
|
||||||
|
|
||||||
|
[extra]
|
||||||
|
# Put all your custom variables here
|
@ -0,0 +1,6 @@
|
|||||||
|
+++
|
||||||
|
title = "List of plants"
|
||||||
|
sort_by = "slug"
|
||||||
|
template = "plants.html"
|
||||||
|
page_template = "plant.html"
|
||||||
|
+++
|
@ -0,0 +1,8 @@
|
|||||||
|
+++
|
||||||
|
title = "Aloe Vera"
|
||||||
|
assets = ["img/plants/aloe-vera"]
|
||||||
|
|
||||||
|
[extra]
|
||||||
|
data = "aloe-vera"
|
||||||
|
+++
|
||||||
|
|
@ -0,0 +1,8 @@
|
|||||||
|
+++
|
||||||
|
title = "Monstera deliciosa"
|
||||||
|
assets = ["img/plants/monstera-deliciosa"]
|
||||||
|
|
||||||
|
[extra]
|
||||||
|
data = "monstera-deliciosa"
|
||||||
|
+++
|
||||||
|
|
@ -0,0 +1 @@
|
|||||||
|
@import "colors.scss";
|
@ -0,0 +1,27 @@
|
|||||||
|
//// original green
|
||||||
|
// $background: #86A466;
|
||||||
|
//
|
||||||
|
// $highlight: #e97c5e;
|
||||||
|
// $secondary: #e97793;
|
||||||
|
//
|
||||||
|
// $highlight-text: black;
|
||||||
|
// $text: black;
|
||||||
|
|
||||||
|
// mono green black
|
||||||
|
$background: #82AE9F;
|
||||||
|
|
||||||
|
$highlight: #13140F;
|
||||||
|
// $secondary: #777395;
|
||||||
|
$secondary: white;
|
||||||
|
|
||||||
|
$highlight-text: white;
|
||||||
|
$text: black;
|
||||||
|
|
||||||
|
// // pastell green
|
||||||
|
// $background: #7FC6B8;
|
||||||
|
|
||||||
|
// $highlight: #40B3A2;
|
||||||
|
// $secondary: #E27D5F;
|
||||||
|
|
||||||
|
// $highlight-text: black;
|
||||||
|
// $text: black;
|
@ -0,0 +1,2 @@
|
|||||||
|
@import "_common.scss";
|
||||||
|
|
@ -0,0 +1,61 @@
|
|||||||
|
@import "_common.scss";
|
||||||
|
|
||||||
|
.plants-list {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.plant-item {
|
||||||
|
display: flex;
|
||||||
|
float: left;
|
||||||
|
margin: 1em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
box-shadow: 0.5em 0.5em $highlight;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
height: 128px;
|
||||||
|
width: 256px;
|
||||||
|
|
||||||
|
a.plant-link {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 0.25em;
|
||||||
|
height: 128px;
|
||||||
|
width: 256px;
|
||||||
|
}
|
||||||
|
h2.plant-title {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0.25em 0.25em 0 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
margin: 0.75em 1.25em 0.75em 0.75em;
|
||||||
|
box-shadow: 0.75em 0.75em $highlight;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
margin: 1em;
|
||||||
|
box-shadow: 0.5em 0.5em $highlight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.plants-list {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.plant-item {
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
margin: 1em auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,144 @@
|
|||||||
|
@import "https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css";
|
||||||
|
@import "_common.scss";
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Noto Sans", "Verdana", sans-serif;
|
||||||
|
background-color: $background;
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
image-orientation: from-image;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
text-decoration-color: $secondary;
|
||||||
|
text-decoration-thickness: .125em;
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left:0;
|
||||||
|
margin: 0.5em;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: $highlight;
|
||||||
|
color: grey;
|
||||||
|
width: calc(100% - 2em);
|
||||||
|
|
||||||
|
.footer-item {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: grey;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
padding: 0.25em;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
background-color: $highlight;
|
||||||
|
color: $highlight-text;
|
||||||
|
|
||||||
|
.icon, span {
|
||||||
|
float: left;
|
||||||
|
padding-right: 0.25em;
|
||||||
|
margin: auto;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: .5em;
|
||||||
|
background-color: $highlight;
|
||||||
|
color: $highlight-text;
|
||||||
|
padding-bottom: 0.125em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $highlight-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
margin: 0 0.25em 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: .5em;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 50%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.navbar {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
background-color: $highlight;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
color: $highlight-text;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 1em 2em;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $highlight-text;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($highlight, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.selected a {
|
||||||
|
background-color: lighten($highlight, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: auto;
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.card, .content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) and (max-width: 1000px){
|
||||||
|
.card {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 431 KiB |
Binary file not shown.
After Width: | Height: | Size: 451 KiB |
Binary file not shown.
After Width: | Height: | Size: 563 KiB |
Binary file not shown.
After Width: | Height: | Size: 565 KiB |
@ -0,0 +1,2 @@
|
|||||||
|
Aloe Vera needs to be watered about ever 16 days. Make sure the soil is almost completely dry
|
||||||
|
before watering it as it can be overwatered easily.
|
@ -0,0 +1,19 @@
|
|||||||
|
bin_name = "Aloe Vera"
|
||||||
|
|
||||||
|
[image]
|
||||||
|
url = "/img/plants/aloe-vera.jpg"
|
||||||
|
source = "https://commons.wikimedia.org/wiki/File:Aloe_Vera_(4700054020).jpg"
|
||||||
|
alt = """
|
||||||
|
Aloe Vera. \
|
||||||
|
Tentacle-like succulent leaves sprout out from the base of the plant \
|
||||||
|
going up at multiple angles.
|
||||||
|
"""
|
||||||
|
|
||||||
|
[site]
|
||||||
|
light = "full or part sun"
|
||||||
|
temp = "12°C - 25°C"
|
||||||
|
humidity = "dry"
|
||||||
|
|
||||||
|
[care]
|
||||||
|
water_schedule = "16 days"
|
||||||
|
fertilize_schedule = "month"
|
@ -0,0 +1,2 @@
|
|||||||
|
Aloe Vera prefers to grow in direct sunlight at temperatures between
|
||||||
|
12°C and 25°C. It prefers dry climate.
|
@ -0,0 +1,5 @@
|
|||||||
|
On average Monstera needs to be watered every 8 days.
|
||||||
|
Ideally when the top layer of the dirt has dried out.
|
||||||
|
Monstera is used to growing in high humidity climate. Misting every week will increase
|
||||||
|
the health of the plant as it rasises the humditity.
|
||||||
|
Make sure to remove dead leaves and branches about every 3 months.
|
@ -0,0 +1,22 @@
|
|||||||
|
bin_name = "Monstera deliciosa"
|
||||||
|
|
||||||
|
[image]
|
||||||
|
url = "/img/plants/monstera-deliciosa.jpg"
|
||||||
|
source = "https://commons.wikimedia.org/wiki/File:New_Monstera_Deliciosa_Leaf.jpg"
|
||||||
|
alt = """
|
||||||
|
Monstera deliciosa. \
|
||||||
|
A big leaf with gaps is shown in the middle \
|
||||||
|
with other leaves in the back. The leaf is heart-shaped. \
|
||||||
|
The plant is potted in a pot with a moss stick.\
|
||||||
|
"""
|
||||||
|
|
||||||
|
[site]
|
||||||
|
light = "shade, some sun"
|
||||||
|
temp = "18°C - 25°C"
|
||||||
|
humidity = "humid"
|
||||||
|
|
||||||
|
[care]
|
||||||
|
water_schedule = "8 days"
|
||||||
|
mist_schedule = "week"
|
||||||
|
fertilize_schedule = "16 days"
|
||||||
|
clean_schedule = "3 months"
|
@ -0,0 +1,3 @@
|
|||||||
|
Monstera is best positioned in an area with changing shade and sunny
|
||||||
|
conditions. It is best kept indoors at temperatures between 18°C and 25°C.
|
||||||
|
Monstera prefers humid climate which can be achieved by misting the plant regularly.
|
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
{% block head %}
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||||
|
|
||||||
|
<title>Plant Wiki</title>
|
||||||
|
|
||||||
|
{% set feathersrc = load_data(url="https://unpkg.com/feather-icons") %}
|
||||||
|
<script>{{ feathersrc | safe }}</script>
|
||||||
|
|
||||||
|
{% block css %}
|
||||||
|
<link href="{{ get_url(path="style.css", trailing_slashes=false) | safe }}" rel="stylesheet">
|
||||||
|
{% endblock css %}
|
||||||
|
|
||||||
|
{% endblock head %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ul class="navbar">
|
||||||
|
<li {% if current_path == "/" %} class="selected" {% endif %}>
|
||||||
|
<a href="{{ get_url(path="/")}}">Home</a>
|
||||||
|
</li>
|
||||||
|
<li {% if current_path == "/plants/" %} class="selected" {% endif %}>
|
||||||
|
<a href="{{ get_url(path="@/plants/_index.md")}}">Plants</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<section class="main">
|
||||||
|
<div class="container">
|
||||||
|
{% block content %} {% endblock %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-item float-left">
|
||||||
|
<a href="https://trivernis.net">My Website</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-item float-right">
|
||||||
|
<a href="https://git.trivernis.net/trivernis/plantwiki">Source</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
feather.replace();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,9 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<section class="content">
|
||||||
|
<h1 class="title">Welcome to the plant wiki.</h1>
|
||||||
|
<p>This is where I put the information I need to take care of my houseplants.</p>
|
||||||
|
<p>The list of plants can be found <b><a href="{{ get_url(path="@/plants/_index.md") }}">here</a></b>
|
||||||
|
</section class="content">
|
||||||
|
{% endblock content %}
|
@ -0,0 +1,21 @@
|
|||||||
|
{% macro badge(text, plain, class, icon) %}
|
||||||
|
<div class="badge {{class}}" aria-label="{{ plain }}" title="{{ plain }}">
|
||||||
|
<i class="ri-{{ icon }}-fill icon" aria-hidden="true"></i><span aria-hidden="true"> {{ text }}</span>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro figure(url, alt, description="", source="") %}
|
||||||
|
<figure class="figure">
|
||||||
|
<img class="figure-img" src="{{url}}" alt="{{alt}}" title="{{alt}}">
|
||||||
|
|
||||||
|
{% if description != "" or source != "" %}
|
||||||
|
<figcaption class="figure-description">
|
||||||
|
{% if description != "" %}
|
||||||
|
{{description}}
|
||||||
|
{% endif %}
|
||||||
|
{% if source != "" %}
|
||||||
|
<i>(<a class="figure-source" href="{{source}}">Source</a>)</i>
|
||||||
|
{% endif %}
|
||||||
|
</figcaption>
|
||||||
|
{% endif %}
|
||||||
|
</figure>
|
||||||
|
{% endmacro %}
|
@ -0,0 +1,63 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
{% import "macros.html" as macros %}
|
||||||
|
|
||||||
|
{% block css %}
|
||||||
|
{{super()}}
|
||||||
|
<link href="{{ get_url(path="plant.css", trailing_slashes=false) | safe }}" rel="stylesheet">
|
||||||
|
{% endblock css %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
{% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<h1 class="title">
|
||||||
|
{{ page.title }}
|
||||||
|
(<i>{{data.bin_name}}</i>)
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{% block image %}
|
||||||
|
{% set image = resize_image(path=data.image.url, width=1024, height=512) %}
|
||||||
|
{{ macros::figure(url=image.url, alt=data.image.alt, source=data.image.source) }}
|
||||||
|
{% endblock image %}
|
||||||
|
<section>
|
||||||
|
<a href="#site"><h3>Site</h3></a>
|
||||||
|
|
||||||
|
{% if data.site.temp %}
|
||||||
|
{{ macros::badge(icon="thermometer", class="temp-badge", text=data.site.temp, plain="Prefers " ~ data.site.temp ~ " temperatures.") }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if data.site.light %}
|
||||||
|
{{ macros::badge(icon="sun", class="light-badge", text=data.site.light, plain="Prefers " ~ data.site.light ~ " lighting conditions.") }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if data.site.humidity%}
|
||||||
|
{{ macros::badge(icon="drop", class="humid-badge", text=data.site.humidity, plain="Prefers " ~ data.site.humidity~ " humidity.") }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% block site %}
|
||||||
|
{{ load_data(path="/static/plants/" ~ page.extra.data ~ "/site.md") | markdown | safe }}
|
||||||
|
{% endblock site %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<a href="care"><h3>Care</h3></a>
|
||||||
|
|
||||||
|
{% if data.care.water_schedule %}
|
||||||
|
{{ macros::badge(icon="drizzle", class="water-badge", text="every " ~ data.care.water_schedule, plain="Water every " ~ data.care.water_schedule ~ ".") }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if data.care.mist_schedule %}
|
||||||
|
{{ macros::badge(icon="mist", class="mist-badge", text="every " ~ data.care.mist_schedule, plain="Mist every " ~ data.care.mist_schedule ~ ".") }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if data.care.clean_schedule %}
|
||||||
|
{{ macros::badge(icon="brush-2", class="clean-badge", text="every " ~ data.care.clean_schedule, plain="Clean every " ~ data.care.clean_schedule ~ ".") }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% block care %}
|
||||||
|
{{ load_data(path="/static/plants/" ~ page.extra.data ~ "/care.md") | markdown | safe }}
|
||||||
|
{% endblock care %}
|
||||||
|
</section>
|
||||||
|
{{ page.content | safe }}
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
@ -0,0 +1,25 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block css %}
|
||||||
|
{{super()}}
|
||||||
|
<link href="{{ get_url(path="plants.css", trailing_slashes=false) | safe }}" rel="stylesheet">
|
||||||
|
{% endblock css %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1 class="title">
|
||||||
|
{{ section.title }}
|
||||||
|
</h1>
|
||||||
|
<div class="plants-list">
|
||||||
|
<!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->
|
||||||
|
{% for page in section.pages %}
|
||||||
|
<div class="plant-item">
|
||||||
|
{% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
|
||||||
|
{% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
|
||||||
|
<a class="plant-link" href="{{ page.permalink | safe }}">
|
||||||
|
<img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
|
||||||
|
<h2 class="plant-title">{{ page.title }}</h2>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
@ -0,0 +1,2 @@
|
|||||||
|
{% import "macros.html" as macros %}
|
||||||
|
{{ macros::badge(text=text, plain=plain, icon=icon, class=class) }}
|
Loading…
Reference in New Issue