typebase.sass

/*! Typebase.less v0.1.0 | MIT License */

// Import of the math.div function for slash as division change
@use "sass:math"

// Typesetting variables. Edit here or override in main file prior to import of this.
$baseFontSize: 22  !default // in pixels. This would result in 22px on desktop
$baseLineHeight: 1.5  !default // how large the line height is as a multiple of font size
$leading: $baseLineHeight * 1rem  !default

// Rate of growth for headings
// I actually like this to be slightly smaller then the leading. Makes for tight headings.
$scale: 1.414  !default

/* Setup */
html
  /* Change default typefaces here */
  font-family: serif
  font-size: math.div($baseFontSize, 16) * 100%

  // Make everything look a little nicer in webkit
  -webkit-font-smoothing: antialiased

  // -webkit-text-size-adjust: auto
  // -moz-text-size-adjust: auto
  // -ms-text-size-adjust: auto
  // -o-text-size-adjust: auto
  // text-size-adjust: auto

/* Copy & Lists */
p
  line-height: $leading
  margin-top: $leading
  margin-bottom: 0

ul, ol
  margin-top: $leading
  margin-bottom: $leading
  li
    line-height: $leading
  ul, ol
    margin-top: 0
    margin-bottom: 0

blockquote
  line-height: $leading
  margin-top: $leading
  margin-bottom: $leading

/* Headings */
h1, h2, h3, h4, h5, h6
  /* Change heading typefaces here */
  font-family: sans-serif
  margin-top: $leading
  margin-bottom: 0
  line-height: $leading

h1
  font-size: 3 * $scale * 1rem
  line-height: 3 * $leading
  margin-top: 2 * $leading
h2
  font-size: 2 * $scale * 1rem
  line-height: 2 * $leading
  margin-top: 2 * $leading
h3
  font-size: 1 * $scale * 1rem
h4
  font-size: math.div($scale, 2) * 1rem
h5
  font-size: math.div($scale, 3) * 1rem
h6
  font-size: math.div($scale, 4) * 1rem

/* Tables */
table
  margin-top: $leading
  border-spacing: 0px
  border-collapse: collapse

  td, th
    padding: 0
    line-height: $baseLineHeight * $baseFontSize - 0px

/* Code blocks */
code
  // Forces text to constrain to the line-height. Not ideal, but works.
  vertical-align: bottom

/* Leading paragraph text */
.lead
  font-size: $scale * 1rem

/* Hug a the block above you */
.hug
  margin-top: 0