From aeea6f3acb484b110d8b45c5bcb4af83cfc329e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Wed, 18 May 2022 15:11:06 +0300 Subject: [PATCH] A little bit responsiveness to header --- index.html | 1 + resources/css/mixins.scss | 6 ++++++ resources/css/partials/header.scss | 13 +++++++++++++ resources/css/variables.scss | 5 +++-- resources/imgs/menu-white.png | Bin 0 -> 133 bytes styles/main.css | 18 ++++++++++++++++-- styles/main.css.map | 2 +- 7 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 resources/imgs/menu-white.png diff --git a/index.html b/index.html index 1ed4d6b..9370a94 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ Hakkımızda İletişim + Menu
diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss index 5cb6f66..0c1324a 100644 --- a/resources/css/mixins.scss +++ b/resources/css/mixins.scss @@ -18,6 +18,12 @@ } } +@mixin header_overflow { + @media screen and (max-width: variables.$header_overflow) { + @content; + } +} + @mixin footer_overflow2 { @media screen and (max-width: variables.$footer_overflow2) { @content; diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss index 4f571d5..2b18ec8 100644 --- a/resources/css/partials/header.scss +++ b/resources/css/partials/header.scss @@ -38,6 +38,19 @@ margin-right: 0; } } + + @include mixins.header_overflow { + display: none; + } + } + } + + .menu { + display: none; + margin-right: variables.$innerContainerMargin; + + @include mixins.header_overflow { + display: block; } } } \ No newline at end of file diff --git a/resources/css/variables.scss b/resources/css/variables.scss index 842f69f..36c732f 100644 --- a/resources/css/variables.scss +++ b/resources/css/variables.scss @@ -1,7 +1,8 @@ $mobileS: 360px; $navbar_overflow: 550px; -$footer_overflow: 1110px; +$header_overflow: 730px; $footer_overflow2: 880px; +$footer_overflow: 1110px; $main: 1700px; $fourK: 2560px; @@ -15,7 +16,7 @@ $sz_m_footer_p: 12px; $sz_s_footer_p: 8px; $clr_header: #01003B; -$clr_logo: #D6FFFF; +$clr_logo: #FDFFFF; $clr_nav_sleep: #A3C2C2; $clr_nav_active: $clr_logo; diff --git a/resources/imgs/menu-white.png b/resources/imgs/menu-white.png new file mode 100644 index 0000000000000000000000000000000000000000..5c2edbcfca4f4c603eebf73b383cb57c5067ea18 GIT binary patch literal 133 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzwj^(N7l!{JxM1({$v_b+PZ!6K zh}O4PHu5qk@EkeNQMl=UOyoh6B}<((Kjr_lIlFVm*o*;(%c!Y{SDt7Oh` cSEmdKI;Vst07r~17XSbN literal 0 HcmV?d00001 diff --git a/styles/main.css b/styles/main.css index 0544f10..f7e85f0 100644 --- a/styles/main.css +++ b/styles/main.css @@ -17,7 +17,7 @@ font-family: "Montserrat", sans-serif; font-weight: 700; margin-left: 20px; - color: #D6FFFF; + color: #FDFFFF; } #header .navbar { display: flex; @@ -30,13 +30,27 @@ text-decoration: none; } #header .navbar .nav-item:hover { - color: #D6FFFF; + color: #FDFFFF; } @media screen and (max-width: 550px) { #header .navbar .nav-item:last-of-type { margin-right: 0; } } +@media screen and (max-width: 730px) { + #header .navbar .nav-item { + display: none; + } +} +#header .menu { + display: none; + margin-right: 20px; +} +@media screen and (max-width: 730px) { + #header .menu { + display: block; + } +} #footer { background: #000000; diff --git a/styles/main.css.map b/styles/main.css.map index 0cc716a..aa921df 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":"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 +{"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":"AA4BQ;AACA;AACA;AC3BR;EACE,YDaW;ECZX;EACA;EACA;EACA;;ACCA;EDNF;IAQI;;;AAGF;EACE;EACA;EACA,aDTmB;ECUnB;;AAGF;EACE;;AAEA;EACE,cDjBiB;ECkBjB;EACA;EACA,ODTU;ECUV;;AAEA;EACE,ODdG;;AETT;ED2BM;IACE;;;AChBR;EDGE;IAkBI;;;AAKN;EACE;EACA,cDzCmB;;AEarB;ED0BA;IAKI;;;;AEjDN;EACE,YHkBW;EGjBX;EACA;EACA;EACA;EACA;EACA,SHFqB;;AGIrB;EACE,OHUe;EGTf;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;ADPJ;ECGE;IAOI,WHdQ;;;AEgBd;ECTE;IAWI,WHjBQ;;;AGqBZ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,OHtBY;;AETlB;ECuBE;IAYI,WHpCQ;;;AEad;ECWE;IAgBI,WHvCQ;;;AG2CZ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE,YH/CY;EGgDZ;;AAIJ;EACE;EACA;EACA;EACA;;ADjEJ;EC6DE;IAOI,WHrEQ;;;AEad;ECiDE;IAWI,WHxEQ;;;AG4EZ;EACE;;;ACvFN;EACE;EACA;EACA,kBJkBU;;;AIfZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFeA;EEtBF;IAUI;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA,SJlCqB;EImCrB;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file