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

Updated Navbar option fixed position

Browse Source 
Navbar position will now be fixed by class and wont be forced on top
This commit is contained in:
Steev
2022-03-15 13:23:56 +01:00
parent d4a0cb45ef
commit eecee7f917
11 changed files with 116 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
</head>
<body>
<header>
<header class="locked-top">
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
@ -66,10 +66,47 @@
<h1>Code Embed</h1>
<pre>
<code class="language-html">
<h1>test</h1>
code here, escape it yourself.
<h2>test</h2>
<h1>test</h1>
code here, escape it yourself.
<h2>test</h2>
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
</code>
</pre>
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<ul>
<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>
<pre>
<code class="language-html">
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<ul>
<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>
</code>
</pre>
<h1 style="text-align: center;">Alert Elements</h1>

10
src/scss/main.sass
View File

@ -28,7 +28,6 @@ main
word-break: break-word
pre
/*background-color: #d8d8d8*/
border: 1px solid #d8d8d8
border-radius: 5px
@for $i from 1 through 12
h#{$i}
@ -43,8 +42,10 @@ pre
width: calc( 100% - 10em )
max-width: 90em
margin: 0 auto
/* Alert Embeds */
.link
color: #2980b9
text-decoration: none
font-size: 12pt
div[class^="col-"]
padding: 1rem 0
.row
@ -54,5 +55,4 @@ div[class^="col-"]
.col-#{$i}
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i
margin-left: 100% / $columns * $i

37
src/scss/navbar.sass
View File

@ -6,13 +6,14 @@ $navhovcolor: #a5a5a5
header
background: $navBG
text-align: center
position: fixed
height: 30px
z-index: 999
width: 100%
height: auto
top: 0
padding: 10px
.locked-top
top: 0
position: fixed
.nav-toggle
display: none
.nav-toggle-label
@ -39,12 +40,13 @@ header
bottom: 30px
.nav-toggle-label span::after
top: 30px
nav
position: absolute
text-align: left
.nav-locked
top: 100%
width: 100%
left: 0
position: absolute
nav
text-align: left
width: 100%
background: $navBG
display: none
transform: scale(1, 0)
@ -101,4 +103,25 @@ nav li
align-items: center
.nav-left ul
display: flex
justify-content: flex-end
justify-content: flex-end
.sidebar-wrapper
display: flex;
.sidebar-wrapper .sidebar-content
width: 100%
.sidebar-wrapper .sidebar-left
padding: 0
margin: 0
margin-left: 0
padding-right: 5px
height: 100%
.sidebar-wrapper .sidebar-left .sidebar-menu ul
width: fit-content
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title
width: max-content
font-size: 20pt
padding-right: 5px
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li
width: fit-content
color: #2980b9
text-decoration: none
font-size: 12pt