JSFiddle - React, Tailwind, and code Playground

by jeremydr2

HTML

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Jeremy Richards' personal website">
  <meta name="author" content="Jeremy Richards">

  <title>{{ page.title }}</title>

  <link rel="icon" type="image/svg+xml" href="j.svg">
  <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
</head>

<body>

<section class="top banner">
  <h1><a href="https://jeremy.richards.dev">
  Jeremy<wbr>.Richards<wbr>.dev
  </a></h1>
  <nav class="links">

    <a href="https://jeremy.richards.dev/cv">
    Resume
    </a>
    <a href="https://jeremy.richards.dev/contact">
    Contact
    </a>
    <a href="https://jeremy.richards.dev/kb">
    Knowledge Base
    </a>
    <a href="https://jeremy.richards.dev/links">
    Links
    </a>
  </nav>
</section>
<hr>

<div class="box content">
{{ content }}
</div>

<hr>
<section class="bottom banner">
  <p>
    A website to showcase how little I know about web dev.
  </p>
  <!-- If I remove the nav, then flex-grow prevents "About" from being right-justified -->
  <nav class="links">
    <!-- Empty element to move "About" to the end of the box -->
    <a></a>
    <a href="https://jeremy.richards.dev/about">
      About this site
    </a>
  </nav>
</section>

</body>
</html>

CSS

body {
  max-width: 100ch;
  width: 95%;
  margin: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Common classes between header and footer */
.banner, .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-style: normal;
  align-items: baseline;
}

@media screen and (max-width: 45ch) {
  .links {
    flex-direction: column;
  }
}

.banner a:link,a:visited {
  color: inherit;
  text-decoration: none;
}
.banner a:hover {
  /* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
  text-decoration: underline;
}
.links a:hover {
  /* TODO better color */
  background-color: aliceBlue;
}

.banner > * {
  width: max-content;
  flex-grow: 1;
  margin-right: 1rem;
}
.banner h1 {
  margin: 1.5rem 1rem 0.5rem 0;
  font-size: 1rem + 5vw;
}
.links {
  margin: 0;
}
.links > * {
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 8px;
}
.links > a:last-child {
  margin: 0;
}
.bottom {
  margin-bottom: 3rem;
}
hr {
  min-width: 100%;
}

.content {
  flex: 1;
}