Created
July 1, 2014 13:55
-
-
Save tonylegrone/94875427e99e854a6f7d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="section-2"> | |
| <section class="container"> | |
| <div class="row"> | |
| <div class="col">text</div> | |
| <div class="col">text</div> | |
| <div class="col">text</div> | |
| <div class="col">text</div> | |
| </div> | |
| </section> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.9) | |
| // Compass (v1.0.0.alpha.20) | |
| // Bourbon (v4.0.2) | |
| // Neat (v1.6.0) | |
| // ---- | |
| @import "bourbon/bourbon"; | |
| @import "neat/neat-helpers"; | |
| // Base Settings + Variables | |
| $gutter: em(20); | |
| $grid-columns: 4; | |
| $max-width: em(1084); | |
| $visual-grid: true; | |
| $visual-grid-index: front; | |
| $visual-grid-color: #262f3d; | |
| $visual-grid-opacity: 0.15; | |
| $border-box-sizing: true; | |
| // Breakpoints | |
| $medium: new-breakpoint(min-width em(480) 6); // 480px -> 640px | |
| $large: new-breakpoint(min-width em(640) 8); // 640px -> 960px | |
| $xlarge: new-breakpoint(min-width em(960) 12); // 960px -> 1280px | |
| $giant: new-breakpoint(min-width em(1280) 12); // 1280px -> Limit | |
| @import "neat/neat"; | |
| .container { | |
| @include outer-container; | |
| position: relative; | |
| padding: 0; | |
| } | |
| .row { | |
| .col { | |
| text-align: center; | |
| @include media($xlarge) { | |
| @include span-columns(3); | |
| outline:1px red solid; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body:before { | |
| content: ''; | |
| display: inline-block; | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #262f3d 0, #262f3d 20.46953%, transparent 20.46953%, transparent 26.51016%, #262f3d 26.51016%, #262f3d 46.97968%, transparent 46.97968%, transparent 53.02032%, #262f3d 53.02032%, #262f3d 73.48984%, transparent 73.48984%, transparent 79.53047%, #262f3d 79.53047%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 20.46953%, transparent 20.46953%, transparent 26.51016%, #262f3d 26.51016%, #262f3d 46.97968%, transparent 46.97968%, transparent 53.02032%, #262f3d 53.02032%, #262f3d 73.48984%, transparent 73.48984%, transparent 79.53047%, #262f3d 79.53047%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 20.46953%, transparent 20.46953%, transparent 26.51016%, #262f3d 26.51016%, #262f3d 46.97968%, transparent 46.97968%, transparent 53.02032%, #262f3d 53.02032%, #262f3d 73.48984%, transparent 73.48984%, transparent 79.53047%, #262f3d 79.53047%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 20.46953%, transparent 20.46953%, transparent 26.51016%, #262f3d 26.51016%, #262f3d 46.97968%, transparent 46.97968%, transparent 53.02032%, #262f3d 53.02032%, #262f3d 73.48984%, transparent 73.48984%, transparent 79.53047%, #262f3d 79.53047%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 20.46953%, transparent 20.46953%, transparent 26.51016%, #262f3d 26.51016%, #262f3d 46.97968%, transparent 46.97968%, transparent 53.02032%, #262f3d 53.02032%, #262f3d 73.48984%, transparent 73.48984%, transparent 79.53047%, #262f3d 79.53047%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #262f3d 0, #262f3d 20.46953%, transparent 20.46953%, transparent 26.51016%, #262f3d 26.51016%, #262f3d 46.97968%, transparent 46.97968%, transparent 53.02032%, #262f3d 53.02032%, #262f3d 73.48984%, transparent 73.48984%, transparent 79.53047%, #262f3d 79.53047%, #262f3d 100.0%, transparent 100.0%); | |
| height: 100%; | |
| left: 0; | |
| margin: 0 auto; | |
| max-width: 67.75em; | |
| opacity: 0.15; | |
| position: fixed; | |
| right: 0; | |
| width: 100%; | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| @media screen and (min-width: 30em) { | |
| body:before { | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #262f3d 0, #262f3d 13.377%, transparent 13.377%, transparent 17.3246%, #262f3d 17.3246%, #262f3d 30.7016%, transparent 30.7016%, transparent 34.6492%, #262f3d 34.6492%, #262f3d 48.0262%, transparent 48.0262%, transparent 51.9738%, #262f3d 51.9738%, #262f3d 65.3508%, transparent 65.3508%, transparent 69.2984%, #262f3d 69.2984%, #262f3d 82.6754%, transparent 82.6754%, transparent 86.623%, #262f3d 86.623%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 13.377%, transparent 13.377%, transparent 17.3246%, #262f3d 17.3246%, #262f3d 30.7016%, transparent 30.7016%, transparent 34.6492%, #262f3d 34.6492%, #262f3d 48.0262%, transparent 48.0262%, transparent 51.9738%, #262f3d 51.9738%, #262f3d 65.3508%, transparent 65.3508%, transparent 69.2984%, #262f3d 69.2984%, #262f3d 82.6754%, transparent 82.6754%, transparent 86.623%, #262f3d 86.623%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 13.377%, transparent 13.377%, transparent 17.3246%, #262f3d 17.3246%, #262f3d 30.7016%, transparent 30.7016%, transparent 34.6492%, #262f3d 34.6492%, #262f3d 48.0262%, transparent 48.0262%, transparent 51.9738%, #262f3d 51.9738%, #262f3d 65.3508%, transparent 65.3508%, transparent 69.2984%, #262f3d 69.2984%, #262f3d 82.6754%, transparent 82.6754%, transparent 86.623%, #262f3d 86.623%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 13.377%, transparent 13.377%, transparent 17.3246%, #262f3d 17.3246%, #262f3d 30.7016%, transparent 30.7016%, transparent 34.6492%, #262f3d 34.6492%, #262f3d 48.0262%, transparent 48.0262%, transparent 51.9738%, #262f3d 51.9738%, #262f3d 65.3508%, transparent 65.3508%, transparent 69.2984%, #262f3d 69.2984%, #262f3d 82.6754%, transparent 82.6754%, transparent 86.623%, #262f3d 86.623%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 13.377%, transparent 13.377%, transparent 17.3246%, #262f3d 17.3246%, #262f3d 30.7016%, transparent 30.7016%, transparent 34.6492%, #262f3d 34.6492%, #262f3d 48.0262%, transparent 48.0262%, transparent 51.9738%, #262f3d 51.9738%, #262f3d 65.3508%, transparent 65.3508%, transparent 69.2984%, #262f3d 69.2984%, #262f3d 82.6754%, transparent 82.6754%, transparent 86.623%, #262f3d 86.623%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #262f3d 0, #262f3d 13.377%, transparent 13.377%, transparent 17.3246%, #262f3d 17.3246%, #262f3d 30.7016%, transparent 30.7016%, transparent 34.6492%, #262f3d 34.6492%, #262f3d 48.0262%, transparent 48.0262%, transparent 51.9738%, #262f3d 51.9738%, #262f3d 65.3508%, transparent 65.3508%, transparent 69.2984%, #262f3d 69.2984%, #262f3d 82.6754%, transparent 82.6754%, transparent 86.623%, #262f3d 86.623%, #262f3d 100.0%, transparent 100.0%); | |
| } | |
| } | |
| @media screen and (min-width: 40em) { | |
| body:before { | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #262f3d 0, #262f3d 9.9347%, transparent 9.9347%, transparent 12.86647%, #262f3d 12.86647%, #262f3d 22.80118%, transparent 22.80118%, transparent 25.73294%, #262f3d 25.73294%, #262f3d 35.66765%, transparent 35.66765%, transparent 38.59941%, #262f3d 38.59941%, #262f3d 48.53412%, transparent 48.53412%, transparent 51.46588%, #262f3d 51.46588%, #262f3d 61.40059%, transparent 61.40059%, transparent 64.33235%, #262f3d 64.33235%, #262f3d 74.26706%, transparent 74.26706%, transparent 77.19882%, #262f3d 77.19882%, #262f3d 87.13353%, transparent 87.13353%, transparent 90.0653%, #262f3d 90.0653%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 9.9347%, transparent 9.9347%, transparent 12.86647%, #262f3d 12.86647%, #262f3d 22.80118%, transparent 22.80118%, transparent 25.73294%, #262f3d 25.73294%, #262f3d 35.66765%, transparent 35.66765%, transparent 38.59941%, #262f3d 38.59941%, #262f3d 48.53412%, transparent 48.53412%, transparent 51.46588%, #262f3d 51.46588%, #262f3d 61.40059%, transparent 61.40059%, transparent 64.33235%, #262f3d 64.33235%, #262f3d 74.26706%, transparent 74.26706%, transparent 77.19882%, #262f3d 77.19882%, #262f3d 87.13353%, transparent 87.13353%, transparent 90.0653%, #262f3d 90.0653%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 9.9347%, transparent 9.9347%, transparent 12.86647%, #262f3d 12.86647%, #262f3d 22.80118%, transparent 22.80118%, transparent 25.73294%, #262f3d 25.73294%, #262f3d 35.66765%, transparent 35.66765%, transparent 38.59941%, #262f3d 38.59941%, #262f3d 48.53412%, transparent 48.53412%, transparent 51.46588%, #262f3d 51.46588%, #262f3d 61.40059%, transparent 61.40059%, transparent 64.33235%, #262f3d 64.33235%, #262f3d 74.26706%, transparent 74.26706%, transparent 77.19882%, #262f3d 77.19882%, #262f3d 87.13353%, transparent 87.13353%, transparent 90.0653%, #262f3d 90.0653%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 9.9347%, transparent 9.9347%, transparent 12.86647%, #262f3d 12.86647%, #262f3d 22.80118%, transparent 22.80118%, transparent 25.73294%, #262f3d 25.73294%, #262f3d 35.66765%, transparent 35.66765%, transparent 38.59941%, #262f3d 38.59941%, #262f3d 48.53412%, transparent 48.53412%, transparent 51.46588%, #262f3d 51.46588%, #262f3d 61.40059%, transparent 61.40059%, transparent 64.33235%, #262f3d 64.33235%, #262f3d 74.26706%, transparent 74.26706%, transparent 77.19882%, #262f3d 77.19882%, #262f3d 87.13353%, transparent 87.13353%, transparent 90.0653%, #262f3d 90.0653%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 9.9347%, transparent 9.9347%, transparent 12.86647%, #262f3d 12.86647%, #262f3d 22.80118%, transparent 22.80118%, transparent 25.73294%, #262f3d 25.73294%, #262f3d 35.66765%, transparent 35.66765%, transparent 38.59941%, #262f3d 38.59941%, #262f3d 48.53412%, transparent 48.53412%, transparent 51.46588%, #262f3d 51.46588%, #262f3d 61.40059%, transparent 61.40059%, transparent 64.33235%, #262f3d 64.33235%, #262f3d 74.26706%, transparent 74.26706%, transparent 77.19882%, #262f3d 77.19882%, #262f3d 87.13353%, transparent 87.13353%, transparent 90.0653%, #262f3d 90.0653%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #262f3d 0, #262f3d 9.9347%, transparent 9.9347%, transparent 12.86647%, #262f3d 12.86647%, #262f3d 22.80118%, transparent 22.80118%, transparent 25.73294%, #262f3d 25.73294%, #262f3d 35.66765%, transparent 35.66765%, transparent 38.59941%, #262f3d 38.59941%, #262f3d 48.53412%, transparent 48.53412%, transparent 51.46588%, #262f3d 51.46588%, #262f3d 61.40059%, transparent 61.40059%, transparent 64.33235%, #262f3d 64.33235%, #262f3d 74.26706%, transparent 74.26706%, transparent 77.19882%, #262f3d 77.19882%, #262f3d 87.13353%, transparent 87.13353%, transparent 90.0653%, #262f3d 90.0653%, #262f3d 100.0%, transparent 100.0%); | |
| } | |
| } | |
| @media screen and (min-width: 60em) { | |
| body:before { | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| } | |
| } | |
| @media screen and (min-width: 80em) { | |
| body:before { | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #262f3d 0, #262f3d 6.55904%, transparent 6.55904%, transparent 8.49463%, #262f3d 8.49463%, #262f3d 15.05367%, transparent 15.05367%, transparent 16.98927%, #262f3d 16.98927%, #262f3d 23.5483%, transparent 23.5483%, transparent 25.4839%, #262f3d 25.4839%, #262f3d 32.04294%, transparent 32.04294%, transparent 33.97853%, #262f3d 33.97853%, #262f3d 40.53757%, transparent 40.53757%, transparent 42.47316%, #262f3d 42.47316%, #262f3d 49.0322%, transparent 49.0322%, transparent 50.9678%, #262f3d 50.9678%, #262f3d 57.52684%, transparent 57.52684%, transparent 59.46243%, #262f3d 59.46243%, #262f3d 66.02147%, transparent 66.02147%, transparent 67.95706%, #262f3d 67.95706%, #262f3d 74.5161%, transparent 74.5161%, transparent 76.4517%, #262f3d 76.4517%, #262f3d 83.01073%, transparent 83.01073%, transparent 84.94633%, #262f3d 84.94633%, #262f3d 91.50537%, transparent 91.50537%, transparent 93.44096%, #262f3d 93.44096%, #262f3d 100.0%, transparent 100.0%); | |
| } | |
| } | |
| .container { | |
| max-width: 67.75em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| position: relative; | |
| padding: 0; | |
| } | |
| .container:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .row .col { | |
| text-align: center; | |
| } | |
| @media screen and (min-width: 60em) { | |
| .row .col { | |
| float: left; | |
| display: block; | |
| margin-right: 1.9356%; | |
| width: 23.5483%; | |
| outline: 1px red solid; | |
| } | |
| .row .col:last-child { | |
| margin-right: 0; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="section-2"> | |
| <section class="container"> | |
| <div class="row"> | |
| <div class="col">text</div> | |
| <div class="col">text</div> | |
| <div class="col">text</div> | |
| <div class="col">text</div> | |
| </div> | |
| </section> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment