diff --git a/django_lostplaces/lostplaces/static/main.css b/django_lostplaces/lostplaces/static/main.css index 8d6ab35..63c0fcf 100644 --- a/django_lostplaces/lostplaces/static/main.css +++ b/django_lostplaces/lostplaces/static/main.css @@ -611,6 +611,12 @@ body { font-weight: bold; cursor: pointer; white-space: nowrap; } + .LP-Button--fullWidth { + text-align: center; } + .LP-Button.LP-Link { + display: block; } + .LP-Button.LP-Link:hover { + color: #f9f9f9; } .LP-Button:active { background-color: #76323F; color: #f9f9f9; } @@ -717,6 +723,10 @@ body { margin: 0; padding: 0; } +.LP-Figure { + padding: 0; + margin: 0; } + .LP-Logo { max-width: 100%; max-height: 100%; @@ -923,7 +933,8 @@ body { justify-content: space-between; align-items: flex-start; gap: unset; } - .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph { + .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, + .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph { font-size: unset; } .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline { font-size: 28px; } @@ -941,7 +952,12 @@ body { overflow: hidden; order: unset; } .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description .LP-Paragraph { - font-size: unset; } + font-size: unset; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; } .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image { height: 165px; width: 280px; @@ -1692,9 +1708,62 @@ body { top: 7.8125px; } .LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover { visibility: visible; } + .LP-ImageGrid__LightBox { + visibility: hidden; + display: none; + position: fixed; + pointer-events: none; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: rgba(86, 86, 86, 0.9); + padding: 2rem; + padding-bottom: 0; + width: 100vw; + height: 100vh; + z-index: 30; + top: 0; + left: 0; + box-sizing: border-box; } + .LP-ImageGrid__LightBox:target { + visibility: visible; + display: grid; + grid-template-areas: 'picture picture' 'previous next'; + grid-template-rows: 1fr 4rem; + grid-template-columns: 1fr 1fr; + pointer-events: initial; } + .LP-ImageGrid__FullSizeImage { + grid-area: picture; } + .LP-ImageGrid__Previous { + grid-area: previous; + align-self: center; + justify-self: end; } + .LP-ImageGrid__Next { + grid-area: next; + align-self: center; + justify-self: start; } + .LP-ImageGrid__Previous, .LP-ImageGrid__Next { + padding: 25px; + color: #D7CEC7; + text-decoration: none; + font-family: "Montserrat", Helvetica, sans-serif; + font-weight: bold; + font-size: 20px; } + .LP-ImageGrid__Close { + position: fixed; + right: 1rem; + top: 1rem; + left: unset; + visibility: visible; + opacity: 1; } .LP-Map { margin-bottom: 25px; } + .LP-Map--wide { + height: 300px; } + .LP-Map--full { + height: 100%; + width: 100%; } .LP-Map .ol-attribution { font-family: "Montserrat", Helvetica, sans-serif; color: #565656; } diff --git a/django_lostplaces/lostplaces/templates/partials/placeImageGrid.html b/django_lostplaces/lostplaces/templates/partials/placeImageGrid.html index 7623d04..bcd46aa 100644 --- a/django_lostplaces/lostplaces/templates/partials/placeImageGrid.html +++ b/django_lostplaces/lostplaces/templates/partials/placeImageGrid.html @@ -1,4 +1,5 @@ {% load static %} + {% load lostplaces %} {% if headline %}