Created
January 1, 2014 23:56
-
-
Save jedfoster/8213059 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
| %ul.matrix | |
| - (0..19).each do |c| | |
| %li |
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.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| @import "compass"; | |
| $matrix-font-size: 18px; | |
| $matrix-line-height: 24px; | |
| $matrix-color: #f60056; | |
| $matrix-width: 12; | |
| $matrix-height: 30; | |
| $matrix-characters: SassConf SassConf; | |
| $nbsp: "\00a0"; | |
| $frames-count: $matrix-height; | |
| @function rand($min: 1, $max: 100) { | |
| @return random($max - $min) + $min; | |
| } | |
| @function random-character() { | |
| $length: length($matrix-characters); | |
| @return nth($matrix-characters, rand($max: $length)); | |
| } | |
| @function new-column($height) { | |
| $result: (); | |
| $length: length($matrix-characters); | |
| @for $i from 1 through $height { | |
| $result: append($result, random-character()); | |
| } | |
| @return $result; | |
| } | |
| @function create-columns($number) { | |
| $columns: (); | |
| @for $i from 1 through $height { | |
| $columns: append($columns, new-column($matrix-height)); | |
| } | |
| @return $columns; | |
| } | |
| body { | |
| font-family: Courier; | |
| background: #1a122f; | |
| overflow: hidden; | |
| } | |
| .matrix { | |
| @include inline-list; | |
| color: $matrix-color; | |
| font-size: $matrix-font-size; | |
| line-height: $matrix-line-height; | |
| overflow: hidden; | |
| width: 100%; | |
| white-space: nowrap; | |
| } | |
| @for $i from 1 through $matrix-width { | |
| $column-height: rand(4, $matrix-height); | |
| $column-position: rand(1, $matrix-height); | |
| $column: new-column($matrix-height); | |
| .matrix li:nth-child(#{$i}) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| &:before { | |
| display: block; | |
| width: 8em; | |
| content: "#{$column}"; | |
| } | |
| &:after { | |
| @include box-sizing(border-box); | |
| background: linear-gradient(rgba(#1a122f, 1) 0, rgba(#1a122f, 0) $matrix-line-height * ($column-height - 1), rgba(#1a122f, 1) $matrix-line-height * ($column-height - 1), rgba(#1a122f, 1) $matrix-line-height * $matrix-height) 0 $matrix-line-height * ($column-position - $column-height) repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "#{nth($column, $column-position)}"; | |
| padding-top: ($column-position - 1) * $matrix-line-height; | |
| overflow: hidden; | |
| -webkit-animation: $frames-count * 80ms column-#{$i} infinite steps(1, start); | |
| } | |
| } | |
| @-webkit-keyframes column-#{$i} { | |
| @for $frame from 1 through $frames-count { | |
| @if $column-position > $matrix-height { | |
| $column-position: 1; | |
| } | |
| #{100% * ($frame - 1) / $frames-count} { | |
| background-position: 0 $matrix-line-height * ($column-position - $column-height); | |
| padding-top: ($column-position - 1) * $matrix-line-height; | |
| } | |
| $column-position: $column-position + 1; | |
| } | |
| } | |
| } |
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
| body { | |
| font-family: Courier; | |
| background: #1a122f; | |
| overflow: hidden; | |
| } | |
| .matrix { | |
| list-style-type: none; | |
| color: #f60056; | |
| font-size: 18px; | |
| line-height: 24px; | |
| overflow: hidden; | |
| width: 100%; | |
| white-space: nowrap; | |
| } | |
| .matrix, .matrix li { | |
| margin: 0px; | |
| padding: 0px; | |
| display: inline; | |
| } | |
| .matrix li:nth-child(1) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(1):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(1):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 456px, #1a122f 456px, #1a122f 720px) 0 -312px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 144px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-1 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-1 { | |
| 0% { | |
| background-position: 0 -312px; | |
| padding-top: 144px; | |
| } | |
| 3.33333% { | |
| background-position: 0 -288px; | |
| padding-top: 168px; | |
| } | |
| 6.66667% { | |
| background-position: 0 -264px; | |
| padding-top: 192px; | |
| } | |
| 10% { | |
| background-position: 0 -240px; | |
| padding-top: 216px; | |
| } | |
| 13.33333% { | |
| background-position: 0 -216px; | |
| padding-top: 240px; | |
| } | |
| 16.66667% { | |
| background-position: 0 -192px; | |
| padding-top: 264px; | |
| } | |
| 20% { | |
| background-position: 0 -168px; | |
| padding-top: 288px; | |
| } | |
| 23.33333% { | |
| background-position: 0 -144px; | |
| padding-top: 312px; | |
| } | |
| 26.66667% { | |
| background-position: 0 -120px; | |
| padding-top: 336px; | |
| } | |
| 30% { | |
| background-position: 0 -96px; | |
| padding-top: 360px; | |
| } | |
| 33.33333% { | |
| background-position: 0 -72px; | |
| padding-top: 384px; | |
| } | |
| 36.66667% { | |
| background-position: 0 -48px; | |
| padding-top: 408px; | |
| } | |
| 40% { | |
| background-position: 0 -24px; | |
| padding-top: 432px; | |
| } | |
| 43.33333% { | |
| background-position: 0 0px; | |
| padding-top: 456px; | |
| } | |
| 46.66667% { | |
| background-position: 0 24px; | |
| padding-top: 480px; | |
| } | |
| 50% { | |
| background-position: 0 48px; | |
| padding-top: 504px; | |
| } | |
| 53.33333% { | |
| background-position: 0 72px; | |
| padding-top: 528px; | |
| } | |
| 56.66667% { | |
| background-position: 0 96px; | |
| padding-top: 552px; | |
| } | |
| 60% { | |
| background-position: 0 120px; | |
| padding-top: 576px; | |
| } | |
| 63.33333% { | |
| background-position: 0 144px; | |
| padding-top: 600px; | |
| } | |
| 66.66667% { | |
| background-position: 0 168px; | |
| padding-top: 624px; | |
| } | |
| 70% { | |
| background-position: 0 192px; | |
| padding-top: 648px; | |
| } | |
| 73.33333% { | |
| background-position: 0 216px; | |
| padding-top: 672px; | |
| } | |
| 76.66667% { | |
| background-position: 0 240px; | |
| padding-top: 696px; | |
| } | |
| 80% { | |
| background-position: 0 -456px; | |
| padding-top: 0px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -432px; | |
| padding-top: 24px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -408px; | |
| padding-top: 48px; | |
| } | |
| 90% { | |
| background-position: 0 -384px; | |
| padding-top: 72px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -360px; | |
| padding-top: 96px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -336px; | |
| padding-top: 120px; | |
| } | |
| } | |
| .matrix li:nth-child(2) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(2):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(2):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 96px, #1a122f 96px, #1a122f 720px) 0 240px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 336px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-2 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-2 { | |
| 0% { | |
| background-position: 0 240px; | |
| padding-top: 336px; | |
| } | |
| 3.33333% { | |
| background-position: 0 264px; | |
| padding-top: 360px; | |
| } | |
| 6.66667% { | |
| background-position: 0 288px; | |
| padding-top: 384px; | |
| } | |
| 10% { | |
| background-position: 0 312px; | |
| padding-top: 408px; | |
| } | |
| 13.33333% { | |
| background-position: 0 336px; | |
| padding-top: 432px; | |
| } | |
| 16.66667% { | |
| background-position: 0 360px; | |
| padding-top: 456px; | |
| } | |
| 20% { | |
| background-position: 0 384px; | |
| padding-top: 480px; | |
| } | |
| 23.33333% { | |
| background-position: 0 408px; | |
| padding-top: 504px; | |
| } | |
| 26.66667% { | |
| background-position: 0 432px; | |
| padding-top: 528px; | |
| } | |
| 30% { | |
| background-position: 0 456px; | |
| padding-top: 552px; | |
| } | |
| 33.33333% { | |
| background-position: 0 480px; | |
| padding-top: 576px; | |
| } | |
| 36.66667% { | |
| background-position: 0 504px; | |
| padding-top: 600px; | |
| } | |
| 40% { | |
| background-position: 0 528px; | |
| padding-top: 624px; | |
| } | |
| 43.33333% { | |
| background-position: 0 552px; | |
| padding-top: 648px; | |
| } | |
| 46.66667% { | |
| background-position: 0 576px; | |
| padding-top: 672px; | |
| } | |
| 50% { | |
| background-position: 0 600px; | |
| padding-top: 696px; | |
| } | |
| 53.33333% { | |
| background-position: 0 -96px; | |
| padding-top: 0px; | |
| } | |
| 56.66667% { | |
| background-position: 0 -72px; | |
| padding-top: 24px; | |
| } | |
| 60% { | |
| background-position: 0 -48px; | |
| padding-top: 48px; | |
| } | |
| 63.33333% { | |
| background-position: 0 -24px; | |
| padding-top: 72px; | |
| } | |
| 66.66667% { | |
| background-position: 0 0px; | |
| padding-top: 96px; | |
| } | |
| 70% { | |
| background-position: 0 24px; | |
| padding-top: 120px; | |
| } | |
| 73.33333% { | |
| background-position: 0 48px; | |
| padding-top: 144px; | |
| } | |
| 76.66667% { | |
| background-position: 0 72px; | |
| padding-top: 168px; | |
| } | |
| 80% { | |
| background-position: 0 96px; | |
| padding-top: 192px; | |
| } | |
| 83.33333% { | |
| background-position: 0 120px; | |
| padding-top: 216px; | |
| } | |
| 86.66667% { | |
| background-position: 0 144px; | |
| padding-top: 240px; | |
| } | |
| 90% { | |
| background-position: 0 168px; | |
| padding-top: 264px; | |
| } | |
| 93.33333% { | |
| background-position: 0 192px; | |
| padding-top: 288px; | |
| } | |
| 96.66667% { | |
| background-position: 0 216px; | |
| padding-top: 312px; | |
| } | |
| } | |
| .matrix li:nth-child(3) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(3):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(3):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 624px, #1a122f 624px, #1a122f 720px) 0 -288px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 336px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-3 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-3 { | |
| 0% { | |
| background-position: 0 -288px; | |
| padding-top: 336px; | |
| } | |
| 3.33333% { | |
| background-position: 0 -264px; | |
| padding-top: 360px; | |
| } | |
| 6.66667% { | |
| background-position: 0 -240px; | |
| padding-top: 384px; | |
| } | |
| 10% { | |
| background-position: 0 -216px; | |
| padding-top: 408px; | |
| } | |
| 13.33333% { | |
| background-position: 0 -192px; | |
| padding-top: 432px; | |
| } | |
| 16.66667% { | |
| background-position: 0 -168px; | |
| padding-top: 456px; | |
| } | |
| 20% { | |
| background-position: 0 -144px; | |
| padding-top: 480px; | |
| } | |
| 23.33333% { | |
| background-position: 0 -120px; | |
| padding-top: 504px; | |
| } | |
| 26.66667% { | |
| background-position: 0 -96px; | |
| padding-top: 528px; | |
| } | |
| 30% { | |
| background-position: 0 -72px; | |
| padding-top: 552px; | |
| } | |
| 33.33333% { | |
| background-position: 0 -48px; | |
| padding-top: 576px; | |
| } | |
| 36.66667% { | |
| background-position: 0 -24px; | |
| padding-top: 600px; | |
| } | |
| 40% { | |
| background-position: 0 0px; | |
| padding-top: 624px; | |
| } | |
| 43.33333% { | |
| background-position: 0 24px; | |
| padding-top: 648px; | |
| } | |
| 46.66667% { | |
| background-position: 0 48px; | |
| padding-top: 672px; | |
| } | |
| 50% { | |
| background-position: 0 72px; | |
| padding-top: 696px; | |
| } | |
| 53.33333% { | |
| background-position: 0 -624px; | |
| padding-top: 0px; | |
| } | |
| 56.66667% { | |
| background-position: 0 -600px; | |
| padding-top: 24px; | |
| } | |
| 60% { | |
| background-position: 0 -576px; | |
| padding-top: 48px; | |
| } | |
| 63.33333% { | |
| background-position: 0 -552px; | |
| padding-top: 72px; | |
| } | |
| 66.66667% { | |
| background-position: 0 -528px; | |
| padding-top: 96px; | |
| } | |
| 70% { | |
| background-position: 0 -504px; | |
| padding-top: 120px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -480px; | |
| padding-top: 144px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -456px; | |
| padding-top: 168px; | |
| } | |
| 80% { | |
| background-position: 0 -432px; | |
| padding-top: 192px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -408px; | |
| padding-top: 216px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -384px; | |
| padding-top: 240px; | |
| } | |
| 90% { | |
| background-position: 0 -360px; | |
| padding-top: 264px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -336px; | |
| padding-top: 288px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -312px; | |
| padding-top: 312px; | |
| } | |
| } | |
| .matrix li:nth-child(4) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(4):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(4):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 216px, #1a122f 216px, #1a122f 720px) 0 48px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 264px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-4 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-4 { | |
| 0% { | |
| background-position: 0 48px; | |
| padding-top: 264px; | |
| } | |
| 3.33333% { | |
| background-position: 0 72px; | |
| padding-top: 288px; | |
| } | |
| 6.66667% { | |
| background-position: 0 96px; | |
| padding-top: 312px; | |
| } | |
| 10% { | |
| background-position: 0 120px; | |
| padding-top: 336px; | |
| } | |
| 13.33333% { | |
| background-position: 0 144px; | |
| padding-top: 360px; | |
| } | |
| 16.66667% { | |
| background-position: 0 168px; | |
| padding-top: 384px; | |
| } | |
| 20% { | |
| background-position: 0 192px; | |
| padding-top: 408px; | |
| } | |
| 23.33333% { | |
| background-position: 0 216px; | |
| padding-top: 432px; | |
| } | |
| 26.66667% { | |
| background-position: 0 240px; | |
| padding-top: 456px; | |
| } | |
| 30% { | |
| background-position: 0 264px; | |
| padding-top: 480px; | |
| } | |
| 33.33333% { | |
| background-position: 0 288px; | |
| padding-top: 504px; | |
| } | |
| 36.66667% { | |
| background-position: 0 312px; | |
| padding-top: 528px; | |
| } | |
| 40% { | |
| background-position: 0 336px; | |
| padding-top: 552px; | |
| } | |
| 43.33333% { | |
| background-position: 0 360px; | |
| padding-top: 576px; | |
| } | |
| 46.66667% { | |
| background-position: 0 384px; | |
| padding-top: 600px; | |
| } | |
| 50% { | |
| background-position: 0 408px; | |
| padding-top: 624px; | |
| } | |
| 53.33333% { | |
| background-position: 0 432px; | |
| padding-top: 648px; | |
| } | |
| 56.66667% { | |
| background-position: 0 456px; | |
| padding-top: 672px; | |
| } | |
| 60% { | |
| background-position: 0 480px; | |
| padding-top: 696px; | |
| } | |
| 63.33333% { | |
| background-position: 0 -216px; | |
| padding-top: 0px; | |
| } | |
| 66.66667% { | |
| background-position: 0 -192px; | |
| padding-top: 24px; | |
| } | |
| 70% { | |
| background-position: 0 -168px; | |
| padding-top: 48px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -144px; | |
| padding-top: 72px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -120px; | |
| padding-top: 96px; | |
| } | |
| 80% { | |
| background-position: 0 -96px; | |
| padding-top: 120px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -72px; | |
| padding-top: 144px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -48px; | |
| padding-top: 168px; | |
| } | |
| 90% { | |
| background-position: 0 -24px; | |
| padding-top: 192px; | |
| } | |
| 93.33333% { | |
| background-position: 0 0px; | |
| padding-top: 216px; | |
| } | |
| 96.66667% { | |
| background-position: 0 24px; | |
| padding-top: 240px; | |
| } | |
| } | |
| .matrix li:nth-child(5) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(5):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(5):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 72px, #1a122f 72px, #1a122f 720px) 0 432px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 504px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-5 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-5 { | |
| 0% { | |
| background-position: 0 432px; | |
| padding-top: 504px; | |
| } | |
| 3.33333% { | |
| background-position: 0 456px; | |
| padding-top: 528px; | |
| } | |
| 6.66667% { | |
| background-position: 0 480px; | |
| padding-top: 552px; | |
| } | |
| 10% { | |
| background-position: 0 504px; | |
| padding-top: 576px; | |
| } | |
| 13.33333% { | |
| background-position: 0 528px; | |
| padding-top: 600px; | |
| } | |
| 16.66667% { | |
| background-position: 0 552px; | |
| padding-top: 624px; | |
| } | |
| 20% { | |
| background-position: 0 576px; | |
| padding-top: 648px; | |
| } | |
| 23.33333% { | |
| background-position: 0 600px; | |
| padding-top: 672px; | |
| } | |
| 26.66667% { | |
| background-position: 0 624px; | |
| padding-top: 696px; | |
| } | |
| 30% { | |
| background-position: 0 -72px; | |
| padding-top: 0px; | |
| } | |
| 33.33333% { | |
| background-position: 0 -48px; | |
| padding-top: 24px; | |
| } | |
| 36.66667% { | |
| background-position: 0 -24px; | |
| padding-top: 48px; | |
| } | |
| 40% { | |
| background-position: 0 0px; | |
| padding-top: 72px; | |
| } | |
| 43.33333% { | |
| background-position: 0 24px; | |
| padding-top: 96px; | |
| } | |
| 46.66667% { | |
| background-position: 0 48px; | |
| padding-top: 120px; | |
| } | |
| 50% { | |
| background-position: 0 72px; | |
| padding-top: 144px; | |
| } | |
| 53.33333% { | |
| background-position: 0 96px; | |
| padding-top: 168px; | |
| } | |
| 56.66667% { | |
| background-position: 0 120px; | |
| padding-top: 192px; | |
| } | |
| 60% { | |
| background-position: 0 144px; | |
| padding-top: 216px; | |
| } | |
| 63.33333% { | |
| background-position: 0 168px; | |
| padding-top: 240px; | |
| } | |
| 66.66667% { | |
| background-position: 0 192px; | |
| padding-top: 264px; | |
| } | |
| 70% { | |
| background-position: 0 216px; | |
| padding-top: 288px; | |
| } | |
| 73.33333% { | |
| background-position: 0 240px; | |
| padding-top: 312px; | |
| } | |
| 76.66667% { | |
| background-position: 0 264px; | |
| padding-top: 336px; | |
| } | |
| 80% { | |
| background-position: 0 288px; | |
| padding-top: 360px; | |
| } | |
| 83.33333% { | |
| background-position: 0 312px; | |
| padding-top: 384px; | |
| } | |
| 86.66667% { | |
| background-position: 0 336px; | |
| padding-top: 408px; | |
| } | |
| 90% { | |
| background-position: 0 360px; | |
| padding-top: 432px; | |
| } | |
| 93.33333% { | |
| background-position: 0 384px; | |
| padding-top: 456px; | |
| } | |
| 96.66667% { | |
| background-position: 0 408px; | |
| padding-top: 480px; | |
| } | |
| } | |
| .matrix li:nth-child(6) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(6):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(6):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 192px, #1a122f 192px, #1a122f 720px) 0 -120px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 72px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-6 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-6 { | |
| 0% { | |
| background-position: 0 -120px; | |
| padding-top: 72px; | |
| } | |
| 3.33333% { | |
| background-position: 0 -96px; | |
| padding-top: 96px; | |
| } | |
| 6.66667% { | |
| background-position: 0 -72px; | |
| padding-top: 120px; | |
| } | |
| 10% { | |
| background-position: 0 -48px; | |
| padding-top: 144px; | |
| } | |
| 13.33333% { | |
| background-position: 0 -24px; | |
| padding-top: 168px; | |
| } | |
| 16.66667% { | |
| background-position: 0 0px; | |
| padding-top: 192px; | |
| } | |
| 20% { | |
| background-position: 0 24px; | |
| padding-top: 216px; | |
| } | |
| 23.33333% { | |
| background-position: 0 48px; | |
| padding-top: 240px; | |
| } | |
| 26.66667% { | |
| background-position: 0 72px; | |
| padding-top: 264px; | |
| } | |
| 30% { | |
| background-position: 0 96px; | |
| padding-top: 288px; | |
| } | |
| 33.33333% { | |
| background-position: 0 120px; | |
| padding-top: 312px; | |
| } | |
| 36.66667% { | |
| background-position: 0 144px; | |
| padding-top: 336px; | |
| } | |
| 40% { | |
| background-position: 0 168px; | |
| padding-top: 360px; | |
| } | |
| 43.33333% { | |
| background-position: 0 192px; | |
| padding-top: 384px; | |
| } | |
| 46.66667% { | |
| background-position: 0 216px; | |
| padding-top: 408px; | |
| } | |
| 50% { | |
| background-position: 0 240px; | |
| padding-top: 432px; | |
| } | |
| 53.33333% { | |
| background-position: 0 264px; | |
| padding-top: 456px; | |
| } | |
| 56.66667% { | |
| background-position: 0 288px; | |
| padding-top: 480px; | |
| } | |
| 60% { | |
| background-position: 0 312px; | |
| padding-top: 504px; | |
| } | |
| 63.33333% { | |
| background-position: 0 336px; | |
| padding-top: 528px; | |
| } | |
| 66.66667% { | |
| background-position: 0 360px; | |
| padding-top: 552px; | |
| } | |
| 70% { | |
| background-position: 0 384px; | |
| padding-top: 576px; | |
| } | |
| 73.33333% { | |
| background-position: 0 408px; | |
| padding-top: 600px; | |
| } | |
| 76.66667% { | |
| background-position: 0 432px; | |
| padding-top: 624px; | |
| } | |
| 80% { | |
| background-position: 0 456px; | |
| padding-top: 648px; | |
| } | |
| 83.33333% { | |
| background-position: 0 480px; | |
| padding-top: 672px; | |
| } | |
| 86.66667% { | |
| background-position: 0 504px; | |
| padding-top: 696px; | |
| } | |
| 90% { | |
| background-position: 0 -192px; | |
| padding-top: 0px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -168px; | |
| padding-top: 24px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -144px; | |
| padding-top: 48px; | |
| } | |
| } | |
| .matrix li:nth-child(7) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(7):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(7):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 192px, #1a122f 192px, #1a122f 720px) 0 0px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 192px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-7 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-7 { | |
| 0% { | |
| background-position: 0 0px; | |
| padding-top: 192px; | |
| } | |
| 3.33333% { | |
| background-position: 0 24px; | |
| padding-top: 216px; | |
| } | |
| 6.66667% { | |
| background-position: 0 48px; | |
| padding-top: 240px; | |
| } | |
| 10% { | |
| background-position: 0 72px; | |
| padding-top: 264px; | |
| } | |
| 13.33333% { | |
| background-position: 0 96px; | |
| padding-top: 288px; | |
| } | |
| 16.66667% { | |
| background-position: 0 120px; | |
| padding-top: 312px; | |
| } | |
| 20% { | |
| background-position: 0 144px; | |
| padding-top: 336px; | |
| } | |
| 23.33333% { | |
| background-position: 0 168px; | |
| padding-top: 360px; | |
| } | |
| 26.66667% { | |
| background-position: 0 192px; | |
| padding-top: 384px; | |
| } | |
| 30% { | |
| background-position: 0 216px; | |
| padding-top: 408px; | |
| } | |
| 33.33333% { | |
| background-position: 0 240px; | |
| padding-top: 432px; | |
| } | |
| 36.66667% { | |
| background-position: 0 264px; | |
| padding-top: 456px; | |
| } | |
| 40% { | |
| background-position: 0 288px; | |
| padding-top: 480px; | |
| } | |
| 43.33333% { | |
| background-position: 0 312px; | |
| padding-top: 504px; | |
| } | |
| 46.66667% { | |
| background-position: 0 336px; | |
| padding-top: 528px; | |
| } | |
| 50% { | |
| background-position: 0 360px; | |
| padding-top: 552px; | |
| } | |
| 53.33333% { | |
| background-position: 0 384px; | |
| padding-top: 576px; | |
| } | |
| 56.66667% { | |
| background-position: 0 408px; | |
| padding-top: 600px; | |
| } | |
| 60% { | |
| background-position: 0 432px; | |
| padding-top: 624px; | |
| } | |
| 63.33333% { | |
| background-position: 0 456px; | |
| padding-top: 648px; | |
| } | |
| 66.66667% { | |
| background-position: 0 480px; | |
| padding-top: 672px; | |
| } | |
| 70% { | |
| background-position: 0 504px; | |
| padding-top: 696px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -192px; | |
| padding-top: 0px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -168px; | |
| padding-top: 24px; | |
| } | |
| 80% { | |
| background-position: 0 -144px; | |
| padding-top: 48px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -120px; | |
| padding-top: 72px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -96px; | |
| padding-top: 96px; | |
| } | |
| 90% { | |
| background-position: 0 -72px; | |
| padding-top: 120px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -48px; | |
| padding-top: 144px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -24px; | |
| padding-top: 168px; | |
| } | |
| } | |
| .matrix li:nth-child(8) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(8):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(8):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 408px, #1a122f 408px, #1a122f 720px) 0 -24px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 384px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-8 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-8 { | |
| 0% { | |
| background-position: 0 -24px; | |
| padding-top: 384px; | |
| } | |
| 3.33333% { | |
| background-position: 0 0px; | |
| padding-top: 408px; | |
| } | |
| 6.66667% { | |
| background-position: 0 24px; | |
| padding-top: 432px; | |
| } | |
| 10% { | |
| background-position: 0 48px; | |
| padding-top: 456px; | |
| } | |
| 13.33333% { | |
| background-position: 0 72px; | |
| padding-top: 480px; | |
| } | |
| 16.66667% { | |
| background-position: 0 96px; | |
| padding-top: 504px; | |
| } | |
| 20% { | |
| background-position: 0 120px; | |
| padding-top: 528px; | |
| } | |
| 23.33333% { | |
| background-position: 0 144px; | |
| padding-top: 552px; | |
| } | |
| 26.66667% { | |
| background-position: 0 168px; | |
| padding-top: 576px; | |
| } | |
| 30% { | |
| background-position: 0 192px; | |
| padding-top: 600px; | |
| } | |
| 33.33333% { | |
| background-position: 0 216px; | |
| padding-top: 624px; | |
| } | |
| 36.66667% { | |
| background-position: 0 240px; | |
| padding-top: 648px; | |
| } | |
| 40% { | |
| background-position: 0 264px; | |
| padding-top: 672px; | |
| } | |
| 43.33333% { | |
| background-position: 0 288px; | |
| padding-top: 696px; | |
| } | |
| 46.66667% { | |
| background-position: 0 -408px; | |
| padding-top: 0px; | |
| } | |
| 50% { | |
| background-position: 0 -384px; | |
| padding-top: 24px; | |
| } | |
| 53.33333% { | |
| background-position: 0 -360px; | |
| padding-top: 48px; | |
| } | |
| 56.66667% { | |
| background-position: 0 -336px; | |
| padding-top: 72px; | |
| } | |
| 60% { | |
| background-position: 0 -312px; | |
| padding-top: 96px; | |
| } | |
| 63.33333% { | |
| background-position: 0 -288px; | |
| padding-top: 120px; | |
| } | |
| 66.66667% { | |
| background-position: 0 -264px; | |
| padding-top: 144px; | |
| } | |
| 70% { | |
| background-position: 0 -240px; | |
| padding-top: 168px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -216px; | |
| padding-top: 192px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -192px; | |
| padding-top: 216px; | |
| } | |
| 80% { | |
| background-position: 0 -168px; | |
| padding-top: 240px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -144px; | |
| padding-top: 264px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -120px; | |
| padding-top: 288px; | |
| } | |
| 90% { | |
| background-position: 0 -96px; | |
| padding-top: 312px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -72px; | |
| padding-top: 336px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -48px; | |
| padding-top: 360px; | |
| } | |
| } | |
| .matrix li:nth-child(9) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(9):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(9):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 456px, #1a122f 456px, #1a122f 720px) 0 -216px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 240px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-9 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-9 { | |
| 0% { | |
| background-position: 0 -216px; | |
| padding-top: 240px; | |
| } | |
| 3.33333% { | |
| background-position: 0 -192px; | |
| padding-top: 264px; | |
| } | |
| 6.66667% { | |
| background-position: 0 -168px; | |
| padding-top: 288px; | |
| } | |
| 10% { | |
| background-position: 0 -144px; | |
| padding-top: 312px; | |
| } | |
| 13.33333% { | |
| background-position: 0 -120px; | |
| padding-top: 336px; | |
| } | |
| 16.66667% { | |
| background-position: 0 -96px; | |
| padding-top: 360px; | |
| } | |
| 20% { | |
| background-position: 0 -72px; | |
| padding-top: 384px; | |
| } | |
| 23.33333% { | |
| background-position: 0 -48px; | |
| padding-top: 408px; | |
| } | |
| 26.66667% { | |
| background-position: 0 -24px; | |
| padding-top: 432px; | |
| } | |
| 30% { | |
| background-position: 0 0px; | |
| padding-top: 456px; | |
| } | |
| 33.33333% { | |
| background-position: 0 24px; | |
| padding-top: 480px; | |
| } | |
| 36.66667% { | |
| background-position: 0 48px; | |
| padding-top: 504px; | |
| } | |
| 40% { | |
| background-position: 0 72px; | |
| padding-top: 528px; | |
| } | |
| 43.33333% { | |
| background-position: 0 96px; | |
| padding-top: 552px; | |
| } | |
| 46.66667% { | |
| background-position: 0 120px; | |
| padding-top: 576px; | |
| } | |
| 50% { | |
| background-position: 0 144px; | |
| padding-top: 600px; | |
| } | |
| 53.33333% { | |
| background-position: 0 168px; | |
| padding-top: 624px; | |
| } | |
| 56.66667% { | |
| background-position: 0 192px; | |
| padding-top: 648px; | |
| } | |
| 60% { | |
| background-position: 0 216px; | |
| padding-top: 672px; | |
| } | |
| 63.33333% { | |
| background-position: 0 240px; | |
| padding-top: 696px; | |
| } | |
| 66.66667% { | |
| background-position: 0 -456px; | |
| padding-top: 0px; | |
| } | |
| 70% { | |
| background-position: 0 -432px; | |
| padding-top: 24px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -408px; | |
| padding-top: 48px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -384px; | |
| padding-top: 72px; | |
| } | |
| 80% { | |
| background-position: 0 -360px; | |
| padding-top: 96px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -336px; | |
| padding-top: 120px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -312px; | |
| padding-top: 144px; | |
| } | |
| 90% { | |
| background-position: 0 -288px; | |
| padding-top: 168px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -264px; | |
| padding-top: 192px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -240px; | |
| padding-top: 216px; | |
| } | |
| } | |
| .matrix li:nth-child(10) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(10):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(10):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 96px, #1a122f 96px, #1a122f 720px) 0 576px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 672px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-10 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-10 { | |
| 0% { | |
| background-position: 0 576px; | |
| padding-top: 672px; | |
| } | |
| 3.33333% { | |
| background-position: 0 600px; | |
| padding-top: 696px; | |
| } | |
| 6.66667% { | |
| background-position: 0 -96px; | |
| padding-top: 0px; | |
| } | |
| 10% { | |
| background-position: 0 -72px; | |
| padding-top: 24px; | |
| } | |
| 13.33333% { | |
| background-position: 0 -48px; | |
| padding-top: 48px; | |
| } | |
| 16.66667% { | |
| background-position: 0 -24px; | |
| padding-top: 72px; | |
| } | |
| 20% { | |
| background-position: 0 0px; | |
| padding-top: 96px; | |
| } | |
| 23.33333% { | |
| background-position: 0 24px; | |
| padding-top: 120px; | |
| } | |
| 26.66667% { | |
| background-position: 0 48px; | |
| padding-top: 144px; | |
| } | |
| 30% { | |
| background-position: 0 72px; | |
| padding-top: 168px; | |
| } | |
| 33.33333% { | |
| background-position: 0 96px; | |
| padding-top: 192px; | |
| } | |
| 36.66667% { | |
| background-position: 0 120px; | |
| padding-top: 216px; | |
| } | |
| 40% { | |
| background-position: 0 144px; | |
| padding-top: 240px; | |
| } | |
| 43.33333% { | |
| background-position: 0 168px; | |
| padding-top: 264px; | |
| } | |
| 46.66667% { | |
| background-position: 0 192px; | |
| padding-top: 288px; | |
| } | |
| 50% { | |
| background-position: 0 216px; | |
| padding-top: 312px; | |
| } | |
| 53.33333% { | |
| background-position: 0 240px; | |
| padding-top: 336px; | |
| } | |
| 56.66667% { | |
| background-position: 0 264px; | |
| padding-top: 360px; | |
| } | |
| 60% { | |
| background-position: 0 288px; | |
| padding-top: 384px; | |
| } | |
| 63.33333% { | |
| background-position: 0 312px; | |
| padding-top: 408px; | |
| } | |
| 66.66667% { | |
| background-position: 0 336px; | |
| padding-top: 432px; | |
| } | |
| 70% { | |
| background-position: 0 360px; | |
| padding-top: 456px; | |
| } | |
| 73.33333% { | |
| background-position: 0 384px; | |
| padding-top: 480px; | |
| } | |
| 76.66667% { | |
| background-position: 0 408px; | |
| padding-top: 504px; | |
| } | |
| 80% { | |
| background-position: 0 432px; | |
| padding-top: 528px; | |
| } | |
| 83.33333% { | |
| background-position: 0 456px; | |
| padding-top: 552px; | |
| } | |
| 86.66667% { | |
| background-position: 0 480px; | |
| padding-top: 576px; | |
| } | |
| 90% { | |
| background-position: 0 504px; | |
| padding-top: 600px; | |
| } | |
| 93.33333% { | |
| background-position: 0 528px; | |
| padding-top: 624px; | |
| } | |
| 96.66667% { | |
| background-position: 0 552px; | |
| padding-top: 648px; | |
| } | |
| } | |
| .matrix li:nth-child(11) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(11):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(11):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 240px, #1a122f 240px, #1a122f 720px) 0 120px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 360px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-11 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-11 { | |
| 0% { | |
| background-position: 0 120px; | |
| padding-top: 360px; | |
| } | |
| 3.33333% { | |
| background-position: 0 144px; | |
| padding-top: 384px; | |
| } | |
| 6.66667% { | |
| background-position: 0 168px; | |
| padding-top: 408px; | |
| } | |
| 10% { | |
| background-position: 0 192px; | |
| padding-top: 432px; | |
| } | |
| 13.33333% { | |
| background-position: 0 216px; | |
| padding-top: 456px; | |
| } | |
| 16.66667% { | |
| background-position: 0 240px; | |
| padding-top: 480px; | |
| } | |
| 20% { | |
| background-position: 0 264px; | |
| padding-top: 504px; | |
| } | |
| 23.33333% { | |
| background-position: 0 288px; | |
| padding-top: 528px; | |
| } | |
| 26.66667% { | |
| background-position: 0 312px; | |
| padding-top: 552px; | |
| } | |
| 30% { | |
| background-position: 0 336px; | |
| padding-top: 576px; | |
| } | |
| 33.33333% { | |
| background-position: 0 360px; | |
| padding-top: 600px; | |
| } | |
| 36.66667% { | |
| background-position: 0 384px; | |
| padding-top: 624px; | |
| } | |
| 40% { | |
| background-position: 0 408px; | |
| padding-top: 648px; | |
| } | |
| 43.33333% { | |
| background-position: 0 432px; | |
| padding-top: 672px; | |
| } | |
| 46.66667% { | |
| background-position: 0 456px; | |
| padding-top: 696px; | |
| } | |
| 50% { | |
| background-position: 0 -240px; | |
| padding-top: 0px; | |
| } | |
| 53.33333% { | |
| background-position: 0 -216px; | |
| padding-top: 24px; | |
| } | |
| 56.66667% { | |
| background-position: 0 -192px; | |
| padding-top: 48px; | |
| } | |
| 60% { | |
| background-position: 0 -168px; | |
| padding-top: 72px; | |
| } | |
| 63.33333% { | |
| background-position: 0 -144px; | |
| padding-top: 96px; | |
| } | |
| 66.66667% { | |
| background-position: 0 -120px; | |
| padding-top: 120px; | |
| } | |
| 70% { | |
| background-position: 0 -96px; | |
| padding-top: 144px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -72px; | |
| padding-top: 168px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -48px; | |
| padding-top: 192px; | |
| } | |
| 80% { | |
| background-position: 0 -24px; | |
| padding-top: 216px; | |
| } | |
| 83.33333% { | |
| background-position: 0 0px; | |
| padding-top: 240px; | |
| } | |
| 86.66667% { | |
| background-position: 0 24px; | |
| padding-top: 264px; | |
| } | |
| 90% { | |
| background-position: 0 48px; | |
| padding-top: 288px; | |
| } | |
| 93.33333% { | |
| background-position: 0 72px; | |
| padding-top: 312px; | |
| } | |
| 96.66667% { | |
| background-position: 0 96px; | |
| padding-top: 336px; | |
| } | |
| } | |
| .matrix li:nth-child(12) { | |
| position: relative; | |
| display: inline-block; | |
| white-space: normal; | |
| vertical-align: top; | |
| } | |
| .matrix li:nth-child(12):before { | |
| display: block; | |
| width: 8em; | |
| content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf"; | |
| } | |
| .matrix li:nth-child(12):after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 456px, #1a122f 456px, #1a122f 720px) 0 -144px repeat; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| color: white; | |
| content: "SassConf"; | |
| padding-top: 312px; | |
| overflow: hidden; | |
| -webkit-animation: 2400ms column-12 infinite steps(1, start); | |
| } | |
| @-webkit-keyframes column-12 { | |
| 0% { | |
| background-position: 0 -144px; | |
| padding-top: 312px; | |
| } | |
| 3.33333% { | |
| background-position: 0 -120px; | |
| padding-top: 336px; | |
| } | |
| 6.66667% { | |
| background-position: 0 -96px; | |
| padding-top: 360px; | |
| } | |
| 10% { | |
| background-position: 0 -72px; | |
| padding-top: 384px; | |
| } | |
| 13.33333% { | |
| background-position: 0 -48px; | |
| padding-top: 408px; | |
| } | |
| 16.66667% { | |
| background-position: 0 -24px; | |
| padding-top: 432px; | |
| } | |
| 20% { | |
| background-position: 0 0px; | |
| padding-top: 456px; | |
| } | |
| 23.33333% { | |
| background-position: 0 24px; | |
| padding-top: 480px; | |
| } | |
| 26.66667% { | |
| background-position: 0 48px; | |
| padding-top: 504px; | |
| } | |
| 30% { | |
| background-position: 0 72px; | |
| padding-top: 528px; | |
| } | |
| 33.33333% { | |
| background-position: 0 96px; | |
| padding-top: 552px; | |
| } | |
| 36.66667% { | |
| background-position: 0 120px; | |
| padding-top: 576px; | |
| } | |
| 40% { | |
| background-position: 0 144px; | |
| padding-top: 600px; | |
| } | |
| 43.33333% { | |
| background-position: 0 168px; | |
| padding-top: 624px; | |
| } | |
| 46.66667% { | |
| background-position: 0 192px; | |
| padding-top: 648px; | |
| } | |
| 50% { | |
| background-position: 0 216px; | |
| padding-top: 672px; | |
| } | |
| 53.33333% { | |
| background-position: 0 240px; | |
| padding-top: 696px; | |
| } | |
| 56.66667% { | |
| background-position: 0 -456px; | |
| padding-top: 0px; | |
| } | |
| 60% { | |
| background-position: 0 -432px; | |
| padding-top: 24px; | |
| } | |
| 63.33333% { | |
| background-position: 0 -408px; | |
| padding-top: 48px; | |
| } | |
| 66.66667% { | |
| background-position: 0 -384px; | |
| padding-top: 72px; | |
| } | |
| 70% { | |
| background-position: 0 -360px; | |
| padding-top: 96px; | |
| } | |
| 73.33333% { | |
| background-position: 0 -336px; | |
| padding-top: 120px; | |
| } | |
| 76.66667% { | |
| background-position: 0 -312px; | |
| padding-top: 144px; | |
| } | |
| 80% { | |
| background-position: 0 -288px; | |
| padding-top: 168px; | |
| } | |
| 83.33333% { | |
| background-position: 0 -264px; | |
| padding-top: 192px; | |
| } | |
| 86.66667% { | |
| background-position: 0 -240px; | |
| padding-top: 216px; | |
| } | |
| 90% { | |
| background-position: 0 -216px; | |
| padding-top: 240px; | |
| } | |
| 93.33333% { | |
| background-position: 0 -192px; | |
| padding-top: 264px; | |
| } | |
| 96.66667% { | |
| background-position: 0 -168px; | |
| padding-top: 288px; | |
| } | |
| } |
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
| <ul class='matrix'> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment