JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<nav class="crumbs">
  <ol>
    <li><a class="title" href="#Home">textbook-next</a></li>
    <li><a class="breadcrumb" href="#Science">Science</a></li>
    <li><a class="breadcrumb active">Physics</a></li>
  </ol>
</nav>
<div class="adoc">
  <h1>Physics 101</h1>
  <div id="toc" class="toc">
    <div id="toctitle">Table of Contents</div>
    <ul class="sectlevel1">
    <li><a href="#_hi_1">HI 1</a></li>
    <li><a href="#_hi_2">HI 2</a>
    <ul class="sectlevel2">
    <li><a href="#_hi_2_1">HI 2.1</a></li>
    </ul>
    </li>
    <li><a href="#_no">NO!!!</a></li>
    </ul>
  </div>
  <div id="preamble">
    <div class="sectionbody">
    <div class="paragraph">
    <p>Check out <a href="./topics/physics/refraction/">this cool page about refraction</a>.</p>
    </div>
    <div class="paragraph">
    <p><strong>Then fuck off.</strong></p>
    </div>
    </div>
  </div>
</div>

SCSS

$primary_color: #f99;

body {
  font-family: sans-serif;
  margin: 0;
}

.crumbs {
  background-color: #333333;
  padding: 0.5em;
  border-bottom: solid 2px $primary_color;
  ol {
    list-style-type: none;
    li {
      display: inline-block;
    }
    
  }
  a {
    color: $primary_color;
    text-decoration: none;
  }
  a:visited {
    /* color: #b5f; */
    color: $primary_color;
  }
  a::after {
    content: '>';
    color: white;
    margin: 0 0.3em 0 0.5em;
    display: inline-block;
    font-weight: normal;
    font-size: medium;
  }
  a:last-child::after {
    content: '';
  }
  a.active {
    color: white;
    /* font-weight: bold; */
  }
  
  .title {
    text-decoration: none;
    font-weight: bold;
    font-size: 130%;
  }
}