From d214feca71d7f7f50324a18680c08181331a4715 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Wed, 18 May 2022 14:56:47 +0300 Subject: [PATCH] Footer responsiveness chek --- resources/css/mixins.scss | 10 ++++++++-- resources/css/partials/footer.scss | 28 ++++++++++++++++++++++++++-- resources/css/variables.scss | 10 +++++++++- styles/main.css | 30 ++++++++++++++++++++++++++++++ styles/main.css.map | 2 +- 5 files changed, 74 insertions(+), 6 deletions(-) diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss index a57720d..5cb6f66 100644 --- a/resources/css/mixins.scss +++ b/resources/css/mixins.scss @@ -12,8 +12,14 @@ } } -@mixin tablet { - @media screen and (max-width: $tablet) { +@mixin footer_overflow { + @media screen and (max-width: variables.$footer_overflow) { + @content; + } +} + +@mixin footer_overflow2 { + @media screen and (max-width: variables.$footer_overflow2) { @content; } } diff --git a/resources/css/partials/footer.scss b/resources/css/partials/footer.scss index ef40e2d..6ee2559 100644 --- a/resources/css/partials/footer.scss +++ b/resources/css/partials/footer.scss @@ -1,5 +1,5 @@ @use "../variables.scss"; - +@use "../mixins.scss"; #footer { background: variables.$clr_footer; @@ -17,10 +17,18 @@ margin: 0 20px 0 0; h2 { - font: 22px "Montserrat", sans-serif; + font: variables.$sz_l_footer_h "Montserrat", sans-serif; font-weight: 600; color: white; margin-bottom: 0; + + @include mixins.footer_overflow { + font-size: variables.$sz_m_footer_h; + } + + @include mixins.footer_overflow2 { + font-size: variables.$sz_s_footer_h; + } } hr { @@ -38,6 +46,14 @@ &:hover { color: variables.$clr_footer_active; } + + @include mixins.footer_overflow { + font-size: variables.$sz_m_footer_p; + } + + @include mixins.footer_overflow2 { + font-size: variables.$sz_s_footer_p; + } } .footer-social { @@ -63,6 +79,14 @@ font-weight: 500; color: inherit; margin: 0; + + @include mixins.footer_overflow { + font-size: variables.$sz_m_footer_p; + } + + @include mixins.footer_overflow2 { + font-size: variables.$sz_s_footer_p; + } } &:last-of-type { diff --git a/resources/css/variables.scss b/resources/css/variables.scss index 41d5f48..842f69f 100644 --- a/resources/css/variables.scss +++ b/resources/css/variables.scss @@ -1,11 +1,19 @@ $mobileS: 360px; $navbar_overflow: 550px; -$tablet: 768px; +$footer_overflow: 1110px; +$footer_overflow2: 880px; $main: 1700px; $fourK: 2560px; $innerContainerMargin: 20px; +$sz_l_footer_h: 22px; +$sz_m_footer_h: 18px; +$sz_s_footer_h: 14px; +$sz_l_footer_p: 16px; +$sz_m_footer_p: 12px; +$sz_s_footer_p: 8px; + $clr_header: #01003B; $clr_logo: #D6FFFF; $clr_nav_sleep: #A3C2C2; diff --git a/styles/main.css b/styles/main.css index 4fb8166..0544f10 100644 --- a/styles/main.css +++ b/styles/main.css @@ -59,6 +59,16 @@ color: white; margin-bottom: 0; } +@media screen and (max-width: 1110px) { + #footer .footer-column h2 { + font-size: 18px; + } +} +@media screen and (max-width: 880px) { + #footer .footer-column h2 { + font-size: 14px; + } +} #footer .footer-column hr { margin: 0 0 10px 0; border: 1px dotted white; @@ -73,6 +83,16 @@ #footer .footer-column a:hover { color: #F5FFFF; } +@media screen and (max-width: 1110px) { + #footer .footer-column a { + font-size: 12px; + } +} +@media screen and (max-width: 880px) { + #footer .footer-column a { + font-size: 8px; + } +} #footer .footer-column .footer-social { display: inline-flex; align-items: center; @@ -94,6 +114,16 @@ color: inherit; margin: 0; } +@media screen and (max-width: 1110px) { + #footer .footer-column p { + font-size: 12px; + } +} +@media screen and (max-width: 880px) { + #footer .footer-column p { + font-size: 8px; + } +} #footer .footer-column:last-of-type { margin: 0; } diff --git a/styles/main.css.map b/styles/main.css.map index 9156f3d..0cc716a 100644 --- a/styles/main.css.map +++ b/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../resources/css/variables.scss","../resources/css/partials/header.scss","../resources/css/mixins.scss","../resources/css/partials/footer.scss","../resources/css/main.scss"],"names":[],"mappings":"AAmBQ;AACA;AACA;AClBR;EACE,YDIW;ECHX;EACA;EACA;EACA;;ACCA;EDNF;IAQI;;;AAGF;EACE;EACA;EACA,aDXmB;ECYnB,ODTO;;ACYT;EACE;;AAEA;EACE,cDnBiB;ECoBjB;EACA;EACA,ODlBU;ECmBV;;AAEA;EACE,ODvBG;;AEAT;ED2BM;IACE;;;;AElCV;EACE,YHSW;EGRX;EACA;EACA;EACA;EACA;EACA,SHJqB;;AGMrB;EACE,OHCe;EGAf;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,OHvBY;;AG2BhB;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE,YHxCY;EGyCZ;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AC/DN;EACE;EACA;EACA,kBJSU;;;AINZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFGA;EEVF;IAUI;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA,SJpCqB;EIqCrB;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../resources/css/variables.scss","../resources/css/partials/header.scss","../resources/css/mixins.scss","../resources/css/partials/footer.scss","../resources/css/main.scss"],"names":[],"mappings":"AA2BQ;AACA;AACA;AC1BR;EACE,YDYW;ECXX;EACA;EACA;EACA;;ACCA;EDNF;IAQI;;;AAGF;EACE;EACA;EACA,aDVmB;ECWnB,ODDO;;ACIT;EACE;;AAEA;EACE,cDlBiB;ECmBjB;EACA;EACA,ODVU;ECWV;;AAEA;EACE,ODfG;;AERT;ED2BM;IACE;;;;AElCV;EACE,YHiBW;EGhBX;EACA;EACA;EACA;EACA;EACA,SHHqB;;AGKrB;EACE,OHSe;EGRf;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;ADPJ;ECGE;IAOI,WHfQ;;;AEWd;ECHE;IAWI,WHlBQ;;;AGsBZ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,OHvBY;;AERlB;ECuBE;IAYI,WHrCQ;;;AEQd;ECiBE;IAgBI,WHxCQ;;;AG4CZ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE,YHhDY;EGiDZ;;AAIJ;EACE;EACA;EACA;EACA;;ADjEJ;EC6DE;IAOI,WHtEQ;;;AEQd;ECuDE;IAWI,WHzEQ;;;AG6EZ;EACE;;;ACvFN;EACE;EACA;EACA,kBJiBU;;;AIdZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFSA;EEhBF;IAUI;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA,SJnCqB;EIoCrB;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file