gram: essay

> ./src/tee/index.css

Lenses
(coming soon!)

/* hide line numbers */
.cm-lineNumbers .cm-gutterElement {
  display: none;
}


.cm-content {
  /* Link style -------------------------------- */

  /* SET FONTS --------------------------------- */

  /* Serif, long form text, default rem size */
  body {
    font-family: "Merriweather Sans", sans-serif;
  }

  /* Sans Serif, most other text */
  /* TODO: Why header>ul li and not #byline li? */
  /* TODO: What's the usage difference between nav and .nav? */
  aside, figcaption, nav, header>ul li, h1, h2, h3, h4, blockquote, figure table, .nav {
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 400;
  }

  /* Monospace */
  pre, code {
    font-family: 'Fira Mono', monospace;
  }

  a {
    background-image: url("./assets/splat-underline-2-default.svg");
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    color: #000;
    padding-bottom: .05rem;
    text-decoration: none;
    -webkit-tap-highlight-color:hsla(1, 76%, 51%, .4);
  }

  a.plain {
    background-image: none;
    /* Shouldn't these have the padding removed, and some other affordance added? */
  }

  figcaption a, aside a {
    padding-bottom: 0;
  }
  nav a {
    background-image: none;
  }
  a:hover{
    background-image: url("./assets/splat-underline-2-hover.svg");
    color: #D70A1B;
  }

  /* Should these use .outro instead of the less-clear p:last-of-type? */
  header p:last-of-type span a {
    background-image: url("./assets/splat-underline-1-default.svg");
    padding-bottom: .1rem;
  }
  header p:last-of-type span a:hover{
    background-image: url("./assets/splat-underline-1-hover.svg");
  }

  /* This is bad for accessibility, and Safari / Chrome don't seem to respect it */
  ::-moz-selection,
  ::selection{
      background: hsla(1, 0%, 75%, 0.4);
      text-shadow: none;
  }

  /* Separator ----------------------------------- */

  hr {
    background-image: url("./assets/splat-separator-1.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 5px;
    padding-top: 1rem;
    margin-top: 3rem;
    margin-bottom: 3rem;

    display: block;
    border: none;
    margin-inline-end: auto;
  }

  /* Headers ----------------------------------- */

  h1 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 2rem 0 1rem 0;
  }

  h4 {
    font-size: 1.1rem;
    margin: 2rem 0 1rem 0;
  }

  h1+h2, h2+h3 {
    margin: -.5rem 0 1rem 0;
  }

  /* Text -------------------------------------- */


  p, li {
    /* By default, don't use hyphens — current browsers do an awful job of it. */
    /* See the HYPHENS section below for more */
    /* -ms-hyphens: auto; */
    /* -webkit-hyphens: auto; */
    font-size: 1rem;
    /* hyphens: auto; */
    line-height: 1.5rem;
    margin: 0 0 1.5rem 0;
    text-align: justify;
  }

  small, sup {
    font-size: .8125em;
  }

  strong {
    font-weight: 700;
  }

  em {
    font-style: italic;
  }

  sup {
    display: inline-block;
    padding-left: .125rem;
    padding-right: .125rem;
    position: relative;
    top: .125rem;
    vertical-align: top;
    line-height: .75rem;
  }
  sup a {
    background: none;
    text-decoration: underline;
  }
  sup a:hover {
    background: none;
    text-decoration: underline;
  }

  /* Blockquotes ------------------------------- */

  blockquote {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    border-left: .2rem solid #f2f2f2;
    hyphens: none;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    padding: 1rem 0 1rem .8rem;
  }

  blockquote, blockquote>* {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    font-size: 1rem;
    font-weight: 300;
    hyphens: none;
    line-height: 1.5rem;
  }
  blockquote cite {
    white-space: nowrap;
  }

  blockquote footer {
    font-weight: 200;
  }

  blockquote footer::before {
    content: "– "
  }
  blockquote p:last-child {
    margin-bottom: 0;
  }

  /* Lists ------------------------------------- */

  ul, ol {
    margin-bottom: 1.5rem;
    margin-left: 1.3em;
  }

  ul {
    list-style-type: square;
  }
  ol {
    list-style-type: decimal;
  }

  li {
    margin-bottom: .5rem;
    white-space: normal;
  }

  li.no-bullet {
    list-style-type: none;
    margin-left: -1.3em;
  }
  li h3, li h4 {
    display: inline;
    font-size: inherit;
  }
  li ul {
    margin-top: .5rem;
  }
}

:root {
  --cm-padding-x: 20px;

}


/* TODO: change this media query into a container query? */
/* @media (max-width: 1000px) {
  :root {
    --cm-padding-x: 10px;
  }
} */