commit 4f58751ad03fef847339d0a1943ef507e230657f Author: trivernis Date: Thu Jun 8 16:28:40 2023 +0200 Initial site with two plants diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bb7d934 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +public +static/processed_images \ No newline at end of file diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..ef53c1b --- /dev/null +++ b/config.toml @@ -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 diff --git a/content/plants/_index.md b/content/plants/_index.md new file mode 100644 index 0000000..2ea3f8b --- /dev/null +++ b/content/plants/_index.md @@ -0,0 +1,6 @@ ++++ +title = "List of plants" +sort_by = "slug" +template = "plants.html" +page_template = "plant.html" ++++ \ No newline at end of file diff --git a/content/plants/aloe-vera.md b/content/plants/aloe-vera.md new file mode 100644 index 0000000..ba71691 --- /dev/null +++ b/content/plants/aloe-vera.md @@ -0,0 +1,8 @@ ++++ +title = "Aloe Vera" +assets = ["img/plants/aloe-vera"] + +[extra] +data = "aloe-vera" ++++ + diff --git a/content/plants/monstera-deliciosa.md b/content/plants/monstera-deliciosa.md new file mode 100644 index 0000000..49c38da --- /dev/null +++ b/content/plants/monstera-deliciosa.md @@ -0,0 +1,8 @@ ++++ +title = "Monstera deliciosa" +assets = ["img/plants/monstera-deliciosa"] + +[extra] +data = "monstera-deliciosa" ++++ + diff --git a/sass/_common.scss b/sass/_common.scss new file mode 100644 index 0000000..0357fd7 --- /dev/null +++ b/sass/_common.scss @@ -0,0 +1 @@ +@import "colors.scss"; diff --git a/sass/colors.scss b/sass/colors.scss new file mode 100644 index 0000000..0730049 --- /dev/null +++ b/sass/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; diff --git a/sass/plant.scss b/sass/plant.scss new file mode 100644 index 0000000..7aaf5e9 --- /dev/null +++ b/sass/plant.scss @@ -0,0 +1,2 @@ +@import "_common.scss"; + diff --git a/sass/plants.scss b/sass/plants.scss new file mode 100644 index 0000000..1c068dd --- /dev/null +++ b/sass/plants.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; + } + } + +} diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 0000000..0b8f68b --- /dev/null +++ b/sass/style.scss @@ -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%; + } +} + diff --git a/static/img/plants/aloe-vera.jpg b/static/img/plants/aloe-vera.jpg new file mode 100644 index 0000000..520b8b4 Binary files /dev/null and b/static/img/plants/aloe-vera.jpg differ diff --git a/static/img/plants/aloe-vera.jpg_original b/static/img/plants/aloe-vera.jpg_original new file mode 100644 index 0000000..e4d1f86 Binary files /dev/null and b/static/img/plants/aloe-vera.jpg_original differ diff --git a/static/img/plants/monstera-deliciosa.jpg b/static/img/plants/monstera-deliciosa.jpg new file mode 100644 index 0000000..a6b15cf Binary files /dev/null and b/static/img/plants/monstera-deliciosa.jpg differ diff --git a/static/img/plants/monstera-deliciosa.jpg_original b/static/img/plants/monstera-deliciosa.jpg_original new file mode 100644 index 0000000..6c4879c Binary files /dev/null and b/static/img/plants/monstera-deliciosa.jpg_original differ diff --git a/static/plants/aloe-vera/care.md b/static/plants/aloe-vera/care.md new file mode 100644 index 0000000..5dc7d97 --- /dev/null +++ b/static/plants/aloe-vera/care.md @@ -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. diff --git a/static/plants/aloe-vera/metadata.toml b/static/plants/aloe-vera/metadata.toml new file mode 100644 index 0000000..b8410ff --- /dev/null +++ b/static/plants/aloe-vera/metadata.toml @@ -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" diff --git a/static/plants/aloe-vera/site.md b/static/plants/aloe-vera/site.md new file mode 100644 index 0000000..09d1b56 --- /dev/null +++ b/static/plants/aloe-vera/site.md @@ -0,0 +1,2 @@ +Aloe Vera prefers to grow in direct sunlight at temperatures between +12°C and 25°C. It prefers dry climate. \ No newline at end of file diff --git a/static/plants/monstera-deliciosa/care.md b/static/plants/monstera-deliciosa/care.md new file mode 100644 index 0000000..342a335 --- /dev/null +++ b/static/plants/monstera-deliciosa/care.md @@ -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. diff --git a/static/plants/monstera-deliciosa/metadata.toml b/static/plants/monstera-deliciosa/metadata.toml new file mode 100644 index 0000000..d0f431b --- /dev/null +++ b/static/plants/monstera-deliciosa/metadata.toml @@ -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" diff --git a/static/plants/monstera-deliciosa/site.md b/static/plants/monstera-deliciosa/site.md new file mode 100644 index 0000000..4b851ee --- /dev/null +++ b/static/plants/monstera-deliciosa/site.md @@ -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. diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..1d4f14e --- /dev/null +++ b/templates/base.html @@ -0,0 +1,49 @@ + + + + +{% block head %} + + + + Plant Wiki + + {% set feathersrc = load_data(url="https://unpkg.com/feather-icons") %} + + + {% block css %} + + {% endblock css %} + +{% endblock head %} + + + + +
+
+ {% block content %} {% endblock %} +
+
+ + + + + + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..20cae48 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,9 @@ +{% extends "base.html" %} + +{% block content %} +
+

