hugo-theme-readable/static/css/readable.css

/* readable.css 1.0.0 */

/* Code from Benjamin Hollon (benjaminhollon@fosstodon.org) */

#typewriter::after {
  content: '_';
  width: 0;
  display: inline-block;
  animation: cursor-blink 1s infinite;
}

/* Font family support */
html, html[data-font-family="serif"] {
    --font-family: serif;
  }
  html[data-font-family="sans-serif"] {
    --font-family: sans-serif;
  }
  html[data-font-family="monospace"] {
    --font-family: monospace;
  }
  
  /* Color scheme support */
  html, html[data-theme="light"] {
    --background-color: snow;
    --color: #000;
  }
  
  html[data-theme="dark"] {
    --background-color: #222830;
    --color: #fff;
  }
  
  @media (prefers-color-scheme: dark) {
    html {
      --background-color: #222830;
      --color: #fff;
    }
  }
  
  /* Generic styles */
  :root {
    --column-width: 67ch;
    --form-width: 50ch;
    --line-width: 0.125rem;
    --line-height: 1.5;
  
    --one-line: calc(var(--line-height) * 1rem);
    --half-line: calc(var(--one-line) * 0.5);
  
    font-family: var(--font-family);
  
    background-color: var(--background-color);
    color: var(--color);
  }
  
  a {
    color: inherit;
  }
  
  a:active {
    color: red;
  }
  
  header, footer, h1, h2 {
    text-align: center;
  }
  
  footer:not(.exclude) {
    border-top: var(--line-width) solid;
  }
  
  summary {
    cursor: pointer;
  }
  
  blockquote:not(.exclude) {
    padding-left: var(--one-line);
    border-left: var(--line-width) solid;
  }
  
  ul, ol {
    padding-left: calc(var(--line-height) * 2rem);
  }
  
  :is(body, article, main, figure) > img:not(.exclude) {
    max-width: 100%;
  }
  
  figure:not(.exclude) {
    text-align: center;
  }
  
  figure:not(.exclude) > * ~ figcaption {
    margin-top: 0;
    font-style: italic;
  }
  
  article > aside:not(.exclude) {
    border: var(--line-width) solid;
    padding: 0 var(--one-line);
    border-radius: var(--half-line);
  }
  
  pre {
    max-width: 100%;
    overflow: auto;
  }
  
  hr {
    color: inherit;
    border: 0;
    border-top: var(--line-width) solid;
  }
  
  /* Vertical Rhythm */
  p, ul, ol, figcaption, nav, td, th, label {
    line-height: var(--line-height);
  }
  
  h1, h2, h3, h4, h5, h6, p, blockquote, hr, footer, header, nav, figure, figcaption, ul, ol, :is(body, article, main) > img:not(.exclude), table, article > aside, article > aside {
    margin: var(--one-line) 0;
  }
  
  /* Headings */
  
  header h1 {
    font-weight: normal;
  }
  
  h1, h2 {
    line-height: calc(var(--line-height) * 2rem);
  }
  
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3, h4, h5, h6 {
    line-height: var(--one-line);
    padding-top: calc(var(--line-height) * 0.75rem);
    margin-bottom: calc(var(--line-height) * 0.25rem);
  }
  
  :is(h3, h4, h5, h6) ~ * {
    margin-top: 0;
  }
  
  /* Navbar */
  
  body > nav:first-of-type:not(.exclude) { /* This styling only affects the first nav element that is the direct child of the body */
    text-align: center;
    border-width: var(--line-width) 0;
    border-style: solid;
    line-height: var(--line-height);
    padding: calc((var(--line-height) * 0.5rem) - var(--line-width)); /* Put half a line's height on both top and bottom, then remove the width of the border */
    display: flex;
    flex-flow: row wrap;
  }
  
  body > nav:first-of-type:not(.exclude) > * {
    flex-grow: 1;
    margin: 0 var(--half-line);
    text-transform: uppercase;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    body > nav:first-of-type:not(.exclude) a {
      text-decoration: none;
      display: inline-block;
    }
  
    body > nav:first-of-type:not(.exclude) a::after {
      content: '';
      width: 0;
      height: var(--line-width);
      display: block;
      background: var(--color);
      transition: 150ms;
    }
  
    body > nav:first-of-type:not(.exclude) a:is(:hover, :focus)::after {
      width: 100%;
    }
  }
  
  /* Column */
  body {
    margin: 0 auto;
    width: min(95%, var(--column-width));
  }
  
  /* Justification (default off; use data-justify="on" on <html> to enable) */
  /* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */
  @media (min-width: 70.5ch) {
    [data-justify="on"] body {
      text-align: justify;
      text-justify: inter-character;
    }
  }
  
  /* Tables */
  table:not(.exclude) {
    display: block;
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
  }
  
  table:not(.exclude) :is(td, th) {
    padding: calc(var(--line-height) * 0.25rem);
    border: var(--line-width) solid;
  }
  
  table:not(.exclude) td {
    word-wrap: break-word;
  }
  
  /* Forms */
  form {
    max-width: var(--form-width)
  }
  
  form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) ~ label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
    display: block;
    margin: var(--half-line) 0;
  }
  
  form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
    box-sizing: border-box;
    padding: var(--half-line);
    background: transparent;
    border: var(--line-width) solid;
    color: inherit;
    font: inherit;
    width: 100%;
  }
  
  form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) ~ label) {
    font-weight: bold;
  }