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

A little bit responsiveness to header

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-05-18 15:11:06 +03:00
parent 22df1d5818
commit aeea6f3acb
7 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -17,6 +17,7 @@
<a class="nav-item" href="hakkimizda.html">Hakkımızda</a>
<a class="nav-item" href="iletisim.html">İletişim</a>
</nav>
<a class="menu"><img alt="Menu" src="resources/imgs/menu-white.png"></a>
</header>
<div id="left"></div> <!-- Intentionally blank -->
<div id="content">

6
resources/css/mixins.scss
View File

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

13
resources/css/partials/header.scss
View File

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

5
resources/css/variables.scss
View File

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

BIN
resources/imgs/menu-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 B

18
styles/main.css
View File

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

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