Medium - CSS for the Functional Programmer - Non-Composable Approach

non-composable.html

<nav class='top-bar'>
  <button class='login'>Login</button>
</nav>

<div class='content-container'>
  <div class='left-content'>
    <h6>Single Shoe Club</h6>
  </div>
  <div class='right-content'>
    <h1>Sign up and get a free Shoe</h1>
  </div>
  <div class='background-overlay'></div>
</div>

non-composable.scss

$nav-height: 90px;
nav.top-bar {
  position: fixed;
  width: 100vw;
  height: $nav-height;
  
  button {
    background-color: $mid-green;
    color: $white;
    padding: $column-gutter;
  }
}
.content-container {
  max-width: 960px;
  margin: 0 auto;
  padding-top: $nav-padding;
  @include .clearfix;
  
  .left-content {
    @include columns(12, 12);
    @media #{$medium-up} {
      @include columns(6, 12);
    }
    @media #{$large-up} {
      @include columns(4);
    }
    h6 {
      color: $mid-green;
      padding-top: $column-gutter *2;
      @include .vertical-center;
    }
  }
  .right-content {
    @include columns(12, 12);
    @media #{$medium-up} {
      @include columns(6, 12);
    }
    @media #{$large-up} {
      @include columns(8);
    }
    h1 {
      color: $white;
      font-weight: 600;
      text-transform: uppercase;
    }
  }
  .background-overlay {
    background-color: $black;
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0.4;
  }
}