Commit f61a6121 authored by Marco Cavalli's avatar Marco Cavalli
Browse files

style: update CSS for improved layout and readability, including TOC... 

style: update CSS for improved layout and readability, including TOC adjustments and flexbox enhancements
parent 33f0d3cb

public/styling.css

+351 −205
Original line number Diff line number Diff line
@@ -21,14 +21,11 @@ body { 
}



#TOC {

  top: 0;

  top: 0;

  left: 0;

  height: 100%;

  width: 275px;

  resize: horizontal;

  padding-right: 15px;

  position: fixed;

  width: unset;

  position: relative;

  background-color: rgba(100, 100, 100, 0.6);

  overflow-y: auto;

  scrollbar-width: none;
@@ -45,6 +42,10 @@ body { 
  text-overflow: ellipsis;

}



#editor {

  padding: 0 2rem;

}



@media screen and (max-width: 600px) {

  #TOC {

    width: 100%;
@@ -52,6 +53,43 @@ body { 
  }

}



/* BORROWED FROM HERE: https://stackoverflow.com/questions/28767221/flexbox-resizing */



flex {

  display: flex;

  overflow: hidden;

}



flex.h {

  flex-direction: row;

}



flex.v {

  flex-direction: column;

}



flex-item {

  overflow: auto;

}



flex > flex-resizer {

  flex: 0 0 10px;

  /* background: white; */

  background-color: #aaa;

  background-repeat: no-repeat;

  background-position: center;

}



flex.h > flex-resizer {

  cursor: ew-resize;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");

}



flex.v > flex-resizer {

  cursor: ns-resize;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>");

}



/* HTML5 display definitions

  ========================================================================== */
@@ -472,23 +510,27 @@ th { 
  box-sizing: border-box;

}

body {

  font-family: -apple-system, BlinkMacSystemFont,"Times New Roman", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  font-family: -apple-system, BlinkMacSystemFont, "Times New Roman", "Segoe UI",

    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",

    "Segoe UI Emoji", "Segoe UI Symbol";

  font-size: 10pt;

  line-height: 1.6;

  /* margin: auto; */

  /* max-width: 920px;

    min-width: 360px; */

  max-width: 75%;

  left: 275px;

  position: relative;

  padding: 2rem;

  word-wrap: break-word;

}



/* Headers

  ========================================================================== */



