You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
1.7 KiB
SCSS
95 lines
1.7 KiB
SCSS
8 years ago
|
/**
|
||
|
* 1. The page base.
|
||
|
*/
|
||
|
|
||
|
body {
|
||
|
background-color: #7aa2cb;
|
||
|
}
|
||
|
|
||
|
.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;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 1. First section of the main page, containing the logo, login/registration buttons, and a down arrow.
|
||
|
*/
|
||
|
|
||
|
.intro-page {
|
||
|
@extend .flexpage;
|
||
|
background: linear-gradient(#070a15, #252b46);
|
||
|
height: 100vh;
|
||
|
flex-direction: column;
|
||
|
-webkit-flex-direction: column;
|
||
|
@include break-small {
|
||
|
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 {
|
||
|
@extend .flexpage;
|
||
|
background: linear-gradient(#F1D4AF, #eee9d9);
|
||
|
flex-direction: row;
|
||
|
-webkit-flex-direction: row;
|
||
|
min-height: 80vh;
|
||
|
@include break-small {
|
||
|
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 {
|
||
|
@extend .flexpage;
|
||
|
flex: 1;
|
||
|
background-color: #e2f2f0;
|
||
|
flex-direction: column;
|
||
|
-webkit-flex-direction: column;
|
||
|
min-height: 20vh;
|
||
|
@include break-small {
|
||
|
height: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 1. Login and register pages.
|
||
|
*/
|
||
|
|
||
|
.login-page {
|
||
|
@extend .flexpage;
|
||
|
background: linear-gradient(#070a15, #252b46);
|
||
|
flex-direction: column;
|
||
|
-webkit-flex-direction: column;
|
||
|
}
|
||
|
|
||
|
.login-page-form {
|
||
|
background-color: #fff;
|
||
|
box-sizing: border-box;
|
||
|
border-radius: 5px;
|
||
|
border-top: 0;
|
||
|
border-bottom: 3px solid #d2d5e7;
|
||
|
border-right: 3px solid #d2d5e7;
|
||
|
border-left: 0;
|
||
|
}
|