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 @@ -