git

My personal website source code
Log | Files | Refs | Submodules | README | LICENSE

sizes.scss (692B)


      1 $small-screen: 48em;
      2 $normal-screen: 64em;
      3 $wide-screen: 75em;
      4 
      5 :root {
      6 	--gutter-width: 1rem;
      7 	--outer-margin: 2rem;
      8 	--gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
      9 	--half-gutter-width: calc((var(--gutter-width) * 0.5));
     10 }
     11 
     12 @custom-media --sm-viewport only screen and (min-width: $small-screen);
     13 @custom-media --md-viewport only screen and (min-width: $normal-screen);
     14 @custom-media --lg-viewport only screen and (min-width: $wide-screen);
     15 
     16 @mixin build-mixin-sizes($name)
     17 {
     18 	.#{$name} { @content; };
     19 	.#{$name}-xs { @content; };
     20 
     21 	@each $viewport-size in ('sm', 'md', 'lg') {
     22 		@media (--#{$viewport-size}-viewport) {
     23 			.#{$name}-#{$viewport-size} { @content; };
     24 		}
     25 	}
     26 }