/* Settings */
$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px;
$text-color: #353535; $link-color: #3c6e71; $bg-color: d9d9d9; $accent-color-1: f3f4f4; $accent-color-2: #777777;
$header-font: Inter, sans-serif; $body-font: ‘Crimson Pro’, serif; $code-font: ‘JetBrains Mono’, monospace, sans-serif;
/* Responsive Text */
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { & { font-size: $min-font-size; @media screen and (min-width: $min-vw) { font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); } @media screen and (min-width: $max-vw) { font-size: $max-font-size; } } }
}
html {
@include fluid-type($min_width, $max_width, $min_font, $max_font);
}
body{
color: $text-color; background-color: $bg-color; font-family: $body-font;
}
h1, h2, h3, h4, h5, h6 {
font-family: $header-font;
}
p, h1, h2, h3, h4, h5, h6, nav, pre, ul, ol, table, blockquote, hr {
margin: 40px auto; max-width: 650px; padding: 0;
}
p {
line-height: 1.6em;
}
/* Navigation */
nav {
font-family: $header-font; font-weight: 800;
}
.current {
color: $text-color;
}
/* Links */
a {
text-decoration: none; color: $link-color;
}
a:hover {
text-decoration: underline;
}
/* CSS for Markdown */
code {
font-family: $code-font; font-size: .75em; border: 1px solid $accent-color-2; border-radius: .25rem; padding: 0 .125rem; background: $accent-color-1;
}
pre code {
display: block; white-space: pre; -webkit-overflow-scrolling: touch; overflow-x: scroll; max-width: 100%; min-width: 100px;
}
blockquote {
border-left: 4px solid $accent-color-1; padding: 0 15px; color: $accent-color-2;
}
blockquote blockquote {
padding-right: 0;
}
hr {
border-color: $accent-color-2;
}
/* Tables */
table {
border: 1px solid $accent-color-2; /*margin: 1rem 0;*/
}
table tr:nth-child(2n) {
background: $accent-color-1;
}
thead {
background: $text-color; color: $bg-color; font-family: $header-font;
}
td, th {
padding: .35rem .7rem; border: 1px solid $accent-color-1;
}
/* Scroll Indicator */
/* Style the header: fixed position (always stay at the top) */ .header {
position: fixed; top: 0; z-index: 1; width: 100%; background-color: $accent-color-1;
}
/* The progress container (grey background) */ .progress-container {
width: 100%; height: 8px; background: #ccc;
}
/* The progress bar (scroll indicator) */ .progress-bar {
height: 8px; background: $accent-color-2; width: 0%;
}