YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added background style options

Browse Source
This commit is contained in:
Dominic Masters
2018-05-17 08:14:20 +10:00
parent 162f3c68cb
commit 34d50c0664
8 changed files with 143 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/styles/objects/_app.scss
View File

@ -9,20 +9,10 @@
* 1.0.0 - 2018/05/03
*/
.o-app {
//display: inline-block;//Fixes collapsing margins on children.
position: relative;
min-height: 100vh;
width: 100%;
@include t-flexbox();
@include t-flex-direction(column);
//Civil Twilight
&--style-civil-twilight {
//http://colorzilla.com/gradient-editor/#bea9d0+0,dab2cd+25,e7b7c5+50,e4b0a3+75,c79a97+100
background: #bea9d0;
background: -moz-linear-gradient(top, #bea9d0 0%, #dab2cd 25%, #e7b7c5 50%, #e4b0a3 75%, #c79a97 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea9d0', endColorstr='#c79a97',GradientType=0 ); /* IE6-9 */
}
}

44
public/styles/objects/_background.scss Normal file
View File

@ -0,0 +1,44 @@
/*
* Background
* Styles for the background of the site.
*
* Dependencies:
* styles/tools/_absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/05/17
*/
.o-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
//Civil Twilight
&--style-twilight {
//http://colorzilla.com/gradient-editor/#bea9d0+0,dab2cd+25,e7b7c5+50,e4b0a3+75,c79a97+100
background: #bea9d0;
background: -moz-linear-gradient(top, #bea9d0 0%, #dab2cd 25%, #e7b7c5 50%, #e4b0a3 75%, #c79a97 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea9d0', endColorstr='#c79a97',GradientType=0 ); /* IE6-9 */
}
&__inner {
position: relative;
width: 100%;
height: 100%;
}
//Elements that fill
&__grain {
@include t-absolute-fill();
}
&__grain {
background-image: url('./../images/grain.png');
}
}