Improve style of image on plant info page

main
trivernis 1 year ago
parent a968844b7b
commit 397e8271dd
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45

@ -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;
}
}

@ -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>

Loading…
Cancel
Save