Skip to content

GitLab

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
Show whitespace changes
Inline Side-by-side
assets/css/custom.css
View file @ 40a0b7ca
...@@ -204,3 +204,72 @@ pre { ...@@ -204,3 +204,72 @@ pre {
text-align: center 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 */
}
}
index.html
View file @ 40a0b7ca
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- Header content --> <!-- Header content -->
<head> <head>
<!-- Metatags --> <!-- Metatags -->
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -37,13 +38,13 @@ ...@@ -37,13 +38,13 @@
</head> </head>
<!-- Body content --> <!-- Body content -->
<body> <body>
<!-- Define the navbar with the primary background color --> <!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top"> <nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
<!-- Responsive toggle button --> <!-- Responsive toggle button -->
<button class="navbar-toggler navbar-toggler-right" type="button" <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
data-toggle="collapse" data-target=".dual-collapse">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
...@@ -52,8 +53,7 @@ ...@@ -52,8 +53,7 @@
<!-- Brand logo + title --> <!-- Brand logo + title -->
<a class="navbar-brand d-flex mx-auto" href="#"> <a class="navbar-brand d-flex mx-auto" href="#">
<img src="/assets/img/SRCT_square.svg" width="30" height="30" <img src="/assets/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
</a> </a>
<!-- Elements that will be collapsed in responsive mode --> <!-- Elements that will be collapsed in responsive mode -->
...@@ -71,8 +71,7 @@ ...@@ -71,8 +71,7 @@
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<!-- Dropdown for source files --> <!-- Dropdown for source files -->
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Source files<span class="caret"></span>
id="download">Source files<span class="caret"></span>
</a> </a>
<!-- Rounded dropdown-menu --> <!-- Rounded dropdown-menu -->
...@@ -85,26 +84,22 @@ ...@@ -85,26 +84,22 @@
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<!-- Example dropdown-item --> <!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css" <a class="dropdown-item" href="/masonstrap/masonstrap.min.css" target="_blank">masonstrap.min.css
target="_blank">masonstrap.min.css
</a> </a>
<!-- Example dropdown-item --> <!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.css" <a class="dropdown-item" href="/masonstrap/masonstrap.css" target="_blank">masonstrap.css
target="_blank">masonstrap.css
</a> </a>
<!-- Divider divides content in the dropdown-menu --> <!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<!-- Example dropdown-item --> <!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_variables.scss" <a class="dropdown-item" href="/masonstrap/_variables.scss" target="_blank">_variables.scss
target="_blank">_variables.scss
</a> </a>
<!-- Example dropdown-item --> <!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss" <a class="dropdown-item" href="/masonstrap/_masonstrap.scss" target="_blank">_masonstrap.scss
target="_blank">_masonstrap.scss
</a> </a>
</div> </div>
</li> </li>
...@@ -130,37 +125,17 @@ ...@@ -130,37 +125,17 @@
<!-- Begin giant container for the entirety of the page content --> <!-- Begin giant container for the entirety of the page content -->
<div class="container"> <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> <h1>Masonstrap</h1>
<h4 id="version"></h4> <h4 id="version"></h4>
<br /> <br />
<p class="lead">Easily provide any web project with Mason branding.</p> <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 <!-- Navbar
================================================== --> ================================================== -->
...@@ -773,28 +748,30 @@ ...@@ -773,28 +748,30 @@
</ul> </ul>
<div id="myTabContent" class="tab-content"> <div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home"> <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 <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi
qui.
</p>
</div> </div>
<div class="tab-pane fade" id="profile"> <div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation
labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p> ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
</div> </div>
<div class="tab-pane fade" id="dropdown1"> <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 <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro
pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone
locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings
8-bit cred pitchfork.</p> gentrify squid 8-bit cred pitchfork.</p>
</div> </div>
<div class="tab-pane fade" id="dropdown2"> <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 <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 gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore
cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold
VHS viral locavore cosby sweater.</p> out farm-to-table VHS viral locavore cosby sweater.</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -989,7 +966,8 @@ ...@@ -989,7 +966,8 @@
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-danger"> <div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button> <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> </div>
</div> </div>
...@@ -1005,8 +983,8 @@ ...@@ -1005,8 +983,8 @@
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-info"> <div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <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 <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's
super important. not super important.
</div> </div>
</div> </div>
</div> </div>
...@@ -1125,8 +1103,8 @@ ...@@ -1125,8 +1103,8 @@
<div class="bs-component"> <div class="bs-component">
<div class="jumbotron"> <div class="jumbotron">
<h1 class="display-3">Jumbotron</h1> <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 <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
or information.</p> content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p> <p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
</div> </div>
</div> </div>
...@@ -1411,6 +1389,34 @@ ...@@ -1411,6 +1389,34 @@
</footer> </footer>
</div> </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 --> <!-- load in external js -->
<script src="../bower_components/jquery/dist/jquery.slim.min.js"></script> <script src="../bower_components/jquery/dist/jquery.slim.min.js"></script>
<script src="../bower_components/tether/dist/js/tether.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