sudara/alonetone

View on GitHub
app/assets/stylesheets/layout.scss

Summary

Maintainability
Test Coverage
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  main {
    width: 100%;
    margin: 48px auto 0 auto;
    padding-bottom: $baseline * 3;
    flex: 1;
    @media #{$mobile} {
        margin-top: $baseline;
    }
    #columns_header {
      max-width: $site_max_width;
      box-sizing: border-box;
      padding: 0 $baseline * 1.5;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: $baseline * 1.5;
    }
    #columns {
      display: flex;
      max-width: $site_max_width;
      box-sizing: border-box;
      padding: 0 $baseline * 1.5;
      margin-right: auto;
      margin-left: auto;
      @media #{$one-column} {
        display: block;
      }
      @media #{$mobile} {
        padding-right: 0;
        padding-left: 0;
      }
      > div {
        min-width: 320px;
        flex: 1;
        &#left {
          margin-right: $baseline * 0.75;
        }
        &#right {
          margin-left: $baseline * 0.75;
        }
        @media #{$one-column} {
          width: 100%;
          margin-left: auto !important;
          margin-right: auto !important;
        }
      }
    }
  }
}