diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index 42a87e7..dcd68fd 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -1,4 +1,4 @@ -// Define easily accessible color-defalts for the footer. +// Define easily accessible color-defaults for the footer. $-primary-link-color: $-beige; $-primary-line-color: $-almost-white; @@ -21,7 +21,7 @@ $-primary-line-color: $-almost-white; text-decoration: none; } - &__generic-anchor { + &__GenericAnchor { color: $-primary-link-color; &:hover { @@ -30,31 +30,31 @@ $-primary-line-color: $-almost-white; } // Use flexbox - &__flex { + &__Flex { display: flex; flex-flow: row wrap; } - &__list-top { + &__ListTop { width: 33.333%; } - &__list-top > li { + &__ListTop > li { text-align: center; padding-bottom: 10px; } - &__list-header { + &__ListHeader { padding: 10px 0 5px 0; color: $-almost-white; font-size: 2.3vw; } - &__list-anchor { + &__ListAnchor { font-size: 1.3em; } - &__social-section { + &__SocialSection { width: 100%; align-items: center; justify-content: space-around; @@ -62,7 +62,7 @@ $-primary-line-color: $-almost-white; margin-top: 5px; } - &__social-section::after { + &__SocialSection::after { content: ""; position: absolute; z-index: 1; @@ -133,7 +133,7 @@ $-primary-line-color: $-almost-white; } // Big letters of "EXPLORE WITH US" - &__social-explore { + &__SocialExplore { display: flex; align-items: center; font-size: 3.5em; @@ -141,128 +141,128 @@ $-primary-line-color: $-almost-white; } // Small letters of "EXPLORE WITH US" - &__social-small { + &__SocialSmall { font-size: 0.6em; padding: 0px 20px; } - &__social-overlap { + &__SocialOverlap { position: relative; z-index: 2; background: $-grey; padding: 0 10px; } - &__social-overlap > a { + &__SocialOverlap > a { font-size: 3em; padding-right: 50px; } - &__bottom-section { + &__BottomSection { width: 100%; padding: 10px; border-top: 1px solid $-primary-line-color; margin-top: 10px; } - &__bottom-section > div:first-child { + &__BottomSection > div:first-child { margin-right: auto; } - &__bottom-wrapper { + &__BottomWrapper { font-size: 1.5em; color: $-almost-white; } +} - // Media queries using global widths. - @media(max-width: $-viewport-normal) { - .LP-Footer__list-header { - font-size: 2em; - } - .LP-Footer__list-anchor { - font-size: 1.1em; - } - .LP-Footer__social-connect { - font-size: 2.5em; - } - .LP-Footer__social-overlap > a { - font-size: 2.24em; - height: 50px; - } - .LP-Footer__bottom-wrapper { - font-size: 1.3em; - } +// Media queries using global widths. +@media(max-width: $-viewport-normal) { + .LP-Footer__ListHeader { + font-size: 2em; } + .LP-Footer__ListAnchor { + font-size: 1.1em; + } + .LP-Footer__SocialConnect { + font-size: 2.5em; + } + .LP-Footer__SocialOverlap > a { + font-size: 2.24em; + height: 50px; + } + .LP-Footer__BottomWrapper { + font-size: 1.3em; + } +} - @media(max-width: $-viewport-medium) { - .LP-Footer__list-top { - width: 100%; - } - .LP-Footer__list-header { - font-size: 3em; - } - .LP-Footer__list-anchor { - font-size: 1.5em; - } - .LP-Footer__social-section { - justify-content: center - } - .LP-Footer__social-section::after { - top: 25%; - } - .LP-Footer__social-connect { - margin-bottom: 10px; - padding: 0 10px; - } - .LP-Footer__social-overlap { - display: flex; - justify-content: center; - height: 50px; - } - .LP-Footer__social-icons-wrapper { - width: 100%; - padding: 0; - } - .LP-Footer__social-overlap { - margin-left: 0px; - } - .LP-Footer__bottom-section { - padding: 0 5px 10px 5px; - } - .LP-Footer__bottom-wrapper { - text-align: center; - width: 100%; - margin-top: 10px; - } +@media(max-width: $-viewport-medium) { + .LP-Footer__ListTop { + width: 100%; } + .LP-Footer__ListHeader { + font-size: 3em; + } + .LP-Footer__ListAnchor { + font-size: 1.5em; + } + .LP-Footer__SocialSection { + justify-content: center + } + .LP-Footer__SocialSection::after { + top: 25%; + } + .LP-Footer__SocialConnect { + margin-bottom: 10px; + padding: 0 10px; + } + .LP-Footer__SocialOverlap { + display: flex; + justify-content: center; + height: 50px; + } + .LP-Footer__SocialIconsWrapper { + width: 100%; + padding: 0; + } + .LP-Footer__SocialOverlap { + margin-left: 0px; + } + .LP-Footer__BottomSection { + padding: 0 5px 10px 5px; + } + .LP-Footer__BottomWrapper { + text-align: center; + width: 100%; + margin-top: 10px; + } +} - @media(max-width: $-viewport-small) { - .LP-Footer__social-overlap > a { - margin: auto; - } - .LP-Footer__social-overlap > a:not(:first-child) { - margin-left: 0; - } - .LP-Footer__bottom-rights { - display: block; - } +@media(max-width: $-viewport-small) { + .LP-Footer__SocialOverlap > a { + margin: auto; } + .LP-Footer__SocialOverlap > a:not(:first-child) { + margin-left: 0; + } + .LP-Footer__BottomRights { + display: block; + } +} - @media(max-width: $-viewport-extra-small) { - .LP-Footer__list-header { - font-size: 2.2em; - } - .LP-Footer__list-anchor { - font-size: 1.2em; - } - .LP-Footer__social-connect { - font-size: 2.4em; - } - .LP-Footer__social-overlap > a { - font-size: 2.24em; - } - .LP-Footer__bottom-wrapper { - font-size: 1.3em; - } +@media(max-width: $-viewport-extra-small) { + .LP-Footer__ListHeader { + font-size: 2.2em; } -} \ No newline at end of file + .LP-Footer__ListAnchor { + font-size: 1.2em; + } + .LP-Footer__SocialConnect { + font-size: 2.4em; + } + .LP-Footer__SocialOverlap > a { + font-size: 2.24em; + } + .LP-Footer__BottomWrapper { + font-size: 1.3em; + } +} diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs index dbd0e89..89a549e 100644 --- a/components/03_Organisms/footer/footer.hbs +++ b/components/03_Organisms/footer/footer.hbs @@ -1,52 +1,52 @@ -