Created
October 4, 2015 20:36
-
-
Save aolko/0c9d43884f7b0727483c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <header> | |
| <div class="logo"></div> | |
| <ul class="nav"> | |
| <li><a href="#">Новости</a></li> | |
| <li><a href="#">Сетка</a></li> | |
| <li><a href="#">Проекты</a></li> | |
| <li><a href="#">Люди</a></li> | |
| </ul> | |
| </header> | |
| <section class="body"> | |
| <section class="player"> | |
| <span id="msg">Произошла ошибка. <br> На две строки.</span> | |
| </section> | |
| </section> | |
| <footer> | |
| <section id="links1"> | |
| <h3>Ссылки</h3> | |
| <ul class="nav"> | |
| <li><a href="#">Отказ от ответственности</a></li> | |
| <li><a href="#">1</a></li> | |
| <li><a href="#">2</a></li> | |
| <li><a href="#">3</a></li> | |
| </ul> | |
| </section> | |
| <section id="links2"> | |
| <h3>Ссылки2</h3> | |
| <ul class="nav"> | |
| <li><a href="#">Отказ от ответственности</a></li> | |
| <li><a href="#">1</a></li> | |
| <li><a href="#">2</a></li> | |
| <li><a href="#">3</a></li> | |
| </ul> | |
| </section> | |
| <section id="links3"> | |
| <h3>Ссылки3</h3> | |
| <ul class="nav"> | |
| <li><a href="#">Отказ от ответственности</a></li> | |
| <li><a href="#">1</a></li> | |
| <li><a href="#">2</a></li> | |
| <li><a href="#">3</a></li> | |
| </ul> | |
| </section> | |
| <section id="links4"> | |
| <h3>Соцсети</h3> | |
| <ul class="nav"> | |
| <li><a href="#">ВК</a></li> | |
| <li><a href="#">youtube</a></li> | |
| <li><a href="#">dailymotion</a></li> | |
| <li></li> | |
| </ul> | |
| </section> | |
| </footer> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| // ---- | |
| // libsass (v3.3.0-beta2) | |
| // ---- | |
| /*! Flexible Grid System 5.4.0 | Scss Plus | MIT License | flexible.gs */ | |
| @mixin wrap($prop: null, $val: null) { | |
| @if $prop == null { | |
| display: block; | |
| width: 100%; | |
| font-size: 0; | |
| letter-spacing: 0; | |
| text-align: left; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| > * { | |
| display: inline-block; | |
| } | |
| } | |
| @else if $prop == table { | |
| display: table; | |
| table-layout: fixed; | |
| -webkit-flex-direction: initial; | |
| -ms-flex-direction: initial; | |
| flex-direction: initial; | |
| -webkit-flex-wrap: initial; | |
| -ms-flex-wrap: initial; | |
| flex-wrap: initial; | |
| -webkit-justify-content: initial; | |
| -ms-justify-content: initial; | |
| justify-content: initial; | |
| -webkit-align-content: initial; | |
| -ms-align-content: initial; | |
| align-content: initial; | |
| -webkit-align-items: initial; | |
| -ms-align-items: initial; | |
| align-items: initial; | |
| -webkit-column-count: auto; | |
| -moz-column-count: auto; | |
| column-count: auto; | |
| > * { | |
| display: table-cell; | |
| } | |
| } | |
| @else if $prop == flexbox { | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| table-layout: auto; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-justify-content: flex-start; | |
| -ms-justify-content: flex-start; | |
| justify-content: flex-start; | |
| -webkit-align-content: center; | |
| -ms-align-content: center; | |
| align-content: center; | |
| -webkit-align-items: center; | |
| -ms-align-items: center; | |
| align-items: center; | |
| -webkit-column-count: auto; | |
| -moz-column-count: auto; | |
| column-count: auto; | |
| > * { | |
| display: inline-block; | |
| } | |
| } | |
| @else if $prop == normal { | |
| display: block; | |
| table-layout: auto; | |
| -webkit-flex-direction: initial; | |
| -ms-flex-direction: initial; | |
| flex-direction: initial; | |
| -webkit-flex-wrap: initial; | |
| -ms-flex-wrap: initial; | |
| flex-wrap: initial; | |
| -webkit-justify-content: initial; | |
| -ms-justify-content: initial; | |
| justify-content: initial; | |
| -webkit-align-content: initial; | |
| -ms-align-content: initial; | |
| align-content: initial; | |
| -webkit-align-items: initial; | |
| -ms-align-items: initial; | |
| align-items: initial; | |
| -webkit-column-count: auto; | |
| -moz-column-count: auto; | |
| column-count: auto; | |
| > * { | |
| display: inline-block; | |
| } | |
| } | |
| @else if $prop == left { | |
| -webkit-justify-content: flex-start; | |
| -ms-justify-content: flex-start; | |
| justify-content: flex-start; | |
| text-align: left; | |
| } | |
| @else if $prop == center { | |
| -webkit-justify-content: center; | |
| -ms-justify-content: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| @else if $prop == right { | |
| -webkit-justify-content: flex-end; | |
| -ms-justify-content: flex-end; | |
| justify-content: flex-end; | |
| text-align: right; | |
| } | |
| @else if $prop == top { | |
| -webkit-align-items: flex-start; | |
| -ms-align-items: flex-start; | |
| align-items: flex-start; | |
| > * { | |
| vertical-align: top; | |
| } | |
| } | |
| @else if $prop == middle { | |
| -webkit-align-items: center; | |
| -ms-align-items: center; | |
| align-items: center; | |
| > * { | |
| vertical-align: middle; | |
| } | |
| } | |
| @else if $prop == bottom { | |
| -webkit-align-items: flex-end; | |
| -ms-align-items: flex-end; | |
| align-items: flex-end; | |
| > * { | |
| vertical-align: bottom; | |
| } | |
| } | |
| @else if $prop == between { | |
| -webkit-justify-content: space-between; | |
| -ms-justify-content: space-between; | |
| justify-content: space-between; | |
| -webkit-align-content: space-between; | |
| -ms-align-content: space-between; | |
| align-content: space-between; | |
| } | |
| @else if $prop == around { | |
| -webkit-justify-content: space-around; | |
| -ms-justify-content: space-around; | |
| justify-content: space-around; | |
| -webkit-align-content: space-around; | |
| -ms-align-content: space-around; | |
| align-content: space-around; | |
| } | |
| @else if $prop == baseline { | |
| -webkit-align-items: baseline; | |
| -ms-align-items: baseline; | |
| align-items: baseline; | |
| } | |
| @else if $prop == reverse { | |
| -webkit-flex-direction: row-reverse; | |
| -ms-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| -webkit-flex-wrap: wrap-reverse; | |
| -ms-flex-wrap: wrap-reverse; | |
| flex-wrap: wrap-reverse; | |
| } | |
| @else if $prop == not-reverse { | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| @else if $prop == gutter { | |
| width: calc(100% + #{$val}#{"px"}); | |
| margin-left: -#{$val / 2}#{"px"}; | |
| margin-right: -#{$val / 2}#{"px"}; | |
| padding-left: 0; | |
| padding-right: 0; | |
| > * { | |
| padding-left: #{$val / 2}#{"px"}; | |
| padding-right: #{$val / 2}#{"px"}; | |
| } | |
| } | |
| @else if $prop == outside { | |
| width: 100%; | |
| margin-left: 0; | |
| margin-right: 0; | |
| padding-left: #{$val / 2}#{"px"}; | |
| padding-right: #{$val / 2}#{"px"}; | |
| } | |
| @else if $prop == masonry { | |
| -webkit-column-count: $val; | |
| -moz-column-count: $val; | |
| column-count: $val; | |
| } | |
| @else { | |
| > * { | |
| @if $prop == auto { | |
| width: auto; | |
| } | |
| @else { | |
| width: #{100% / $prop}; | |
| } | |
| } | |
| } | |
| } | |
| @mixin col($prop: null, $val: null) { | |
| @if $prop == null { | |
| min-height: 1px; | |
| font-size: 1rem; | |
| vertical-align: middle; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| @else if $prop == width { | |
| width: #{$val}#{"px"}; | |
| } | |
| @else if $prop == hidden { | |
| display: none; | |
| } | |
| @else if $prop == not-hidden { | |
| display: inline-block; | |
| } | |
| @else if $prop == first { | |
| -ms-flex-order: -1; | |
| -webkit-order: -1; | |
| order: -1; | |
| } | |
| @else if $prop == not-first { | |
| -ms-flex-order: 0; | |
| -webkit-order: 0; | |
| order: 0; | |
| } | |
| @else if $prop == last { | |
| -ms-flex-order: 1; | |
| -webkit-order: 1; | |
| order: 1; | |
| } | |
| @else if $prop == not-last { | |
| -ms-flex-order: 0; | |
| -webkit-order: 0; | |
| order: 0; | |
| } | |
| @else { | |
| width: #{100% / $val * $prop}; | |
| } | |
| } | |
| //Imports | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,cyrillic); | |
| //Variables & Mixins | |
| @mixin paperShadow($size,$opacity,$type:outer){ | |
| @if $type == "outer" { | |
| -webkit-box-shadow: 0px 0px $size 0px rgba(0, 0, 0, $opacity); | |
| -moz-box-shadow: 0px 0px $size 0px rgba(0, 0, 0, $opacity); | |
| box-shadow: 0px 0px $size 0px rgba(0, 0, 0, $opacity); | |
| } | |
| @if $type == "inner"{ | |
| -webkit-box-shadow: inset 0px 0px $size 0px rgba(0, 0, 0, $opacity); | |
| -moz-box-shadow: inset 0px 0px $size 0px rgba(0, 0, 0, $opacity); | |
| box-shadow: inset 0px 0px $size 0px rgba(0, 0, 0, $opacity); | |
| } | |
| } | |
| @mixin header-gradient($invert:""){ | |
| @if $invert=="invert"{ | |
| background: #d8d8d8; | |
| background: -moz-linear-gradient(top, #d8d8d8 0%, #ececec 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#ececec)); | |
| background: -webkit-linear-gradient(top, #d8d8d8 0%,#ececec 100%); | |
| background: -o-linear-gradient(top, #d8d8d8 0%,#ececec 100%); | |
| background: -ms-linear-gradient(top, #d8d8d8 0%,#ececec 100%); | |
| background: linear-gradient(to bottom, #d8d8d8 0%,#ececec 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ececec',GradientType=0 ); | |
| } | |
| @else { | |
| background: #ececec; | |
| background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #d8d8d8)); | |
| background: -webkit-linear-gradient(top, #ececec 0%, #d8d8d8 100%); | |
| background: -o-linear-gradient(top, #ececec 0%, #d8d8d8 100%); | |
| background: -ms-linear-gradient(top, #ececec 0%, #d8d8d8 100%); | |
| background: linear-gradient(to bottom, #ececec 0%, #d8d8d8 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ececec', endColorstr='#d8d8d8', GradientType=0); | |
| } | |
| } | |
| //Colors & Fonts | |
| //Styles | |
| * { | |
| margin:0; | |
| padding:0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 12pt; | |
| background: #ececec; | |
| } | |
| .wrap{ | |
| width:1024px; | |
| margin: 0 auto; | |
| //background-color: white; | |
| header{ | |
| margin:0 0 10px 0; | |
| @include paperShadow(5px,0.5,outer); | |
| .logo{ | |
| height:50px; | |
| background: | |
| url('../img/rts-logo.png') center no-repeat, //logo | |
| #4a92be url('../img/patterns/notebook-blue.png') repeat; //pattern | |
| background-size: contain,auto; | |
| } | |
| ul.nav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background: #ececec; | |
| //@include header-gradient; | |
| text-align: center; | |
| //@include paperShadow(); | |
| li{ | |
| display: inline-block; | |
| margin-right:-5px; | |
| a{ | |
| display: inline-block; | |
| background-color: #ececec; | |
| //@include header-gradient; | |
| padding:5px 10px; | |
| text-decoration: none; | |
| color: black; | |
| &:hover{ | |
| background-color: darken(#ececec,5%); | |
| } | |
| &:active{ | |
| @include paperShadow(5px,0.3,inner); | |
| background: darken(#ececec,15%) !important;// | |
| } | |
| } | |
| } | |
| } | |
| } | |
| section.body{ | |
| //padding: 5px; | |
| margin: 10px 0; | |
| section.player{ | |
| background-color: black; | |
| height:480px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| @include paperShadow(5px,0.5,outer); | |
| #msg{ | |
| text-align: center; | |
| } | |
| object,iframe{ | |
| width:100%; | |
| height:100%; | |
| border:0; | |
| } | |
| } | |
| } | |
| footer{ | |
| padding: 10px; | |
| //height:150px; | |
| color:white; | |
| background-color: #202020; | |
| /*display: flex; | |
| align-items: flex-start; | |
| justify-content: center;*/ | |
| //flex-direction: column; | |
| //margin: 10px 0; | |
| @include wrap; | |
| //@include wrap(gutter,10); | |
| @include wrap(4); | |
| @include paperShadow(5px,0.5,outer); | |
| section{ | |
| @include col; | |
| vertical-align: top; | |
| &#about{ | |
| @include wrap(right); | |
| } | |
| } | |
| ul.nav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| //text-align: center; | |
| //@include paperShadow(); | |
| li{ | |
| display: inline-block; | |
| margin-right:-5px; | |
| width:100%; | |
| a{ | |
| display: inline-block; | |
| text-decoration: none; | |
| color: white; | |
| &:hover,&:active{ | |
| color:gold; | |
| } | |
| &:visited{ | |
| color:goldenrod; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains 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
| /*! Flexible Grid System 5.4.0 | Scss Plus | MIT License | flexible.gs */ | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,cyrillic); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 12pt; | |
| background: #ececec; | |
| } | |
| .wrap { | |
| width: 1024px; | |
| margin: 0 auto; | |
| } | |
| .wrap header { | |
| margin: 0 0 10px 0; | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| } | |
| .wrap header .logo { | |
| height: 50px; | |
| background: url("../img/rts-logo.png") center no-repeat, #4a92be url("../img/patterns/notebook-blue.png") repeat; | |
| background-size: contain,auto; | |
| } | |
| .wrap header ul.nav { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background: #ececec; | |
| text-align: center; | |
| } | |
| .wrap header ul.nav li { | |
| display: inline-block; | |
| margin-right: -5px; | |
| } | |
| .wrap header ul.nav li a { | |
| display: inline-block; | |
| background-color: #ececec; | |
| padding: 5px 10px; | |
| text-decoration: none; | |
| color: black; | |
| } | |
| .wrap header ul.nav li a:hover { | |
| background-color: #dfdfdf; | |
| } | |
| .wrap header ul.nav li a:active { | |
| -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3); | |
| box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3); | |
| background: #c6c6c6 !important; | |
| } | |
| .wrap section.body { | |
| margin: 10px 0; | |
| } | |
| .wrap section.body section.player { | |
| background-color: black; | |
| height: 480px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| } | |
| .wrap section.body section.player #msg { | |
| text-align: center; | |
| } | |
| .wrap section.body section.player object, .wrap section.body section.player iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| } | |
| .wrap footer { | |
| padding: 10px; | |
| color: white; | |
| background-color: #202020; | |
| /*display: flex; | |
| align-items: flex-start; | |
| justify-content: center;*/ | |
| display: block; | |
| width: 100%; | |
| font-size: 0; | |
| letter-spacing: 0; | |
| text-align: left; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); | |
| } | |
| .wrap footer > * { | |
| display: inline-block; | |
| } | |
| .wrap footer > * { | |
| width: 25%; | |
| } | |
| .wrap footer section { | |
| min-height: 1px; | |
| font-size: 1rem; | |
| vertical-align: middle; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| vertical-align: top; | |
| } | |
| .wrap footer section#about { | |
| -webkit-justify-content: flex-end; | |
| -ms-justify-content: flex-end; | |
| justify-content: flex-end; | |
| text-align: right; | |
| } | |
| .wrap footer ul.nav { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .wrap footer ul.nav li { | |
| display: inline-block; | |
| margin-right: -5px; | |
| width: 100%; | |
| } | |
| .wrap footer ul.nav li a { | |
| display: inline-block; | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .wrap footer ul.nav li a:hover, .wrap footer ul.nav li a:active { | |
| color: gold; | |
| } | |
| .wrap footer ul.nav li a:visited { | |
| color: goldenrod; | |
| } |
This file contains 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
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <header> | |
| <div class="logo"></div> | |
| <ul class="nav"> | |
| <li><a href="#">Новости</a></li> | |
| <li><a href="#">Сетка</a></li> | |
| <li><a href="#">Проекты</a></li> | |
| <li><a href="#">Люди</a></li> | |
| </ul> | |
| </header> | |
| <section class="body"> | |
| <section class="player"> | |
| <span id="msg">Произошла ошибка. <br> На две строки.</span> | |
| </section> | |
| </section> | |
| <footer> | |
| <section id="links1"> | |
| <h3>Ссылки</h3> | |
| <ul class="nav"> | |
| <li><a href="#">Отказ от ответственности</a></li> | |
| <li><a href="#">1</a></li> | |
| <li><a href="#">2</a></li> | |
| <li><a href="#">3</a></li> | |
| </ul> | |
| </section> | |
| <section id="links2"> | |
| <h3>Ссылки2</h3> | |
| <ul class="nav"> | |
| <li><a href="#">Отказ от ответственности</a></li> | |
| <li><a href="#">1</a></li> | |
| <li><a href="#">2</a></li> | |
| <li><a href="#">3</a></li> | |
| </ul> | |
| </section> | |
| <section id="links3"> | |
| <h3>Ссылки3</h3> | |
| <ul class="nav"> | |
| <li><a href="#">Отказ от ответственности</a></li> | |
| <li><a href="#">1</a></li> | |
| <li><a href="#">2</a></li> | |
| <li><a href="#">3</a></li> | |
| </ul> | |
| </section> | |
| <section id="links4"> | |
| <h3>Соцсети</h3> | |
| <ul class="nav"> | |
| <li><a href="#">ВК</a></li> | |
| <li><a href="#">youtube</a></li> | |
| <li><a href="#">dailymotion</a></li> | |
| <li></li> | |
| </ul> | |
| </section> | |
| </footer> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment