Add temperature bar

sass/colors.scss

@@ -18,6 +18,10 @@ $text: black;
 $inactive-text: lighten($text, 20%);
 $highlight-inactive-text: darken($highlight-text, 20%);
 
+$blue: #848fab;
+$yellow: #a7ad86;
+$red: #a88b83;
+
 // // pastell green
 // $background: #7FC6B8;
 

sass/plant.scss

@@ -33,3 +33,70 @@
     background-color: $highlight;      
   }
 }
+
+.temp-bar {
+  height: 1em;
+  width: 100%;
+  display: flex;
+  position: relative;
+  margin-bottom: 0.5em;
+
+  .temp {
+    height: 1em;
+    display: flex;
+    position: relative;
+
+    label {
+      font-size: 0.9em;
+      display: flex;
+      margin-top: -0.1em;
+      white-space: nowrap;
+      margin: auto;
+      z-index: 3;
+
+      .icon {
+        padding-right: 0.25em;
+        margin-top: 0.15em;
+        line-height: 1;
+      }
+    }
+  }
+
+  .shadow-pseudo {
+    height: 1em;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-shadow: 0.35em 0.35em $highlight;
+    border-radius: 1em;
+  }
+
+  .lower-temp-death {
+    text-align: right;
+    border-radius: 1em 0 0 1em;
+    background-image: linear-gradient(to right, $red, $yellow);
+
+    label {
+      right: 0;
+    }
+  }
+
+  .lower-temp-live {
+    background-image: linear-gradient(to right, $yellow, $blue);
+  }
+
+  .temp-live {
+    background-color: $blue;
+    text-align: center;
+  }
+
+  .upper-temp-live {
+    background-image: linear-gradient(to right, $blue, $yellow);
+    border-radius: 0 1em 1em 0;
+
+    label: {
+      left: 0;
+    }
+  }
+}

static/plants/aloe-vera/metadata.toml

@@ -11,9 +11,13 @@ going up at multiple angles.
 
 [site]
 light = "full or part sun"
-temp = "12°C - 25°C"
 humidity = "dry"
 
+[temp]
+death = 5
+lower = 12
+upper = 29
+
 [care]
 water_schedule = "16 days"
 fertilize_schedule = "month"

static/plants/aloe-vera/site.md

@@ -1,2 +1,3 @@
 Aloe Vera prefers to grow in direct sunlight at temperatures between
-12°C and 25°C. It prefers dry climate. 
+12°C and 29°C. Temperatures below 5°C might kill the plant. 
+Aloe Vera prefers dry climate. 

static/plants/dracaena-fragrans/care.md

@@ -1,3 +1,4 @@
 Dracaena Fragrans needs to be watered every twelve days when the top 
-layer starts to dry out. To increase humidity, mist it weekly.
+layer starts to dry out. But on't let the soil dry out completely.
+To increase humidity mist the plant weekly.
 It can be fertilized ever month with common fertilizer.

static/plants/dracaena-fragrans/metadata.toml

@@ -12,14 +12,18 @@ leaves on it.
 
 [site]
 light = "shade, some sun"
-temp = "18°C - 25°C"
 humidity = "normal"
 
+[temp]
+death = 10
+lower = 18
+upper = 25
+
 [care]
 water_schedule = "12 days"
 fertilize_schedule = "month"
 mist_schedule = "week"
 
-# [additional_chapters.common_issues]
-# file = "common-issues"
-# title = "Common Issues"
+[additional_chapters.common_issues]
+file = "common-issues"
+title = "Common Issues"

static/plants/dracaena-fragrans/site.md

@@ -1,2 +1,3 @@
 Dracaena Fragrans grows best in a shade with at most some direct sun exposure.
-It can grow in normal humidity.
+It can grow in normal humidity. If Dracaena Fragrans gets too much light, its leaves will be 
+scorced. If it get's too little light newly grown leaves will be smaller.

static/plants/monstera-deliciosa/metadata.toml

@@ -15,6 +15,11 @@ light = "shade, some sun"
 temp = "18°C - 25°C"
 humidity = "high"
 
+[temp]
+death = 10
+lower = 18
+upper = 24
+
 [care]
 water_schedule = "8 days"
 mist_schedule = "week"

static/plants/monstera-deliciosa/site.md

@@ -1,4 +1,5 @@
 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.
+conditions. It is best kept indoors at temperatures between 18°C and 24°C. 
+Temperatures below 10°C might damage the plant.
 Monstera prefers high humidity which can be achieved by misting the plant regularly.
 Every 16 days common plant fertilizer can be applied.

templates/plant.html

@@ -29,10 +29,24 @@
   {% endblock image %}
   <section>
     <a href="#site"><h2 id="site">Site</h2></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.temp %}
+    <div class="temp-bar" title="Tolerates temperatures between {{ data.temp.lower }}°C and {{ data.temp.upper }}°C. Dies below {{ data.temp.death }}°C.">
+      <div class="temp lower-temp-death" 
+        style="width: {{ data.temp.death / (4/10) }}%" aria-hidden="true">
+        <label><i class="ri-skull-fill icon" aria-hidden="true"></i> &lt; {{ data.temp.death }} °C</label>
+      </div>
+      <div class="temp lower-temp-live" aria-hidden="true"
+        style="width: {{ (data.temp.lower - data.temp.death) / (4/10) }}%"></div>
+      <div class="temp temp-live" aria-hidden="true"
+        style="width: {{ (data.temp.upper - data.temp.lower) / (4/10) }}%">
+        <label><i class="ri-plant-fill icon" aria-hidden="true"></i>{{ data.temp.lower }}°C - {{ data.temp.upper }}°C</label>
+      </div>
+      <div class="temp upper-temp-live" aria-hidden="true"
+        style="width: {{ (40- data.temp.upper) / (4/10) }}%"></div>
+      <div class="shadow-pseudo"></div>
+    </div>
+   {% endif %}
 
     {% if data.site.light %}
       {{ macros::badge(icon="sun", class="light-badge", text=data.site.light, plain="Prefers " ~ data.site.light ~ " lighting conditions.") }}