Unverified Commit 40a0b7ca authored by David Haynes's avatar David Haynes
Browse files

Sex up the navigation menu -- now a sidebar that scrolls

- handy navigation menu follows you around
- removes itself when screen gets too small
parent e672383d
Pipeline #1045 passed with stage
in 57 seconds
......@@ -204,3 +204,72 @@ pre {
text-align: center
}
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -100%; /* 12 columns */
}
.row-offcanvas-right.active
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -100%; /* 12 columns */
}
.row-offcanvas-left.active
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
......@@ -2,6 +2,7 @@
<!DOCTYPE html>
<html lang="en">
<!-- Header content -->
<head>
<!-- Metatags -->
<meta charset="utf-8">
......@@ -37,13 +38,13 @@
</head>
<!-- Body content -->
<body>
<!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
<!-- Responsive toggle button -->
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target=".dual-collapse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
<span class="navbar-toggler-icon"></span>
</button>
......@@ -52,8 +53,7 @@
<!-- Brand logo + title -->
<a class="navbar-brand d-flex mx-auto" href="#">
<img src="/assets/img/SRCT_square.svg" width="30" height="30"
class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
<img src="/assets/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
</a>
<!-- Elements that will be collapsed in responsive mode -->
......@@ -71,8 +71,7 @@
<li class="nav-item dropdown">
<!-- Dropdown for source files -->
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
id="download">Source files<span class="caret"></span>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Source files<span class="caret"></span>
</a>
<!-- Rounded dropdown-menu -->
......@@ -85,26 +84,22 @@
<div class="dropdown-divider"></div>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css"
target="_blank">masonstrap.min.css
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css" target="_blank">masonstrap.min.css
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.css"
target="_blank">masonstrap.css
<a class="dropdown-item" href="/masonstrap/masonstrap.css" target="_blank">masonstrap.css
</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_variables.scss"
target="_blank">_variables.scss
<a class="dropdown-item" href="/masonstrap/_variables.scss" target="_blank">_variables.scss
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss"
target="_blank">_masonstrap.scss
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss" target="_blank">_masonstrap.scss
</a>
</div>
</li>
......@@ -130,37 +125,17 @@
<!-- Begin giant container for the entirety of the page content -->
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-12 col-md-9">
<br />
<h1>Masonstrap</h1>
<h4 id="version"></h4>
<br />
<p class="lead">Easily provide any web project with Mason branding.</p>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4">
<div class="list-group table-of-contents">
<a class="list-group-item list-group-item-action" href="#navbars">Navbars</a>
<a class="list-group-item list-group-item-action" href="#buttons">Buttons</a>
<a class="list-group-item list-group-item-action" href="#typography">Typography</a>
<a class="list-group-item list-group-item-action" href="#tables">Tables</a>
<a class="list-group-item list-group-item-action" href="#forms">Forms</a>
<a class="list-group-item list-group-item-action" href="#navs">Navs</a>
<a class="list-group-item list-group-item-action" href="#indicators">Indicators</a>
<a class="list-group-item list-group-item-action" href="#progress">Progress</a>
<a class="list-group-item list-group-item-action" href="#containers">Containers</a>
<a class="list-group-item list-group-item-action" href="#cards">Cards</a>
<a class="list-group-item list-group-item-action" href="#dialogs">Dialogs</a>
</div>
</div>
</div>
</div>
<!-- Navbar
================================================== -->
......@@ -773,28 +748,30 @@
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip
placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi
qui.
</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1
labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft
beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny
pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid
8-bit cred pitchfork.</p>
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse
gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf
cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table
VHS viral locavore cosby sweater.</p>
gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore
wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold
out farm-to-table VHS viral locavore cosby sweater.</p>
</div>
</div>
</div>
......@@ -989,7 +966,8 @@
<div class="bs-component">
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting
again.
</div>
</div>
</div>
......@@ -1005,8 +983,8 @@
<div class="bs-component">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not
super important.
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's
not super important.
</div>
</div>
</div>
......@@ -1125,8 +1103,8 @@
<div class="bs-component">
<div class="jumbotron">
<h1 class="display-3">Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content
or information.</p>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
</div>
</div>
......@@ -1411,6 +1389,34 @@
</footer>
</div>
<div class="col-6 col-md-3 sidebar-offcanvas" style="position: fixed;
right: 0;">
<!-- sidebar -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 hidden-sm-down" style="max-width: 100%;
">
<div class="rounded list-group table-of-contents">
<a class="list-group-item list-group-item-action" href="#navbars">Navbars</a>
<a class="list-group-item list-group-item-action" href="#buttons">Buttons</a>
<a class="list-group-item list-group-item-action" href="#typography">Typography</a>
<a class="list-group-item list-group-item-action" href="#tables">Tables</a>
<a class="list-group-item list-group-item-action" href="#forms">Forms</a>
<a class="list-group-item list-group-item-action" href="#navs">Navs</a>
<a class="list-group-item list-group-item-action" href="#indicators">Indicators</a>
<a class="list-group-item list-group-item-action" href="#progress">Progress</a>
<a class="list-group-item list-group-item-action" href="#containers">Containers</a>
<a class="list-group-item list-group-item-action" href="#cards">Cards</a>
<a class="list-group-item list-group-item-action" href="#dialogs">Dialogs</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- load in external js -->
<script src="../bower_components/jquery/dist/jquery.slim.min.js"></script>
<script src="../bower_components/tether/dist/js/tether.min.js"></script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment