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

feat: added resize capability to the lateral toc

parent 4ec587dd

editing.html

+276 −161
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>

<html

  xmlns="http://www.w3.org/1999/xhtml"

  lang="$lang$"

  xml:lang="$lang$"

  $if(dir)$

  dir="$dir$"

  $endif$

>

  <head>

    <meta charset="utf-8" />

    <meta name="generator" content="pandoc" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1.0, user-scalable=yes"

    />

    $for(author-meta)$

    <meta name="author" content="$author-meta$" />

$endfor$

$if(date-meta)$

    $endfor$ $if(date-meta)$

    <meta name="dcterms.date" content="$date-meta$" />

$endif$

$if(keywords)$

    $endif$ $if(keywords)$

    <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />

$endif$

$if(description-meta)$

    $endif$ $if(description-meta)$

    <meta name="description" content="$description-meta$" />

    $endif$

    <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
@@ -22,26 +29,31 @@ $endif$ 
    </style>

    $for(css)$

    <link rel="stylesheet" href="../$css$" />

$endfor$

$for(header-includes)$

  $header-includes$

$endfor$

$if(math)$

    $endfor$ $for(header-includes)$ $header-includes$ $endfor$ $if(math)$

    $if(mathjax)$

    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

$endif$

  $math$

$endif$

    $endif$ $math$ $endif$

    <script src="dist/bundle.js" defer></script>

    <!--[if lt IE 9]>

      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

    <![endif]-->

  </head>

  <body>

  <button style="position: fixed; bottom: 10px; right: 10px;" onclick="toggleStyles()">Toggle Background highlighting</button>

  <button style="position: fixed; bottom: 50px; right: 10px;" id="download_btn">Download HTML</button>

  <label class="switch">Editing

    <input type="checkbox" id="editing">

    <button

      style="position: fixed; bottom: 10px; right: 10px"

      onclick="toggleStyles()"

    >

      Toggle Background highlighting

    </button>

    <button

      style="position: fixed; bottom: 50px; right: 10px"

      id="download_btn"

    >

      Download HTML

    </button>

    <label class="switch"

      >Editing

      <input type="checkbox" id="editing" />

      <span class="slider round"></span>

    </label>

    <style>
