relikd/lektor-recipes
1
0
Fork 0
Code Issues Pull Requests Releases Activity

fix: padding for image carousel

Browse Source
This commit is contained in:
relikd
2023-02-28 20:46:47 +01:00
parent 9f9e885a16
commit 08d9ebd27c
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/static/style.css
View File

@@ -142,7 +142,9 @@ a:hover .recipe-tile .hover { display: block; background: #0006 }
* Individual recipe * Individual recipe
*/ */
.recipe h2 { font-size: 0.8em; margin: 0 0 1em 0 } .recipe h2 { font-size: 0.8em; margin: 0 0 1em 0 }
.recipe #img-carousel { padding: 0 50px; margin: 0 -30px } .recipe #img-carousel { margin: 0 -30px }
.recipe #img-carousel img:first-child { padding-left: 50px }
.recipe #img-carousel img:last-child { padding-right: 50px }
.recipe #img-carousel:empty { display: none; } .recipe #img-carousel:empty { display: none; }
.recipe #source { margin-left: -1em; margin-bottom: -1.5em } .recipe #source { margin-left: -1em; margin-bottom: -1.5em }
.recipe #metrics { float: right; margin: 0 0 15px 25px; max-width: 180px } .recipe #metrics { float: right; margin: 0 0 15px 25px; max-width: 180px }
@@ -179,7 +181,9 @@ a:hover .recipe-tile .hover { display: block; background: #0006 }
.recipe #ingredients { float: unset; max-width: 100% } .recipe #ingredients { float: unset; max-width: 100% }
} }
@media screen and (max-width: 32em) { @media screen and (max-width: 32em) {
.recipe #img-carousel { padding: 0 10px; height: calc(75vw - 2*10px) } .recipe #img-carousel { height: calc(75vw - 2*10px) }
.recipe #img-carousel img:first-child { padding-left: 10px }
.recipe #img-carousel img:last-child { padding-right: 10px }
} }
@media print { @media print {