h1, h2, h3, h4, h5, h6 {

h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: 600;

  line-height: 1.25;

  margin-bottom: 16px;
@@ -505,7 +547,7 @@ h2 { 
  border-bottom: 1px solid #eee;

}

h3 {

  font-size: 1.25em;;

  font-size: 1.25em;

}

h4 {

  font-size: 1em;
@@ -517,12 +559,18 @@ h6 { 
  font-size: 0.85em;

  color: #777;

}

h1 tt, h1 code,

h2 tt, h2 code,

h3 tt, h3 code,

h4 tt, h4 code,

h5 tt, h5 code,

h6 tt, h6 code {

h1 tt,

h1 code,

h2 tt,

h2 code,

h3 tt,

h3 code,

h4 tt,

h4 code,

h5 tt,

h5 code,

h6 tt,

h6 code {

  font-size: inherit;

}

body > h2:first-child {
@@ -561,11 +609,14 @@ a { 
  color: #4078c0;

  text-decoration: none;

}

a:active, a:hover {

a:active,

a:hover {

  outline: 0;

  text-decoration: underline;

}

sup, sub, a.footnote {

sup,

sub,

a.footnote {

  font-size: 75%;

  line-height: 0;

  position: relative;
@@ -581,22 +632,31 @@ sup { 
/* Block Content

  ========================================================================== */



ol, ul {

ol,

ul {

  margin-bottom: 16px;

  margin-top: 0;

  padding-left: 2em;

}

p, blockquote, table, pre {

p,

blockquote,

table,

pre {

  margin: 15px 0;

}

ul, ol {

ul,

ol {

  padding-left: 2em;

}

ul.no-list, ol.no-list {

ul.no-list,

ol.no-list {

  padding: 0;

  list-style-type: none;

}

ul ul, ul ol, ol ol, ol ul {

ul ul,

ul ol,

ol ol,

ol ul {

  margin-top: 0;

  margin-bottom: 0;

}
@@ -604,13 +664,15 @@ li > p { 
  margin-top: 16px;

}

li + li {

  margin-top: 0.25em;;

  margin-top: 0.25em;

}

ol li ul:first-of-type {

  margin-top: 0;

}

hr {

  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;

  background: transparent

    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC)

    repeat-x 0 0;

  border: 0 none;

  color: #ccc;

  height: 4px;
@@ -657,7 +719,7 @@ dl dd > :last-child { 
  margin-bottom: 0;

}

blockquote {

  border-left: 4px solid #DDD;

  border-left: 4px solid #ddd;

  padding: 0 15px;

  color: #777;

}
@@ -702,12 +764,13 @@ img { 
/* Code

  ========================================================================== */



code, tt {

code,

tt {

  padding: 0;

  padding-top: 0.2em;

  padding-bottom: 0.2em;

  margin: 0;

  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

  font-size: 10pt;

  background-color: rgba(0, 0, 0, 0.04);

  border-radius: 3px;
@@ -729,47 +792,121 @@ pre { 
  overflow: auto;

  border-radius: 3px;

}

pre code, pre tt {

pre code,

pre tt {

  background-color: transparent;

  border: 0;

}

code::before, code::after,

tt::before, tt::after {

code::before,

code::after,

tt::before,

tt::after {

  letter-spacing: -0.2em;

  content: "\00a0";

}

pre code::before, pre code::after, pre tt::before, pre tt::after {

pre code::before,

pre code::after,

pre tt::before,

pre tt::after {

  content: normal;

}

code > span.kw { color: #a71d5d; font-weight: normal; } /* Keyword */

code > span.dt { color: inherit; } /* DataType */

code > span.dv { color: #0086b3; } /* DecVal */

code > span.bn { color: #0086b3; } /* BaseN */

code > span.fl { color: #0086b3; } /* Float */

code > span.ch { color: #183691; } /* Char */

code > span.st { color: #183691; } /* String */

code > span.co { color: #969896; font-style: normal; } /* Comment */

code > span.ot { color: #a71d5d; } /* Other */

code > span.al { color: #ff0000; } /* Alert */

code > span.fu { color: #795da3; } /* Function */

code > span.er { color: #ff0000; font-weight: bold; } /* Error */

code > span.wa { color: #969896; font-weight: bold; font-style: italic; } /* Warning */

code > span.cn { color: #880000; } /* Constant */

code > span.sc { color: #183691; } /* SpecialChar */

code > span.vs { color: #183691; } /* VerbatimString */

code > span.ss { color: #bb6688; } /* SpecialString */

code > span.im { } /* Import */

code > span.va { color: #19177c; } /* Variable */

code > span.cf { color: #a71d5d; font-weight: normal; } /* ControlFlow */

code > span.op { color: #666666; } /* Operator */

code > span.bu { } /* BuiltIn */

code > span.ex { } /* Extension */

code > span.pp { color: #bc7a00; } /* Preprocessor */

code > span.at { color: #0086b3; } /* Attribute */

code > span.do { color: #ba2121; font-style: italic; } /* Documentation */

code > span.an { color: #969896; font-weight: bold; font-style: italic; } /* Annotation */

code > span.cv { color: #969896; font-weight: bold; font-style: italic; } /* CommentVar */

code > span.in { color: #969896; font-weight: bold; font-style: italic; } /* Information */

code > span.kw {

  color: #a71d5d;

  font-weight: normal;

} /* Keyword */

code > span.dt {

  color: inherit;

} /* DataType */

code > span.dv {

  color: #0086b3;

} /* DecVal */

code > span.bn {

  color: #0086b3;

} /* BaseN */

code > span.fl {

  color: #0086b3;

} /* Float */

code > span.ch {

  color: #183691;

} /* Char */

code > span.st {

  color: #183691;

} /* String */

code > span.co {

  color: #969896;

  font-style: normal;

} /* Comment */

code > span.ot {

  color: #a71d5d;

} /* Other */

code > span.al {

  color: #ff0000;

} /* Alert */

code > span.fu {

  color: #795da3;

} /* Function */

code > span.er {

  color: #ff0000;

  font-weight: bold;

} /* Error */

code > span.wa {

  color: #969896;

  font-weight: bold;

  font-style: italic;

} /* Warning */

code > span.cn {

  color: #880000;

} /* Constant */

code > span.sc {

  color: #183691;

} /* SpecialChar */

code > span.vs {

  color: #183691;

} /* VerbatimString */

code > span.ss {

  color: #bb6688;

} /* SpecialString */

code > span.im {

} /* Import */

code > span.va {

  color: #19177c;

} /* Variable */

code > span.cf {

  color: #a71d5d;

  font-weight: normal;

} /* ControlFlow */

code > span.op {

  color: #666666;

} /* Operator */

code > span.bu {

} /* BuiltIn */

code > span.ex {

} /* Extension */

code > span.pp {

  color: #bc7a00;

} /* Preprocessor */

code > span.at {

  color: #0086b3;

} /* Attribute */

code > span.do {

  color: #ba2121;

  font-style: italic;

} /* Documentation */

code > span.an {

  color: #969896;

  font-weight: bold;

  font-style: italic;

} /* Annotation */

code > span.cv {

  color: #969896;

  font-weight: bold;

  font-style: italic;

} /* CommentVar */

code > span.in {

  color: #969896;

  font-weight: bold;

  font-style: italic;

} /* Information */



/* Print

  ========================================================================== */
@@ -778,7 +915,11 @@ code > span.in { color: #969896; font-weight: bold; font-style: italic; } /* Inf 
  body {

    background: #fff;

  }

  img, pre, blockquote, table, figure {

  img,

  pre,

  blockquote,

  table,

  figure {

    page-break-inside: avoid;

  }

  body {
@@ -788,7 +929,7 @@ code > span.in { color: #969896; font-weight: bold; font-style: italic; } /* Inf 
  code {

    background-color: #fff;

    color: #333 !important;

    padding: 0 .2em;

    padding: 0 0.2em;

    border: 1px solid #dedede;

  }

  pre {
@@ -813,7 +954,12 @@ code > span.in { color: #969896; font-weight: bold; font-style: italic; } /* Inf 
  h2::selection {

    background-color: rgba(90, 182, 224, 0.3);

  }

  h3::selection, h4::selection, h5::selection, h6::selection, li::selection, ol::selection {

  h3::selection,

  h4::selection,

  h5::selection,

  h6::selection,

  li::selection,

  ol::selection {

    background-color: rgba(133, 201, 232, 0.3);

  }

  code::selection {
@@ -830,7 +976,9 @@ code > span.in { color: #969896; font-weight: bold; font-style: italic; } /* Inf 
  .inverted a::selection {

    background-color: rgba(255, 230, 102, 0.6);

  }

  td::selection, th::selection, caption::selection {

  td::selection,

  th::selection,

  caption::selection {

    background-color: rgba(180, 237, 95, 0.5);

  }

}
@@ -840,8 +988,6 @@ code > span.in { color: #969896; font-weight: bold; font-style: italic; } /* Inf 
      background-color: rgb(255,0,0);

  } */







/* CUSTOM CSS

========================================================================== */