/**
* Basic typography settings * Adapted from https://github.com/aweekj/Kiko-plus/blob/master/_sass/_typography.scss * and https://github.com/jekyll/minima/blob/master/_sass/minima/_base.scss */
/**
* Basic styling */
body {
font-family: $base-font-stack; font-size: $mob-font-size; font-weight: $mob-font-weight; line-height: $base-line-height; color: $base-font-color; background-color: $background-color; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; min-height: 100vh; flex-direction: column; @include media-query($on-desktop) { font-size: $base-font-size; font-weight: $base-font-weight; }
}
/**
* Vertical spacing */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-space {
margin-bottom: $spacing-unit / 2;
}
/**
* Headings */
h1, h2, h3, h4, h5, h6 {
font-weight: $heading-font-weight;
}
h1, h2 {
border-bottom: 1px solid #eee; padding-bottom: $spacing-unit / 5;
}
/**
* Links */
a {
color: $link-color; text-decoration: none; &:visited { color: darken($link-color, 15%); } &:hover, &:focus { text-decoration: underline; }
}
/**
* Lists */
ol, ul, dl {
padding: 0; list-style: none; list-style-image: none;
}
// Modify spacing before item ol, ul {
> li { &:before { position: absolute; width: $li-bul-width; margin-left: -$li-bul-width; display: inline-block; box-sizing: border-box; text-align: right; } }
}
// Modify bullet ul {
> li:before { content: "\2022"; padding-right: $ul-bul-right-space; font-family: $ul-bul-font; font-size: $ul-bul-font-size; line-height: $ul-bul-line-height; }
}
// Modify counter ol {
counter-reset: section; > li:before { counter-increment: section; content: counter(section) "."; padding-right: $ol-bul-right-space; font-family: $ol-bul-font; font-size: $ol-bul-font-size; line-height: $ol-bul-line-height; }
}
// Modify spacing ol, ul {
> li { margin: 0 auto $mob-li-bottom-space $li-bul-width; line-height: $li-line-height; @include media-query($on-desktop) { margin-bottom: $li-bottom-space; } > ol, > ul { margin-top: $mob-li-bottom-space; @include media-query($on-desktop) { margin-bottom: $li-bottom-space; } } }
}
// Modify spacing for nested lists li {
> ol, > ul { > li { margin: 0 auto ($mob-li-bottom-space * $li-child-size-ratio) ($li-bul-width * $li-child-size-ratio); @include relative-font-size($li-child-size-ratio); @include media-query($on-desktop) { margin-bottom: $li-bottom-space * $li-child-size-ratio; } } }
}
dt {
float: left; width: $mob-dt-width; overflow: auto; clear: left; text-align: right; white-space: nowrap; font-weight: bold; margin-bottom: $mob-li-bottom-space; @include media-query($on-desktop) { width: $dt-width; margin-bottom: $li-bottom-space; }
}
dd {
margin-left: $mob-dd-position; margin-bottom: $mob-li-bottom-space; @include media-query($on-desktop) { margin-left: $dd-position; margin-bottom: $li-bottom-space; }
}
/**
* Blockquotes */
blockquote {
color: $blockquote-color; border-left: .3rem solid lighten($blockquote-color, 30%); margin: 0 2rem 1rem 0; padding-left: $spacing-unit / 2; @include relative-font-size(1.125); > :last-child { margin-bottom: 0; }
}
/**
* Breaks */
hr {
border: 0; border-top: 1px solid $divider-color; margin: 1.5rem auto;
}
/**
* Images */
img {
max-width: 100%; vertical-align: middle; @extend %vertical-space; border-radius: 3px; display: block;
}
/**
* Figures */
figcaption {
font-size: $small-font-size;
}
/**
* Tables */
table {
margin-bottom: $spacing-unit; width: 100%; text-align: left; border-collapse: collapse; border: 1px solid $table-color; tr { &:nth-child(even) { background-color: lighten($table-color, 2%); } } th, td { padding: ($spacing-unit / 3) ($spacing-unit / 2); } th { background-color: lighten($table-color, 2%); border: 1px solid darken($table-color, 4%); border-bottom-color: darken($table-color, 12%); } td { border: 1px solid $table-color; }
}
/**
* Code */
code {
padding: .25em .5em; font-size: 85%; color: $code-text-color; background-color: $code-bg-color; border-radius: 3px;
}
pre {
display: block; margin-top: 0; margin-bottom: 1rem; padding: .5rem; @include relative-font-size(0.8); line-height: 1.4; white-space: pre; overflow: auto; background-color: $code-bg-color; code { padding: 0; font-size: 100%; color: inherit; background-color: transparent; }
}
.highlight {
margin-bottom: 1rem; border-radius: 4px; pre { margin-bottom: 0; }
}
/**
* Footnotes */
a.footnote {
&, .post p &, .post ol &, .post ul & { margin: 0 3px; font-size: $small-font-size; -webkit-text-stroke: 0.25px; text-decoration: none; }
}
.footnotes {
padding: 2rem 1em; font-size: $small-font-size;
}
/**
* Alignment */
.center {
text-align: center; &-image { margin: 0 auto; display: block; }
}
.right {
text-align: right
}