deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-09 01:12:20 +02:00
Code Issues Projects Releases Wiki Activity

Cleaned up my code with scss and html code

Browse source
This commit is contained in:
Dallin B Johnson 2018-05-20 10:50:16 -06:00
parent 9c8d7d9ab6
commit 720679bd2b
2 changed files with 75 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
docs/content/docs/components/navbar.md
View file

@ -3,54 +3,50 @@ title: Navbar
description: PaperCSS Navbar
---
<nav class="fixed split-nav">
<div>
<h3 class="nav-brand"><a href="/">Get PaperCSS</a></h3>
<nav class="border fixed split-nav">
<div class="nav-brand">
<h3><a href="/">Get PaperCSS</a></h3>
</div>
<div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<button class="btn-small btn-mobile">
<label for="collapsible1">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="/docs/">Documentation</a></li>
<li><a href="/about/">About</a></li>
<li><a href="https://github.com/rhyneav/papercss" target="_blank">Github</a></li>
</ul>
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<button class="btn-small btn-mobile">
<label for="collapsible1">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="/docs/">Documentation</a></li>
<li><a href="/about/">About</a></li>
<li><a href="https://github.com/rhyneav/papercss" target="_blank">Github</a></li>
</ul>
</div>
</div>
</nav>
<nav class="border split-nav">
<div>
<h3 class="nav-brand"><a href="#">Get PaperCSS</a></h3>
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<label for="collapsible2">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
<label for="collapsible2">
<!-- <i class="fas fa-3x fa-bars"></i> -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>
@ -60,28 +56,26 @@ description: PaperCSS Navbar
Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the whole page.
```html
<nav class="fixed split-nav">
<div>
<h3 class="nav-brand"><a href="#">Get PaperCSS</a></h3>
<nav class="border fixed split-nav">
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<button class="btn-small btn-mobile">
<label for="collapsible1">
<!-- <i class="fas fa-3x fa-bars"></i> (https://fontawesome.com/icons) -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<button class="btn-small btn-mobile">
<label for="collapsible1">
<!-- <i class="fas fa-3x fa-bars"></i> (https://fontawesome.com/icons) -->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>
@ -90,6 +84,9 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
### Not Split Navbar
<nav class="border">
<div class="nav-brand">
<h4><a href="#">Get PaperCSS</a></h4>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">
@ -113,7 +110,10 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
#### Code:
```html
<nav class="fixed">
<nav class="border fixed">
<div class="nav-brand">
<h4><a href="#">Get PaperCSS</a></h4>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<button class="btn-small btn-mobile">

19
src/components/_navbar.scss
View file

@ -48,6 +48,7 @@ nav {
ul.inline {
padding: 0;
margin-bottom: 0;
margin-top: 10px;
}
ul.inline li {
display: inline-block;
@ -71,8 +72,11 @@ nav {
content: "";
}
.nav-brand {
margin: 0;
margin-bottom: .2rem;
h1, h2, h3,
h4, h5, h6, {
margin: 0;
margin-bottom: .2rem;
}
}
.collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
@ -97,22 +101,23 @@ nav {
top: 0;
right: 0;
margin-right: 1.5rem;
margin-top: 1rem;
// margin-top: 1rem;
margin-top: .01rem;
display: none;
background-color: $main-background;
}
}
@media (min-width: 53rem) {
@include resp(null, $small-screen) {
nav .collapsible .collapsible-body {
display: contents;
display: contents !important;
}
}
@media (max-width: 62rem) {
@include resp(medium) {
nav ul {
text-align: center;
}
}
@media (max-width: 53rem) {
@include resp(small) {
nav {
display: block;
}