Clean up SCSS more
This commit is contained in:
Nienke
parent
7b66278aa0
commit
7338b3c421
13 changed files with 258 additions and 199 deletions
|
|
@ -16,7 +16,6 @@ button {
|
|||
padding: 16px 32px;
|
||||
text-decoration: none;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
font-family: "Montserrat"; }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,KAAK;EACH,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY;;AAE3B,WAAW;EACT,MAAM,EAAE,cAAc;;AAExB,MAAM;EACJ,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;EACf,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY",
|
||||
"mappings": "AAAA,KAAK;EACH,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY;;AAE3B,WAAW;EACT,MAAM,EAAE,cAAc;;AAExB,MAAM;EACJ,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY",
|
||||
"sources": ["forms.sass"],
|
||||
"names": [],
|
||||
"file": "forms.css"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,5 @@ button
|
|||
padding: 16px 32px
|
||||
text-decoration: none
|
||||
margin: 4px 2px
|
||||
cursor: pointer
|
||||
font-size: 1.5em
|
||||
font-family: 'Montserrat'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
/* The main style sheet, containing all base elements.
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Import partials and Google fonts.
|
||||
* 2. Set up the first layer of flexbox.
|
||||
*/
|
||||
@import url(normalize.css);
|
||||
@import url(flaticon.css);
|
||||
@import url(tables.css);
|
||||
@import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik);
|
||||
ul.topnav {
|
||||
list-style-type: none;
|
||||
|
|
@ -46,32 +51,13 @@ button {
|
|||
padding: 16px 32px;
|
||||
text-decoration: none;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
font-family: "Montserrat"; }
|
||||
|
||||
body {
|
||||
background-color: #7aa2cb;
|
||||
font-family: 'Karla', sans-serif;
|
||||
font-size: 100%; }
|
||||
|
||||
.flexcontainer {
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
.flexpage, .intro-page, .info-page, .footer-page, .login-page, .panel-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
|
||||
.intro-page {
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
height: 100vh;
|
||||
flex-direction: column; }
|
||||
@media (max-width: 1200px) {
|
||||
.intro-page {
|
||||
height: 100%; } }
|
||||
|
||||
.intro-page-logo {
|
||||
font-family: 'Montserrat', serif;
|
||||
font-size: 12em;
|
||||
|
|
@ -97,15 +83,6 @@ body {
|
|||
.fa-angle-double-down {
|
||||
color: #424769; }
|
||||
|
||||
.info-page {
|
||||
background: linear-gradient(#F1D4AF, #eee9d9);
|
||||
flex-direction: row;
|
||||
min-height: 80vh; }
|
||||
@media (max-width: 1200px) {
|
||||
.info-page {
|
||||
flex-direction: column;
|
||||
height: 100%; } }
|
||||
|
||||
.info-page h1 {
|
||||
font-family: 'Rubik';
|
||||
color: #dab199;
|
||||
|
|
@ -120,8 +97,7 @@ body {
|
|||
.info-page-item {
|
||||
font-size: 1em;
|
||||
line-height: 1.6em;
|
||||
color: #8b6d5c;
|
||||
margin: 50px; }
|
||||
color: #8b6d5c; }
|
||||
|
||||
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
|
||||
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||||
|
|
@ -132,15 +108,6 @@ body {
|
|||
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||||
font-size: 5em; } }
|
||||
|
||||
.footer-page {
|
||||
flex: 1;
|
||||
background-color: #e2f2f0;
|
||||
flex-direction: column;
|
||||
min-height: 20vh; }
|
||||
@media (max-width: 1200px) {
|
||||
.footer-page {
|
||||
height: 100%; } }
|
||||
|
||||
.footer-page a {
|
||||
color: black; }
|
||||
|
||||
|
|
@ -160,11 +127,6 @@ body {
|
|||
font-size: 1em;
|
||||
margin: 20px; } }
|
||||
|
||||
.login-page {
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
flex-direction: column;
|
||||
padding: 40px; }
|
||||
|
||||
.login-page-logo {
|
||||
font-family: 'Montserrat', serif;
|
||||
font-size: 6em;
|
||||
|
|
@ -172,9 +134,73 @@ body {
|
|||
color: #E08E79;
|
||||
text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84; }
|
||||
|
||||
body {
|
||||
background-color: #7aa2cb; }
|
||||
|
||||
.flexcontainer {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
|
||||
.flexpage, .intro-page, .info-page, .footer-page, .login-page {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
|
||||
/**
|
||||
* 1. First section of the main page, containing the logo, login/registration buttons, and a down arrow.
|
||||
*/
|
||||
.intro-page {
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column; }
|
||||
@media (max-width: 1200px) {
|
||||
.intro-page {
|
||||
min-height: 100vh; } }
|
||||
|
||||
/**
|
||||
* 1. Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver).
|
||||
*/
|
||||
.info-page {
|
||||
background: linear-gradient(#F1D4AF, #eee9d9);
|
||||
flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
min-height: 80vh; }
|
||||
@media (max-width: 1200px) {
|
||||
.info-page {
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
min-height: 80vh; } }
|
||||
|
||||
.info-page-item {
|
||||
margin: 50px; }
|
||||
|
||||
/**
|
||||
* 1. Third section of the main page, containing the link to the Github page.
|
||||
*/
|
||||
.footer-page {
|
||||
flex: 1;
|
||||
background-color: #e2f2f0;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
min-height: 20vh; }
|
||||
@media (max-width: 1200px) {
|
||||
.footer-page {
|
||||
height: 100%; } }
|
||||
|
||||
/**
|
||||
* 1. Login and register pages.
|
||||
*/
|
||||
.login-page {
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column; }
|
||||
|
||||
.login-page-form {
|
||||
background-color: #fff;
|
||||
padding: 100px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
border-top: 0;
|
||||
|
|
@ -182,8 +208,4 @@ body {
|
|||
border-right: 3px solid #d2d5e7;
|
||||
border-left: 0; }
|
||||
|
||||
.panel-page {
|
||||
background: linear-gradient(#F1D4AF, #eee9d9);
|
||||
flex-direction: column; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["main.scss","navigation.sass","forms.sass"],
|
||||
"mappings": "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",
|
||||
"sources": ["main.scss","navigation.sass","forms.sass","typography.scss","responsive.scss"],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
|
|
@ -1,182 +1,103 @@
|
|||
// imports
|
||||
/* The main style sheet, containing all base elements.
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Import partials and Google fonts.
|
||||
* 2. Set up the first layer of flexbox.
|
||||
*/
|
||||
|
||||
@import "normalize.css";
|
||||
@import "responsive";
|
||||
@import "flaticon.css";
|
||||
@import "navigation.sass";
|
||||
@import "forms.sass";
|
||||
@import "tables.css";
|
||||
@import "navigation";
|
||||
@import "forms";
|
||||
@import "typography";
|
||||
//@import "panel.scss";
|
||||
@import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik);
|
||||
|
||||
// base, mixins, extensions
|
||||
body {
|
||||
background-color: #7aa2cb;
|
||||
font-family: 'Karla', sans-serif;
|
||||
font-size:100%;
|
||||
}
|
||||
|
||||
.flexcontainer {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flexpage {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin long-shadow-text ($distance, $blur, $color) {
|
||||
$shadows: null;
|
||||
$color: darken($color, 10);
|
||||
$blur: $blur + px;
|
||||
@for$i from 0 through $distance {
|
||||
$dist: $i + px;
|
||||
$shadows: append($shadows, ($dist $dist $blur $color), comma);
|
||||
}
|
||||
text-shadow: $shadows;
|
||||
}
|
||||
/**
|
||||
* 1. First section of the main page, containing the logo, login/registration buttons, and a down arrow.
|
||||
*/
|
||||
|
||||
$break-small: 1200px;
|
||||
|
||||
@mixin break-small {
|
||||
@media (max-width: #{$break-small}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// first section with logo and navigation
|
||||
.intro-page {
|
||||
@extend .flexpage;
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
@include break-small {
|
||||
height: 100%; // remove the 100 VH on mobile devices to prevent unneccessary scrolling
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-page-logo {
|
||||
font-family: 'Montserrat', serif;
|
||||
font-size: 12em;
|
||||
text-transform: uppercase;
|
||||
color: #E08E79;
|
||||
@include long-shadow-text(30, 0, #F1D4AF);
|
||||
@include break-small {
|
||||
font-size: 3.5em;
|
||||
padding: 20px;
|
||||
@include long-shadow-text(20, 0, #F1D4AF);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 1. Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver).
|
||||
*/
|
||||
|
||||
.intro-page-welcome-text {
|
||||
font-family: 'Inconsolata', serif;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
@include break-small {
|
||||
font-size: 1em;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-angle-double-down {
|
||||
color: #424769;
|
||||
}
|
||||
|
||||
// second section containing information columns
|
||||
.info-page {
|
||||
@extend .flexpage;
|
||||
background: linear-gradient(#F1D4AF, #eee9d9);
|
||||
flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
min-height: 80vh;
|
||||
@include break-small {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-page h1 {
|
||||
font-family: 'Rubik';
|
||||
color: #dab199;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
line-height: 2em;
|
||||
@include break-small {
|
||||
line-height: 1em;
|
||||
-webkit-flex-direction: column;
|
||||
min-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.info-page-item {
|
||||
font-size: 1em;
|
||||
line-height: 1.6em;
|
||||
color: #8b6d5c;
|
||||
margin: 50px;
|
||||
}
|
||||
|
||||
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
|
||||
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||||
font-size: 10em;
|
||||
color: #fff;
|
||||
@include break-small {
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 1. Third section of the main page, containing the link to the Github page.
|
||||
*/
|
||||
|
||||
// third section containing the footer
|
||||
.footer-page {
|
||||
.footer-page {
|
||||
@extend .flexpage;
|
||||
flex: 1;
|
||||
background-color: #e2f2f0;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
min-height: 20vh;
|
||||
@include break-small {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-page a {
|
||||
color: black
|
||||
}
|
||||
/**
|
||||
* 1. Login and register pages.
|
||||
*/
|
||||
|
||||
.footer-page-title {
|
||||
font-family: 'Inconsolata';
|
||||
color: #E08E79;
|
||||
font-weight: lighter;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.footer-page h1 {
|
||||
@extend .footer-page-title;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.footer-page h2 {
|
||||
@extend .footer-page-title;
|
||||
font-size: 1.2em;
|
||||
@include break-small {
|
||||
font-size: 1em;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// login and register pages. forms make-up can be found in forms.sass.
|
||||
.login-page {
|
||||
@extend .flexpage;
|
||||
background: linear-gradient(#070a15, #252b46);
|
||||
flex-direction: column;
|
||||
padding: 40px;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.login-page-logo {
|
||||
font-family: 'Montserrat', serif;
|
||||
font-size: 6em;
|
||||
text-transform: uppercase;
|
||||
color: #E08E79;
|
||||
@include long-shadow-text(10, 0, #F1D4AF);}
|
||||
|
||||
.login-page-form {
|
||||
background-color: #fff;
|
||||
padding: 100px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
border-top: 0;
|
||||
|
|
@ -184,10 +105,3 @@ $break-small: 1200px;
|
|||
border-right: 3px solid #d2d5e7;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// panel page
|
||||
.panel-page {
|
||||
@extend .flexpage;
|
||||
background: linear-gradient(#F1D4AF, #eee9d9);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
3
public/css/responsive.css
Normal file
3
public/css/responsive.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
|
||||
|
||||
/*# sourceMappingURL=responsive.css.map */
|
||||
7
public/css/responsive.css.map
Normal file
7
public/css/responsive.css.map
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "",
|
||||
"sources": [],
|
||||
"names": [],
|
||||
"file": "responsive.css"
|
||||
}
|
||||
7
public/css/responsive.scss
Normal file
7
public/css/responsive.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
$break-small: 1200px;
|
||||
|
||||
@mixin break-small {
|
||||
@media (max-width: #{$break-small}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,23 @@
|
|||
/*
|
||||
Error: Undefined mixin 'long-shadow-text'.
|
||||
on line 7 of css/typography.scss, in `long-shadow-text'
|
||||
from line 7 of css/typography.scss
|
||||
Error: Undefined mixin 'break-small'.
|
||||
on line 25 of css/typography.scss, in `break-small'
|
||||
from line 25 of css/typography.scss
|
||||
|
||||
2: align-self: center;
|
||||
3: font-family: 'Bree Serif', serif;
|
||||
4: font-size: 6em;
|
||||
5: line-height: 0.8em;
|
||||
6: color: #f0f0f0;
|
||||
7: @include long-shadow-text(500, 0, #e0e0e0);
|
||||
8: }
|
||||
20: font-family: 'Montserrat', serif;
|
||||
21: font-size: 12em;
|
||||
22: text-transform: uppercase;
|
||||
23: color: #E08E79;
|
||||
24: @include long-shadow-text(30, 0, #F1D4AF);
|
||||
25: @include break-small {
|
||||
26: font-size: 3.5em;
|
||||
27: padding: 20px;
|
||||
28: @include long-shadow-text(20, 0, #F1D4AF);
|
||||
29: }
|
||||
30: }
|
||||
|
||||
Backtrace:
|
||||
css/typography.scss:7:in `long-shadow-text'
|
||||
css/typography.scss:7
|
||||
css/typography.scss:25:in `break-small'
|
||||
css/typography.scss:25
|
||||
/Users/nienke/.rvm/gems/ruby-2.2.1/gems/sass-3.4.22/lib/sass/tree/visitors/perform.rb:351:in `block in visit_mixin'
|
||||
/Users/nienke/.rvm/gems/ruby-2.2.1/gems/sass-3.4.22/lib/sass/stack.rb:98:in `block in with_mixin'
|
||||
/Users/nienke/.rvm/gems/ruby-2.2.1/gems/sass-3.4.22/lib/sass/stack.rb:115:in `with_frame'
|
||||
|
|
@ -68,4 +72,4 @@ css/typography.scss:7
|
|||
body:before {
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
content: "Error: Undefined mixin 'long-shadow-text'.\A on line 7 of css/typography.scss, in `long-shadow-text'\A from line 7 of css/typography.scss\A \A 2: align-self: center;\A 3: font-family: 'Bree Serif', serif;\A 4: font-size: 6em;\A 5: line-height: 0.8em;\A 6: color: #f0f0f0;\A 7: @include long-shadow-text(500, 0, #e0e0e0);\A 8: }"; }
|
||||
content: "Error: Undefined mixin 'break-small'.\A on line 25 of css/typography.scss, in `break-small'\A from line 25 of css/typography.scss\A \A 20: font-family: 'Montserrat', serif;\A 21: font-size: 12em;\A 22: text-transform: uppercase;\A 23: color: #E08E79;\A 24: @include long-shadow-text(30, 0, #F1D4AF);\A 25: @include break-small {\A 26: font-size: 3.5em;\A 27: padding: 20px;\A 28: @include long-shadow-text(20, 0, #F1D4AF);\A 29: }\A 30: }"; }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "",
|
||||
"sources": [],
|
||||
"mappings": "AASA,IAAK;EACH,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAC,IAAI;;AAehB,gBAAiB;EACf,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;EARd,WAAW,EAFC,mrBAAmD;EAjB/D,0BAAoC;IAuBtC,gBAAiB;MAOd,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,IAAI;MAZd,WAAW,EAFC,6cAAmD;;AAmBjE,wBAAyB;EACvB,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,IAAI;EAxCX,0BAAoC;IAoCtC,wBAAyB;MAMtB,SAAS,EAAE,GAAG;MACd,WAAW,EAAE,IAAI;;AAIpB,qBAAsB;EACpB,KAAK,EAAE,OAAO;;AAGhB,aAAc;EACZ,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EAzDhB,0BAAoC;IAmDtC,aAAc;MAQX,WAAW,EAAE,GAAG;;AAGnB,eAAgB;EACd,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,KAAK;EAClB,KAAK,EAAE,OAAO",
|
||||
"sources": ["typography.scss"],
|
||||
"names": [],
|
||||
"file": "typography.css"
|
||||
}
|
||||
|
|
@ -1,8 +1,106 @@
|
|||
.long-shadow {
|
||||
align-self: center;
|
||||
font-family: 'Bree Serif', serif;
|
||||
font-size: 6em;
|
||||
line-height: 0.8em;
|
||||
color: #f0f0f0;
|
||||
@include long-shadow-text(500, 0, #e0e0e0);
|
||||
// main
|
||||
body {
|
||||
font-family: 'Karla', sans-serif;
|
||||
font-size:100%;
|
||||
}
|
||||
|
||||
@mixin long-shadow-text ($distance, $blur, $color) {
|
||||
$shadows: null;
|
||||
$color: darken($color, 10);
|
||||
$blur: $blur + px;
|
||||
@for$i from 0 through $distance {
|
||||
$dist: $i + px;
|
||||
$shadows: append($shadows, ($dist $dist $blur $color), comma);
|
||||
}
|
||||
text-shadow: $shadows;
|
||||
}
|
||||
|
||||
// first section with logo and navigation
|
||||
.intro-page-logo {
|
||||
font-family: 'Montserrat', serif;
|
||||
font-size: 12em;
|
||||
text-transform: uppercase;
|
||||
color: #E08E79;
|
||||
@include long-shadow-text(30, 0, #F1D4AF);
|
||||
@include break-small {
|
||||
font-size: 3.5em;
|
||||
padding: 20px;
|
||||
@include long-shadow-text(20, 0, #F1D4AF);
|
||||
}
|
||||
}
|
||||
|
||||
.intro-page-welcome-text {
|
||||
font-family: 'Inconsolata', serif;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
@include break-small {
|
||||
font-size: 1em;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-angle-double-down {
|
||||
color: #424769;
|
||||
}
|
||||
|
||||
// second section containing information columns
|
||||
.info-page h1 {
|
||||
font-family: 'Rubik';
|
||||
color: #dab199;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
line-height: 2em;
|
||||
@include break-small {
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
.info-page-item {
|
||||
font-size: 1em;
|
||||
line-height: 1.6em;
|
||||
color: #8b6d5c;
|
||||
}
|
||||
|
||||
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
|
||||
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||||
font-size: 10em;
|
||||
color: #fff;
|
||||
@include break-small {
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
// third section containing the footer
|
||||
.footer-page a {
|
||||
color: black
|
||||
}
|
||||
|
||||
.footer-page-title {
|
||||
font-family: 'Inconsolata';
|
||||
color: #E08E79;
|
||||
font-weight: lighter;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.footer-page h1 {
|
||||
@extend .footer-page-title;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.footer-page h2 {
|
||||
@extend .footer-page-title;
|
||||
font-size: 1.2em;
|
||||
@include break-small {
|
||||
font-size: 1em;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// login and register pages. forms make-up can be found in forms.sass.
|
||||
.login-page-logo {
|
||||
font-family: 'Montserrat', serif;
|
||||
font-size: 6em;
|
||||
text-transform: uppercase;
|
||||
color: #E08E79;
|
||||
@include long-shadow-text(10, 0, #F1D4AF);}
|
||||
|
|
|
|||
6
public/panel.scss
Normal file
6
public/panel.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.panel-page {
|
||||
@extend .flexpage;
|
||||
background: linear-gradient(#F1D4AF, #eee9d9);
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
Loading…
Reference in a new issue