whisper.cat stuff
This commit is contained in:
[Harper Innes]
98
weboasis/error/sass/_mixins.scss
Normal file
98
weboasis/error/sass/_mixins.scss
Normal file
@ -0,0 +1,98 @@
|
||||
// WebKit font-smoothing
|
||||
// Values: none, antialiased (default), subpixel-antialiased
|
||||
@mixin font-smoothing($value: on) {
|
||||
@if $value == on {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@else {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Cross-browser mixins transition cubic-bezier
|
||||
@mixin bezier-transition($transition-property, $transition-time, $method) {
|
||||
-webkit-transition: $transition-property $transition-time $method;
|
||||
-moz-transition: $transition-property $transition-time $method;
|
||||
-ms-transition: $transition-property $transition-time $method;
|
||||
-o-transition: $transition-property $transition-time $method;
|
||||
transition: $transition-property $transition-time $method;
|
||||
}
|
||||
|
||||
@mixin box-shadow($params) {
|
||||
-webkit-box-shadow: $params;
|
||||
-moz-box-shadow: $params;
|
||||
box-shadow: $params;
|
||||
}
|
||||
|
||||
// Cross-browser mixins border-radius
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Cross-browser mixins rotate
|
||||
@mixin rotate($rotate) {
|
||||
-ms-transform: rotate($rotate);
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate($rotate);
|
||||
/* Chrome, Safari, Opera */
|
||||
-moz-transform: rotate($rotate);
|
||||
transform: rotate($rotate);
|
||||
}
|
||||
|
||||
// Devices Media Queries
|
||||
$special-phone: 667px;
|
||||
$special-tablet: 1024px;
|
||||
|
||||
// General Media Queries
|
||||
$phone-width: 480px;
|
||||
$tablet-width: 767px;
|
||||
$medium-width: 1024px;
|
||||
$notebook-width: 1280px;
|
||||
$desktop-width: 1600px;
|
||||
|
||||
@mixin landscape-phone {
|
||||
@media screen and (max-device-width: $special-phone) and (orientation: landscape) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin landscape-tablet {
|
||||
@media only screen and (max-device-width: $special-tablet) and (orientation: landscape) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin phone {
|
||||
@media only screen and (max-width: $phone-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media only screen and (max-width: $tablet-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin medium {
|
||||
@media only screen and (max-width: $medium-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin notebook {
|
||||
@media only screen and (max-width: $notebook-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media only screen and (max-width: $desktop-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
74
weboasis/error/sass/_vars.scss
Normal file
74
weboasis/error/sass/_vars.scss
Normal file
@ -0,0 +1,74 @@
|
||||
// Duration.
|
||||
$fast-transition: 0.2s;
|
||||
$medium-transition: 0.3s;
|
||||
$long-transition: 0.6s;
|
||||
|
||||
// Font properties
|
||||
$courier-family: 'Courier', 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif;
|
||||
$open-family: 'Open Sans', 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif;
|
||||
$mont-family: Montserrat, 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif;
|
||||
$dosis-family: Dosis, 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif;
|
||||
|
||||
// Weight
|
||||
$font-weight: 400;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
// Main colors
|
||||
$white: #FFFFFF;
|
||||
$black: #000000;
|
||||
$shark: #2B2D35;
|
||||
$gallery: #EFEFEF;
|
||||
$ebony-clay: #20232D;
|
||||
$bright-gray: #323a45;
|
||||
|
||||
|
||||
$mint-julep: #F1E7C0;
|
||||
$husk: #BB9955;
|
||||
|
||||
$harlequin: #33ff33;
|
||||
$mint-green: #80ff80;
|
||||
|
||||
// Custom colors
|
||||
$torch-red: #FF1D4D;
|
||||
$meadow: #1abc9c;
|
||||
$buttercup: #f1c40f;
|
||||
$curious-blue: #3498DB;
|
||||
$zest: #e67e22;
|
||||
$wisteria: #9b59b6;
|
||||
$caribbean-green: #00c8aa;
|
||||
$raven: #757A86;
|
||||
$darky-shark: #0a1a24;
|
||||
|
||||
// Secondary colors
|
||||
$athens-gray: #f2f3f7;
|
||||
$black-gloss: #292f33;
|
||||
$lynch: #6C7A89;
|
||||
$mine-shaft: #333333;
|
||||
$alabaster: #F8F8F8;
|
||||
$concrete: #F2F2F2;
|
||||
$clouds: #ecf0f1;
|
||||
$silver: #BABABA;
|
||||
$silver-chalice: #B2B2B2;
|
||||
$dusty-gray: #999999;
|
||||
$boulder: #777777;
|
||||
$dove-gray: #747c83;
|
||||
$light-gray: #F7F7F7;
|
||||
|
||||
// Alert forms colors
|
||||
$green-alert: #27AE60;
|
||||
$red-alert: #CF000F;
|
||||
|
||||
// Social Media Brand Colors */
|
||||
$twitter: #00aced;
|
||||
$facebook: #3b5998;
|
||||
$googleplus: #dd4b39;
|
||||
$pinterest: #cb2027;
|
||||
$linkedin: #007bb6;
|
||||
$youtube: #bb0000;
|
||||
$vimeo: #aad450;
|
||||
$tumblr: #32506d;
|
||||
$instagram: #517fa4;
|
||||
$flickr: #ff0084;
|
||||
$dribbble: #ea4c89;
|
||||
$soundcloud: #ff3a00;
|
||||
$behance: #1769ff;
|
||||
244
weboasis/error/sass/style-flat.scss
Normal file
244
weboasis/error/sass/style-flat.scss
Normal file
@ -0,0 +1,244 @@
|
||||
/*
|
||||
* DOZ - Creative 404 Pages
|
||||
* Build Date: August 2015
|
||||
* Author: Madeon08
|
||||
* Copyright (C) 2015 Madeon08
|
||||
* This is a premium product available exclusively here : http://themeforest.net/user/Madeon08/portfolio
|
||||
*/
|
||||
|
||||
/* TABLE OF CONTENTS
|
||||
---------------------------
|
||||
*. @Import & Reset
|
||||
1. Generic styles
|
||||
2. Media Queries
|
||||
*/
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* *. @Import & Reset .................. */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* http://bourbon.io/ Sass Mixin Library */
|
||||
@import "bourbon";
|
||||
|
||||
// colors, fonts, sizes etc...
|
||||
@import "vars";
|
||||
|
||||
// custom mixins
|
||||
@import "mixins";
|
||||
|
||||
/* custom CSS files */
|
||||
@import "font-awesome.min.css";
|
||||
@import "ionicons.min.css";
|
||||
@import "bootstrap.min.css";
|
||||
@import "animate.css";
|
||||
@import "vegas.css";
|
||||
|
||||
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
|
||||
|
||||
/*
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 1. Generic styles ................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: $mont-family;
|
||||
@include font-smoothing(on);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
position: static;
|
||||
z-index: -2;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $torch-red;
|
||||
}
|
||||
|
||||
p, a {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
color: rgba($white, 1);
|
||||
}
|
||||
|
||||
a {
|
||||
@include bezier-transition(all, $fast-transition, cubic-bezier(0.42, 0, 0.58, 1));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: rgba($torch-red, 0.6);
|
||||
|
||||
&:hover {
|
||||
color: rgba($torch-red, 1) !important;
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none !important;
|
||||
text-decoration: none !important;
|
||||
color: rgba($torch-red, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
background: rgba($ebony-clay, 1);
|
||||
border: 30px solid $torch-red;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
background-repeat: repeat;
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
top: 50vh;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
@include bezier-transition(all, $medium-transition, cubic-bezier(0, 0, 0.58, 1));
|
||||
@include transform(translateY(-50%));
|
||||
@include font-smoothing;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
#message {
|
||||
max-width: 600px;
|
||||
min-height: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
p:first-child {
|
||||
font-size: 90px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.link-bottom {
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
|
||||
.link-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 2. Media Queries .................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
@include desktop {}
|
||||
|
||||
|
||||
/* Notebook devices */
|
||||
@include notebook {}
|
||||
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
@include medium {}
|
||||
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@include tablet {}
|
||||
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@include phone {
|
||||
#container {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
|
||||
.overlay {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 100px 5%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
@include transform(translateY(0));
|
||||
|
||||
#message {
|
||||
min-height: 240px;
|
||||
|
||||
p:first-child {
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Only for tablet in landscape mode */
|
||||
@include landscape-tablet {}
|
||||
|
||||
|
||||
/* Only for phone in landscape mode */
|
||||
@include landscape-phone {}
|
||||
246
weboasis/error/sass/style-image.scss
Normal file
246
weboasis/error/sass/style-image.scss
Normal file
@ -0,0 +1,246 @@
|
||||
/*
|
||||
* DOZ - Creative 404 Pages
|
||||
* Build Date: August 2015
|
||||
* Author: Madeon08
|
||||
* Copyright (C) 2015 Madeon08
|
||||
* This is a premium product available exclusively here : http://themeforest.net/user/Madeon08/portfolio
|
||||
*/
|
||||
|
||||
/* TABLE OF CONTENTS
|
||||
---------------------------
|
||||
*. @Import & Reset
|
||||
1. Generic styles
|
||||
2. Media Queries
|
||||
*/
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* *. @Import & Reset .................. */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* http://bourbon.io/ Sass Mixin Library */
|
||||
@import "bourbon";
|
||||
|
||||
// colors, fonts, sizes etc...
|
||||
@import "vars";
|
||||
|
||||
// custom mixins
|
||||
@import "mixins";
|
||||
|
||||
/* custom CSS files */
|
||||
@import "font-awesome.min.css";
|
||||
@import "ionicons.min.css";
|
||||
@import "bootstrap.min.css";
|
||||
@import "animate.css";
|
||||
@import "vegas.css";
|
||||
|
||||
@import url("http://fonts.googleapis.com/css?family=Dosis:400,200,600");
|
||||
|
||||
/*
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 1. Generic styles ................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: $dosis-family;
|
||||
@include font-smoothing(on);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
position: static;
|
||||
z-index: -2;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $mine-shaft;
|
||||
}
|
||||
|
||||
p, a {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
color: rgba($white, 0.8);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
@include bezier-transition(all, $fast-transition, cubic-bezier(0.42, 0, 0.58, 1));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: rgba($white, 1);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 1) !important;
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
text-shadow: 0 0 1ex $white, 0 0 2px rgba($white, 0.8);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none !important;
|
||||
text-decoration: none !important;
|
||||
color: rgba($white, 1);
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
background: $black;
|
||||
opacity: 0.7;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
top: 50vh;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
@include bezier-transition(all, $medium-transition, cubic-bezier(0, 0, 0.58, 1));
|
||||
@include transform(translateY(-50%));
|
||||
@include font-smoothing;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
#message {
|
||||
max-width: 600px;
|
||||
min-height: 350px;
|
||||
margin: 0 auto;
|
||||
|
||||
p:first-child {
|
||||
font-size: 110px;
|
||||
font-weight: 200;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.link-bottom {
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
|
||||
.link-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 7. Media Queries .................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
@include desktop {}
|
||||
|
||||
|
||||
/* Notebook devices */
|
||||
@include notebook {}
|
||||
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
@include medium {}
|
||||
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@include tablet {}
|
||||
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@include phone {
|
||||
#container {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
|
||||
.overlay {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 100px 5%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
@include transform(translateY(0));
|
||||
|
||||
#message {
|
||||
min-height: 240px;
|
||||
|
||||
p:first-child {
|
||||
font-size: 50px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Only for tablet in landscape mode */
|
||||
@include landscape-tablet {}
|
||||
|
||||
|
||||
/* Only for phone in landscape mode */
|
||||
@include landscape-phone {}
|
||||
246
weboasis/error/sass/style-minimal.scss
Normal file
246
weboasis/error/sass/style-minimal.scss
Normal file
@ -0,0 +1,246 @@
|
||||
/*
|
||||
* DOZ - Creative 404 Pages
|
||||
* Build Date: August 2015
|
||||
* Author: Madeon08
|
||||
* Copyright (C) 2015 Madeon08
|
||||
* This is a premium product available exclusively here : http://themeforest.net/user/Madeon08/portfolio
|
||||
*/
|
||||
|
||||
/* TABLE OF CONTENTS
|
||||
---------------------------
|
||||
*. @Import & Reset
|
||||
1. Generic styles
|
||||
2. Media Queries
|
||||
*/
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* *. @Import & Reset .................. */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* http://bourbon.io/ Sass Mixin Library */
|
||||
@import "bourbon";
|
||||
|
||||
// colors, fonts, sizes etc...
|
||||
@import "vars";
|
||||
|
||||
// custom mixins
|
||||
@import "mixins";
|
||||
|
||||
/* custom CSS files */
|
||||
@import "font-awesome.min.css";
|
||||
@import "ionicons.min.css";
|
||||
@import "bootstrap.min.css";
|
||||
@import "animate.css";
|
||||
@import "vegas.css";
|
||||
|
||||
@import url("http://fonts.googleapis.com/css?family=Dosis:400,200,600");
|
||||
|
||||
/*
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 1. Generic styles ................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: $dosis-family;
|
||||
@include font-smoothing(on);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
position: static;
|
||||
z-index: -2;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $athens-gray;
|
||||
}
|
||||
|
||||
p, a {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
color: rgba($black, 0.7);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
@include bezier-transition(all, $fast-transition, cubic-bezier(0.42, 0, 0.58, 1));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $dusty-gray;
|
||||
|
||||
&:hover {
|
||||
color: rgba($torch-red, 1) !important;
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none !important;
|
||||
text-decoration: none !important;
|
||||
color: $dusty-gray;
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
background: rgba($athens-gray, 1);
|
||||
border: 30px solid $white;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
background-repeat: repeat;
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
top: 50vh;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
@include bezier-transition(all, $medium-transition, cubic-bezier(0, 0, 0.58, 1));
|
||||
@include transform(translateY(-50%));
|
||||
@include font-smoothing;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
#message {
|
||||
max-width: 600px;
|
||||
min-height: 350px;
|
||||
margin: 0 auto;
|
||||
|
||||
p:first-child {
|
||||
font-size: 110px;
|
||||
font-weight: 200;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.link-bottom {
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
|
||||
.link-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 7. Media Queries .................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
@include desktop {}
|
||||
|
||||
|
||||
/* Notebook devices */
|
||||
@include notebook {}
|
||||
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
@include medium {}
|
||||
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@include tablet {}
|
||||
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@include phone {
|
||||
#container {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
|
||||
.overlay {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 100px 5%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
@include transform(translateY(0));
|
||||
|
||||
#message {
|
||||
min-height: 240px;
|
||||
|
||||
p:first-child {
|
||||
font-size: 50px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Only for tablet in landscape mode */
|
||||
@include landscape-tablet {}
|
||||
|
||||
|
||||
/* Only for phone in landscape mode */
|
||||
@include landscape-phone {}
|
||||
261
weboasis/error/sass/style-vintage.scss
Normal file
261
weboasis/error/sass/style-vintage.scss
Normal file
@ -0,0 +1,261 @@
|
||||
/*
|
||||
* DOZ - Creative 404 Pages
|
||||
* Build Date: August 2015
|
||||
* Author: Madeon08
|
||||
* Copyright (C) 2015 Madeon08
|
||||
* This is a premium product available exclusively here : http://themeforest.net/user/Madeon08/portfolio
|
||||
*/
|
||||
|
||||
/* TABLE OF CONTENTS
|
||||
---------------------------
|
||||
*. @Import & Reset
|
||||
1. Generic styles
|
||||
2. Media Queries
|
||||
*/
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* *. @Import & Reset .................. */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* http://bourbon.io/ Sass Mixin Library */
|
||||
@import "bourbon";
|
||||
|
||||
// colors, fonts, sizes etc...
|
||||
@import "vars";
|
||||
|
||||
// custom mixins
|
||||
@import "mixins";
|
||||
|
||||
/* custom CSS files */
|
||||
@import "font-awesome.min.css";
|
||||
@import "ionicons.min.css";
|
||||
@import "bootstrap.min.css";
|
||||
@import "animate.css";
|
||||
@import "vegas.css";
|
||||
|
||||
/*
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 1. Generic styles ................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: $courier-family;
|
||||
@include font-smoothing(on);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $ebony-clay;
|
||||
}
|
||||
|
||||
p, a {
|
||||
text-shadow: 0 0 1ex $harlequin, 0 0 2px rgba($white, 0.8);
|
||||
margin: 0.8em 0;
|
||||
font-size: 18px;
|
||||
color: rgba($mint-green, 0.8);
|
||||
}
|
||||
|
||||
a {
|
||||
@include bezier-transition(all, $fast-transition, cubic-bezier(0.42, 0, 0.58, 1));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: rgba($mint-green, 0.6);
|
||||
text-shadow: 0 0 1ex rgba($harlequin, 0.6), 0 0 2px rgba($white, 0.6);
|
||||
|
||||
&:hover {
|
||||
color: rgba($mint-green, 1);
|
||||
text-decoration: none !important;
|
||||
text-shadow: 0 0 1ex $harlequin, 0 0 2px rgba($white, 0.8);
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none !important;
|
||||
text-decoration: none !important;
|
||||
text-shadow: 0 0 1ex $harlequin, 0 0 2px rgba($white, 0.8);
|
||||
color: $mint-green;
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
background: rgba($ebony-clay, 0.95);
|
||||
border: 30px solid darken($ebony-clay, 1);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(0deg, transparent 0%, rgba($ebony-clay, 0.2) 2%, rgba($shark, 0.8) 3%, rgba($shark, 0.2) 3%, transparent 100%);
|
||||
background-repeat: no-repeat;
|
||||
@include animation(scan 7s infinite linear);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
background-image: url("../img/lightgrain.gif");
|
||||
background-repeat: repeat;
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
top: 50vh;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
@include bezier-transition(all, $medium-transition, cubic-bezier(0, 0, 0.58, 1));
|
||||
@include transform(translateY(-50%));
|
||||
@include font-smoothing;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
#message {
|
||||
max-width: 540px;
|
||||
min-height: 180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.link-bottom {
|
||||
margin: 0 auto;
|
||||
max-width: 540px;
|
||||
|
||||
.link-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(scan) {
|
||||
0% {
|
||||
background-position: 0 -100vh;
|
||||
}
|
||||
|
||||
35%,
|
||||
100% {
|
||||
background-position: 0 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* 7. Media Queries .................... */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
@include desktop {}
|
||||
|
||||
|
||||
/* Notebook devices */
|
||||
@include notebook {}
|
||||
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
@include medium {}
|
||||
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@include tablet {}
|
||||
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@include phone {
|
||||
#container {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
|
||||
.overlay {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 100px 5%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
@include transform(translateY(0));
|
||||
|
||||
#message {
|
||||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Only for tablet in landscape mode */
|
||||
@include landscape-tablet {}
|
||||
|
||||
|
||||
/* Only for phone in landscape mode */
|
||||
@include landscape-phone {}
|
||||
Reference in New Issue
Block a user