added responsive navbar
This commit is contained in:
parent
2285a21721
commit
5018123615
96
dist/c5c675bb9c74ae17ec48e80f0197f4bf.css
vendored
96
dist/c5c675bb9c74ae17ec48e80f0197f4bf.css
vendored
@ -1,96 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: whitesmoke;
|
||||
font-family: sans-serif; }
|
||||
|
||||
.dev {
|
||||
border: 1px solid black; }
|
||||
|
||||
.container {
|
||||
width: calc( 100% - 10em);
|
||||
max-width: 60em;
|
||||
margin: 0 auto; }
|
||||
|
||||
div[class^="col-"] {
|
||||
padding: 1rem 0;
|
||||
text-align: center; }
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap; }
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 8.33333%; }
|
||||
|
||||
.col-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 16.66667%; }
|
||||
|
||||
.col-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-3 {
|
||||
flex: 0 0 25%; }
|
||||
|
||||
.col-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 33.33333%; }
|
||||
|
||||
.col-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 41.66667%; }
|
||||
|
||||
.col-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-6 {
|
||||
flex: 0 0 50%; }
|
||||
|
||||
.col-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 58.33333%; }
|
||||
|
||||
.col-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 66.66667%; }
|
||||
|
||||
.col-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-9 {
|
||||
flex: 0 0 75%; }
|
||||
|
||||
.col-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 83.33333%; }
|
||||
|
||||
.col-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 91.66667%; }
|
||||
|
||||
.col-offset-11 {
|
||||
margin-left: 91.66667%; }
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 100%; }
|
||||
|
||||
.col-offset-12 {
|
||||
margin-left: 100%; }
|
||||
212
dist/ef19487056b129c8f3eda17f9543ab70.css
vendored
Normal file
212
dist/ef19487056b129c8f3eda17f9543ab70.css
vendored
Normal file
@ -0,0 +1,212 @@
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f1f1f1;
|
||||
font-family: sans-serif; }
|
||||
|
||||
.dev {
|
||||
border: 1px solid black; }
|
||||
|
||||
.display {
|
||||
background-color: lightcoral;
|
||||
border: 1px solid red;
|
||||
text-align: center; }
|
||||
|
||||
.container {
|
||||
width: calc( 100% - 10em);
|
||||
max-width: 60em;
|
||||
margin: 0 auto; }
|
||||
|
||||
div[class^="col-"] {
|
||||
padding: 1rem 0;
|
||||
text-align: center; }
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap; }
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 8.33333%; }
|
||||
|
||||
.col-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 16.66667%; }
|
||||
|
||||
.col-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-3 {
|
||||
flex: 0 0 25%; }
|
||||
|
||||
.col-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 33.33333%; }
|
||||
|
||||
.col-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 41.66667%; }
|
||||
|
||||
.col-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-6 {
|
||||
flex: 0 0 50%; }
|
||||
|
||||
.col-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 58.33333%; }
|
||||
|
||||
.col-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 66.66667%; }
|
||||
|
||||
.col-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-9 {
|
||||
flex: 0 0 75%; }
|
||||
|
||||
.col-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 83.33333%; }
|
||||
|
||||
.col-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 91.66667%; }
|
||||
|
||||
.col-offset-11 {
|
||||
margin-left: 91.66667%; }
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 100%; }
|
||||
|
||||
.col-offset-12 {
|
||||
margin-left: 100%; }
|
||||
|
||||
header {
|
||||
background: #dfdfdf;
|
||||
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: #dfdfdf;
|
||||
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: 1em;
|
||||
margin-bottom: 0;
|
||||
list-style: none; }
|
||||
.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; } }
|
||||
@ -68,7 +68,7 @@ require = (function (modules, cache, entry) {
|
||||
|
||||
// Override the current require with this new one
|
||||
return newRequire;
|
||||
})({4:[function(require,module,exports) {
|
||||
})({6:[function(require,module,exports) {
|
||||
var bundleURL = null;
|
||||
function getBundleURLCached() {
|
||||
if (!bundleURL) {
|
||||
@ -99,7 +99,7 @@ function getBaseURL(url) {
|
||||
exports.getBundleURL = getBundleURLCached;
|
||||
exports.getBaseURL = getBaseURL;
|
||||
|
||||
},{}],3:[function(require,module,exports) {
|
||||
},{}],5:[function(require,module,exports) {
|
||||
var bundle = require('./bundle-url');
|
||||
|
||||
function updateLink(link) {
|
||||
@ -131,7 +131,7 @@ function reloadCSS() {
|
||||
|
||||
module.exports = reloadCSS;
|
||||
|
||||
},{"./bundle-url":4}],0:[function(require,module,exports) {
|
||||
},{"./bundle-url":6}],0:[function(require,module,exports) {
|
||||
var global = (1, eval)('this');
|
||||
var OldModule = module.bundle.Module;
|
||||
function Module() {
|
||||
@ -149,7 +149,7 @@ function Module() {
|
||||
module.bundle.Module = Module;
|
||||
|
||||
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
|
||||
var ws = new WebSocket('ws://localhost:58723/');
|
||||
var ws = new WebSocket('ws://localhost:56486/');
|
||||
ws.onmessage = function(event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
45
dist/index.html
vendored
45
dist/index.html
vendored
@ -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="/dist/c5c675bb9c74ae17ec48e80f0197f4bf.css">
|
||||
<style>
|
||||
/* Dev Classes */
|
||||
.display {
|
||||
background-color: lightcoral;
|
||||
border: 1px solid red;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/dist/ef19487056b129c8f3eda17f9543ab70.css">
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
$primBG: rgb(245, 245, 245)
|
||||
$primBG: rgb(241, 241, 241)
|
||||
$columns: 12
|
||||
$navBG: #dfdfdf
|
||||
$navgap: 1em
|
||||
*
|
||||
box-sizing: border-box
|
||||
body
|
||||
@ -7,12 +9,19 @@ body
|
||||
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
|
||||
@ -24,3 +33,101 @@ div[class^="col-"]
|
||||
flex: 0 0 100% / $columns * $i
|
||||
.col-offset-#{$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
|
||||
Loading…
x
Reference in New Issue
Block a user