@@ -71,8 +83,8 @@ $endif$ 
        right: 0;

        bottom: 0;

        background-color: #ccc;

      -webkit-transition: .4s;

      transition: .4s;

        -webkit-transition: 0.4s;

        transition: 0.4s;

      }



      .slider:before {
@@ -83,16 +95,16 @@ $endif$ 
        left: 4px;

        bottom: 4px;

        background-color: white;

      -webkit-transition: .4s;

      transition: .4s;

        -webkit-transition: 0.4s;

        transition: 0.4s;

      }



      input:checked + .slider {

      background-color: #2196F3;

        background-color: #2196f3;

      }



      input:focus + .slider {

      box-shadow: 0 0 1px #2196F3;

        box-shadow: 0 0 1px #2196f3;

      }



      input:checked + .slider:before {
@@ -115,34 +127,28 @@ $endif$ 
      let styleToggle = false;



      function toggleStyles() {

          const links = document.getElementsByTagName('link'); // link[0] should be styiling.css 

            if (links[1].getAttribute('rel') === 'stylesheet') {

        const links = document.getElementsByTagName("link"); // link[0] should be styiling.css

        if (links[1].getAttribute("rel") === "stylesheet") {

          if (styleToggle) {

                    links[1].href = 'API.css';

            links[1].href = "API.css";

          } else {

                    links[1].href = 'background_highlight.css';

            links[1].href = "background_highlight.css";

          }

        }

        styleToggle = !styleToggle;

      }

    </script>



$for(include-before)$

$include-before$

$endfor$

$if(title)$

    $for(include-before)$ $include-before$ $endfor$ $if(title)$

    <header id="title-block-header">

      <h1 class="title">$title$</h1>

      $if(subtitle)$

      <p class="subtitle">$subtitle$</p>

$endif$

$for(author)$

      $endif$ $for(author)$

      <p class="author">$author$</p>

$endfor$

$if(date)$

      $endfor$ $if(date)$

      <p class="date">$date$</p>

$endif$

$if(abstract)$

      $endif$ $if(abstract)$

      <div class="abstract">

        <div class="abstract-title">$abstract-title$</div>

        $abstract$
@@ -150,18 +156,127 @@ $abstract$ 
      $endif$

    </header>

    $endif$

    <flex

      class="h"

      style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"

    >

      <flex-item style="flex: 1">

        <nav id="$idprefix$TOC" role="doc-toc">

          $if(toc-title)$

          <h2 id="$idprefix$toc-title">$toc-title$</h2>

          $endif$

<ul><li><h1><a href="0--1.html">ETSI title</a></h1></li></ul>

          <ul>

            <li>

              <h1><a href="0--1.html">ETSI title</a></h1>

            </li>

          </ul>

          $table-of-contents$

        </nav>

      </flex-item>

      <flex-resizer style="cursor: col-resize"></flex-resizer

      ><flex-item style="flex: 5">

        <div id="editor">

$body$

$for(include-after)$

$include-after$

$endfor$

          $body$ $for(include-after)$ $include-after$ $endfor$

        </div>

      </flex-item>

    </flex>

    <script>

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

      function manageResize(md, sizeProp, posProp) {

        var r = md.target;



        var prev = r.previousElementSibling;

        var next = r.nextElementSibling;

        if (!prev || !next) {

          return;

        }



        md.preventDefault();



        var prevSize = prev[sizeProp];

        var nextSize = next[sizeProp];

        var sumSize = prevSize + nextSize;

        var prevGrow = Number(prev.style.flexGrow);

        var nextGrow = Number(next.style.flexGrow);

        var sumGrow = prevGrow + nextGrow;

        var lastPos = md[posProp];



        function onMouseMove(mm) {

          var pos = mm[posProp];

          var d = pos - lastPos;

          prevSize += d;

          nextSize -= d;

          if (prevSize < 0) {

            nextSize += prevSize;

            pos -= prevSize;

            prevSize = 0;

          }

          if (nextSize < 0) {

            prevSize += nextSize;

            pos += nextSize;

            nextSize = 0;

          }



          var prevGrowNew = sumGrow * (prevSize / sumSize);

          var nextGrowNew = sumGrow * (nextSize / sumSize);



          prev.style.flexGrow = prevGrowNew;

          next.style.flexGrow = nextGrowNew;



          lastPos = pos;

        }



        function onMouseUp(mu) {

          // Change cursor to signal a state's change: stop resizing.

          const html = document.querySelector("html");

          html.style.cursor = "default";



          if (posProp === "pageX") {

            r.style.cursor = "ew-resize";

          } else {

            r.style.cursor = "ns-resize";

          }



          window.removeEventListener("mousemove", onMouseMove);

          window.removeEventListener("mouseup", onMouseUp);

        }



        window.addEventListener("mousemove", onMouseMove);

        window.addEventListener("mouseup", onMouseUp);

      }



      function setupResizerEvents() {

        document.body.addEventListener("mousedown", function (md) {

          // Used to avoid cursor's flickering

          const html = document.querySelector("html");



          var target = md.target;

          if (target.nodeType !== 1 || target.tagName !== "FLEX-RESIZER") {

            return;

          }

          var parent = target.parentNode;

          var h = parent.classList.contains("h");

          var v = parent.classList.contains("v");

          if (h && v) {

            return;

          } else if (h) {

            // Change cursor to signal a state's change: begin resizing on H.

            target.style.cursor = "col-resize";

            html.style.cursor = "col-resize"; // avoid cursor's flickering



            // use offsetWidth versus scrollWidth (and clientWidth) to avoid splitter's jump on resize when a flex-item content overflow (overflow: auto).

            manageResize(md, "offsetWidth", "pageX");

          } else if (v) {

            // Change cursor to signal a state's change: begin resizing on V.

            target.style.cursor = "row-resize";

            html.style.cursor = "row-resize"; // avoid cursor's flickering



            manageResize(md, "offsetHeight", "pageY");

          }

        });

      }



      setupResizerEvents();

    </script>

  </body>

</html>

official.html

+123 −12
Original line number Diff line number Diff line
@@ -65,6 +65,12 @@ 
      $endif$

    </header>

    $endif$



    <flex

      class="h"

      style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"

    >

      <flex-item style="flex: 1">

        <nav id="$idprefix$TOC" role="doc-toc">

          $if(toc-title)$

          <h2 id="$idprefix$toc-title">$toc-title$</h2>
@@ -76,6 +82,111 @@ 
          </ul>

          $table-of-contents$

        </nav>

    <div id="editor">$body$ $for(include-after)$ $include-after$ $endfor$</div>

      </flex-item>

      <flex-resizer style="cursor: col-resize"></flex-resizer

      ><flex-item style="flex: 5">

        <div id="editor">

          $body$ $for(include-after)$ $include-after$ $endfor$

        </div>

      </flex-item>

    </flex>

    <script>

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

      function manageResize(md, sizeProp, posProp) {

        var r = md.target;



        var prev = r.previousElementSibling;

        var next = r.nextElementSibling;

        if (!prev || !next) {

          return;

        }



        md.preventDefault();



        var prevSize = prev[sizeProp];

        var nextSize = next[sizeProp];

        var sumSize = prevSize + nextSize;

        var prevGrow = Number(prev.style.flexGrow);

        var nextGrow = Number(next.style.flexGrow);

        var sumGrow = prevGrow + nextGrow;

        var lastPos = md[posProp];



        function onMouseMove(mm) {

          var pos = mm[posProp];

          var d = pos - lastPos;

          prevSize += d;

          nextSize -= d;

          if (prevSize < 0) {

            nextSize += prevSize;

            pos -= prevSize;

            prevSize = 0;

          }

          if (nextSize < 0) {

            prevSize += nextSize;

            pos += nextSize;

            nextSize = 0;

          }



          var prevGrowNew = sumGrow * (prevSize / sumSize);

          var nextGrowNew = sumGrow * (nextSize / sumSize);



          prev.style.flexGrow = prevGrowNew;

          next.style.flexGrow = nextGrowNew;



          lastPos = pos;

        }



        function onMouseUp(mu) {

          // Change cursor to signal a state's change: stop resizing.

          const html = document.querySelector("html");

          html.style.cursor = "default";



          if (posProp === "pageX") {

            r.style.cursor = "ew-resize";

          } else {

            r.style.cursor = "ns-resize";

          }



          window.removeEventListener("mousemove", onMouseMove);

          window.removeEventListener("mouseup", onMouseUp);

        }



        window.addEventListener("mousemove", onMouseMove);

        window.addEventListener("mouseup", onMouseUp);

      }



      function setupResizerEvents() {

        document.body.addEventListener("mousedown", function (md) {

          // Used to avoid cursor's flickering

          const html = document.querySelector("html");



          var target = md.target;

          if (target.nodeType !== 1 || target.tagName !== "FLEX-RESIZER") {

            return;

          }

          var parent = target.parentNode;

          var h = parent.classList.contains("h");

          var v = parent.classList.contains("v");

          if (h && v) {

            return;

          } else if (h) {

            // Change cursor to signal a state's change: begin resizing on H.

            target.style.cursor = "col-resize";

            html.style.cursor = "col-resize"; // avoid cursor's flickering



            // use offsetWidth versus scrollWidth (and clientWidth) to avoid splitter's jump on resize when a flex-item content overflow (overflow: auto).

            manageResize(md, "offsetWidth", "pageX");

          } else if (v) {

            // Change cursor to signal a state's change: begin resizing on V.

            target.style.cursor = "row-resize";

            html.style.cursor = "row-resize"; // avoid cursor's flickering



            manageResize(md, "offsetHeight", "pageY");

          }

        });

      }



      setupResizerEvents();

    </script>

  </body>

</html>

styling.css

+840 −694
Original line number Diff line number Diff line
@@ -24,10 +24,8 @@ html { 
  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;
@@ -44,6 +42,10 @@ html { 
  text-overflow: ellipsis;

}



#editor {

  padding: 0 2rem;

}



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

  #TOC {

    width: 100%;
@@ -51,6 +53,43 @@ html { 
  }

}



/* 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

  ========================================================================== */
@@ -471,23 +510,27 @@ html { 
  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;
@@ -504,7 +547,7 @@ html { 
  border-bottom: 1px solid #eee;

}

h3 {

    font-size: 1.25em;;

  font-size: 1.25em;

}

h4 {

  font-size: 1em;
@@ -516,12 +559,18 @@ html { 
  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 {
@@ -560,11 +609,14 @@ html { 
  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;
@@ -580,22 +632,31 @@ html { 
/* 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;

}
@@ -603,13 +664,15 @@ html { 
  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;
@@ -656,7 +719,7 @@ html { 
  margin-bottom: 0;

}

blockquote {

    border-left: 4px solid #DDD;

  border-left: 4px solid #ddd;

  padding: 0 15px;

  color: #777;

}
@@ -701,12 +764,13 @@ html { 
/* 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;
@@ -728,47 +792,121 @@ html { 
  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

  ========================================================================== */
@@ -777,7 +915,11 @@ html { 
  body {

    background: #fff;

  }

    img, pre, blockquote, table, figure {

  img,

  pre,

  blockquote,

  table,

  figure {

    page-break-inside: avoid;

  }

  body {
@@ -787,7 +929,7 @@ html { 
  code {

    background-color: #fff;

    color: #333 !important;

      padding: 0 .2em;

    padding: 0 0.2em;

    border: 1px solid #dedede;

  }

  pre {
@@ -812,7 +954,12 @@ html { 
  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 {
@@ -829,7 +976,9 @@ html { 
  .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);

  }

}
@@ -839,8 +988,6 @@ html { 
      background-color: rgb(255,0,0);

  } */







/* CUSTOM CSS

========================================================================== */
@@ -849,4 +996,3 @@ html { 
.TAN > div:first-child {

  text-wrap: nowrap;

}
 
  
 No newline at end of file

template.html

+276 −161

File changed.

Preview size limit exceeded, changes collapsed.