From 5cd481bf401f673c0cede5d97f2979c51708c12e Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sun, 6 Sep 2020 00:22:12 +0200 Subject: [PATCH] Also scoped media queries. (?) --- components/03_Organisms/footer/_footer.scss | 164 ++++++++++---------- public/main.css | 118 +++++++------- 2 files changed, 139 insertions(+), 143 deletions(-) diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss index 265c879..b718290 100644 --- a/components/03_Organisms/footer/_footer.scss +++ b/components/03_Organisms/footer/_footer.scss @@ -112,93 +112,93 @@ $primary-line-color: $-almost-white; font-size: 1.5em; color: $-almost-white } -} -@media(max-width: $-viewport-normal) { - .LP-Footer__list-header { - font-size: 2em + @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 + } + .LP-Footer__bottom-wrapper { + font-size: 1.3em + } } - .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 - } - .LP-Footer__bottom-wrapper { - font-size: 1.3em - } -} -@media(max-width: $-viewport-medium) { - .LP-Footer__list-top { - width: 100% + @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; + } + .LP-Footer__social-icons-wrapper { + width: 100%; + padding: 0 + } + .LP-Footer__social-overlap > a:not(:first-child) { + margin-left: 20px; + } + .LP-Footer__bottom-section { + padding: 0 5px 10px 5px + } + .LP-Footer__bottom-wrapper { + text-align: center; + width: 100%; + margin-top: 10px + } } - .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; - } - .LP-Footer__social-icons-wrapper { - width: 100%; - padding: 0 - } - .LP-Footer__social-overlap > a:not(:first-child) { - margin-left: 20px; - } - .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-small) { - .LP-Footer__social-overlap > a { - margin: auto + @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 + } } - .LP-Footer__social-overlap > a:not(:first-child) { - margin-left: 0; - } - .LP-Footer__bottom-rights { - display: block - } -} -@media(max-width: $-viewport-extra-small) { - .LP-Footer__list-header { - font-size: 2.2em + @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 + } } - .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 - } -} +} \ No newline at end of file diff --git a/public/main.css b/public/main.css index fc06f6d..045d5ea 100644 --- a/public/main.css +++ b/public/main.css @@ -1311,67 +1311,63 @@ body { .LP-Footer__bottom-wrapper { font-size: 1.5em; color: #f9f9f9; } - -@media (max-width: 1000px) { - .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; } - .LP-Footer__bottom-wrapper { - font-size: 1.3em; } } - -@media (max-width: 750px) { - .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; } - .LP-Footer__social-icons-wrapper { - width: 100%; - padding: 0; } - .LP-Footer__social-overlap > a:not(:first-child) { - margin-left: 20px; } - .LP-Footer__bottom-section { - padding: 0 5px 10px 5px; } - .LP-Footer__bottom-wrapper { - text-align: center; - width: 100%; - margin-top: 10px; } } - -@media (max-width: 650px) { - .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: 450px) { - .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: 1000px) { + .LP-Footer .LP-Footer__list-header { + font-size: 2em; } + .LP-Footer .LP-Footer__list-anchor { + font-size: 1.1em; } + .LP-Footer .LP-Footer__social-connect { + font-size: 2.5em; } + .LP-Footer .LP-Footer__social-overlap > a { + font-size: 2.24em; } + .LP-Footer .LP-Footer__bottom-wrapper { + font-size: 1.3em; } } + @media (max-width: 750px) { + .LP-Footer .LP-Footer__list-top { + width: 100%; } + .LP-Footer .LP-Footer__list-header { + font-size: 3em; } + .LP-Footer .LP-Footer__list-anchor { + font-size: 1.5em; } + .LP-Footer .LP-Footer__social-section { + justify-content: center; } + .LP-Footer .LP-Footer__social-section::after { + top: 25%; } + .LP-Footer .LP-Footer__social-connect { + margin-bottom: 10px; + padding: 0 10px; } + .LP-Footer .LP-Footer__social-overlap { + display: flex; + justify-content: center; } + .LP-Footer .LP-Footer__social-icons-wrapper { + width: 100%; + padding: 0; } + .LP-Footer .LP-Footer__social-overlap > a:not(:first-child) { + margin-left: 20px; } + .LP-Footer .LP-Footer__bottom-section { + padding: 0 5px 10px 5px; } + .LP-Footer .LP-Footer__bottom-wrapper { + text-align: center; + width: 100%; + margin-top: 10px; } } + @media (max-width: 650px) { + .LP-Footer .LP-Footer__social-overlap > a { + margin: auto; } + .LP-Footer .LP-Footer__social-overlap > a:not(:first-child) { + margin-left: 0; } + .LP-Footer .LP-Footer__bottom-rights { + display: block; } } + @media (max-width: 450px) { + .LP-Footer .LP-Footer__list-header { + font-size: 2.2em; } + .LP-Footer .LP-Footer__list-anchor { + font-size: 1.2em; } + .LP-Footer .LP-Footer__social-connect { + font-size: 2.4em; } + .LP-Footer .LP-Footer__social-overlap > a { + font-size: 2.24em; } + .LP-Footer .LP-Footer__bottom-wrapper { + font-size: 1.3em; } } .LP-Form--tagging { margin-top: 25px; }