~javiljoen/yatte

d96980e8b7eb93a62256371d16b4513c66022b63 — JA Viljoen 9 months ago 75b62ac
Move TOC to top horizontal navbar in docs

The CSS and template have been simplified considerably,
and the footer now stays at the bottom of the page again.
(The latter behaviour got broken by the introduction of the
`div.measure` in the previous commit.)
2 files changed, 33 insertions(+), 68 deletions(-)

M docs/static/style.css
M docs/templates/page.html
M docs/static/style.css => docs/static/style.css +18 -47
@@ 7,56 7,30 @@ html {
  --cream:     #fdf6e3;
}

* { box-sizing: border-box; }

body {
  font: 100%/1.5 sans-serif;
  color: var(--blackish);
  background: var(--yellowish);
  margin: 0;

  display: flex;
  flex-wrap: wrap;
}

#toc {
  flex-grow: 1;
  padding-top: 4.75rem;
  padding-left:    1ch;
  padding-right:   4ch;
  background: var(--offyellow);
}

main {
  padding: 0;
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  padding-top:    2rem;
  padding-bottom: 2rem;

  flex-basis: 0;
  flex-grow: 999;
  min-width: 70%;
  padding-left:  2ch;
  padding-right: 2ch;
}

.measure {
  max-width: 60ch;
}

article {
  margin-bottom: auto;
  padding-top:   2rem;
nav {
  background: var(--offyellow);
  padding: .25rem 2ch;
}

footer {
  margin-top:   2rem;
article, footer {
  padding: 0 2ch;
  max-width: 60ch;
}
article { margin-bottom: auto; }
footer  { margin-top:    2rem; }

section {
  margin-top: 3rem;
}
section { margin-top: 3rem; }

.topborder { border-top: var(--blackish) solid 1px; }



@@ 75,6 49,12 @@ footer p {

ul { padding-left: 2ch; }

nav ul { padding-left: 0; }
nav li {
  display: inline;
  padding-right: 2ch;
}

dl {
  display: grid;
  grid-template-columns: max-content;


@@ 101,17 81,8 @@ a         { color: var(--blackish); }
a:visited { color: var(--med-grey); }
a:hover   { text-decoration: none;  }

#toc h2 {
  margin-top:    1rem;
  margin-bottom: 1rem;
}
#toc li {
  margin-bottom: .25rem;
}
#toc a {
  color: var(--blackish);
  text-decoration: none;
}
nav a         { text-decoration: none; }
nav a:visited { color: var(--blackish); }

pre {
  background: var(--cream);

M docs/templates/page.html => docs/templates/page.html +15 -21
@@ 8,30 8,24 @@
</head>
<body>

  <div id="toc">
    <nav><h2>Contents</h2>
    <ul>
      <li><a href="index.html">yatte docs</a></li>
      <li><a href="quickstart.html">Quickstart</a></li>
      <li><a href="installation.html">Installation</a></li>
      <li><a href="manual.html">Manual</a></li>
      <li><a href="development.html">Development</a></li>
    </ul>
    </nav>
  </div>
<nav>
  <ul>
    <li><a href="index.html"><b>⇱</b></a></li>
    <li><a href="quickstart.html">Quickstart</a></li>
    <li><a href="installation.html">Installation</a></li>
    <li><a href="manual.html">Manual</a></li>
    <li><a href="development.html">Development</a></li>
  </ul>
</nav>

  <main>
    <div class="measure">
{{{  content  }}}

    <footer>
      <p>Documentation © {{ date.year }} JA Viljoen and licensed under
        <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p>
      <p>Site generated using Python and <a href="https://pypi.org/project/chevron/">Chevron</a>
        on {{ date }}.</p>
    </footer>
    </div>
  </main>
<footer>
  <p>Documentation © {{ date.year }} JA Viljoen and licensed under
    <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p>
  <p>Site generated using Python and <a href="https://pypi.org/project/chevron/">Chevron</a>
    on {{ date }}.</p>
</footer>

</body>
</html>