initial-scss.scss

initial-scss.scss

// PROCESS
// 1. Set basic variables & media query ranges
// 2. Style large blocks with bg colors for layout
// 3. Get general layout elements (block) sized for all media queries
// 4. Modify general layout elements with &
// 5. Secondary features grid (S --> L)
// 6. Typography & Image Sizes
// 7. Refactor the SCSS to make it dryer & simpler.
// 8. Set variables for common values.


// RESETS & FRAMEWORKS

// VARIABLES & MIXINS
$primary: #655643;
$secondary: #80BCA3;
$tertiary: #E6AC27;
$background: #F6F7BD;

// MEDIA QUERY RANGES
$medium: "only screen and (min-width:600px)";
$large: "only screen and (min-width:900px)";

// GENERAL STYLES

body{
  background-color: $tertiary;
}

h1{
  color: $tertiary;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 30px;
  text-align: center;
}

h2{
  color: $secondary;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 16px;
  padding-bottom: (16px/2);
}

p{
  color: $primary;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
}

.block{
  margin: auto;
  background-color: lighten($background, 10%);
  padding: 25px;
}