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 {
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) {

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 {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
@ -10,8 +7,8 @@ html {
}
body {
background:#edf0f2;
color:#404040;
background: $color-background-outside; // Outside Background
color: $color-text;
font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
font-weight: normal;
margin: 0;
@ -20,14 +17,30 @@ body {
}
#content {
background:#fcfcfc;
background: $color-background; // Content Background
height: 100%;
margin-left:300px;
max-width:1200px;
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 {
font-size:16px;
line-height:24px;
@ -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%;
@ -60,32 +72,33 @@ code {
}
blockquote {
background-color: #F0F0F0;
border-left:5px solid #CCCCCC;
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,16 +111,6 @@ 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;
@ -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{