From 4a532b9a3d41b8123a6c959e4e17951b8edc10ca Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sat, 5 Sep 2020 22:39:55 +0200 Subject: [PATCH] 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 +