From 1571c8c33bf38222b208f30f7dd08307828d14a1 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 22:13:51 +0200 Subject: [PATCH 01/18] Added footer to place page. --- components/05_Pages/place/place.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/components/05_Pages/place/place.hbs b/components/05_Pages/place/place.hbs index 21b1905..fc16479 100644 --- a/components/05_Pages/place/place.hbs +++ b/components/05_Pages/place/place.hbs @@ -8,4 +8,5 @@
{{> @placedetail}}
+ {{> @footer}} \ No newline at end of file From d3dfc4b0cd46f21a8703c13e1edd70b045ad5875 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 22:21:25 +0200 Subject: [PATCH 02/18] Edited indentation and order of fonts. --- components/main.scss | 98 ++++++++++++++++++++++---------------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/components/main.scss b/components/main.scss index b6f49e2..9c84c90 100644 --- a/components/main.scss +++ b/components/main.scss @@ -1,48 +1,48 @@ @import './rcss.bundled.scss'; +// Include primary fonts in regular, italic and bold each. @font-face { - font-family: 'Crimson Text'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local('Crimson Text Italic'), local('CrimsonText-Italic'), url(fonts/Crimson/CrimsonText-Italic.ttf) format('truetype'); - } - @font-face { - font-family: 'Crimson Text'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(fonts/Crimson/CrimsonText-Regular.ttf) format('truetype'); - } - @font-face { - font-family: 'Crimson Text'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Crimson Text Bold'), local('CrimsonText-Bold'), url(fonts/Crimson/CrimsonText-Bold.ttf) format('truetype'); - } - @font-face { - font-family: 'Montserrat'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local('Montserrat Italic'), local('Montserrat-Italic'), url(fonts/Montserrat/Montserrat-Italic.ttf) format('truetype'); - } - @font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonts/Montserrat/Montserrat-Regular.ttf) format('truetype'); - } - @font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Montserrat Bold'), local('Montserrat-Bold'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype'); - } - + font-family: 'Crimson Text'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(fonts/Crimson/CrimsonText-Regular.ttf) format('truetype'); +} +@font-face { + font-family: 'Crimson Text'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Crimson Text Italic'), local('CrimsonText-Italic'), url(fonts/Crimson/CrimsonText-Italic.ttf) format('truetype'); +} +@font-face { + font-family: 'Crimson Text'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Crimson Text Bold'), local('CrimsonText-Bold'), url(fonts/Crimson/CrimsonText-Bold.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonts/Montserrat/Montserrat-Regular.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Montserrat Italic'), local('Montserrat-Italic'), url(fonts/Montserrat/Montserrat-Italic.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Montserrat Bold'), local('Montserrat-Bold'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype'); +} $-beige: #D7CEC7; $-grey: #565656; @@ -51,11 +51,11 @@ $-light-brown: #C09F80; $-almost-white: #f9f9f9; $-primary-sans-serif-font: Montserrat, -Helvetica, -sans-serif; + Helvetica, + sans-serif; $-primary-serif-font: 'Crimson Text', -Times, -serif; + Times, + serif; $-viewport-extra-small: 450px; $-viewport-small: 650px; @@ -132,9 +132,9 @@ body { @media(max-width: $-viewport-extra-small) { .LP-Main__Sidebar { - max-width: 100vw; + max-width: 100vw; + } } -} @media(max-width: $-viewport-toggle-sidebar) { .LP-Wrapper__Site { @@ -192,4 +192,4 @@ body { @import '04_Templates/templates'; @import '05_Pages/pages'; -@import './tagify'; \ No newline at end of file +@import './tagify'; From 638c5d5510fa43df15034b8e084df6d6ffc02a44 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 22:27:18 +0200 Subject: [PATCH 03/18] Added comments. --- components/main.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/main.scss b/components/main.scss index 9c84c90..abbc30d 100644 --- a/components/main.scss +++ b/components/main.scss @@ -44,24 +44,28 @@ src: local('Montserrat Bold'), local('Montserrat-Bold'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype'); } +// Define global color variables. $-beige: #D7CEC7; $-grey: #565656; $-wine-red: #76323F; $-light-brown: #C09F80; $-almost-white: #f9f9f9; -$-primary-sans-serif-font: Montserrat, +// Define global sand/serif font variables. +$-primary-sans-serif-font: 'Montserrat', Helvetica, sans-serif; $-primary-serif-font: 'Crimson Text', Times, serif; +// Define viewport sizes. $-viewport-extra-small: 450px; $-viewport-small: 650px; $-viewport-medium: 750px; $-viewport-normal: 1000px; +// Define when to hide the sidebar. $-viewport-toggle-sidebar: $-viewport-small; $-sidebar-width: 250px; @@ -113,6 +117,7 @@ body { display: none; } +// Media queries @media(max-width: $-viewport-normal) { .LP-Wrapper__Site { grid-template-columns: (0.75 * $-sidebar-width) 1fr; From 4a532b9a3d41b8123a6c959e4e17951b8edc10ca Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 22:39:55 +0200 Subject: [PATCH 04/18] Rudimentary first import of footer. Still needs massive work. --- components/03_Organisms/footer/_footer.scss | 238 ++++++++++++++++++-- components/03_Organisms/footer/footer.hbs | 54 ++++- 2 files changed, 260 insertions(+), 32 deletions(-) diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index e160eeb..687d6e3 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -1,31 +1,219 @@ -.LP-Footer{ - margin-top: 75px; - width: 100%; - background-color: $-grey; - padding: 25px; +// Define easily accessible color-defalts for the footer. +$primary-link-color: $-beige; +$primary-line-color: $-almost-white; - .LP-LinkList__List{ - display: flex; - align-items: center; - justify-content: center; +* { + box-sizing: border-box +} - .LP-LinkList__Item{ - border: none; - padding: 5px; - width: auto; +html, body { + height: 100% +} - .LP-Text{ - color: $-almost-white; - font-size: 17px; - } +body { + font-family: $-primary-sans-serif-font; + font-size: 0.75em; + margin: auto; + display: flex; + flex-flow: column nowrap; + // This justify-content is essentially unnecessary in Firefox and Chrome due to the flex: 1 1 auto on the main. However, it's needed to push the footer down on IE11 + justify-content: space-between +} - .LP-Link{ - display: inline; +ul { + list-style: none +} - &:hover{ - background-color: inherit; - } - } - } +a { + text-decoration: none +} + +.generic-anchor { + color: $primary-link-color; + &:hover { + color: $primary-line-color } -} \ No newline at end of file +} + +.flex-rw { + display: flex; + flex-flow: row wrap; +} + +footer { + background: $-grey; + margin-top: auto; + width: 100% +} + +.footer-list-top { + width: 33.333% +} + +.footer-list-top > li { + text-align: center; + padding-bottom: 10px +} + +.footer-list-header { + padding: 10px 0 5px 0; + color: $-almost-white; + font-size: 2.3vw; +} + +.footer-list-anchor { + font-size: 1.3em; +} + +.footer-social-section { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; +} + +.footer-social-section::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid $primary-line-color; + width: calc(100% - 20px) +} + +.footer-social-overlap { + position: relative; + z-index: 2; + background: $-grey; + padding: 0 20px; +} + +.footer-social-explore { + display: flex; + align-items: center; + font-size: 3.5em; + color: $-almost-white +} + +.footer-social-small { + font-size: 0.6em; + padding: 0px 20px +} + +.footer-social-overlap > a { + font-size: 3em +} + +.footer-social-overlap > a:not(:first-child) { + margin-left: 0.38em +} + +.footer-bottom-section { + width: 100%; + padding: 10px; + border-top: 1px solid $primary-line-color; + margin-top: 10px +} + +.footer-bottom-section > div:first-child { + margin-right: auto +} + +.footer-bottom-wrapper { + font-size: 1.5em; + color: $-almost-white +} + +@media only screen and (max-width: 768px) { + .footer-list-header { + font-size: 2em + } + .footer-list-anchor { + font-size: 1.1em + } + .footer-social-connect { + font-size: 2.5em + } + .footer-social-overlap > a { + font-size: 2.24em + } + .footer-bottom-wrapper { + font-size: 1.3em + } +} + +@media only screen and (max-width: 568px) { + main { + font-size: 5em + } + .footer-list-top { + width: 100% + } + .footer-list-header { + font-size: 3em; + } + .footer-list-anchor { + font-size: 1.5em + } + .footer-social-section { + justify-content: center + } + .footer-social-section::after { + top: 25% + } + .footer-social-connect { + margin-bottom: 10px; + padding: 0 10px + } + .footer-social-overlap { + display: flex; + justify-content: center; + } + .footer-social-icons-wrapper { + width: 100%; + padding: 0 + } + .footer-social-overlap > a:not(:first-child) { + margin-left: 20px; + } + .footer-bottom-section { + padding: 0 5px 10px 5px + } + .footer-bottom-wrapper { + text-align: center; + width: 100%; + margin-top: 10px + } +} + +@media only screen and (max-width: 480px) { + .footer-social-overlap > a { + margin: auto + } + .footer-social-overlap > a:not(:first-child) { + margin-left: 0; + } + .footer-bottom-rights { + display: block + } +} + +@media only screen and (max-width: 320px) { + .footer-list-header { + font-size: 2.2em + } + .footer-list-anchor { + font-size: 1.2em + } + .footer-social-connect { + font-size: 2.4em + } + .footer-social-overlap > a { + font-size: 2.24em + } + .footer-bottom-wrapper { + font-size: 1.3em + } +} diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs index 34e97f8..7dc78ca 100644 --- a/components/03_Organisms/footer/footer.hbs +++ b/components/03_Organisms/footer/footer.hbs @@ -1,7 +1,47 @@ - \ No newline at end of file + From e5b78627527b1c9a04cf1b41124e9490b1ae20ca Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 23:00:50 +0200 Subject: [PATCH 05/18] Remove redundant and offensive CSS. --- components/03_Organisms/footer/_footer.scss | 23 ++++----------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index 687d6e3..f889151 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -6,20 +6,6 @@ $primary-line-color: $-almost-white; box-sizing: border-box } -html, body { - height: 100% -} - -body { - font-family: $-primary-sans-serif-font; - font-size: 0.75em; - margin: auto; - display: flex; - flex-flow: column nowrap; - // This justify-content is essentially unnecessary in Firefox and Chrome due to the flex: 1 1 auto on the main. However, it's needed to push the footer down on IE11 - justify-content: space-between -} - ul { list-style: none } @@ -41,9 +27,11 @@ a { } footer { + margin: auto; background: $-grey; - margin-top: auto; - width: 100% + width: 100%; + font-family: $-primary-sans-serif-font; + font-size: 0.75rem; } .footer-list-top { @@ -145,9 +133,6 @@ footer { } @media only screen and (max-width: 568px) { - main { - font-size: 5em - } .footer-list-top { width: 100% } From 713edfdc3b79f8645c1cadf8988ddb79e33c95ec Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 23:13:47 +0200 Subject: [PATCH 06/18] Moved footer below LP-Wrapper__Site to use full width. --- components/05_Pages/place/place.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/05_Pages/place/place.hbs b/components/05_Pages/place/place.hbs index fc16479..09f402c 100644 --- a/components/05_Pages/place/place.hbs +++ b/components/05_Pages/place/place.hbs @@ -8,5 +8,5 @@
{{> @placedetail}}
- {{> @footer}} - \ No newline at end of file + +{{> @footer}} \ No newline at end of file From fb13f466d00711d6dc256f5aa1f03e308397d719 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 23:17:02 +0200 Subject: [PATCH 07/18] Footer now uses global viewport variables. --- components/03_Organisms/footer/_footer.scss | 8 +- components/main.scss | 6 +- public/main.css | 227 +++++++++++++++----- 3 files changed, 186 insertions(+), 55 deletions(-) diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index f889151..04e9a79 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -114,7 +114,7 @@ footer { color: $-almost-white } -@media only screen and (max-width: 768px) { +@media(max-width: $-viewport-normal) { .footer-list-header { font-size: 2em } @@ -132,7 +132,7 @@ footer { } } -@media only screen and (max-width: 568px) { +@media(max-width: $-viewport-medium) { .footer-list-top { width: 100% } @@ -173,7 +173,7 @@ footer { } } -@media only screen and (max-width: 480px) { +@media(max-width: $-viewport-small) { .footer-social-overlap > a { margin: auto } @@ -185,7 +185,7 @@ footer { } } -@media only screen and (max-width: 320px) { +@media(max-width: $-viewport-extra-small) { .footer-list-header { font-size: 2.2em } diff --git a/components/main.scss b/components/main.scss index abbc30d..f3d7120 100644 --- a/components/main.scss +++ b/components/main.scss @@ -60,10 +60,10 @@ $-primary-serif-font: 'Crimson Text', serif; // Define viewport sizes. -$-viewport-extra-small: 450px; -$-viewport-small: 650px; -$-viewport-medium: 750px; $-viewport-normal: 1000px; +$-viewport-medium: 750px; +$-viewport-small: 650px; +$-viewport-extra-small: 450px; // Define when to hide the sidebar. $-viewport-toggle-sidebar: $-viewport-small; diff --git a/public/main.css b/public/main.css index ab2c444..42f67a7 100644 --- a/public/main.css +++ b/public/main.css @@ -423,13 +423,6 @@ .RV-ImageGrid__Item img { object-position: center; } -@font-face { - font-family: 'Crimson Text'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local("Crimson Text Italic"), local("CrimsonText-Italic"), url(fonts/Crimson/CrimsonText-Italic.ttf) format("truetype"); } - @font-face { font-family: 'Crimson Text'; font-style: normal; @@ -437,6 +430,13 @@ font-display: swap; src: local("Crimson Text Regular"), local("CrimsonText-Regular"), url(fonts/Crimson/CrimsonText-Regular.ttf) format("truetype"); } +@font-face { + font-family: 'Crimson Text'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Crimson Text Italic"), local("CrimsonText-Italic"), url(fonts/Crimson/CrimsonText-Italic.ttf) format("truetype"); } + @font-face { font-family: 'Crimson Text'; font-style: normal; @@ -444,13 +444,6 @@ font-display: swap; src: local("Crimson Text Bold"), local("CrimsonText-Bold"), url(fonts/Crimson/CrimsonText-Bold.ttf) format("truetype"); } -@font-face { - font-family: 'Montserrat'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local("Montserrat Italic"), local("Montserrat-Italic"), url(fonts/Montserrat/Montserrat-Italic.ttf) format("truetype"); } - @font-face { font-family: 'Montserrat'; font-style: normal; @@ -458,6 +451,13 @@ font-display: swap; src: local("Montserrat Regular"), local("Montserrat-Regular"), url(fonts/Montserrat/Montserrat-Regular.ttf) format("truetype"); } +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Montserrat Italic"), local("Montserrat-Italic"), url(fonts/Montserrat/Montserrat-Italic.ttf) format("truetype"); } + @font-face { font-family: 'Montserrat'; font-style: normal; @@ -555,11 +555,11 @@ body { .LP-Link { color: #565656; text-decoration: none; - font-family: Montserrat, Helvetica, sans-serif; } + font-family: "Montserrat", Helvetica, sans-serif; } .LP-Link:hover { color: #C09F80; } .LP-Link .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; } + font-family: "Montserrat", Helvetica, sans-serif; } .LP-Link .LP-Paragraph:hover { color: #C09F80; } @@ -567,7 +567,7 @@ body { display: inline; } .LP-Headline { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; font-size: 1.7rem; padding-top: 0px; @@ -641,7 +641,7 @@ body { .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify { min-height: 36px; height: max-content; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 1em; padding: 0; padding-left: 8px; } @@ -669,12 +669,12 @@ body { background-color: #76323F; color: #f9f9f9; } .LP-Input .LP-Input__Label { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 16px; white-space: wrap; overflow: hidden; } .LP-Input .LP-Input__Message { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-style: italic; font-size: 13px; padding: 3px; @@ -747,7 +747,7 @@ body { .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph { padding: 0; margin: 0; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 1em; display: inline; } @@ -757,7 +757,7 @@ body { justify-content: center; align-items: stretch; background-color: #f9f9f9; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; border-radius: 3px; font-weight: bold; box-shadow: 0 0 2px #565656; @@ -796,7 +796,7 @@ body { padding: 8px; } .LP-Pagination { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-weight: bold; display: flex; flex-direction: row; @@ -879,19 +879,19 @@ body { padding-bottom: 10px; padding-top: 10px; } .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; padding: 0; margin: 0; margin-top: 5px; font-size: 0.9rem; } .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Headline { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; font-size: 1rem; padding: 0px; margin: 0px; } .LP-PlaceTeaser .LP-PlaceTeaser__Description { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; display: none; } @@ -1030,7 +1030,7 @@ body { .LP-Header__UserInformation { margin-right: 3%; } .LP-Header__UserInformation .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; white-space: nowrap; } .LP-Header__UserInformation .LP-Link { margin: 0 3px; @@ -1240,26 +1240,157 @@ body { .LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd { display: block; } -.LP-Footer { - margin-top: 75px; +* { + box-sizing: border-box; } + +ul { + list-style: none; } + +a { + text-decoration: none; } + +.generic-anchor { + color: #D7CEC7; } + .generic-anchor:hover { + color: #f9f9f9; } + +.flex-rw { + display: flex; + flex-flow: row wrap; } + +footer { + margin: auto; + background: #565656; width: 100%; - background-color: #565656; - padding: 25px; } - .LP-Footer .LP-LinkList__List { - display: flex; - align-items: center; + font-family: "Montserrat", Helvetica, sans-serif; + font-size: 0.75rem; } + +.footer-list-top { + width: 33.333%; } + +.footer-list-top > li { + text-align: center; + padding-bottom: 10px; } + +.footer-list-header { + padding: 10px 0 5px 0; + color: #f9f9f9; + font-size: 2.3vw; } + +.footer-list-anchor { + font-size: 1.3em; } + +.footer-social-section { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; } + +.footer-social-section::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid #f9f9f9; + width: calc(100% - 20px); } + +.footer-social-overlap { + position: relative; + z-index: 2; + background: #565656; + padding: 0 20px; } + +.footer-social-explore { + display: flex; + align-items: center; + font-size: 3.5em; + color: #f9f9f9; } + +.footer-social-small { + font-size: 0.6em; + padding: 0px 20px; } + +.footer-social-overlap > a { + font-size: 3em; } + +.footer-social-overlap > a:not(:first-child) { + margin-left: 0.38em; } + +.footer-bottom-section { + width: 100%; + padding: 10px; + border-top: 1px solid #f9f9f9; + margin-top: 10px; } + +.footer-bottom-section > div:first-child { + margin-right: auto; } + +.footer-bottom-wrapper { + font-size: 1.5em; + color: #f9f9f9; } + +@media (max-width: 1000px) { + .footer-list-header { + font-size: 2em; } + .footer-list-anchor { + font-size: 1.1em; } + .footer-social-connect { + font-size: 2.5em; } + .footer-social-overlap > a { + font-size: 2.24em; } + .footer-bottom-wrapper { + font-size: 1.3em; } } + +@media (max-width: 750px) { + .footer-list-top { + width: 100%; } + .footer-list-header { + font-size: 3em; } + .footer-list-anchor { + font-size: 1.5em; } + .footer-social-section { justify-content: center; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item { - border: none; - padding: 5px; - width: auto; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Text { - color: #f9f9f9; - font-size: 17px; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link { - display: inline; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { - background-color: inherit; } + .footer-social-section::after { + top: 25%; } + .footer-social-connect { + margin-bottom: 10px; + padding: 0 10px; } + .footer-social-overlap { + display: flex; + justify-content: center; } + .footer-social-icons-wrapper { + width: 100%; + padding: 0; } + .footer-social-overlap > a:not(:first-child) { + margin-left: 20px; } + .footer-bottom-section { + padding: 0 5px 10px 5px; } + .footer-bottom-wrapper { + text-align: center; + width: 100%; + margin-top: 10px; } } + +@media (max-width: 650px) { + .footer-social-overlap > a { + margin: auto; } + .footer-social-overlap > a:not(:first-child) { + margin-left: 0; } + .footer-bottom-rights { + display: block; } } + +@media (max-width: 450px) { + .footer-list-header { + font-size: 2.2em; } + .footer-list-anchor { + font-size: 1.2em; } + .footer-social-connect { + font-size: 2.4em; } + .footer-social-overlap > a { + font-size: 2.24em; } + .footer-bottom-wrapper { + font-size: 1.3em; } } .LP-Form--tagging { margin-top: 25px; } @@ -1315,7 +1446,7 @@ body { .LP-Form .LP-Form__Legend { margin: 0; padding: 0; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 21px; } .LP-Form .LP-Form__Composition { @@ -1389,7 +1520,7 @@ body { flex-basis: 100px; } .LP-Form .LP-Form__InfoText .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; } .LP-ImageGrid { @@ -1609,7 +1740,7 @@ body { border-radius: 2px; position: relative; outline: 0; - font-family: Montserrat, Helvetica, sans-serif; } + font-family: "Montserrat", Helvetica, sans-serif; } .tagify__dropdown__item--active { color: #f9f9f9; From 80bd9bdb13f91419201374b7479b799abec95acb Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sun, 6 Sep 2020 00:12:55 +0200 Subject: [PATCH 08/18] Scoped footer under LP-Footer. --- components/03_Organisms/footer/_footer.scss | 230 ++++++++++---------- components/03_Organisms/footer/footer.hbs | 69 +++--- components/04_Templates/codex/_codex.scss | 4 +- public/main.css | 199 ++++++++--------- 4 files changed, 241 insertions(+), 261 deletions(-) diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index 04e9a79..265c879 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -2,171 +2,171 @@ $primary-link-color: $-beige; $primary-line-color: $-almost-white; -* { - box-sizing: border-box -} - -ul { - list-style: none -} - -a { - text-decoration: none -} - -.generic-anchor { - color: $primary-link-color; - &:hover { - color: $primary-line-color - } -} - -.flex-rw { - display: flex; - flex-flow: row wrap; -} - -footer { +.LP-Footer { margin: auto; background: $-grey; width: 100%; font-family: $-primary-sans-serif-font; font-size: 0.75rem; -} -.footer-list-top { - width: 33.333% -} + * { + box-sizing: border-box + } -.footer-list-top > li { - text-align: center; - padding-bottom: 10px -} + ul { + list-style: none + } -.footer-list-header { - padding: 10px 0 5px 0; - color: $-almost-white; - font-size: 2.3vw; -} + a { + text-decoration: none + } -.footer-list-anchor { - font-size: 1.3em; -} + &__generic-anchor { + color: $primary-link-color; + &:hover { + color: $primary-line-color + } + } -.footer-social-section { - width: 100%; - align-items: center; - justify-content: space-around; - position: relative; - margin-top: 5px; -} + &__flex { + display: flex; + flex-flow: row wrap; + } -.footer-social-section::after { - content: ""; - position: absolute; - z-index: 1; - top: 50%; - left: 10px; - border-top: 1px solid $primary-line-color; - width: calc(100% - 20px) -} + &__list-top { + width: 33.333% + } -.footer-social-overlap { - position: relative; - z-index: 2; - background: $-grey; - padding: 0 20px; -} + &__list-top > li { + text-align: center; + padding-bottom: 10px + } -.footer-social-explore { - display: flex; - align-items: center; - font-size: 3.5em; - color: $-almost-white -} + &__list-header { + padding: 10px 0 5px 0; + color: $-almost-white; + font-size: 2.3vw; + } -.footer-social-small { - font-size: 0.6em; - padding: 0px 20px -} + &__list-anchor { + font-size: 1.3em; + } -.footer-social-overlap > a { - font-size: 3em -} + &__social-section { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; + } -.footer-social-overlap > a:not(:first-child) { - margin-left: 0.38em -} + &__social-section::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid $primary-line-color; + width: calc(100% - 20px) + } -.footer-bottom-section { - width: 100%; - padding: 10px; - border-top: 1px solid $primary-line-color; - margin-top: 10px -} + &__social-overlap { + position: relative; + z-index: 2; + background: $-grey; + padding: 0 20px; + } -.footer-bottom-section > div:first-child { - margin-right: auto -} + &__social-explore { + display: flex; + align-items: center; + font-size: 3.5em; + color: $-almost-white + } -.footer-bottom-wrapper { - font-size: 1.5em; - color: $-almost-white + &__social-small { + font-size: 0.6em; + padding: 0px 20px + } + + &__social-overlap > a { + font-size: 3em + } + + &__social-overlap > a:not(:first-child) { + margin-left: 0.38em + } + + &__bottom-section { + width: 100%; + padding: 10px; + border-top: 1px solid $primary-line-color; + margin-top: 10px + } + + &__bottom-section > div:first-child { + margin-right: auto + } + + &__bottom-wrapper { + font-size: 1.5em; + color: $-almost-white + } } @media(max-width: $-viewport-normal) { - .footer-list-header { + .LP-Footer__list-header { font-size: 2em } - .footer-list-anchor { + .LP-Footer__list-anchor { font-size: 1.1em } - .footer-social-connect { + .LP-Footer__social-connect { font-size: 2.5em } - .footer-social-overlap > a { + .LP-Footer__social-overlap > a { font-size: 2.24em } - .footer-bottom-wrapper { + .LP-Footer__bottom-wrapper { font-size: 1.3em } } @media(max-width: $-viewport-medium) { - .footer-list-top { + .LP-Footer__list-top { width: 100% } - .footer-list-header { + .LP-Footer__list-header { font-size: 3em; } - .footer-list-anchor { + .LP-Footer__list-anchor { font-size: 1.5em } - .footer-social-section { + .LP-Footer__social-section { justify-content: center } - .footer-social-section::after { + .LP-Footer__social-section::after { top: 25% } - .footer-social-connect { + .LP-Footer__social-connect { margin-bottom: 10px; padding: 0 10px } - .footer-social-overlap { + .LP-Footer__social-overlap { display: flex; justify-content: center; } - .footer-social-icons-wrapper { + .LP-Footer__social-icons-wrapper { width: 100%; padding: 0 } - .footer-social-overlap > a:not(:first-child) { + .LP-Footer__social-overlap > a:not(:first-child) { margin-left: 20px; } - .footer-bottom-section { + .LP-Footer__bottom-section { padding: 0 5px 10px 5px } - .footer-bottom-wrapper { + .LP-Footer__bottom-wrapper { text-align: center; width: 100%; margin-top: 10px @@ -174,31 +174,31 @@ footer { } @media(max-width: $-viewport-small) { - .footer-social-overlap > a { + .LP-Footer__social-overlap > a { margin: auto } - .footer-social-overlap > a:not(:first-child) { + .LP-Footer__social-overlap > a:not(:first-child) { margin-left: 0; } - .footer-bottom-rights { + .LP-Footer__bottom-rights { display: block } } @media(max-width: $-viewport-extra-small) { - .footer-list-header { + .LP-Footer__list-header { font-size: 2.2em } - .footer-list-anchor { + .LP-Footer__list-anchor { font-size: 1.2em } - .footer-social-connect { + .LP-Footer__social-connect { font-size: 2.4em } - .footer-social-overlap > a { + .LP-Footer__social-overlap > a { font-size: 2.24em } - .footer-bottom-wrapper { + .LP-Footer__bottom-wrapper { font-size: 1.3em } } diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs index 7dc78ca..2dfe212 100644 --- a/components/03_Organisms/footer/footer.hbs +++ b/components/03_Organisms/footer/footer.hbs @@ -1,47 +1,46 @@ -