Welcome to the plant wiki.

+

This is where I put the information I need to take care of my houseplants.

+

The list of plants can be found here +

+{% endblock content %} \ No newline at end of file diff --git a/templates/macros.html b/templates/macros.html new file mode 100644 index 0000000..c5665ff --- /dev/null +++ b/templates/macros.html @@ -0,0 +1,21 @@ +{% macro badge(text, plain, class, icon) %} +
+ +
+{% endmacro %} +{% macro figure(url, alt, description="", source="") %} +
+ {{alt}} + + {% if description != "" or source != "" %} +
+ {% if description != "" %} + {{description}} + {% endif %} + {% if source != "" %} + (Source) + {% endif %} +
+ {% endif %} +
+{% endmacro %} diff --git a/templates/plant.html b/templates/plant.html new file mode 100644 index 0000000..eeb2af9 --- /dev/null +++ b/templates/plant.html @@ -0,0 +1,63 @@ +{% extends "base.html" %} +{% import "macros.html" as macros %} + +{% block css %} + {{super()}} + +{% endblock css %} + +{% block content %} +{% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %} +
+ +

+ {{ page.title }} + ({{data.bin_name}}) +

+ + {% 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 %} +
+

Site

 + + {% 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 %} +
+ +
+

Care

 + + {% 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 %} +
+ {{ page.content | safe }} +
+{% endblock content %} \ No newline at end of file diff --git a/templates/plants.html b/templates/plants.html new file mode 100644 index 0000000..ca7bd9c --- /dev/null +++ b/templates/plants.html @@ -0,0 +1,25 @@ +{% extends "base.html" %} + +{% block css %} + {{super()}} + +{% endblock css %} + +{% block content %} +

+ {{ section.title }} +

+
+ + {% for page in section.pages %} +
+ {% 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") %} + + {{ data.image.alt }} +

{{ page.title }}

+ +
+ {% endfor %} +
+{% endblock content %} \ No newline at end of file diff --git a/templates/shortcodes/badge.html b/templates/shortcodes/badge.html new file mode 100644 index 0000000..59941d9 --- /dev/null +++ b/templates/shortcodes/badge.html @@ -0,0 +1,2 @@ +{% import "macros.html" as macros %} +{{ macros::badge(text=text, plain=plain, icon=icon, class=class) }}