$hue: 180;
$saturation: 15%;

$comment-border-color: hsl($hue, $saturation, 89%);
$code-border-color: hsl($hue, $saturation, 85%);
$table-border-color: hsl($hue, $saturation, 85%);

$comment-bg: hsl($hue, $saturation, 99%);
$code-bg: hsl($hue, $saturation, 95%);

$comment-width: 30%;

$section-two-column-padding: 8px;
$section-two-column-inner: 24px;
$section-two-column-outer: 64px;

$section-single-column-padding-v: 16px;
$section-single-column-padding-h: 5vh;

$section-narrow-v: 16px;
$section-narrow-h: 12px;

$comment-font-size: 14px;
$code-font-size: 14px;

@mixin clickable() {
  &:hover {
    cursor: pointer;
  }
}

$two-column-width: 720px;
$narrow-width: 480px;

@mixin single-column() {
  @media (max-width: #{$two-column-width - 1px}) {
    @content;
  }
}

@mixin narrow() {
  @media (max-width: #{$narrow-width}) {
    @content;
  }
}

@mixin two-column() {
  @media (min-width: #{$two-column-width}) {
    @content;
  }
}

@mixin font-sans() {
  font-family: 'Roboto', sans-serif;
}

@mixin font-mono() {
  font-family: 'Inconsolata', Consolata, monospace;
}

@mixin font-body() {
  @include font-mono();
}