Wrap all of base in a mixin

This means that it can be used
at global scope in other files
This commit is contained in:
Emilia Allison 2022-10-02 15:28:02 -04:00
parent ffb9822565
commit ecff203c0d
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
1 changed files with 60 additions and 57 deletions

View File

@ -1,3 +1,4 @@
@mixin reset {
/* ----------------- */
/* Custom Properties */
/* ----------------- */
@ -29,63 +30,6 @@ $ff-serif: serif;
$ff-sans-cond: sans-serif;
$ff-sans: sans-serif;
/* ----- */
/* Reset */
/* ----- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 400;
}
h1, h2, h3 {
line-height: 1.1;
}
body {
font-family: $ff-sans;
font-size: $fs-400;
color: $color-dark;
background-color: $color-white;
line-height: 1.5;
min-height: 100vh;
}
main {
margin-left: 1vw;
margin-top: 1vh;
}
img, picture {
max-width: 100%;
display: block;
}
input, button, textarea, select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behaviour: auto !important;
}
}
/* --------------- */
/* Utility Classes */
/* --------------- */
@ -189,6 +133,65 @@ footer {
margin-top: 3vh;
}
/* ----- */
/* Reset */
/* ----- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 400;
}
h1, h2, h3 {
line-height: 1.1;
}
body {
font-family: $ff-sans;
font-size: $fs-400;
color: $color-dark;
background-color: $color-white;
line-height: 1.5;
min-height: 100vh;
}
main {
margin-left: 1vw;
margin-top: 1vh;
}
img, picture {
max-width: 100%;
display: block;
}
input, button, textarea, select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behaviour: auto !important;
}
}
}
@include reset;
/* -------------------- */
/* Non-Reusable Classes */
/* -------------------- */