$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();
}