From b7486db8ef2b430bc544356cc56a2a333d25e642 Mon Sep 17 00:00:00 2001 From: reverend Date: Mon, 3 Aug 2020 17:26:11 +0200 Subject: [PATCH 1/7] Optimized for smaller viewports --- components/03_Organisms/form/_form.scss | 17 +++----- components/04_Templates/home/_home.scss | 9 +++- public/components.css | 57 +++++++++++++------------ 3 files changed, 44 insertions(+), 39 deletions(-) diff --git a/components/03_Organisms/form/_form.scss b/components/03_Organisms/form/_form.scss index d587ee9..1620331 100644 --- a/components/03_Organisms/form/_form.scss +++ b/components/03_Organisms/form/_form.scss @@ -1,11 +1,12 @@ .LP-Form{ - max-width: 900px; .LP-Form__Fieldset{ border: none; .LP-Form__Legend{ margin: 0; - padding: 0; + padding: 0; + font-family: $-primary-sans-serif-font; + font-size: 21px; } .LP-Form__Composition{ @@ -18,23 +19,19 @@ padding: 6px 15px; &--wider{ - flex: 5 1 200px; + flex: 5 1; } &--wide{ - flex: 4 1 150px; + flex: 4 1; } &--narrow{ - flex: 2 0 50px; + flex: 2 0; } &--narrower{ - flex: 1 0 25px; - } - - input{ - width: 100%; + flex: 1 0; } } } diff --git a/components/04_Templates/home/_home.scss b/components/04_Templates/home/_home.scss index 4fca2af..842e174 100644 --- a/components/04_Templates/home/_home.scss +++ b/components/04_Templates/home/_home.scss @@ -1,8 +1,15 @@ .LP-MainContainer { margin: 0 auto; - max-width: 1280px; + max-width: 1280px; } .LP-HorizontalLine{ color: $-grey; +} + +@media(max-width: $-viewport-small){ + .LP-MainContainer { + width: 100%; + } + } \ No newline at end of file diff --git a/public/components.css b/public/components.css index c70bfc2..7bcb71c 100644 --- a/public/components.css +++ b/public/components.css @@ -86,11 +86,12 @@ border-bottom: 1px solid #565656; padding: 8px; margin-bottom: 30px; } - .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active { + .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid { margin-bottom: 29px; border-bottom: 2px solid #76323F; background-color: #f9f9f9; - border-radius: 3px 3px 0 0; } + border-radius: 3px 3px 0 0; + box-shadow: none; } .LP-Input .LP-Input__Label { font-family: Montserrat, Helvetica, sans-serif; font-size: 16px; } @@ -101,8 +102,6 @@ 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; @@ -376,30 +375,28 @@ .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%; } +.LP-Form .LP-Form__Fieldset { + border: none; } + .LP-Form .LP-Form__Fieldset .LP-Form__Legend { + margin: 0; + padding: 0; + font-family: Montserrat, Helvetica, sans-serif; + font-size: 21px; } + .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; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { + flex: 4 1; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { + flex: 2 0; } + .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { + flex: 1 0; } @media (max-width: 650px) { .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { @@ -423,6 +420,10 @@ .LP-HorizontalLine { color: #565656; } +@media (max-width: 650px) { + .LP-MainContainer { + width: 100%; } } + .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image { width: 700px; box-shadow: 0 0 10px #565656; From 600361d6f93f5cec7ea97173414a2dbabfb1810b Mon Sep 17 00:00:00 2001 From: reverend Date: Mon, 3 Aug 2020 17:26:23 +0200 Subject: [PATCH 2/7] Small tweaks for forms --- components/01_Atoms/input/_input.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss index 35bcdde..ff03425 100644 --- a/components/01_Atoms/input/_input.scss +++ b/components/01_Atoms/input/_input.scss @@ -11,11 +11,12 @@ padding: 8px; margin-bottom: $-margin-bottom; - &:focus, &:active{ + &:focus, &:active, &:invalid{ margin-bottom: $-margin-bottom - 1px; border-bottom: 2px solid $-wine-red; background-color: $-almost-white; - border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; + box-shadow: none; } } @@ -31,10 +32,6 @@ padding: 3px; position: relative; top: -$-margin-bottom; - - &:before{ - content: '* '; - } } &--error{ From 706004d2d0a450f64d141e39a5da23fd1f830fd6 Mon Sep 17 00:00:00 2001 From: reverend Date: Tue, 4 Aug 2020 18:36:25 +0200 Subject: [PATCH 3/7] Fixed Distance from headline to text --- components/04_Templates/placeOverview/_placeOverview.scss | 1 + public/components.css | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/04_Templates/placeOverview/_placeOverview.scss b/components/04_Templates/placeOverview/_placeOverview.scss index d59f838..72209a9 100644 --- a/components/04_Templates/placeOverview/_placeOverview.scss +++ b/components/04_Templates/placeOverview/_placeOverview.scss @@ -20,6 +20,7 @@ .LP-Headline{ position: relative; top: 15px; + margin-bottom: 30px; } } } diff --git a/public/components.css b/public/components.css index c70bfc2..7d20c75 100644 --- a/public/components.css +++ b/public/components.css @@ -439,7 +439,8 @@ top: -15px; } .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline { position: relative; - top: 15px; } + top: 15px; + margin-bottom: 30px; } .LP-PlaceOverview .LP-PlaceOverView__ImageList { list-style-type: none; From 862582c7babd5bd5b153e373a1ed9814e9c1ec05 Mon Sep 17 00:00:00 2001 From: reverend Date: Tue, 4 Aug 2020 19:40:55 +0200 Subject: [PATCH 4/7] Changed font of link --- components/01_Atoms/link/_link.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/01_Atoms/link/_link.scss b/components/01_Atoms/link/_link.scss index b7bd75f..bdb3608 100644 --- a/components/01_Atoms/link/_link.scss +++ b/components/01_Atoms/link/_link.scss @@ -1,13 +1,13 @@ .LP-Link { color: $-grey; text-decoration: none; - font-family: $-primary-sans-serif-accent-font; + font-family: $-primary-sans-serif-font; &:hover { color: $-light-brown; } - .LP-Text{ - font-family: $-primary-sans-serif-accent-font; + .LP-Paragraph{ + font-family: $-primary-sans-serif-font; &:hover{ color: $-light-brown; } From 19c7bc9442979c122541aa5f220097fc3e76f99e Mon Sep 17 00:00:00 2001 From: reverend Date: Tue, 4 Aug 2020 19:41:47 +0200 Subject: [PATCH 5/7] fixes and first steps towards navigation on the side --- .../02_Molecules/navigation/_navigation.scss | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/components/02_Molecules/navigation/_navigation.scss b/components/02_Molecules/navigation/_navigation.scss index a3398dc..df773c8 100644 --- a/components/02_Molecules/navigation/_navigation.scss +++ b/components/02_Molecules/navigation/_navigation.scss @@ -1,9 +1,10 @@ .LP-Menu{ + border-left: 1px solid $-light-brown; .LP-Menu__List { list-style-type: none; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: space-around; padding: 0; margin: 0; } @@ -11,7 +12,6 @@ .LP-Menu__Item { padding: 15px 0; margin: 0; - width: 100px; text-align: center; background-color: transparent; } @@ -24,6 +24,24 @@ color: $-wine-red; } } + + &--sidebar{ + border: none; + min-width: 80px; + .LP-Menu__List{ + flex-direction: column; + + .LP-Menu__Item{ + text-align: left; + border-left: 1px solid $-light-brown; + margin-bottom: 10px; + + &:last-child{ + margin-bottom: 0; + } + } + } + } } @media(max-width: $-viewport-medium){ @@ -32,7 +50,11 @@ .LP-Menu__List{ display: flex; flex-direction: row; - justify-content: flex-start + justify-content: flex-start; + + .LP-Menu__Item{ + flex: 1 1 auto; + } } } } From 8af6803dccae6a4025090a7e160bd7d74e97a671 Mon Sep 17 00:00:00 2001 From: reverend Date: Tue, 4 Aug 2020 19:41:55 +0200 Subject: [PATCH 6/7] More stuff --- .../02_Molecules/navigation/navigation.config.json | 10 +++++++++- components/02_Molecules/navigation/navigation.hbs | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/02_Molecules/navigation/navigation.config.json b/components/02_Molecules/navigation/navigation.config.json index 544b7b4..58fb85c 100644 --- a/components/02_Molecules/navigation/navigation.config.json +++ b/components/02_Molecules/navigation/navigation.config.json @@ -1,3 +1,11 @@ { - + "title": "Navigation", + "variants": [ + { + "name": "Sidebar", + "context":{ + "modifier": "--sidebar" + } + } + ] } \ No newline at end of file diff --git a/components/02_Molecules/navigation/navigation.hbs b/components/02_Molecules/navigation/navigation.hbs index 289825d..0f30891 100644 --- a/components/02_Molecules/navigation/navigation.hbs +++ b/components/02_Molecules/navigation/navigation.hbs @@ -1,4 +1,4 @@ -