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

added some weird fixes to prevent navbar overlapping

Browse Source
This commit is contained in:
steevLP 2021-01-24 00:48:59 +01:00
parent 91815340de
commit 5563157e30
5 changed files with 59 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/ef19487056b129c8f3eda17f9543ab70.css vendored
View File

@ -7,6 +7,11 @@ body {
background: #f1f1f1;
font-family: sans-serif; }
main {
z-index: 980;
position: relative;
top: 6em; }
.dev {
border: 1px solid black; }
@ -104,8 +109,11 @@ header {
background: #dfdfdf;
text-align: center;
position: fixed;
height: 30px;
z-index: 999;
width: 100%; }
width: 100%;
height: auto;
top: 0; }
.nav-toggle {
display: none; }

2
dist/ef19487056b129c8f3eda17f9543ab70.js vendored
View File

@ -149,7 +149,7 @@ function Module() {
module.bundle.Module = Module;
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
var ws = new WebSocket('ws://localhost:56486/');
var ws = new WebSocket('ws://localhost:58854/');
ws.onmessage = function(event) {
var data = JSON.parse(event.data);

23
dist/index.html vendored
View File

@ -23,10 +23,25 @@
</ul>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-4"><h1>test</h1></div>
<main>
<div class="container">
<h1>css grid</h1>
<div class="row">
<div class="col-12 display"><h1>12</h1></div>
<div class="col-11 display"><h1>11</h1></div>
<div class="col-1 display"><h1>1</h1></div>
<div class="col-10 display"><h1>10</h1></div>
<div class="col-2 display"><h1>2</h1></div>
<div class="col-9 display"><h1>9</h1></div>
<div class="col-3 display"><h1>3</h1></div>
<div class="col-8 display"><h1>8</h1></div>
<div class="col-4 display"><h1>4</h1></div>
<div class="col-7 display"><h1>7</h1></div>
<div class="col-5 display"><h1>5</h1></div>
<div class="col-6 display"><h1>6</h1></div>
<div class="col-6 display"><h1>6</h1></div>
</div>
</div>
</div>
</main>
</body>
</html>

23
src/index.html
View File

@ -23,10 +23,25 @@
</ul>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-4"><h1>test</h1></div>
<main>
<div class="container">
<h1>css grid</h1>
<div class="row">
<div class="col-12 display"><h1>12</h1></div>
<div class="col-11 display"><h1>11</h1></div>
<div class="col-1 display"><h1>1</h1></div>
<div class="col-10 display"><h1>10</h1></div>
<div class="col-2 display"><h1>2</h1></div>
<div class="col-9 display"><h1>9</h1></div>
<div class="col-3 display"><h1>3</h1></div>
<div class="col-8 display"><h1>8</h1></div>
<div class="col-4 display"><h1>4</h1></div>
<div class="col-7 display"><h1>7</h1></div>
<div class="col-5 display"><h1>5</h1></div>
<div class="col-6 display"><h1>6</h1></div>
<div class="col-6 display"><h1>6</h1></div>
</div>
</div>
</div>
</main>
</body>
</html>

12
src/scss/main.sass
View File

@ -9,6 +9,11 @@ body
padding: 0
background: $primBG
font-family: sans-serif
// Nav Overlapping fix
main
z-index: 980
position: relative
top: 6em
// Dev Classes
.dev
border: 1px solid black
@ -33,13 +38,18 @@ div[class^="col-"]
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i
// alert classes
// Navigation
header
background: $navBG
text-align: center
position: fixed
height: 30px
z-index: 999
width: 100%
height: auto
top: 0
.nav-toggle
display: none
.nav-toggle-label
@ -130,4 +140,4 @@ nav a:hover
align-items: center
.nav-left ul
display: flex
justify-content: flex-end
justify-content: flex-end