Contents

html {
  background-color: $background-color;
  color: $text-color;

  @media (prefers-color-scheme: dark) {
    background-color: $background-color-dark;
    color: $text-color-dark;
  }

  font-family: "Inter", -apple-system, sans-serif;
  font-size: 100%;
  line-height: 1.42;

  @media (min-width: 1024px) {
    font-size: 137.5%; // 22 px
  }
}

main {
  max-width: 42em;
  hyphens: auto;

  .post-header {
    margin-bottom: 2rem;
  }

  .post-meta {
    color: $text-color-subdued;
    @media (prefers-color-scheme: dark) {
      color: $text-color-subdued-dark;
    }
  }

  p {
    margin: 0 auto;
  }

  .post-content {
    p + p {
      text-indent: 1em;
    }

    blockquote {
      margin: 0;
      padding: 0 1em;
      border-left: 4px solid $accent-color;

      p:last-child {
        text-indent: 0;
      }
    }
  }

  p ~ div,
  img,
  video {
    padding: 1em 0;
  }

  blockquote p {
    hanging-punctuation: first;
  }

  li > ul {
    padding-left: 2rem;
  }

  @media (min-width: 1024px) {
    ul,
    ol {
      padding-left: 0;
      list-style-position: outside;
    }
  }
}

h1,
h2,
h3,
.post-list-item > .post-link {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 0;
  // No margin-top since this is the top of the page and we want only 1 per page.
  // No margin-bottom as metadata should follow.
}

h2 {
  font-size: 150%;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

h3,
.post-list-item > .post-link {
  font-size: 125%;
}

h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

footer {
  font-size: 68.75%;
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
kids-0.2.0	_sass/kids/_typography.scss