diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css index 307f3dc..3d6efa1 100644 --- a/lostplaces/lostplaces_app/static/main.css +++ b/lostplaces/lostplaces_app/static/main.css @@ -15,6 +15,35 @@ body { height: 100%; margin: 0; } +.LP-Main { + display: table; + flex-direction: row-reverse; + height: calc(100% - 61px); } + .LP-Main .LP-Main__Content { + display: table-cell; + width: calc(100% -300px); + min-height: 1px; + padding: 25px; } + .LP-Main .LP-Main__Sidebar { + display: table-cell; + width: 250px; + flex-grow: 0; + height: 100%; } + +.LP-Section { + clear: both; + padding: 25px 0px; + padding-left: 25px; } + .LP-Section .LP-Headline { + margin-left: -25px; } + +@media (max-width: 650px) { + .LP-Section { + padding-left: 0; + padding-right: 0; } + .LP-Section .LP-Headline { + margin: 0; } } + .LP-Link { color: #565656; text-decoration: none; @@ -36,7 +65,7 @@ body { padding-top: 0px; margin-top: 0px; padding-bottom: 0px; - margin-bottom: 0px; } + margin-bottom: 25px; } .LP-Headline--main { position: relative; top: 2rem; @@ -47,7 +76,9 @@ body { .LP-Paragraph { color: black; font-family: Crimson, Times, serif; - font-size: 1.2rem; } + font-size: 1.2rem; + padding: 0; + margin: 0; } .LP-Icon { height: 20px; @@ -135,7 +166,9 @@ body { object-fit: cover; width: 100%; height: auto; - vertical-align: top; } + vertical-align: top; + margin: 0; + padding: 0; } .LP-Logo { max-width: 100%; @@ -275,6 +308,8 @@ body { text-align: left; margin-bottom: 10px; padding-left: 25px; } + .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item--additional { + background-color: #ccc; } .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link { line-height: 1em; } .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child { @@ -372,7 +407,7 @@ body { padding: 0; } .LP-LinkList__List .LP-LinkList__Item { border-left: 1px solid #C09F80; - width: 100%; + width: calc(100% - 1px); margin-top: 12px; } .LP-LinkList__List .LP-LinkList__Item .LP-Link { padding: 1em 0 1em 1em; @@ -462,6 +497,36 @@ body { flex: 3 1 100px; padding: 12px 15px; } } +.LP-ImageGrid .LP-ImageGrid__List { + list-style-type: none; + display: grid; + grid-template-columns: repeat(auto-fit, 300px); + align-content: space-around; + justify-content: center; + margin: 0px; + padding: 0px; } + +.LP-ImageGrid .LP-ImageGrid__Item { + margin-top: 10px; } + +.LP-ImageGrid .LP-Link { + overflow: hidden; } + +.LP-ImageGrid .LP-Image { + box-shadow: 0 0 5px #565656; + height: 200px; + width: 290px; + object-fit: cover; } + +@media (max-width: 650px) { + .LP-ImageGrid .LP-ImageGrid__List { + grid-template-columns: 1fr; } + .LP-ImageGrid .LP-ImageGrid__List .LP-Image { + box-shadow: 0 0 5px #565656; + height: auto; + width: 100%; + object-fit: cover; } } + .LP-MainContainer { margin: 0 auto; max-width: 1280px; } @@ -473,63 +538,25 @@ body { .LP-MainContainer { width: 100%; } } -.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image { +.LP-PlaceDetail .LP-PlaceDetail__Image { width: 700px; max-height: 500px; box-shadow: 0 0 10px #565656; object-fit: cover; object-position: 0 0; + margin: 0; + padding: 0; float: right; margin-left: 35px; margin-bottom: 35px; + margin-right: 35px; overflow: hidden; } -.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description { - padding: 0px; - position: relative; - top: -15px; } - .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline { - position: relative; - top: 15px; - margin-bottom: 30px; } - -.LP-PlaceOverview .LP-PlaceOverView__ImageList { - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - margin: 0px; - padding: 0px; } - .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem { - margin-top: 10px; } - .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem .LP-Link { - overflow: hidden; } - .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem .LP-Image { - box-shadow: 0 0 5px #565656; - height: 200px; - width: 290px; - object-fit: cover; } - @media (max-width: 1000px) { - .LP-PlaceOverview .LP-PlaceOverview__Info .LP-TextSection { - margin-top: 30px; } - .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image { + .LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image { float: none; width: 100%; height: auto; margin: 0; - padding: 0; } } - -.LP-Main { - display: table; - flex-direction: row-reverse; - height: calc(100% - 61px); } - .LP-Main .LP-Main__Content { - display: table-cell; - width: calc(100% -300px); - min-height: 1px; - padding: 25px; } - .LP-Main .LP-Main__Sidebar { - display: table-cell; - width: 250px; - flex-grow: 0; - height: 100%; } + padding: 0; + margin-bottom: 25px; } }