From 5311a5ba999dac9b1b302abecdfb32b4322efae2 Mon Sep 17 00:00:00 2001 From: Thomas Dehaeze Date: Thu, 26 Nov 2020 19:55:12 +0100 Subject: [PATCH] Better aside --- scss/partials/_aside.scss | 2 +- scss/partials/_base.scss | 237 +++++++++++++------------------------- 2 files changed, 83 insertions(+), 156 deletions(-) diff --git a/scss/partials/_aside.scss b/scss/partials/_aside.scss index fc17335..8b156f4 100644 --- a/scss/partials/_aside.scss +++ b/scss/partials/_aside.scss @@ -1,7 +1,7 @@ .aside { padding-left: .5rem; margin-left: .5rem; - box-shadow: inset 2px 0 0px 0px grey; + border-left: 5px solid $grey; // For very large screens, put it on the right side @media (min-width: 1200px) { diff --git a/scss/partials/_base.scss b/scss/partials/_base.scss index 597a601..1ed24c0 100644 --- a/scss/partials/_base.scss +++ b/scss/partials/_base.scss @@ -1,6 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700); -@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); - html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; @@ -10,22 +7,38 @@ html { } body { - background:#edf0f2; - color:#404040; - font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; - font-weight:normal; - margin:0; - min-height:100%; - overflow-x:hidden; + background: $color-background-outside; // Outside Background + color: $color-text; + font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; + font-weight: normal; + margin: 0; + min-height: 100%; + overflow-x: hidden; } #content { - background:#fcfcfc; - height:100%; - margin-left:300px; - max-width:1200px; - min-height:100%; - padding:1.618em 3.236em; + background: $color-background; // Content Background + height: 100%; + min-height: 100%; + margin-left: $toc-width; + max-width: $content-max-width; + padding: 1.618em 3.236em; +} + +a{ + color: $color-link; + text-decoration:none; + cursor:pointer; + + &:hover{ + outline:0; + color: $color-link; + } + + &:visited{ + outline:0; + color: $color-link-visited; + } } p { @@ -46,11 +59,10 @@ i { text-decoration: underline; } -/* Inline Code */ +// Inline Code code { - background:#fff; + background: $white; border:solid 1px #e1e4e5; - /* color:#000; for clickable code */ font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; font-size:75%; max-width:100%; @@ -59,33 +71,34 @@ code { white-space:nowrap; } -blockquote{ - background-color: #F0F0F0; - border-left:5px solid #CCCCCC; - font-style:italic; - line-height:24px; - margin:0px 0px 24px 0px; +blockquote { + background-color: $pale-grey; + border-left: 5px solid $grey; + font-style: italic; + line-height: 24px; + margin: 0px 0px 24px 0px; padding: 6px 20px; - p { + + > p { margin-bottom: 1em; + + &:last-child { + margin-bottom: 0; + } } } -// Superscript -sup{ - font-size:0.5em; +// Subscripts and Superscripts +sub, sup { + font-size:0.6em; line-height:0; position:relative; vertical-align:baseline; - top:-0.5em; - } +sup{ top:-0.5em; } +sub{ bottom:-0.25em; } + -ins{ - background:#ff9; - color:#000; - text-decoration:none; -} mark{ background:#ff0; @@ -98,20 +111,10 @@ small{ font-size:85%; } -// Links to Footnotes -sub{ - font-size:0.5em; - line-height:0; - position:relative; - vertical-align:baseline; - bottom:-0.25em; -} - - img{ -ms-interpolation-mode:bicubic; vertical-align:middle; - max-width:100%; + max-width: 100%; } svg:not(:root){ @@ -143,23 +146,6 @@ legend{ display:inline; } -a{ - color:#2980B9; - text-decoration:none; - cursor:pointer; - - &:hover{ - outline:0; - color:#3091d1; - } - - &:visited{ - outline:0; - color:#9B59B6; - } -} - - .left{ text-align:left; } @@ -181,13 +167,13 @@ hr{ padding:0; } -footer{ - color:#999; +// footer{ +// color:#999; - p { - margin-bottom:12px; - } -} +// p { +// margin-bottom:12px; +// } +// } #content img{ max-width:100%; @@ -225,36 +211,35 @@ footer{ display:inline-block; } +// Is is really used? +// #content .sidebar{ +// float:right; +// width:40%; +// display:block; +// margin:0 0 24px 24px; +// padding:24px; +// background:#f3f6f6; +// border:solid 1px #e1e4e5; +// p, ul, dl{ +// font-size:90%; +// } -#content .sidebar{ - float:right; - width:40%; - display:block; - margin:0 0 24px 24px; - padding:24px; - background:#f3f6f6; - border:solid 1px #e1e4e5; +// .last{ +// margin-bottom:0; +// } - p, ul, dl{ - font-size:90%; - } - - .last{ - margin-bottom:0; - } - - .sidebar-title{ - display:block; - font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif; - font-weight:bold; - background:#e1e4e5; - padding:6px 12px; - margin:-24px; - margin-bottom:24px; - font-size:100%; - } -} +// .sidebar-title{ +// display:block; +// font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif; +// font-weight:bold; +// background:#e1e4e5; +// padding:6px 12px; +// margin:-24px; +// margin-bottom:24px; +// font-size:100%; +// } +// } #content .highlighted{ @@ -278,64 +263,6 @@ span[id*='MathJax-Span']{ text-align:center; } -.todo{ - background-color: #f29f97; - padding: 0px 4px; - color: #fff; -} - -.WAIT, .nilWAIT{ - background-color: #6AB097; -} - -.done{ - background-color: #6ab0de; - padding: 0px 4px; - color: #fff; -} - -.tag span { - background-color: #EDEDED; - border: 1px solid #EDEDED; - color: #939393; - cursor: pointer; - display: block; - float: right; - font-size: 80%; - font-weight: normal; - margin: 0 3px; - padding: 1px 2px; - border-radius: 10px; -} - -.tag .FLAGGED { - background-color: #DB2D27; - border: 1px solid #DB2D27; - color: white; - font-weight: bold; -} - -.timestamp { - font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; - font-size: 90%; - color: navy; -} - -.nav .timestamp { - color: inherit; -} - -.inlinetask { - background: #FFF9E3; /* url(dialog-todo.png) no-repeat 10px 8px; */ - border: 3px solid #FFEB8E; - /* border-right-style: none; */ - /* border-left-style: none; */ - /* padding: 10px 20px 10px 60px; */ - padding: 9px 12px; - margin-bottom: 24px; - font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif; -} - // Font Awesome .fa:before,#content h1 .headerlink:before,#content h2 .headerlink:before,#content h3 .headerlink:before,#content h4 .headerlink:before,#content h5 .headerlink:before,#content h6 .headerlink:before,#content dl dt .headerlink:before,.icon:before,.wy-dropdown .caret:before,.wy-inline-validate.wy-inline-validate-success .wy-input-context:before,.wy-inline-validate.wy-inline-validate-danger .wy-input-context:before,.wy-inline-validate.wy-inline-validate-warning .wy-input-context:before,.wy-inline-validate.wy-inline-validate-info .wy-input-context:before,.wy-alert,.btn,input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],input[type="color"],select,textarea,#table-of-contents li.on a,#table-of-contents li.current>a,.wy-side-nav-search>a,.wy-side-nav-search .wy-dropdown>a,.wy-nav-top a{