<html>
  <body>
    <header class="fixed-header">
      <span>Fixed header</span>
    </header>
    <main>
      <article class="content">
        <h1 class="heading">Jabberwocky</h1>

        <p>Lewis Carroll (1832-1898)</p>

        <p>‘Twas brillig<sup><a class="footnote" href="#footnote-1" id="footnote-ref-1">1</a></sup>, and the slithy<sup><a class="footnote" href="#footnote-2" id="footnote-ref-2">2</a></sup> toves<sup><a class="footnote" href="#footnote-3" id="footnote-ref-3">3</a></sup><br />
Did gyre<sup><a class="footnote" href="#footnote-4" id="footnote-ref-4">4</a></sup> and gimble<sup><a class="footnote" href="#footnote-5" id="footnote-ref-5">5</a></sup> in the wabe<sup><a class="footnote" href="#footnote-6" id="footnote-ref-6">6</a></sup>;<br />
All mimsy<sup><a class="footnote" href="#footnote-7" id="footnote-ref-7">7</a></sup> were the borogoves<sup><a class="footnote" href="#footnote-8" id="footnote-ref-8">8</a></sup>,<br />
And the mome<sup><a class="footnote" href="#footnote-9" id="footnote-ref-9">9</a></sup> raths<sup><a class="footnote" href="#footnote-10" id="footnote-ref-10">10</a></sup> outgrabe<sup><a class="footnote" href="#footnote-11" id="footnote-ref-11">11</a></sup>.</p>

        <p>“Beware the Jabberwock, my son!<br />
        The jaws that bite, the claws that catch!<br />
        Beware the Jubjub bird, and shun<br />
        The frumious Bandersnatch!”</p>

        <p>He took his vorpal sword in hand:<br />
        Long time the manxome foe he sought–<br />
        So rested he by the Tumtum tree,<br />
        And stood awhile in thought.</p>

        <p>And, as in uffish thought he stood,<br />
        The Jabberwock, with eyes of flame,<br />
        Came whiffling through the tulgey wood,<br />
        And burbled as it came!</p>

        <p>One two! One two! And through and through<br />
        The vorpal blade went snicker-snack!<br />
        He left it dead, and with its head<br />
        He went galumphing back.</p>

        <p>“And hast thou slain the Jabberwock?<br />
        Come to my arms, my beamish boy!<br />
        O frabjous day! Callooh! Callay!”<br />
        He chortled in his joy.</p>

        <p>‘Twas brillig, and the slithy toves<br />
        Did gyre and gimble in the wabe;<br />
        All mimsy were the borogoves,<br />
        And the mome raths outgrabe.</p>


        <h3>Footnotes</h3>
        <ol class="footnotes">
          <li id="footnote-1">
            “Bryllig”: (derived from the verb to bryl or broil). “the time of broiling dinner, i.e. the close of the afternoon”<a class="footnote-ref" href="#footnote-ref-1">↩</a>
          </li>
          <li id="footnote-2">
            “Slythy”: (compounded of ‘slimy’ and ‘lithe’). “smooth and active”<a class="footnote-ref" href="#footnote-ref-2">↩</a>
          </li>
          <li id="footnote-3">
            “Tove”: a species of Badger. They had smooth white hair, long hind legs, and short horns like a stag. lived chiefly on cheese.<a class="footnote-ref" href="#footnote-ref-3">↩</a>
          </li>
          <li id="footnote-4">
            “Gyre”: verb (derived from ‘gyaour’ or ‘giaour’: “a dog”) “to scratch like a dog.”<a class="footnote-ref" href="#footnote-ref-4">↩</a>
          </li>
          <li id="footnote-5">
            “Gymble”: (whence ‘gimblet’) to screw out holes in anything<a class="footnote-ref" href="#footnote-ref-5">↩</a>
          </li>
          <li id="footnote-6">
            “Wabe”: (derived from the verb to ‘swab’ or ‘soak’) “the side of a hill” (from it’s being soaked by the rain)<a class="footnote-ref" href="#footnote-ref-6">↩</a>
          </li>
          <li id="footnote-7">
            “Mimsy”: (whence ‘mimserable’ and ‘miserable’) ” unhappy”<a class="footnote-ref" href="#footnote-ref-7">↩</a>
          </li>
          <li id="footnote-8">
            “Borogove”: an extinct kind of Parrot. They had no wings, beaks turned up, made their nests under sun-dials and lived on veal.<a class="footnote-ref" href="#footnote-ref-8">↩</a>
          </li>
          <li id="footnote-9">
            “Mome”: (hence ‘solemome’ ‘solemone’ and ‘solemn’) “grave”<a class="footnote-ref" href="#footnote-ref-9">↩</a>
          </li>
          <li id="footnote-10">
            “Rath”: a species of land turtle. Head erect, mouth like a shark, the front [crossed out] fore, legs curved out so that the animal walked on its knees, smooth green body, lived on swallows and oysters.<a class="footnote-ref" href="#footnote-ref-10">↩</a>
          </li>
          <li id="footnote-11">
            “Outgrabe”: past tense of the verb to ‘outgribe’ (it is connected with the old verb to ‘grike’ or ‘shrike’, from which are derived “shriek” and “creak.”) “squeaked”<a class="footnote-ref" href="#footnote-ref-11">↩</a>
          </li>
        </ol>
      </article>

      <footer class="footer">
        <p>Footer</p>
      </footer>
    </main>
  </body>
</html>
/*
 * NOTE: this demonstrates the problem.
 *   see https://codepen.io/jlewin/pen/vYNqPpL?editors=1100
 *   for the solution!
 *
 * https://jacklewin.com/blog/til-05-fixed-header-overlap-anchor-tags/
 *
 */


/*
 * relevant
 */
:root {
  --header-height: 60px;
}

.fixed-header {
  position: fixed;
  height: var(--header-height);
}

/*
 * other styles
 */
:root {
  --primary: #607d8b;
  --primary-dark: #212121;
  --primary-light: #eceff1;
}

body {
  margin: 0;
  color: var(--primary-dark);
  background-color: var(--primary-light);
}

.fixed-header,
.content,
.footer {
  padding: 0 2rem;
}

.fixed-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom: var(--primary-dark);
  background-color: var(--primary);
}

.content {
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

.footnote,
.footnote-ref {
  font-size: 0.7rem;
  margin-left: 2px;
}

.heading {
  margin-top: calc(1.5 * var(--header-height));
}

.footer {
  margin-top: calc(5 * var(--header-height));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.