From 397e8271dd13a75fa469c37cdca72f01418dbe9d Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Fri, 9 Jun 2023 08:56:24 +0200
Subject: [PATCH] Improve style of image on plant info page

---
 sass/plant.scss      | 33 +++++++++++++++++++++++++++++++++
 templates/plant.html | 10 +++++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/sass/plant.scss b/sass/plant.scss
index 7aaf5e9..ce9ab89 100644
--- a/sass/plant.scss
+++ b/sass/plant.scss
@@ -1,2 +1,35 @@
 @import "_common.scss";
 
+.plant-image {
+  width: 100%;
+  display: flex;
+  margin: auto;
+  border-radius: .5em;
+  color: $highlight-text;
+  box-shadow: 0.5em 0.5em $highlight;
+  position: relative;
+
+  a {
+    color: $highlight-text;
+  }
+
+  .image-source {
+    position: absolute;
+    padding: 0.25em;
+    border-radius: 0.25em;
+    margin: 0.25em;
+    bottom: 0;
+    right: 0;
+    font-size: 0.8em;
+    background-color: transparentize($highlight, 0.75); 
+  }
+
+  img {
+    border-radius: .5em;
+    width: 100%;
+  }
+
+  &:hover .image-source {
+    background-color: $highlight;      
+  }
+}
diff --git a/templates/plant.html b/templates/plant.html
index 8a57f0c..a77eb21 100644
--- a/templates/plant.html
+++ b/templates/plant.html
@@ -17,7 +17,15 @@
 
   {% 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) }}
+    <figure class="plant-image">
+      <img src="{{ image.url }}" alt="{{ data.image.alt }}" title="{{ data.bin_name }}">
+
+      {% if data.image.source != "" %}
+        <a class="image-source" href="{{ data.image.source }}" aria-label="Image Source">
+          Source
+        </a>
+      {% endif %}
+    </figure>
   {% endblock image %}
   <section>
     <a href="#site"><h3 id="site">Site</h3></a>