em/receptty.org
2
1
Fork 1
Code Pull Requests Actions Releases Activity

Zoom a box-shadow na :hover receptu

Browse Source
This commit is contained in:
Emil Miler 2022-09-06 11:45:23 +02:00
parent ff68573271
commit 4544836871
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
sass/style.scss
View File

@ -138,9 +138,13 @@ main {
overflow:hidden; overflow:hidden;
box-sizing:border-box; box-sizing:border-box;
width:100%; width:100%;
box-shadow: none;
transition: box-shadow .15s ease;
&:hover { &:hover {
color:$anchor-hover-color; box-shadow: 0 0 8px #888;
a { color: inherit }
.image { background-size: 110% }
} }
a { a {
@ -150,6 +154,19 @@ main {
color: $article-color; color: $article-color;
} }
.image {
position: relative;
width: 100%;
background-size: 100%;
background-position: center;
transition: background-size .15s ease;
}
.image:before {
content: "";
float: left;
padding-top: 100%;
}
.title { .title {
margin: 1em .8em .5em .8em; margin: 1em .8em .5em .8em;
text-align: center; text-align: center;

2
templates/macros.html
View File

@ -18,7 +18,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% set image = resize_image(path=image, width=300, height=300, op="fill") %} {% set image = resize_image(path=image, width=300, height=300, op="fill") %}
<img src="{{ image.url }}" alt="{{ recipe.title }}"> <div class="image" style="background-image: url('{{ image.url }}')"></div>
<div class="title">{{ recipe.title }}</div> <div class="title">{{ recipe.title }}</div>
{% if recipe.date %}<span class="date">{{ recipe.date | date(format="%d.%m.%Y") }}</span>{% endif %} {% if recipe.date %}<span class="date">{{ recipe.date | date(format="%d.%m.%Y") }}</span>{% endif %}
</a> </a>