specimen.sass

/* Noto Sans, Noto Serif and Fira Mono fonts from Google change as needed */
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");

// Variables that correspond to the LaTeX font values set in the YAML block
$fontsize: 16px
$mainfont: "Noto Serif", serif
$sansfont: "Noto Sans", sans-serif
$monofont: "Fira Mono", monospace
$linkcolor: blue
$linestretch: 1.25

// Calculate REM font sizes that correspond to LaTeX font sizes
$tiny: calc(1rem / 12) * 6
$xxsmall: calc(1rem / 12) * 8
$xsmall: calc(1rem / 12) * 10
$small: calc(1rem / 12) * 10.95
$normal: calc(1rem / 12) * 12
$large: calc(1rem / 12) * 14.4
$xlarge: calc(1rem / 12) * 17.28
$xxlarge: calc(1rem / 12) * 20.74
$huge: calc(1rem / 12) * 24.88


/* The below styles are not defined in fonts and alignment filter
  but are kept here to ease the readability of the rendered HTML content */
body
  margin-left: auto
  margin-right: auto
  font-size: $fontsize
  font-family: $mainfont
  line-height: $linestretch
  width: 60%

span
  &.bold,
  &.emphasis,
  &.italic,
  &.lower,
  &.medium,
  &.monospace,
  &.normalfont,
  &.sans,
  &.serif,
  &.slanted,
  &.smallcaps,
  &.upper,
  &.upright,
  &.bf,
  &.em,
  &.it,
  &.md,
  &.tt,
  &.nf,
  &.sf,
  &.rm,
  &.sl,
  &.sc,
  &.up,
  &.tiny,
  &.xxsmall,
  &.xsmall,
  &.small,
  &.normal,
  &.large,
  &.xlarge,
  &.xxlarge,
  &.huge
    color: maroon

.title,
.author,
.date
  text-align: center

a
  color: $linkcolor
  text-decoration: none

a:hover
  text-decoration: underline

/* The styles below are for the classes defined in the fonts and alignment
  Lua filter. Modify them as required to style the HTML document. */

/* Font Styles */
.bold,
.bf
  font-weight: 700

.emphasis,
.italic,
.it,
.slanted,
.sl
  font-style: italic

.lower
  text-transform: lowercase

.medium,
.md
  font-weight: 400

.normalfont,
.nf,
.upright,
.up
  font-family: $mainfont
  font-style: normal
  font-weight: 400

.monospace,
.tt
  font-family: $monofont

.sans,
.sf
  font-family: $sansfont

.serif,
.rm
  font-family: $mainfont

.smallcaps,
.sc
  font-variant: small-caps

.upper
  text-transform: uppercase

/* Font Sizes relative to a 16px/12pt document
.tiny
  font-size: $tiny

.xxsmall
  font-size: $xxsmall

.xsmall
  font-size: $xsmall

.small
  font-size: $small

.normal
  font-size: $normal

.large
  font-size: $large

.xlarge
  font-size: $xlarge

.xxlarge
  font-size: $xxlarge

.huge
  font-size: $huge

/* Text Alignments */
div
  &.center,
  &.centering
    text-align: center

  &.flushright,
  &.raggedleft
    text-align: right

  &.flushleft,
  &.raggedright
    text-align: left

/* Underline Styles */
span
  &.dashuline,
  &.dau
    text-decoration: underline dashed

  &.dotuline,
  &.dou
    text-decoration: underline dotted

  &.uline,
  &.u
    text-decoration: underline

  &.uuline,
  &.uu
    text-decoration: underline double

  &.uwave,
  &.uw
    text-decoration: underline wavy

  &.sout,
  &.so
    text-decoration: line-through