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