Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added responsive navbar

Browse Source
This commit is contained in:
steevLP
2021-01-24 00:28:13 +01:00
parent 2285a21721
commit 5018123615
6 changed files with 363 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/index.html
View File

@ -1,38 +1,31 @@
<!DOCTYPE html>
<html lang="de-DE">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title>
<link rel="stylesheet" href="scss/main.sass">
<style>
/* Dev Classes */
.display {
background-color: lightcoral;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<header>
<h1 class="nav-logo-left">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav class="nav-left">
<ul class="nav-left">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
</header>
<div class="container">
<h1>Grid System</h1>
<div class="row">
<div class="col-12 display"> 12 </div>
<div class="col-11 display"> 11 </div>
<div class="col-1 display"> 1 </div>
<div class="col-10 display"> 10 </div>
<div class="col-2 display"> 2 </div>
<div class="col-9 display"> 9 </div>
<div class="col-3 display"> 3 </div>
<div class="col-8 display"> 8 </div>
<div class="col-4 display"> 4 </div>
<div class="col-7 display"> 7 </div>
<div class="col-5 display"> 5 </div>
<div class="col-6 display"> 6 </div>
<div class="col-6 display"> 6 </div>
<div class="col-4"><h1>test</h1></div>
</div>
</div>
</body>

113
src/scss/main.sass
View File

@ -1,18 +1,27 @@
$primBG: rgb(245, 245, 245)
$primBG: rgb(241, 241, 241)
$columns: 12
$navBG: #dfdfdf
$navgap: 1em
*
box-sizing: border-box
body
body
margin: 0
padding: 0
background: $primBG
font-family: sans-serif
// Dev Classes
.dev
border: 1px solid black
.display
background-color: lightcoral
border: 1px solid red
text-align: center
// Container
.container
width: calc( 100% - 10em )
max-width: 60em
margin: 0 auto
// Grid
div[class^="col-"]
padding: 1rem 0
text-align: center
@ -23,4 +32,102 @@ div[class^="col-"]
.col-#{$i}
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i
margin-left: 100% / $columns * $i
// Navigation
header
background: $navBG
text-align: center
position: fixed
z-index: 999
width: 100%
.nav-toggle
display: none
.nav-toggle-label
position: absolute
top: 0
left: 0
margin-left: 1em
height: 100%
display: flex
align-items: center
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after
display: block
background: white
height: 2px
width: 2em
border-radius: 2px
.nav-toggle-label span::before,
.nav-toggle-label span::after
content: ''
position: absolute
.nav-toggle-label span::before
bottom: 30px
.nav-toggle-label span::after
top: 30px
nav
position: absolute
text-align: left
top: 100%
width: 100%
left: 0
background: $navBG
display: none
transform: scale(1, 0)
transform-origin: top
transition: transform 400ms ease-in-out
nav ul
margin: 0
padding: 0
list-style-type: none
nav li
margin-bottom: 1em
margin-left: 1em
nav a
text-decoration: none
font-size: 1.2rem
text-transform: uppercase
color: white
opacity: 0
nav a:hover
color: #000
.nav-toggle:checked ~ nav
display: block
transform: scale(1,1)
.nav-toggle:checked ~ nav a
opacity: 1
transition: opacity 150ms ease-in-out
@media screen and (min-width: 800px)
.nav-toggle-label
display: none
header
display: grid
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
.nav-logo
grid-column: 2 / span 1
nav
all: unset
grid-column: 3 / 4
display: flex
align-items: center
nav a
opacity: 1
nav ul
display: flex
nav li
margin-left: $navgap
margin-bottom: 0
list-style: none
// Left sided Navbar for more custumisation
.nav-logo-left
grid-column: 2 / span 1
.nav-left
all: unset
grid-column: 3 / 4
display: flex
justify-content: flex-end
align-items: center
.nav-left ul
display: flex
justify-content: flex-end