SCSS: Base

base.scss

//// VARS
// Spacing
$spacing: .5; //REM value
$sQuarter: $spacing * .25rem;
$sThird: $spacing * .33rem;
$sHalf: $spacing * .5rem;
$s1: $spacing * 1rem;
$s2: $spacing * 2rem;
$s3: $spacing * 3rem;
$s4: $spacing * 4rem;
$s5: $spacing * 5rem;
$s6: $spacing * 6rem;
$sHitDesk: $s4;
$sHitTouch: $s6;
// Animation
$anim-base-time:.18s;
$anim-base-ease: cubic-bezier(.4,.6,.1,1);
$ease: $anim-base-ease;
$t: $anim-base-time;
// Fonts
$sysfont-emoji:'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
$sysfont-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
$sysfont-mono:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;
// Inline media query mixin - src:https://coderwall.com/p/ihmlhq/the-end-all-sass-media-query-mixin
$mqWatch: 312px;
$mqPhone: 375px; // Portrait
$mqTablet: 1024px; // Landscape
$mqLaptop: 1440px;
$mqMonitor: 1920px; // Larger than this is super widescreen
@mixin mediaquery($min: null, $max: null, $height: false) {
  @if $min == null and $max == null {
    @warn "Mixin PE-Media requires at least a MIN or MAX width/height";
  }
  $direction: "width";
  /* If $height is true, override the variable. */
  @if $height == true {
    $direction: "height";
  }
  @if $min != null and $max != null {
    @media ("min-" + $direction + ': ' + $min) and ("max-" + $direction + ': ' + $max) {
      @content;
    }
  } @else if $max != null {
    @media ("max-" + $direction + ': ' + $max) {
      @content;
    }
  } @else {
    @media ("min-" + $direction + ': ' + $min) {
      @content;
    }
  }
}

//// MY RESETS
// Generic
html,body,#wrapper{-ms-overflow-style:-ms-autohiding-scrollbar;-moz-tab-size:4;cursor:default;tab-size:4;outline:none}
#wrapper{height:100%;margin:0;width:100%}
*,:before,:after {animation-fill-mode:both;box-sizing: border-box;cursor: inherit;font: inherit;hyphens: auto;line-height: inherit;scroll-behavior: smooth;vertical-align: inherit;word-break: break-word}
*:not(a),:before,:after {color: inherit}
:before,:after {text-decoration: inherit}
code,kbd,samp,pre {font-family:$sysfont-mono}
// Status effects
[aria-busy="true"] {cursor: progress}
[aria-controls] {cursor: pointer}
[unselectable] {user-select: none}
.disabled,:disabled,[aria-disabled] {cursor: not-allowed;pointer-events: none}
// Helpers
.clearfix:after {display:block;clear:both}
.hyphen{overflow-wrap: break-word;word-wrap: break-word}
.ellip{white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.anim-fade{animation:aFade $t $ease infinite}
.anim-none{animation:none}
.fx{transition:all $t $ease}
.fx-none{transition: none}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.flex-none{flex:none}
// Form items
textarea {resize: vertical}
:-ms-input-placeholder {color: rgba(0,0,0,.6);font-style:italic}
::placeholder {color: rgba(0,0,0,.6);font-style:italic;opacity:1}
// A11y
.sr-only {border:0 !important;clip: rect(1px, 1px, 1px, 1px);height: 1px !important;overflow: hidden;padding:0 !important; position: absolute !important;width: 1px !important}
body:hover .sr-only a,body:hover .sr-only input,body:hover .sr-only button {display: none !important}
a[href='#main']{background: rgba(0,0,0,.8);color:#fff;display: inline-block;line-height: 1;padding: .5em;position: absolute;text-decoration: none;top:-2em;z-index: 999}
a[href='#main']:focus{top:auto}
// Animation
@keyframes aFade {
  0%{opacity:0}
  100%{opacity:1}
}


//// BEGIN CUSTOM CSS
html,body,#wrapper{
  background: #f3f3f3;
  color: #111;
  font-family: $sysfont-sans;
  font-size:$s2;
}
#wrapper{
  padding:$s2;
}
h1,h2,h3,h4,h5,h6,*.h1,*.h2,*.h3,*.h4,*.h5,*.h6,[role='heading']{
  color:inherit;
  margin:0 0 .43em;
}
h1,[role='heading'][aria-level='1'],*.h1{font-size:200%}
h2,[role='heading'][aria-level='2'],*.h2{font-size:150%}
h3,[role='heading'][aria-level='3'],*.h3{font-size:125%}
h4,[role='heading'][aria-level='4'],*.h4{font-size:100%}
h5,[role='heading'][aria-level='5'],*.h5{font-size:75%}
h6,[role='heading'][aria-level='6'],*.h6{font-size:66%}