bludit/themes/aerial/sass/style.scss

/*
	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%;
	}