bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #10 from bartlomiej-pluta/rwd-navbar

Browse Source 
Enable RWD for navbar and header
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-12 13:44:22 +02:00
committed by GitHub
parent 1661de16a9 83763013b8
commit b60fe45d49
4 changed files with 67 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/img/navbar/sandwich.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22" width="27" height="22">
<style>
tspan { white-space:pre }
.shp0 { fill: #333333 }
</style>
<path id="sandwich" class="shp0" d="M0,20.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM0,11.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM6,2.5c0,0.83 0.67,1.5 1.5,1.5h17c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-17c-0.83,0 -1.5,0.67 -1.5,1.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

44
src/index.html
View File

@@ -28,30 +28,34 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<div class="navbar navbar-expand-lg fixed-top"> <div class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container"> <div class="container navbar__content">
<div class="brand navbar-header"> <div class="brand navbar__content__brand navbar-header">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo"> <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span> <span class="brand__name">Fork</span>
<span class="brand__name brand__name--emph">IO</span> <span class="brand__name brand__name--emph">IO</span>
</div> </div>
<ul class="navbar__body navbar-nav"> <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
<li class="nav-item"> aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
<a class="navbar__link nav-link" href="#">Overview</a> <img src="img/navbar/sandwich.svg" alt="">
</li> </button>
<li class="nav-item"> <div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
<a class="navbar__link nav-link" href="#">About fork</a> <ul class="navbar__content__body navbar-nav mr-0 ml-auto">
</li> <li class="nav-item">
<li class="nav-item"> <a class="navbar__link nav-link" href="#">Overview</a>
<a class="navbar__link nav-link" href="#">Buying options</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="navbar__link nav-link" href="#">About fork</a>
<a class="navbar__link nav-link" href="#">Support</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="navbar__link nav-link" href="#">Buying options</a>
<button class="rounded-button rounded-button--strong">Buy now</button> </li>
</li> <li class="nav-item">
</ul> <a class="navbar__link nav-link" href="#">Support</a>
</li>
</ul>
</div>
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
</div> </div>
</div> </div>

2
src/scss/_header.scss
View File

@@ -1,5 +1,5 @@
.header { .header {
background: black url(../img/header/img.png) no-repeat 50% 30% / cover; background: black url(../img/header/img.png) no-repeat center 120px/ cover;
height: 100vh; height: 100vh;
padding-top: 110px; padding-top: 110px;
} }

44
src/scss/_navbar.scss
View File

@@ -1,16 +1,42 @@
$shrinking-duration: 0.4s; $shrinking-duration: 0.4s;
.navbar { @media all and (min-width: $desktop) {
margin: 0 0; .navbar {
padding: 0 90px; margin: 0 0;
height: 100px; padding: 0 90px;
background-color: white; height: 100px;
transition: height $shrinking-duration; transition: height $shrinking-duration;
}
.navbar--shrink {
height: 50px;
transition: height $shrinking-duration;
}
} }
.navbar--shrink { .navbar {
height: 50px; background-color: white;
transition: height $shrinking-duration; }
.navbar__content {
display: flex;
}
.navbar__content__header {
order: 1;
}
.navbar__content__toggler {
order: 4;
border: none;
}
.navbar__content__body {
order: 2;
}
.navbar__content__button {
order: 3;
} }
.navbar__link { .navbar__link {