initial commit
This commit is contained in:
41
assets/sass/_mixins.scss
Normal file
41
assets/sass/_mixins.scss
Normal file
@ -0,0 +1,41 @@
|
||||
@mixin vendor-property($property, $value) {
|
||||
@each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
|
||||
#{$vendor}#{$property}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vendor-value($property, $value) {
|
||||
@each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
|
||||
#{$property}: #{$vendor}#{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vendor($property, $value) {
|
||||
@each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
|
||||
#{$vendor}#{$property}: #{$vendor}#{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vendor-keyframes($name) {
|
||||
@-moz-keyframes #{$name} { @content; }
|
||||
@-webkit-keyframes #{$name} { @content; }
|
||||
@-o-keyframes #{$name} { @content; }
|
||||
@-ms-keyframes #{$name} { @content; }
|
||||
@keyframes #{$name} { @content; }
|
||||
}
|
||||
|
||||
@mixin icon($content: false) {
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
@if $content {
|
||||
content: $content;
|
||||
}
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: FontAwesome;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-transform: none !important;
|
||||
}
|
||||
}
|
||||
42
assets/sass/_vars.scss
Normal file
42
assets/sass/_vars.scss
Normal file
@ -0,0 +1,42 @@
|
||||
//
|
||||
// Aerial by HTML5 UP
|
||||
// html5up.net | @n33co
|
||||
// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
//
|
||||
|
||||
$bg: #348cb2 url("images/bg.jpg") bottom left;
|
||||
$bg-width: 1500px;
|
||||
|
||||
$color-bg: #fff;
|
||||
$color-fg: #fff;
|
||||
$color-nav-icon-hover-bg: rgba(255,255,255,0.175);
|
||||
$color-nav-icon-hover-fg: #fff;
|
||||
$color-nav-icon-active-bg: rgba(255,255,255,0.35);
|
||||
$color-nav-icon-active-fg: #fff;
|
||||
|
||||
$duration-bg: 60s;
|
||||
$duration-wrapper: 3s;
|
||||
$duration-overlay: 1.5s;
|
||||
$duration-header: 1s;
|
||||
$duration-nav-icons: 0.5s;
|
||||
|
||||
$delay-wrapper: $duration-wrapper - 1s;
|
||||
$delay-overlay: $delay-wrapper - 0.5s;
|
||||
$delay-header: $delay-overlay + $duration-overlay - 0.75s;
|
||||
$delay-nav-icons: $delay-header + $duration-header - 1s;
|
||||
$delay-nav-icon: 0.25s;
|
||||
|
||||
$size-nav-icon-wrapper: 5.35em;
|
||||
$size-nav-icon: 1.75em;
|
||||
|
||||
@mixin bg($width) {
|
||||
@include vendor-keyframes('bg') {
|
||||
0% { @include vendor-property('transform', 'translate3d(0,0,0)'); }
|
||||
100% { @include vendor-property('transform', 'translate3d(#{$width * -1},0,0)'); }
|
||||
}
|
||||
|
||||
#bg {
|
||||
background-size: $width auto;
|
||||
width: ($width * 3);
|
||||
}
|
||||
}
|
||||
32
assets/sass/ie/v8.scss
Normal file
32
assets/sass/ie/v8.scss
Normal file
@ -0,0 +1,32 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import '../vars';
|
||||
@import '../mixins';
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
nav {
|
||||
a {
|
||||
position: relative;
|
||||
border: solid 1px $color-fg;
|
||||
border-radius: 100%;
|
||||
-ms-behavior: url('css/ie/PIE.htc');
|
||||
&:before {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
background-image: url('images/footer.png');
|
||||
background-position: bottom left;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
38
assets/sass/ie/v9.scss
Normal file
38
assets/sass/ie/v9.scss
Normal file
@ -0,0 +1,38 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import '../vars';
|
||||
@import '../mixins';
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
#wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
|
||||
#overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
opacity: 1;
|
||||
|
||||
nav {
|
||||
li {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
background-image: url('images/footer.svg');
|
||||
}
|
||||
48
assets/sass/style-mobile.scss
Normal file
48
assets/sass/style-mobile.scss
Normal file
@ -0,0 +1,48 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
/* Basic */
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
body, input, select, textarea {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
/* BG */
|
||||
|
||||
@include bg($bg-width * 0.2);
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: 1em;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&:active {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
20
assets/sass/style-mobilep.scss
Normal file
20
assets/sass/style-mobilep.scss
Normal file
@ -0,0 +1,20 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
/* BG */
|
||||
|
||||
@include bg($bg-width * 0.275);
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
nav {
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
18
assets/sass/style-normal.scss
Normal file
18
assets/sass/style-normal.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
/* Basic */
|
||||
|
||||
body, input, select, textarea {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
/* BG */
|
||||
|
||||
@include bg($bg-width * 0.5);
|
||||
32
assets/sass/style-noscript.scss
Normal file
32
assets/sass/style-noscript.scss
Normal file
@ -0,0 +1,32 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
#wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
|
||||
#overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
opacity: 1;
|
||||
|
||||
nav {
|
||||
li {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
assets/sass/style-wide.scss
Normal file
18
assets/sass/style-wide.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
/* Basic */
|
||||
|
||||
body, input, select, textarea {
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
/* BG */
|
||||
|
||||
@include bg($bg-width);
|
||||
256
assets/sass/style.scss
Normal file
256
assets/sass/style.scss
Normal file
@ -0,0 +1,256 @@
|
||||
/*
|
||||
Aerial by HTML5 UP
|
||||
html5up.net | @n33co
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
@charset 'UTF-8';
|
||||
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900');
|
||||
@import url('font-awesome.min.css');
|
||||
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
|
||||
/* Basic */
|
||||
|
||||
body, input, select, textarea {
|
||||
color: $color-fg;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 15pt;
|
||||
font-weight: 300 !important;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.75em;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $color-bg;
|
||||
overflow: hidden;
|
||||
|
||||
&.loading{
|
||||
* {
|
||||
@include vendor-property('animation', 'none !important');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include vendor-property('transition', 'border-color 0.2s ease-in-out');
|
||||
border-bottom: dotted 1px;
|
||||
color: inherit;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
|
||||
.icon {
|
||||
@include icon;
|
||||
position: relative;
|
||||
|
||||
> .label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
@include vendor-keyframes('wrapper') {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
@include vendor-property('animation', 'wrapper #{$duration-wrapper} forwards');
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* BG */
|
||||
|
||||
#bg {
|
||||
@include vendor-property('animation', 'bg #{$duration-bg} linear infinite');
|
||||
@include vendor-property('backface-visibility', 'hidden');
|
||||
@include vendor-property('transform', 'translate3d(0,0,0)');
|
||||
|
||||
/* Set your background with this */
|
||||
background: $bg;
|
||||
|
||||
background-repeat: repeat-x;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@include bg($bg-width * 1.5);
|
||||
|
||||
/* Overlay */
|
||||
|
||||
@include vendor-keyframes('overlay') {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
#overlay {
|
||||
@include vendor-property('animation', 'overlay #{$duration-overlay} #{$delay-overlay} forwards');
|
||||
background-attachment: fixed, fixed;
|
||||
background-image: url('images/overlay-pattern.png'), url('images/overlay.svg');
|
||||
background-position: top left, center center;
|
||||
background-repeat: repeat, no-repeat;
|
||||
background-size: auto, cover;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin-right: 0;
|
||||
vertical-align: middle;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
@include vendor-keyframes('header') {
|
||||
0% { @include vendor-property('transform', 'translate3d(0,1em,0)'); opacity: 0; }
|
||||
100% { @include vendor-property('transform', 'translate3d(0,0,0)'); opacity: 1; }
|
||||
}
|
||||
|
||||
@include vendor-keyframes('nav-icons') {
|
||||
0% { @include vendor-property('transform', 'translate3d(0,1em,0)'); opacity: 0; }
|
||||
100% { @include vendor-property('transform', 'translate3d(0,0,0)'); opacity: 1; }
|
||||
}
|
||||
|
||||
#header {
|
||||
@include vendor-property('animation', 'header #{$duration-header} #{$delay-header} forwards');
|
||||
@include vendor-property('backface-visibility', 'hidden');
|
||||
@include vendor-property('transform', 'translate3d(0,0,0)');
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: -1em;
|
||||
vertical-align: middle;
|
||||
width: 90%;
|
||||
|
||||
h1 {
|
||||
font-size: 4.35em;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25em;
|
||||
margin: 0.75em 0 0.25em 0;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: 1.5em 0 0 0;
|
||||
|
||||
li {
|
||||
@include vendor-property('animation', 'nav-icons #{$duration-nav-icons} ease-in-out forwards');
|
||||
@include vendor-property('backface-visibility', 'hidden');
|
||||
@include vendor-property('transform', 'translate3d(0,0,0)');
|
||||
display: inline-block;
|
||||
height: $size-nav-icon-wrapper;
|
||||
line-height: $size-nav-icon-wrapper * 1.1;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: $size-nav-icon-wrapper;
|
||||
|
||||
@for $x from 1 through 10 {
|
||||
&:nth-child(#{$x}) {
|
||||
@include vendor-property('animation-delay', $delay-nav-icons + ($x * $delay-nav-icon));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
@include vendor-property('transition', 'all 0.2s ease-in-out');
|
||||
border-radius: 100%;
|
||||
border: solid 1px $color-fg;
|
||||
display: block;
|
||||
font-size: $size-nav-icon;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
font-size: 1.1em;
|
||||
|
||||
&:before {
|
||||
background-color: $color-nav-icon-hover-bg;
|
||||
color: $color-nav-icon-hover-fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
font-size: 0.95em;
|
||||
background: none;
|
||||
|
||||
&:before {
|
||||
background-color: $color-nav-icon-active-bg;
|
||||
color: $color-nav-icon-active-fg;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
@include vendor-value('background-image', 'linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%)');
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
height: 6em;
|
||||
left: 0;
|
||||
line-height: 8em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user