From fb13f466d00711d6dc256f5aa1f03e308397d719 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 23:17:02 +0200 Subject: [PATCH] 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;