// 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;

}