Created
June 9, 2014 23:17
-
-
Save alycda/c6d850be21330539a380 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
| <style> | |
| .boxes, .timeline, .charachter, .swipe-container, .community, .news, .article, .preorder, .error, .sticky { | |
| margin-top: 10%; | |
| } | |
| </style> | |
| <br> | |
| <div class="div0 gray"> | |
| <span>@include outer-container;</span> | |
| <div class="div1">1</div> | |
| <div class="div1">2</div> | |
| <div class="div1">3</div> | |
| <div class="div1">4</div> | |
| <div class="div1">5</div> | |
| <div class="div1">6</div> | |
| <div class="div1">7</div> | |
| <div class="div1">8</div> | |
| <div class="div1">9</div> | |
| <div class="div1">10</div> | |
| <div class="div1">11</div> | |
| <div class="div1">12</div> | |
| </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.8) | |
| // Compass (v1.0.0.alpha.19) | |
| // Bourbon (v4.0.2) | |
| // Neat (v1.6.0) | |
| // ---- | |
| @import "bourbon/bourbon"; | |
| // $$\ $$\ $$$$$$\ $$$$$$\ $$$$$$$\ | |
| // \$$\ $$ |\____$$\ $$ __$$\ $$ _____| | |
| // \$$\$$ / $$$$$$$ |$$ | \__|\$$$$$$\ | |
| // \$$$ / $$ __$$ |$$ | \____$$\ | |
| // \$ / \$$$$$$$ |$$ | $$$$$$$ | | |
| // \_/ \_______|\__| \_______/ | |
| // Utils: vars, mixins, functions, etc | |
| // @import "global/variables"; | |
| $debug: false !default; | |
| // COLORS --------------------------------------------------------------------- | |
| $black: #0f0f0f; | |
| $almost-black: #1a1a1a; | |
| $red: #ff3c1f; | |
| $white: #ececec; | |
| $off-white: #ededed; | |
| $gray: #333; // 262626 555 777 | |
| $blue: #4e8790; | |
| $primary: $red; | |
| $secondary: $off-white; | |
| //$tertiary: $gray; | |
| $accent: $blue; | |
| //$accent2: #444; //dark | |
| //$accent3: | |
| $body-bg-color: $almost-black; //#4d4d4d; | |
| $header-bg-color: $body-bg-color; | |
| //$nav-bg-color: $header-bg-color; | |
| $text-color: $secondary; | |
| $quiet-color: #aaa; //muted | |
| $loud-color: $primary; | |
| $bright: $white; | |
| $dark: $black; | |
| $heading-color: #fff; | |
| $link-color: $primary; | |
| $link-hover-color: #ccc; | |
| //$link-hover-color: saturate(#d54aaf, 20%); | |
| $link-visited-color: $link-color; //$accent; | |
| $rgba: rgba(0, 0, 0, 0.8); //need a better name | |
| // FONTS ---------------------------------------------------------------------- | |
| $base-font-family: $helvetica; | |
| $fallback: 'Segoe, sans-serif'; | |
| $base-font-size: 16; //do not add 'px' | |
| $line-height: em(22.48); //1.405 or modular-scale(16px, 1, $augmented-fourth); | |
| //$fixed-font-family: monospace !default; | |
| //$fixed-font-size: 15; //do not add 'px' | |
| //$fixed-line-height: 1.2; // or modular-scale(15px, 1, $minor-third); | |
| $UltraLight: 'UNicod Sans UltraLight', $fallback; // 100 | |
| $Light: 'UNicod Sans Light', $fallback; // 200 | |
| $Medium: 'UNicod Sans Medium', $fallback; // 500 | |
| $heading-font-family: $UltraLight; | |
| $heading-font-weight: 500; //should be 100 | |
| $h1: 36; //2.25 or modular-scale(16px, ?, ?.???); | |
| $h2: $h1; | |
| $h3: 24; //1.5 or modular-scale(16px, 1, $perfect-fifth); | |
| $h4: 18; //1.125 or modular-scale(16px, 1, $major-second); | |
| $h5: $h4; | |
| $h6: $h4; | |
| $mobile-font-size: 20; //do not add 'px' | |
| $mobile-line-height: em(26, $mobile-font-size); //1.286 | |
| $mobile-h1: 48; | |
| $mobile-h2: 30; | |
| //$mobile-h3: $mobile-h2; | |
| //$mobile-h4: $mobile-h2; | |
| //$mobile-h5: $mobile-h2; | |
| $mobile-h6: $mobile-font-size; | |
| $base-url: 'http://evolvegame.com/'; | |
| $img-path: '_/css/img/'; | |
| //@import "grid-settings"; | |
| @import "neat/neat-helpers"; | |
| // Change the grid settings | |
| //$min-width: 320; //or 480 and remove initial-scale=1.0, | |
| //$max-width: em(1140); | |
| $visual-grid: true; | |
| $visual-grid-color: $primary; | |
| $visual-grid-opacity: .1; | |
| $var: 1140; | |
| //$desktop-cols: 12; | |
| //$mobile-cols: 4; | |
| $gutter: 20px;//em(20, 20); | |
| $column: 76.667px;//em(76.667); //(1140 - (11 * 20)) / 12; | |
| //$sidebar: 240px; //(mobile nav) | |
| $max-width: em($var);//$desktop-max: 1140px; | |
| //$mobile: 480; | |
| //$tablet: 768; | |
| //$desktop: 960; | |
| //$mobile-breakpoint: em($mobile); | |
| //$tablet-breakpoint: em($tablet); | |
| //$desktop-breakpoint: em($desktop); | |
| // 320-479 XS | |
| // 480-767 Small | |
| // 768-1919 Medium | |
| // 1920-oo Large | |
| // // XSmall screen / phone | |
| // $screen-xs: 320px !default; // & up | |
| // $screen-phone: $screen-xs !default; | |
| // // Small screen | |
| // $screen-sm: 480px !default; // & up | |
| // // Medium screen / tablet | |
| //$screen-md: 768px !default; // & up | |
| //$screen-tablet: $screen-md !default; | |
| // // Large screen / desktop | |
| //$screen-desktop: 960px !default; | |
| // // XLarge Large screen / tv | |
| // $screen-lg: 1920px !default; // & up | |
| // $screen-tv: $screen-lg !default; | |
| // // So media queries don't overlap when required, provide a maximum | |
| // $screen-xs-max: ($screen-sm - 1) !default; | |
| //$screen-sm-max: ($screen-md - 1) !default; | |
| // $screen-md-max: ($screen-lg - 1) !default; | |
| // Define your breakpoints | |
| $mobile: new-breakpoint(max-width em(767) 4); | |
| $tablet: new-breakpoint(min-width em(768) max-width em(959)); | |
| $desktop: new-breakpoint(min-width em(960)); | |
| // Z-INDEXES !!!! | |
| //$z-image: -5; | |
| //$z-video: 0; | |
| //$z-controls: 3; | |
| //$z-content: 5; | |
| //$z-nav: 20; | |
| //$z-modals: 50; | |
| @import "neat/neat"; | |
| .gray { | |
| background-color: rgba(0,0,0,.1); //$gray | |
| color: #ccc; | |
| } | |
| .div0 { | |
| @include outer-container; | |
| margin-top: 3em; | |
| text-align: center; | |
| &> span { | |
| @include span-columns(12); | |
| @include pad(.6em); | |
| //@include omega; | |
| } | |
| } | |
| .div1 { | |
| @include span-columns(1); | |
| padding-top: 1em; | |
| min-height: 20em; | |
| background-color: $white; | |
| color: $gray; | |
| } |
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, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| height: 100%; | |
| left: 0; | |
| margin: 0 auto; | |
| max-width: 71.25em; | |
| opacity: 0.1; | |
| position: fixed; | |
| right: 0; | |
| width: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| @media screen and (max-width: 47.9375em) { | |
| body:before { | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #ff3c1f 0, #ff3c1f 20.90911%, transparent 20.90911%, transparent 26.36363%, #ff3c1f 26.36363%, #ff3c1f 47.27274%, transparent 47.27274%, transparent 52.72726%, #ff3c1f 52.72726%, #ff3c1f 73.63637%, transparent 73.63637%, transparent 79.09089%, #ff3c1f 79.09089%, #ff3c1f 100%, transparent 100%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 20.90911%, transparent 20.90911%, transparent 26.36363%, #ff3c1f 26.36363%, #ff3c1f 47.27274%, transparent 47.27274%, transparent 52.72726%, #ff3c1f 52.72726%, #ff3c1f 73.63637%, transparent 73.63637%, transparent 79.09089%, #ff3c1f 79.09089%, #ff3c1f 100%, transparent 100%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 20.90911%, transparent 20.90911%, transparent 26.36363%, #ff3c1f 26.36363%, #ff3c1f 47.27274%, transparent 47.27274%, transparent 52.72726%, #ff3c1f 52.72726%, #ff3c1f 73.63637%, transparent 73.63637%, transparent 79.09089%, #ff3c1f 79.09089%, #ff3c1f 100%, transparent 100%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 20.90911%, transparent 20.90911%, transparent 26.36363%, #ff3c1f 26.36363%, #ff3c1f 47.27274%, transparent 47.27274%, transparent 52.72726%, #ff3c1f 52.72726%, #ff3c1f 73.63637%, transparent 73.63637%, transparent 79.09089%, #ff3c1f 79.09089%, #ff3c1f 100%, transparent 100%); | |
| background-image: -o-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 20.90911%, transparent 20.90911%, transparent 26.36363%, #ff3c1f 26.36363%, #ff3c1f 47.27274%, transparent 47.27274%, transparent 52.72726%, #ff3c1f 52.72726%, #ff3c1f 73.63637%, transparent 73.63637%, transparent 79.09089%, #ff3c1f 79.09089%, #ff3c1f 100%, transparent 100%); | |
| background-image: linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 20.90911%, transparent 20.90911%, transparent 26.36363%, #ff3c1f 26.36363%, #ff3c1f 47.27274%, transparent 47.27274%, transparent 52.72726%, #ff3c1f 52.72726%, #ff3c1f 73.63637%, transparent 73.63637%, transparent 79.09089%, #ff3c1f 79.09089%, #ff3c1f 100%, transparent 100%); | |
| } | |
| } | |
| @media screen and (min-width: 48em) and (max-width: 59.9375em) { | |
| body:before { | |
| background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 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, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -webkit-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -moz-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -ms-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: -o-linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| background-image: linear-gradient(left, transparent 0, #ff3c1f 0, #ff3c1f 6.72515%, transparent 6.72515%, transparent 8.47953%, #ff3c1f 8.47953%, #ff3c1f 15.20468%, transparent 15.20468%, transparent 16.95906%, #ff3c1f 16.95906%, #ff3c1f 23.68422%, transparent 23.68422%, transparent 25.43859%, #ff3c1f 25.43859%, #ff3c1f 32.16375%, transparent 32.16375%, transparent 33.91813%, #ff3c1f 33.91813%, #ff3c1f 40.64328%, transparent 40.64328%, transparent 42.39766%, #ff3c1f 42.39766%, #ff3c1f 49.12281%, transparent 49.12281%, transparent 50.87719%, #ff3c1f 50.87719%, #ff3c1f 57.60234%, transparent 57.60234%, transparent 59.35672%, #ff3c1f 59.35672%, #ff3c1f 66.08187%, transparent 66.08187%, transparent 67.83625%, #ff3c1f 67.83625%, #ff3c1f 74.56141%, transparent 74.56141%, transparent 76.31578%, #ff3c1f 76.31578%, #ff3c1f 83.04094%, transparent 83.04094%, transparent 84.79532%, #ff3c1f 84.79532%, #ff3c1f 91.52047%, transparent 91.52047%, transparent 93.27485%, #ff3c1f 93.27485%, #ff3c1f 100.0%, transparent 100.0%); | |
| } | |
| } | |
| .gray { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| color: #ccc; | |
| } | |
| .div0 { | |
| max-width: 71.25em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 3em; | |
| text-align: center; | |
| } | |
| .div0:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .div0 > span { | |
| float: left; | |
| display: block; | |
| margin-right: 1.75438%; | |
| width: 100%; | |
| padding: 0.6em; | |
| } | |
| .div0 > span:last-child { | |
| margin-right: 0; | |
| } | |
| .div1 { | |
| float: left; | |
| display: block; | |
| margin-right: 1.75438%; | |
| width: 6.72515%; | |
| padding-top: 1em; | |
| min-height: 20em; | |
| background-color: #ececec; | |
| color: #333333; | |
| } | |
| .div1: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
| <style> | |
| .boxes, .timeline, .charachter, .swipe-container, .community, .news, .article, .preorder, .error, .sticky { | |
| margin-top: 10%; | |
| } | |
| </style> | |
| <br> | |
| <div class="div0 gray"> | |
| <span>@include outer-container;</span> | |
| <div class="div1">1</div> | |
| <div class="div1">2</div> | |
| <div class="div1">3</div> | |
| <div class="div1">4</div> | |
| <div class="div1">5</div> | |
| <div class="div1">6</div> | |
| <div class="div1">7</div> | |
| <div class="div1">8</div> | |
| <div class="div1">9</div> | |
| <div class="div1">10</div> | |
| <div class="div1">11</div> | |
| <div class="div1">12</div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment