// Implementation // ============================================================================ @mixin desktop-screen() {
@media (min-width: $desktop-screen-breakpoint) { @content; }
} @mixin large-screen() {
@media (min-width: $large-screen-breakpoint) { @content; }
}
@mixin mobile-screen() {
@media (max-width: 991.999px) { @content; }
}
@mixin mobile-only($display: block) {
display: $display; @include desktop-screen { display: none; }
}
@mixin desktop-only($display: block) {
display: $display; @include mobile-screen { display: none; }
}
@mixin flex-center() {
display: flex; justify-content: center; align-items: center;
}
// Typography Defaults // ——————- body {
background-color: $base-background-color; color: $primary-text-color; font-family: $base-font-family; font-size: $base-font-size; font-weight: $base-font-weight; line-height: $base-line-height; word-wrap: break-word;
}
// Headers // ——- h1, h2, h3, h4, h5, h6 {
font-family: $header-font-family; margin-top: 0; margin-bottom: 2rem; font-weight: 700; color: $header-text-color;
}
h1 {
font-size: 34px; line-height: 1.25; letter-spacing: -0.5px;
} h2 {
font-size: 28px; line-height: 1.22; letter-spacing: 0;
} h3 {
font-size: 24px; line-height: 1.5; letter-spacing: 0;
} h4 {
font-size: 20px; line-height: 1.5; letter-spacing: 0;
} h5 {
font-size: 20px; line-height: 1.5; letter-spacing: 0;
} h6 {
font-size: 20px; line-height: 1.5; letter-spacing: 0;
}
// For text directly under a h1 heading // h1 + p { // font-size: 20px; // }
@include mobile-screen {
body { font-size: $mobile-font-size; } h1 { font-size: 30px; line-height: 1.25; letter-spacing: -0.5px; } h2 { font-size: 24px; line-height: 1.22; letter-spacing: 0; } h3 { font-size: 20px; line-height: 1.5; letter-spacing: 0; } h4 { font-size: 18px; line-height: 1.5; letter-spacing: 0; } h5 { font-size: 18px; line-height: 1.5; letter-spacing: 0; } h6 { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
}
// Blocks // —— blockquote, figure, p, pre {
margin-bottom: $block-spacing;
}
blockquote {
margin-inline-end: 0; @include mobile-screen() { margin-inline-start: 20px; }
}
// Lists // —– dl {
list-style: none;
} ol, ul {
padding-left: 2em;
} dl {
padding-left: 0;
} ol, ul, dl {
margin-bottom: $block-spacing; ol, ul, dl { margin: $item-spacing 0 $item-spacing 2em; }
} li, dt, dd {
margin-bottom: $item-spacing;
} dd + dt {
margin-top: $block-spacing;
}
// indentations // this is a hack to allow users to create custom lists and indent text ul {
list-style-type: none;
}
// Code // —- pre {
// Box padding: $item-spacing; margin: $item-spacing * 2 0; // Layout font-size: 90%; white-space: pre-wrap; word-wrap: break-word; // Appearance background: $well-background-color; border-radius: $base-border-radius;
}
pre > code {
display: block; font-family: $mono-font-family; padding: $base-vertical-padding $base-horizontal-padding; margin: 0;
}
// Tables // —— table {
box-sizing: border-box; width: 100%; margin-bottom: $block-spacing;
} th, td {
padding: $base-vertical-padding $base-horizontal-padding/2; text-align: left; border-bottom: 1px solid $divider-color; border-right: 1px solid $divider-color;
} th:first-child, td:first-child {
padding-left: 0;
} th:last-child, td:last-child {
padding-right: 0; border-right: 0;
}
// Links // —– a {
text-decoration: none; &:hover { text-decoration: underline; }
}
// Forms // —– form {
margin-bottom: $block-spacing;
} // Common Input Box Design input, input, input, input, input, input, input, textarea, select {
// Box box-sizing: border-box; height: 2em; padding: $base-vertical-padding $base-horizontal-padding; border: 1px solid $divider-color; // Appearance background-color: transparent; border-radius: $base-border-radius; box-shadow: none;
} // Block Inputs textarea, input, select, legend, fieldset {
margin-bottom: $item-spacing;
} // Specific Element Tweaks fieldset {
padding: 0; border: none;
} legend {
display: block;
} textarea {
display: block; min-height: 5em;
} // Removes awkward default styles on some inputs for iOS input, input, input, input, input, input, input, textarea {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
// Buttons // ——- button, input, input, input {
// Box display: inline-block; padding: calc(#{$base-vertical-padding} * 1.5) calc(#{$base-horizontal-padding} * 2); margin-bottom: $item-spacing; border: 1px solid $primary-brand-color; // Layout line-height: inherit; text-align: center; white-space: nowrap; // Appearance background-color: $primary-brand-color; border-radius: $base-border-radius; color: white; cursor: pointer; outline: none; text-decoration: none; text-transform: uppercase; font-size: $button-font-size; letter-spacing: 1.6px; @include mobile-screen { font-size: $mobile-button-font-size; }
} button:hover, input:hover, input:hover, input:hover, button:focus, input:focus, input:focus, input:focus {
border-color: darken($primary-brand-color, 5%); background-color: darken($primary-brand-color, 5%);
} button:active, input:active, input:active, input:active {
border-color: darken($primary-brand-color, 10%); background-color: darken($primary-brand-color, 10%);
}
// Horizontal Rule // ————— hr {
margin-top: $block-spacing * 2; margin-bottom: $block-spacing * 2;
}
// Images // —— img {
max-width: 100%;
}
// Links a {
color: $primary-brand-color; font-size: $base-font-size; @include mobile-screen { font-size: $mobile-font-size; }
}
.flex {
display: flex;
}
.desktop {
@include desktop-only();
} .mobile {
@include mobile-only();
}
// Override github flavoured checkbox .task-list-item-checkbox {
margin: 0 0.8em 0.25em -1.6em; vertical-align: middle;
}
.task-list-item {
list-style-type: none;
}