2016-12-16 02:19:34 -05:00
/* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css and http://v4-alpha.getbootstrap.com/examples/offcanvas/offcanvas.css */
2016-12-11 23:33:54 -05:00
2016-12-16 02:19:34 -05:00
html ,
body {
/* Prevent scroll on narrow devices */
overflow-x : hidden ;
}
2016-12-11 23:33:54 -05:00
body {
2016-12-13 01:53:31 -05:00
/* Required for Scrollspy */
2016-12-11 23:33:54 -05:00
position : relative ;
2016-12-18 05:43:41 -05:00
/* Push below header bar */
margin-top : 3 . 5rem ;
2016-12-16 02:19:34 -05:00
}
2016-12-16 02:58:59 -05:00
svg {
width : auto ;
height : 100 % ;
}
2016-12-18 06:45:35 -05:00
a {
color : # 1b5e20 ;
transition : 0 . 1s ease-in-out ;
}
a : focus , a : hover , a : active {
color : # 388e3c ;
cursor : pointer ;
text-decoration : none ;
}
. bg-inverse {
background-color : # 3e2723 ! important ;
}
2016-12-16 02:58:59 -05:00
2016-12-16 02:18:40 -05:00
/ *
* Header
* /
2016-12-19 02:03:17 -05:00
. navbar-fixed-top {
height : 3 . 5rem ;
}
2016-12-16 02:18:40 -05:00
. navbar-brand {
height : 2em ;
2016-12-19 02:03:17 -05:00
margin-right : 2em ;
2016-12-16 02:18:40 -05:00
}
2016-12-16 02:58:59 -05:00
2016-12-16 02:18:40 -05:00
. navbar-dark path {
2016-12-18 06:45:35 -05:00
fill : # fff ;
2016-12-16 02:18:40 -05:00
}
2016-12-19 02:03:17 -05:00
. navbar-nav {
font-family : Lato ;
font-weight : 400 ;
font-size : 1 . 1em ;
}
. navbar-nav . nav-link {
padding-left : 0 . 6em ;
padding-right : 0 . 6em ;
border-radius : 0 . 4em ;
}
. navbar-nav . nav-link : hover ,
. navbar-nav . nav-link : active {
background-color : # 4e342e ;
}
2016-12-16 02:47:53 -05:00
/* Adapted from https://codepen.io/GeoffreyBooth/pen/QGzwYK */
2016-12-16 03:05:24 -05:00
. navbar-menu-button ,
. navbar-menu-button : focus {
2016-12-16 02:47:53 -05:00
float : right ;
width : 2 . 3em ;
padding : 0 ;
margin-top : 0 . 25em ;
2016-12-16 03:05:24 -05:00
background : transparent ;
border : 0 ;
outline : 0 ;
2016-12-16 02:47:53 -05:00
}
. menu-button {
width : 2em ;
height : 1 . 5em ;
position : relative ;
transform : rotate ( 0deg ) ;
transition : . 25s ease-in-out ;
cursor : pointer ;
}
. menu-button span {
display : block ;
position : absolute ;
height : 4px ;
width : 100 % ;
2016-12-18 06:45:35 -05:00
background : # efebe9 ;
2016-12-16 02:47:53 -05:00
border-radius : 4px ;
opacity : 1 ;
left : 0 ;
transform : rotate ( 0deg ) ;
transition : . 25s ease-in-out ;
}
. menu-button span : nth-child ( 1 ) {
top : 0 ;
}
. menu-button span : nth-child ( 2 ) ,
. menu-button span : nth-child ( 3 ) {
top : 0 . 7em ;
}
. menu-button span : nth-child ( 4 ) {
top : 1 . 4em ;
}
. menu-button . active span : nth-child ( 1 ) {
top : 0 . 7em ;
width : 0 % ;
left : 50 % ;
}
. menu-button . active span : nth-child ( 2 ) {
transform : rotate ( 45deg ) ;
}
. menu-button . active span : nth-child ( 3 ) {
transform : rotate ( -45deg ) ;
}
. menu-button . active span : nth-child ( 4 ) {
top : 0 . 7em ;
width : 0 % ;
left : 50 % ;
2016-12-16 02:18:40 -05:00
}
2016-12-11 23:33:54 -05:00
/ *
* Sidebar
* /
. sidebar {
2016-12-18 06:45:35 -05:00
background-color : # efebe9 ;
2016-12-16 02:19:34 -05:00
border-right : 1px solid # eee ;
2016-12-19 02:03:17 -05:00
top : 3 . 5rem ;
2016-12-16 02:19:34 -05:00
bottom : 0 ;
left : 0 ;
z-index : 1000 ;
display : block ;
2016-12-19 02:03:17 -05:00
padding : 0 ;
}
. sidebar . contents {
height : 100 % ;
2016-12-18 05:43:41 -05:00
/* Scrollable contents if viewport is shorter than content */
overflow-y : auto ;
2016-12-19 02:03:17 -05:00
overflow-x : hidden ;
2016-12-18 05:17:22 -05:00
font-family : 'Alegreya Sans' ;
font-weight : 400 ;
font-size : 1 . 2em ;
2016-12-18 03:07:10 -05:00
line-height : 2 ;
2016-12-11 23:33:54 -05:00
}
2016-12-16 03:17:11 -05:00
@ media screen and ( max-width : 991px ) {
. sidebar . contents {
2016-12-18 05:17:22 -05:00
position : fixed ;
2016-12-19 02:03:17 -05:00
height : calc ( 100 % - 3 . 5rem ) ;
padding : 1em 1 . 6em ;
}
2016-12-18 06:45:35 -05:00
}
@ media screen and ( min-width : 992px ) {
. sidebar {
2016-12-19 02:03:17 -05:00
position : fixed ;
}
. sidebar . contents {
padding : 1 . 3em ;
}
. sidebar . contents :: -webkit-scrollbar {
display : none ;
2016-12-16 03:17:11 -05:00
}
}
2016-12-11 23:33:54 -05:00
2016-12-19 02:03:17 -05:00
. sidebar . nav-link . active ,
. sidebar . nav-link . active a : hover ,
. sidebar . nav-link . active a : focus {
2016-12-18 06:45:35 -05:00
font-weight : 800 ;
2016-12-11 23:33:54 -05:00
}
2016-12-13 01:53:31 -05:00
2016-12-11 23:33:54 -05:00
. nav . nav {
margin-left : 1em ;
2016-12-18 06:45:35 -05:00
font-size : 0 . 9em ;
line-height : 1 . 7 ;
2016-12-11 23:33:54 -05:00
}
2016-12-13 01:53:31 -05:00
2016-12-16 02:19:34 -05:00
/ *
* Off Canvas
* /
@ media screen and ( max-width : 991px ) {
. row-offcanvas {
2016-12-18 05:17:22 -05:00
position : relative ;
transition : all . 25s ease-in-out ;
2016-12-16 02:19:34 -05:00
}
. row-offcanvas-left {
2016-12-19 02:03:17 -05:00
left : 0 ;
2016-12-16 02:19:34 -05:00
}
2016-12-19 02:03:17 -05:00
. sidebar-offcanvas {
position : absolute ;
top : 0 ;
}
}
@ media screen and ( max-width : 767px ) {
2016-12-16 02:19:34 -05:00
. row-offcanvas-left . sidebar-offcanvas {
2016-12-19 02:03:17 -05:00
left : -100 % ;
}
. row-offcanvas-left . active {
left : calc ( 100 % + 30px )
2016-12-16 02:19:34 -05:00
}
2016-12-19 02:03:17 -05:00
}
@ media screen and ( min-width : 768px ) and ( max-width : 991px ) {
. row-offcanvas-left . sidebar-offcanvas {
left : calc ( -66 . 667 % - 15px ) ;
width : 66 . 667 % ;
2016-12-16 02:19:34 -05:00
}
. row-offcanvas-left . active {
2016-12-19 02:03:17 -05:00
left : calc ( 66 . 667 % + 30px ) ;
2016-12-16 02:19:34 -05:00
}
2016-12-19 02:03:17 -05:00
. row-offcanvas-left . sidebar-offcanvas . contents {
2016-12-18 05:17:22 -05:00
width : 66 . 667 % ;
2016-12-16 02:19:34 -05:00
}
}
2016-12-11 23:33:54 -05:00
/ *
* Main content
* /
. main {
padding : 1 . 3em ;
}
2016-12-16 02:19:34 -05:00
@ media ( min-width : 992px ) {
2016-12-11 23:33:54 -05:00
. main {
2016-12-18 05:17:22 -05:00
padding-right : 2em ;
padding-left : 2em ;
2016-12-11 23:33:54 -05:00
}
}
2016-12-13 01:53:31 -05:00
2016-12-16 02:58:59 -05:00
. title-logo {
2016-12-18 05:17:22 -05:00
width : 30rem ;
margin : 3rem auto ;
2016-12-16 02:58:59 -05:00
}
. title-logo path {
2016-12-18 06:45:35 -05:00
fill : # 2f2625 ;
2016-12-16 02:58:59 -05:00
}
2016-12-18 06:45:35 -05:00
. main p , . main li , . main td , . main th {
2016-12-18 05:17:22 -05:00
font-family : Lato ;
font-size : 1 . 3rem ;
font-weight : 300 ;
}
2016-12-18 06:45:35 -05:00
. main strong , . main th {
2016-12-18 05:17:22 -05:00
font-weight : 700 ;
}
2016-12-18 06:45:35 -05:00
. main a {
border-bottom : 2px solid transparent ;
font-weight : 400 ;
}
. main a : focus , . main a : hover , . main a : active {
border-bottom : 2px solid rgba ( 56 , 142 , 60 , 0 . 2 ) ;
}
. main blockquote {
font-size : 1 . 3rem ;
}
2016-12-18 21:29:36 -05:00
. main blockquote pre {
background-color : # f8f3f0 ;
color : # 2f2625 ;
border-radius : . 3em ;
padding : 0 . 4em 0 . 6em ;
}
2016-12-18 05:17:22 -05:00
2016-12-18 21:29:36 -05:00
p , blockquote , table , . code-example {
margin-bottom : 1 . 3rem ;
2016-12-18 03:07:10 -05:00
}
h2 , h3 {
margin-top : 1 . 3em ;
margin-bottom : 0 . 6em ;
2016-12-18 05:17:22 -05:00
font-family : 'Alegreya Sans' ;
}
h2 {
font-weight : 800 ;
}
h3 , h2 time {
font-weight : 400 ;
}
2016-12-18 05:43:41 -05:00
. main section {
/* Offset the anchor so that clicking on the sidebar links don’ t hide the heading under the header bar */
padding-top : 2 . 3rem ;
margin-top : -2 . 3rem ;
}
2016-12-18 05:17:22 -05:00
code , button {
font-family : 'Roboto Mono' ;
font-weight : 400 ;
2016-12-18 03:07:10 -05:00
}
2016-12-18 06:45:35 -05:00
code {
background-color : # f8f3f0 ;
color : # 2f2625 ;
}
2016-12-18 03:07:10 -05:00
2016-12-13 01:53:31 -05:00
/ *
* Code examples
* /
textarea {
position : absolute ;
left : -99999px ; /* Hide off canvas, while still remaining visible */
}
2016-12-18 06:45:35 -05:00
. code-example {
background-color : # 2f2625 ;
padding : 1em ;
border-radius : 0 . 3em ;
margin-bottom : 1em ;
}
. javascript-output-column {
border-left : 1px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}
. btn-primary {
background-color : # 69f0ae ;
color : # 0b140f ;
border-color : # 53d88f ;
transition : 0 . 2s ease-in-out ;
}
. btn-primary : active , . btn-primary : focus , . btn-primary : hover , . btn-primary : active : hover , . btn-primary : active : focus {
background-color : # 61fea8 ;
color : # 060a08 ;
border-color : # 4de486 ;
outline : 0 ;
}
2016-12-13 01:53:31 -05:00
. CodeMirror {
/* https://codemirror.net/demo/resize.html */
height : auto ;
2016-12-14 02:13:38 -05:00
background : transparent ;
2016-12-18 05:17:22 -05:00
font-family : 'Roboto Mono' ;
font-weight : 400 ;
2016-12-18 03:07:10 -05:00
line-height : 1 . 25 ;
2016-12-14 02:13:38 -05:00
}