diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index e160eeb..179eb0f 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -1,31 +1,277 @@ -.LP-Footer{ - margin-top: 75px; +// Define easily accessible color-defaults for the footer. +$-primary-link-color: $-beige; +$-primary-line-color: $-almost-white; + +.LP-Footer { + margin: auto; + background: $-grey; width: 100%; - background-color: $-grey; - padding: 25px; + font-family: $-primary-sans-serif-font; + font-size: 0.75rem; - .LP-LinkList__List{ - display: flex; - align-items: center; - justify-content: center; + * { + box-sizing: border-box; + } - .LP-LinkList__Item{ - border: none; - padding: 5px; - width: auto; + ul { + list-style: none; + } - .LP-Text{ - color: $-almost-white; - font-size: 17px; - } + a { + text-decoration: none; + } - .LP-Link{ - display: inline; + &__GenericAnchor { + color: $-primary-link-color; - &:hover{ - background-color: inherit; - } - } + &:hover { + color: $-primary-line-color; } } -} \ No newline at end of file + + // Use flexbox + &__Flex { + display: flex; + flex-flow: row wrap; + } + + &__ListTop { + text-align: center; + width: 33.333%; + } + + &__ListTop > li { + padding-bottom: 10px; + } + + &__ListHeader { + padding: 10px 0 5px 0; + color: $-almost-white; + font-size: 2.3vw; + } + + &__ListAnchor { + font-size: 1.3em; + } + + &__ListText { + font-size: 1.3em; + color: $-almost-white; + } + + &__ListText-left { + text-align: left; + } + + &__SocialSection { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; + } + + &__SocialSection::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid $-primary-line-color; + width: calc(100% - 20px); + } + + // Include social media icons. + .LP-Footer__Social-Mastodon { + .LP-Footer__Icon { + background-image: url('icons/social/mastodon.svg'); + } + } + + .LP-Footer__Social-Twitter { + .LP-Footer__Icon { + background-image: url('icons/social/twitter.svg'); + } + } + + .LP-Footer__Social-Facebook { + .LP-Footer__Icon { + background-image: url('icons/social/facebook.svg'); + } + } + + .LP-Footer__Social-Youtube { + .LP-Footer__Icon { + background-image: url('icons/social/youtube.svg'); + } + } + + .LP-Footer__Social-Vimeo { + .LP-Footer__Icon { + background-image: url('icons/social/vimeo.svg'); + } + } + + .LP-Footer__Social-Instagram { + .LP-Footer__Icon { + background-image: url('icons/social/instagram.svg'); + } + } + + .LP-Footer__Social-Vkontakte { + .LP-Footer__Icon { + background-image: url('icons/social/vkontakte.svg'); + } + } + + .LP-Footer__Social-Wordpress { + .LP-Footer__Icon { + background-image: url('icons/social/wordpress.svg'); + } + } + + // Social media icons style. + .LP-Footer__Icon { + background-size: 40px 40px; + background-repeat: no-repeat; + background-position: center; + background-clip: content-box; + position: absolute; + height: 50px; + width: 50px; + } + + // Big letters of "EXPLORE WITH US" + &__SocialExplore { + display: flex; + align-items: center; + font-size: 3.5em; + color: $-almost-white; + } + + // Small letters of "EXPLORE WITH US" + &__SocialSmall { + font-size: 0.6em; + padding: 0px 20px; + } + + &__SocialOverlap { + position: relative; + z-index: 2; + background: $-grey; + padding: 0 10px; + } + + &__SocialOverlap > a { + font-size: 3em; + padding-right: 50px; + } + + &__BottomSection { + width: 100%; + padding: 10px; + border-top: 1px solid $-primary-line-color; + margin-top: 10px; + } + + &__BottomSection > div:first-child { + margin-right: auto; + } + + &__BottomWrapper { + font-size: 1.5em; + color: $-almost-white; + } +} + +// 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__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__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__ListHeader { + font-size: 2.2em; + } + .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.config.json b/components/03_Organisms/footer/footer.config.json index 8109458..f623432 100644 --- a/components/03_Organisms/footer/footer.config.json +++ b/components/03_Organisms/footer/footer.config.json @@ -1,4 +1,4 @@ { "title": "Footer", - "status": "prototype" + "status": "wip" } \ No newline at end of file diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs index 34e97f8..1ef537a 100644 --- a/components/03_Organisms/footer/footer.hbs +++ b/components/03_Organisms/footer/footer.hbs @@ -1,7 +1,65 @@ -
- -
\ No newline at end of file + diff --git a/components/04_Templates/codex/_codex.scss b/components/04_Templates/codex/_codex.scss index 5160cb1..ba9e99f 100644 --- a/components/04_Templates/codex/_codex.scss +++ b/components/04_Templates/codex/_codex.scss @@ -1,6 +1,6 @@ -.LP-TextSection{ +.LP-TextSection { - .LP-UnorderedList{ + .LP-UnorderedList { font-family: $-primary-serif-font; font-size: 1.4rem; li{ diff --git a/components/05_Pages/place/place.hbs b/components/05_Pages/place/place.hbs index 21b1905..09f402c 100644 --- a/components/05_Pages/place/place.hbs +++ b/components/05_Pages/place/place.hbs @@ -8,4 +8,5 @@
{{> @placedetail}}
- \ No newline at end of file + +{{> @footer}} \ No newline at end of file diff --git a/components/main.scss b/components/main.scss index b6f49e2..f3d7120 100644 --- a/components/main.scss +++ b/components/main.scss @@ -1,67 +1,71 @@ @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'); +} +// Define global color variables. $-beige: #D7CEC7; $-grey: #565656; $-wine-red: #76323F; $-light-brown: #C09F80; $-almost-white: #f9f9f9; -$-primary-sans-serif-font: Montserrat, -Helvetica, -sans-serif; +// Define global sand/serif font variables. +$-primary-sans-serif-font: 'Montserrat', + Helvetica, + sans-serif; $-primary-serif-font: 'Crimson Text', -Times, -serif; + Times, + serif; -$-viewport-extra-small: 450px; -$-viewport-small: 650px; -$-viewport-medium: 750px; +// Define viewport sizes. $-viewport-normal: 1000px; +$-viewport-medium: 750px; +$-viewport-small: 650px; +$-viewport-extra-small: 450px; +// 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; @@ -132,9 +137,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 +197,4 @@ body { @import '04_Templates/templates'; @import '05_Pages/pages'; -@import './tagify'; \ No newline at end of file +@import './tagify'; diff --git a/public/icons/social/facebook.svg b/public/icons/social/facebook.svg new file mode 100644 index 0000000..21a86a2 --- /dev/null +++ b/public/icons/social/facebook.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/instagram.svg b/public/icons/social/instagram.svg new file mode 100644 index 0000000..13e1d18 --- /dev/null +++ b/public/icons/social/instagram.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/mastodon.svg b/public/icons/social/mastodon.svg new file mode 100644 index 0000000..4dcdf6e --- /dev/null +++ b/public/icons/social/mastodon.svg @@ -0,0 +1,62 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/twitter.svg b/public/icons/social/twitter.svg new file mode 100644 index 0000000..7d521e0 --- /dev/null +++ b/public/icons/social/twitter.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/vimeo.svg b/public/icons/social/vimeo.svg new file mode 100644 index 0000000..dee9573 --- /dev/null +++ b/public/icons/social/vimeo.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/vkontakte.svg b/public/icons/social/vkontakte.svg new file mode 100644 index 0000000..ce5f2fd --- /dev/null +++ b/public/icons/social/vkontakte.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/wordpress.svg b/public/icons/social/wordpress.svg new file mode 100644 index 0000000..29d92ca --- /dev/null +++ b/public/icons/social/wordpress.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/icons/social/youtube.svg b/public/icons/social/youtube.svg new file mode 100644 index 0000000..1512767 --- /dev/null +++ b/public/icons/social/youtube.svg @@ -0,0 +1,52 @@ + +image/svg+xml + + + + diff --git a/public/main.css b/public/main.css index ab2c444..fb70e4e 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; @@ -1241,25 +1241,167 @@ body { display: block; } .LP-Footer { - margin-top: 75px; + margin: auto; + background: #565656; width: 100%; - background-color: #565656; - padding: 25px; } - .LP-Footer .LP-LinkList__List { + font-family: "Montserrat", Helvetica, sans-serif; + font-size: 0.75rem; } + .LP-Footer * { + box-sizing: border-box; } + .LP-Footer ul { + list-style: none; } + .LP-Footer a { + text-decoration: none; } + .LP-Footer__GenericAnchor { + color: #D7CEC7; } + .LP-Footer__GenericAnchor:hover { + color: #f9f9f9; } + .LP-Footer__Flex { + display: flex; + flex-flow: row wrap; } + .LP-Footer__ListTop { + text-align: center; + width: 33.333%; } + .LP-Footer__ListTop > li { + padding-bottom: 10px; } + .LP-Footer__ListHeader { + padding: 10px 0 5px 0; + color: #f9f9f9; + font-size: 2.3vw; } + .LP-Footer__ListAnchor { + font-size: 1.3em; } + .LP-Footer__ListText { + font-size: 1.3em; + color: #f9f9f9; } + .LP-Footer__ListText-left { + text-align: left; } + .LP-Footer__SocialSection { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; } + .LP-Footer__SocialSection::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid #f9f9f9; + width: calc(100% - 20px); } + .LP-Footer .LP-Footer__Social-Mastodon .LP-Footer__Icon { + background-image: url("icons/social/mastodon.svg"); } + .LP-Footer .LP-Footer__Social-Twitter .LP-Footer__Icon { + background-image: url("icons/social/twitter.svg"); } + .LP-Footer .LP-Footer__Social-Facebook .LP-Footer__Icon { + background-image: url("icons/social/facebook.svg"); } + .LP-Footer .LP-Footer__Social-Youtube .LP-Footer__Icon { + background-image: url("icons/social/youtube.svg"); } + .LP-Footer .LP-Footer__Social-Vimeo .LP-Footer__Icon { + background-image: url("icons/social/vimeo.svg"); } + .LP-Footer .LP-Footer__Social-Instagram .LP-Footer__Icon { + background-image: url("icons/social/instagram.svg"); } + .LP-Footer .LP-Footer__Social-Vkontakte .LP-Footer__Icon { + background-image: url("icons/social/vkontakte.svg"); } + .LP-Footer .LP-Footer__Social-Wordpress .LP-Footer__Icon { + background-image: url("icons/social/wordpress.svg"); } + .LP-Footer .LP-Footer__Icon { + background-size: 40px 40px; + background-repeat: no-repeat; + background-position: center; + background-clip: content-box; + position: absolute; + height: 50px; + width: 50px; } + .LP-Footer__SocialExplore { display: flex; align-items: center; + font-size: 3.5em; + color: #f9f9f9; } + .LP-Footer__SocialSmall { + font-size: 0.6em; + padding: 0px 20px; } + .LP-Footer__SocialOverlap { + position: relative; + z-index: 2; + background: #565656; + padding: 0 10px; } + .LP-Footer__SocialOverlap > a { + font-size: 3em; + padding-right: 50px; } + .LP-Footer__BottomSection { + width: 100%; + padding: 10px; + border-top: 1px solid #f9f9f9; + margin-top: 10px; } + .LP-Footer__BottomSection > div:first-child { + margin-right: auto; } + .LP-Footer__BottomWrapper { + font-size: 1.5em; + color: #f9f9f9; } + +@media (max-width: 1000px) { + .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: 750px) { + .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 .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; } + .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: 650px) { + .LP-Footer__SocialOverlap > a { + margin: auto; } + .LP-Footer__SocialOverlap > a:not(:first-child) { + margin-left: 0; } + .LP-Footer__BottomRights { + display: block; } } + +@media (max-width: 450px) { + .LP-Footer__ListHeader { + font-size: 2.2em; } + .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; } } .LP-Form--tagging { margin-top: 25px; } @@ -1315,7 +1457,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 +1531,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 +1751,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;