From d229fe0fc869fb31ddc8dcadac98350dfa12a8ba Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 2 Aug 2020 15:57:19 +0200 Subject: [PATCH] New CSS --- lostplaces/lostplaces_app/static/main.css | 193 ++++++++++++++++++---- 1 file changed, 158 insertions(+), 35 deletions(-) diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css index 1aa8794..b3a3cac 100644 --- a/lostplaces/lostplaces_app/static/main.css +++ b/lostplaces/lostplaces_app/static/main.css @@ -1,3 +1,11 @@ +@font-face { + font-family: Crimson; + src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } + +@font-face { + font-family: Montserrat; + src: url("fonts/Montserrat/Montserrat-Regular.otf"), url("fonts/Montserrat/Montserrat-Bold.otf"), url("fonts/Montserrat/Montserrat-Italic.otf"); } + .LP-Link { color: #565656; text-decoration: none; @@ -13,7 +21,7 @@ display: inline; } .LP-Headline { - font-family: "Trebuchet MS", Helvetica, sans-serif; + font-family: Montserrat, Helvetica, sans-serif; color: #565656; font-size: 1.7rem; padding-top: 0px; @@ -27,9 +35,9 @@ .LP-Headline--inline { display: inline; } -.LP-Text { +.LP-Paragraph { color: black; - font-family: "Times New Roman", Times, serif; + font-family: Crimson, Times, serif; font-size: 1.2rem; } .LP-Icon { @@ -45,6 +53,78 @@ .LP-Icon__List .LP-Icon__Item { padding: 0 3px; } +.LP-Button { + background-color: #C09F80; + color: #565656; + border: none; + padding: 8px 14px; + border-radius: 2px; + font-weight: bold; } + .LP-Button:active { + background-color: #76323F; + color: #C09F80; } + +.LP-Form .LP-Form__Checkbox { + display: none; } + +.LP-Form .LP-Form__CheckBox__CheckMark { + height: 1em; + width: 1em; + border: 1px solid black; + padding: 0 calc(.5em + 2px); + margin-right: .7em; } + +.LP-Input { + display: flex; + flex-direction: column; + margin-bottom: -30px; + padding: 10px 0; } + .LP-Input .LP-Input__Field { + border: none; + border-bottom: 1px solid #565656; + padding: 8px; + margin-bottom: 30px; } + .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active { + margin-bottom: 29px; + border-bottom: 2px solid #76323F; + background-color: #f9f9f9; + border-radius: 3px 3px 0 0; } + .LP-Input .LP-Input__Label { + font-family: Montserrat, Helvetica, sans-serif; + font-size: 16px; } + .LP-Input .LP-Input__Message { + font-family: Montserrat, Helvetica, sans-serif; + font-style: italic; + font-size: 13px; + padding: 3px; + position: relative; + top: -30px; } + .LP-Input .LP-Input__Message:before { + content: '* '; } + .LP-Input--error .LP-Input__Field { + margin-bottom: 25px; + border-bottom: 2px solid #76323F; + margin-bottom: 29px; } + .LP-Input--error .LP-Input__Message { + color: #76323F; } + .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled { + background-color: transparent; + border-bottom: 1px dashed #565656; + cursor: not-allowed; } + label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled { + color: red; } + .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active { + margin-bottom: 30px; + border-radius: 0; } + .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message { + visibility: hidden; } + .LP-Input--disabled .LP-Input__Label { + color: #565656; } + +.LP-Image { + max-width: 100%; + max-height: 100%; } + .LP-Logo { max-width: 100%; max-height: 100%; @@ -61,36 +141,32 @@ .LP-TextSection .LP-Text { line-height: 1.4rem; } -.LP-Place .LP-Place__Image { - width: 280px; - height: 165px; - object-fit: cover; } - -.LP-Place .LP-Place__Assets { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 0.8rem; - padding: 0 10px; - padding-bottom: 10px; } - -.LP-Place .LP-Place__Info .LP-Place__Title { - font-family: "Trebuchet MS", Helvetica, sans-serif; - color: #565656; - font-size: 1rem; - padding: 0px; - margin: 0px; } - -.LP-Place .LP-Place__Info .LP-Place__Description { - font-family: Roboto, Arial, sans-serif; - color: #565656; } - -.LP-Place .LP-Place__Info .LP-Place__Detail { - font-family: "Trebuchet MS", Helvetica, sans-serif; - padding: 0; - margin: 0; - margin-top: 5px; - font-size: 0.9rem; } +.LP-Place { + width: 280px; } + .LP-Place .LP-Place__Image { + height: 165px; + object-fit: fill; } + .LP-Place .LP-Place__Meta { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 10px; } + .LP-Place .LP-Place__Meta .LP-Paragraph { + font-family: Montserrat, Helvetica, sans-serif; + padding: 0; + margin: 0; + margin-top: 5px; + font-size: 0.9rem; } + .LP-Place .LP-Place__Meta .LP-Headline { + font-family: Montserrat, Helvetica, sans-serif; + color: #565656; + font-size: 1rem; + padding: 0px; + margin: 0px; } + .LP-Place .LP-Place__Description { + font-family: Roboto, Arial, sans-serif; + color: #565656; + display: none; } .LP-SecurityMeasure__List { list-style-type: none; @@ -104,7 +180,7 @@ background-color: #D7CEC7; border-radius: 2px; } .LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text { - font-family: "Trebuchet MS", Helvetica, sans-serif; + font-family: Montserrat, Helvetica, sans-serif; font-size: 1.2rem; } .LP-Header { @@ -161,10 +237,17 @@ .LP-Place__List { list-style-type: none; } + .LP-Place__List .LP-Link .LP-Place:hover { + color: #565656; + background-color: #f9f9f9; + position: relative; + left: -2px; } + .LP-Place__List .LP-Link .LP-Place:hover > .LP-Place__Image { + border-left: 2px #565656 solid; } .LP-Place__List .LP-Place__Item { max-width: 900px; min-width: 450px; - margin: 25px 0; } + margin: 18px 0; } .LP-Place__List .LP-Place__Item .LP-Place { display: flex; flex-direction: row; @@ -247,6 +330,46 @@ .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } +.LP-Form { + max-width: 900px; } + .LP-Form .LP-Form__Fieldset { + border: none; } + .LP-Form .LP-Form__Fieldset .LP-Form__Legend { + margin: 0; + padding: 0; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition { + display: flex; + flex-direction: row; + justify-content: space-between; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { + flex: 3 1 100px; + padding: 6px 15px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { + flex: 5 1 200px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { + flex: 4 1 150px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { + flex: 2 0 50px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { + flex: 1 0 25px; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input { + width: 100%; } + +@media (max-width: 650px) { + .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { + display: flex; + flex-direction: column; + justify-content: space-between; } } + +@media (max-width: 450px) { + .LP-Form .LP-Form__Fieldset .LP-Form__Composition { + display: flex; + flex-direction: column; + justify-content: space-between; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { + flex: 3 1 100px; + padding: 12px 15px; } } + .LP-MainContainer { margin: 0 auto; max-width: 1280px; }