Home | History | Annotate | Download | only in sass 
      1 @mixin content-container-layout {
      2   margin: auto;
      3   width: 90%;
      4 }
      5 
      6 //-----------------------------------------------------------------------
      7 // Layout
      8 //-----------------------------------------------------------------------
      9 
     10 * {
     11   padding: 0;
     12   margin: 0;
     13   @include box-sizing(border-box);
     14 }
     15 
     16 html, body {
     17   overflow-x: hidden; // Allows .span-full to take up entire viewport without overflowing.
     18   overflow-y: auto;
     19 }
     20 
     21 img {
     22   max-width: 100%;
     23 }  
     24 
     25 #gc-container {
     26   max-width: $site-max-width;
     27   @include content-container-layout();
     28 }
     29 
     30 #gc-pagecontent {
     31   > .g-section {
     32     margin: $main-content-top-margin 0;
     33   }
     34 }
     35 
     36 main {
     37   margin-bottom: 50px;
     38   position: relative;
     39 }
     40 
     41 footer[role="contentinfo"] {
     42   padding: 40px 0 50px;
     43 }
     44 
     45 // Phone
     46 @media only screen and (max-width: $break-small)  { 
     47   #gc-container {
     48     width: auto;
     49   }
     50   #gc-pagecontent {
     51     @include content-container-layout();
     52 
     53     > .g-section {
     54       margin: $main-content-top-margin / 2 0;
     55     }
     56   }
     57   footer[role="contentinfo"]  {
     58     padding: $main-content-top-margin / 2 $main-content-top-margin - 10;
     59   }
     60 }
     61 
     62 // Tablet
     63 @media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
     64   #gc-container {
     65     width: 95%;
     66   }
     67 }
     68 
     69 @media only screen and (min-width: $break-large)  { 
     70 
     71 }