/** * The page base. */ body { background-color: #eee9d9; } .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: 65vh; @include break-small { flex-direction: column; -webkit-flex-direction: column; } } .info-page-item { margin: 100px 50px 50px; } /** * Page with the technical details. */ .technical-page { background: #24242f; min-height: 30vh; } .flex-table { display: flex; margin: 50px auto; max-width: 800px; flex-wrap: wrap; padding: 0 10px; @include break-small { max-width: 400px; flex-direction: column; } } .flex-table-header, .flex-table-value { width: 200px; float: left; box-sizing: border-box; } .flex-table-row { max-width: 400px; } /** * 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; }