Add some v1-style ribbing

This commit is contained in:
Geoffrey Booth 2016-12-19 21:29:03 -08:00
parent a4b3a3ba39
commit 4468ca69c0
4 changed files with 13 additions and 4 deletions

View File

@ -2,7 +2,7 @@
<div class="container-fluid" id="top">
<div class="row row-offcanvas row-offcanvas-left">
<nav class="sidebar sidebar-offcanvas col-xs-12 col-lg-3">
<nav class="sidebar sidebar-offcanvas col-xs-12 col-lg-3 bg-ribbed-light">
<%= include('sidebar.html') %>
</nav>
<main class="main col-xs-12 col-lg-9 offset-lg-3">

View File

@ -1,4 +1,4 @@
<aside class="code-example container-fluid" data-example="<%= file %>">
<aside class="code-example container-fluid bg-ribbed-dark" data-example="<%= file %>">
<div class="row">
<div class="col-md-6 coffee-example-column">
<textarea class="coffee-example" id="<%= file %>-coffee"><%= cs %></textarea>

View File

@ -31,6 +31,15 @@ a:focus, a:hover, a:active {
background-color: #3e2723 !important;
}
.bg-ribbed-light {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 3"><path opacity=".03" fill="#000" d="M0 0h1v1H0z"/><path opacity=".005" fill="#000" d="M0 1h1v2H0z"/></svg>');
background-size: 1px 3px;
}
.bg-ribbed-dark {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 3"><path opacity=".2" fill="#000" d="M0 0h1v1H0z"/><path opacity=".15" fill="#000" d="M0 1h1v2H0z"/></svg>');
background-size: 1px 3px;
}
/*
* Header
@ -129,7 +138,7 @@ a:focus, a:hover, a:active {
.sidebar {
background-color: #efebe9;
border-right: 1px solid #eee;
border-right: 1px solid #efebe9;
top: 3.5rem;
bottom: 0;
left: 0;

View File

@ -1,4 +1,4 @@
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse bg-ribbed-dark">
<a class="navbar-brand" href="#"><%= include('documentation/images/logo.svg') %></a>
<nav class="nav navbar-nav float-xs-left hidden-md-down">
<a href="#try" class="nav-item nav-link">Try CoffeeScript</a>