Scaling website

Scaling website.scss

// Need to add "frontend" class to the site - this is to prevent this stuff happening on the WYSIWYG editor

html.frontend {
  @media only screen and (min-width: 1920px) { // Correct size for large screens
    font-size: 62.5%;
  }

  @media only screen and (max-width: 1289px) { // Slightly larger size for small screens
    font-size: 0.6vw;
  }
  @media only screen and (max-width: 1200px) { // Back to correct size for small screens
    font-size: 62.5%;
  }
}

// Made a mixin to create a maximum width, for full-bleed items on the site

@mixin innerwidth() {
  max-width: calc(100vw - 16.0rem); // 8rem each side is the gap
  @media only screen and (min-width: 1920px) {
    max-width: 1760px; // 8rem each side is the gap
  }
  @include media("<lg") {
    max-width: calc(100vw - 4.6rem); // smaller screens, less gap
  }
  @include media("<=sm") {
    max-width: calc(100vw - 6rem); // smaller screens, less gap
  }
  margin: 0 auto;
}

// Use a "container" class, like Bootstrap

.container {
	@include innerwidth();
}

// Set font sizes on the body
// 1.6rem = 16px when at the largest size

body.frontend {
  font-size:1.6rem;
  line-height: 1.3;
}

// Set all other generic elements - use REM sizes

h1 {
  // Styles
}

// e.g. UL, OL, LI, P, H1..5, HR, 
  
// Set styles for TinyMCE

body#tinymce {
  // Set font sizes etc., override the REMs
}