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.
92 lines
1.7 KiB
SCSS
92 lines
1.7 KiB
SCSS
/**
|
|
* 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;
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
-webkit-flex-direction: column;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|
|
|
|
.info-page-item {
|
|
margin: 100px 50px 50px;
|
|
}
|
|
|
|
/**
|
|
* 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%;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
padding: 50px;
|
|
}
|