emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/cool-stuff/css-purgatory/base/scss/base.scss
View File

@ -1,3 +1,4 @@
@mixin reset {
/* ----------------- */ /* ----------------- */
/* Custom Properties */ /* Custom Properties */
/* ----------------- */ /* ----------------- */
@ -29,63 +30,6 @@ $ff-serif: serif;
$ff-sans-cond: sans-serif; $ff-sans-cond: sans-serif;
$ff-sans: 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 */ /* Utility Classes */
/* --------------- */ /* --------------- */
@ -189,6 +133,65 @@ footer {
margin-top: 3vh; 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 */ /* Non-Reusable Classes */
/* -------------------- */ /* -------------------- */