fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Footer responsiveness chek

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-05-18 14:56:47 +03:00
parent fc88c127d4
commit d214feca71
5 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/css/mixins.scss
View File

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

28
resources/css/partials/footer.scss
View File

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

10
resources/css/variables.scss
View File

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

30
styles/main.css
View File

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

2
styles/main.css.map
View File

@@ -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"}
{"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"}