Better aside

This commit is contained in:
Thomas Dehaeze 2020-11-26 19:55:12 +01:00
parent 1237ee580d
commit 5311a5ba99
2 changed files with 83 additions and 156 deletions

View File

@ -1,7 +1,7 @@
.aside { .aside {
padding-left: .5rem; padding-left: .5rem;
margin-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 // For very large screens, put it on the right side
@media (min-width: 1200px) { @media (min-width: 1200px) {

View File

@ -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 { html {
-ms-text-size-adjust:100%; -ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%; -webkit-text-size-adjust:100%;
@ -10,8 +7,8 @@ html {
} }
body { body {
background:#edf0f2; background: $color-background-outside; // Outside Background
color:#404040; color: $color-text;
font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
@ -20,14 +17,30 @@ body {
} }
#content { #content {
background:#fcfcfc; background: $color-background; // Content Background
height: 100%; height: 100%;
margin-left:300px;
max-width:1200px;
min-height: 100%; min-height: 100%;
margin-left: $toc-width;
max-width: $content-max-width;
padding: 1.618em 3.236em; 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 { p {
font-size:16px; font-size:16px;
line-height:24px; line-height:24px;
@ -46,11 +59,10 @@ i {
text-decoration: underline; text-decoration: underline;
} }
/* Inline Code */ // Inline Code
code { code {
background:#fff; background: $white;
border:solid 1px #e1e4e5; 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-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%; font-size:75%;
max-width:100%; max-width:100%;
@ -60,32 +72,33 @@ code {
} }
blockquote { blockquote {
background-color: #F0F0F0; background-color: $pale-grey;
border-left:5px solid #CCCCCC; border-left: 5px solid $grey;
font-style: italic; font-style: italic;
line-height: 24px; line-height: 24px;
margin: 0px 0px 24px 0px; margin: 0px 0px 24px 0px;
padding: 6px 20px; padding: 6px 20px;
p {
> p {
margin-bottom: 1em; margin-bottom: 1em;
&:last-child {
margin-bottom: 0;
}
} }
} }
// Superscript // Subscripts and Superscripts
sup{ sub, sup {
font-size:0.5em; font-size:0.6em;
line-height:0; line-height:0;
position:relative; position:relative;
vertical-align:baseline; vertical-align:baseline;
top:-0.5em;
} }
sup{ top:-0.5em; }
sub{ bottom:-0.25em; }
ins{
background:#ff9;
color:#000;
text-decoration:none;
}
mark{ mark{
background:#ff0; background:#ff0;
@ -98,16 +111,6 @@ small{
font-size:85%; font-size:85%;
} }
// Links to Footnotes
sub{
font-size:0.5em;
line-height:0;
position:relative;
vertical-align:baseline;
bottom:-0.25em;
}
img{ img{
-ms-interpolation-mode:bicubic; -ms-interpolation-mode:bicubic;
vertical-align:middle; vertical-align:middle;
@ -143,23 +146,6 @@ legend{
display:inline; display:inline;
} }
a{
color:#2980B9;
text-decoration:none;
cursor:pointer;
&:hover{
outline:0;
color:#3091d1;
}
&:visited{
outline:0;
color:#9B59B6;
}
}
.left{ .left{
text-align:left; text-align:left;
} }
@ -181,13 +167,13 @@ hr{
padding:0; padding:0;
} }
footer{ // footer{
color:#999; // color:#999;
p { // p {
margin-bottom:12px; // margin-bottom:12px;
} // }
} // }
#content img{ #content img{
max-width:100%; max-width:100%;
@ -225,36 +211,35 @@ footer{
display:inline-block; 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{ // .last{
float:right; // margin-bottom:0;
width:40%; // }
display:block;
margin:0 0 24px 24px;
padding:24px;
background:#f3f6f6;
border:solid 1px #e1e4e5;
p, ul, dl{ // .sidebar-title{
font-size:90%; // display:block;
} // font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
// font-weight:bold;
.last{ // background:#e1e4e5;
margin-bottom:0; // padding:6px 12px;
} // margin:-24px;
// margin-bottom:24px;
.sidebar-title{ // font-size:100%;
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{ #content .highlighted{
@ -278,64 +263,6 @@ span[id*='MathJax-Span']{
text-align:center; 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 // 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{ .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{