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:
		
							parent
							
								
									ffb9822565
								
							
						
					
					
						commit
						ecff203c0d
					
				| 
						 | 
				
			
			@ -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 */
 | 
			
		||||
/* -------------------- */
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue