diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss index acc4f228..ef21ab3a 100644 --- a/docs/assets/css/style.scss +++ b/docs/assets/css/style.scss @@ -1,65 +1,230 @@ --- --- +// Adapted from: +// https://github.com/pages-themes/minimal/blob/master/_sass/jekyll-theme-minimal.scss -$section-headings-color: #0086b3; -@import "{{ site.theme }}"; -/*** Unset all header navbar styling done by the theme ***/ -// This corresponds to: -// https://github.com/pages-themes/minimal/blob/master/_sass/jekyll-theme-minimal.scss#L114-L172 +//$section-headings-color: #0086b3; -header ul { - list-style:unset; - height:unset; - padding:unset; - background:unset; - border-radius:unset; - border:unset; - width:unset; +//@import "{{ site.theme }}"; + +@import "fonts"; +@import "rouge-github"; + +body { + background-color: #fff; + padding:50px; + font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + color:#727272; + font-weight:400; } -header li { - width:unset; - float:unset; - border-right:unset; - height:unset; -} -header li:first-child a { - border-radius:unset; + +h1, h2, h3, h4, h5, h6 { + color:#222; + margin:0 0 20px; } -header li:last-child a { - border-radius:unset; + +p, ul, ol, table, pre, dl { + margin:0 0 20px; } -header ul a { - line-height:unset; - font-size:unset; - color:unset; - display:unset; - text-align:unset; - padding-top:unset; - height:unset; + +h1, h2, h3 { + line-height:1.1; } -header ul a:hover, header ul a:focus { - color:unset; - font-weight:unset; + +h1 { + font-size:28px; } -header ul a:active { - background-color:unset; + +h2 { + color:#393939; } -strong { - color:unset; - font-weight:unset; + +h3, h4, h5, h6 { + color:#494949; } -header ul li + li + li { - border-right:unset; - width:unset; + +a { + color:#267CB9; + text-decoration:none; } -header ul a strong { - font-size:unset; - display:unset; - color:unset; + +a:hover, a:focus { + color:#069; + font-weight: bold; } +a small { + font-size:11px; + color:#777; + margin-top:-0.3em; + display:block; +} + +a:hover small { + color:#777; +} + +.wrapper { + width:860px; + margin:0 auto; +} + +blockquote { + border-left:1px solid #e5e5e5; + margin:0; + padding:0 0 0 20px; + font-style:italic; +} + +code, pre { + font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; + color:#333; +} + +pre { + padding:8px 15px; + background: #f8f8f8; + border-radius:5px; + border:1px solid #e5e5e5; + overflow-x: auto; +} + +table { + width:100%; + border-collapse:collapse; +} + +th, td { + text-align:left; + padding:5px 10px; + border-bottom:1px solid #e5e5e5; +} + +dt { + color:#444; + font-weight:700; +} + +th { + color:#444; +} + +img { + max-width:100%; +} + +header { + width:270px; + float:left; + position:fixed; + -webkit-font-smoothing:subpixel-antialiased; +} + + + +section { + width:500px; + float:right; + padding-bottom:50px; +} + +small { + font-size:11px; +} + +hr { + border:0; + background:#e5e5e5; + height:1px; + margin:0 0 20px; +} + +footer { + width:270px; + float:left; + position:fixed; + bottom:50px; + -webkit-font-smoothing:subpixel-antialiased; +} + +@media print, screen and (max-width: 960px) { + + div.wrapper { + width:auto; + margin:0; + } + + header, section, footer { + float:none; + position:static; + width:auto; + } + + header { + padding-right:320px; + } + + section { + border:1px solid #e5e5e5; + border-width:1px 0; + padding:20px 0; + margin:0 0 20px; + } + + header a small { + display:inline; + } + + header ul { + position:absolute; + right:50px; + top:52px; + } +} + +@media print, screen and (max-width: 720px) { + body { + word-wrap:break-word; + } + + header { + padding:0; + } + + header ul, header p.view { + position:static; + } + + pre, code { + word-wrap:normal; + } +} + +@media print, screen and (max-width: 480px) { + body { + padding:15px; + } + + header ul { + width:99%; + } + + header li, header ul li + li + li { + width:33%; + } +} + +@media print { + body { + padding:0.4in; + font-size:12pt; + color:#444; + } +} + + @@ -72,7 +237,7 @@ header ul a strong { section { /* align-content: center; */ padding-left: 270px; - width: 700px; + width: 500px; float: none; } @@ -100,13 +265,16 @@ a:hover, a:focus { header > ul { list-style:none; - padding-right: 20px; + display: inline; + padding: unset; //padding:0; //width:240px; //height:240px; } header > ul ul { + list-style: none; + display: contents; margin:0; margin-bottom:12px; } @@ -115,7 +283,7 @@ header > ul ul { // selector which has higher specifity than this one so we // we need the "important" keywords for some properties. header li { - width:100% !important; + //width:100% !important; //float:left; //border-bottom:1px solid #e0e0e0; border:none !important; @@ -153,15 +321,47 @@ header ul p { background-color: #00000034; } -/* -header li:first-child a { +header > ul li:first-child a { border-radius:5px 5px 0 0; } -header li:last-child a { +header > ul li:last-child a { border-radius:0 0 5px 5px; } +@media print, screen and (max-width: 960px) { + header { + padding-right: unset; + } + header ul { + position: unset; + //right: 50px; + //top: 52px; + //height: 40px; + //display: inline; + //float: left; + //width: unset; + } + header ul ul li { + float: left; + width: unset !important; + } + header > ul { + //width: 500px; + width: 100%; + } + header > ul p { + //width: 50px; + } + header > ul ul { + //float: left; + //display: inline; + //width: 50px; + } +} + +/* + header ul a { background: #f4f4f4; border:1px solid #e0e0e0;