Data binding and style fixes

* added portfolio, mentors and management YAML files to be used in templating
* fixed issue with landing page not working properly in mobile view
* removed annoying page style that was applied to everything
* improved text sizes in various views
* reworked mentors view styles
* rearranged landing page vector graphics to match their meaning more
* code style improvements
This commit is contained in:
Herman Õunapuu
2018-08-22 03:56:10 +03:00
parent 149f0ed5d3
commit 20bb489819
19 changed files with 576 additions and 412 deletions

View File

@@ -1,123 +1,138 @@
.page {
display : flex;
flex-direction : column;
flex : 1;
width : 85vw;
max-width : 1200px;
margin : 5rem auto 0;
}
#helpdesk-page {
.page * {
margin-top : 5px;
margin-bottom : 5px;
}
#helpdesk-banner {
background : black;
display : flex;
flex-direction : row;
flex : 1;
justify-content : center;
align-items : center;
text-align : center;
margin : 3rem auto;
padding : 2rem;
#helpdesk-banner {
//background-image : url("helpdesk-a-bg.jpg");
background : black;
display : flex;
flex-direction : row;
flex : 1;
justify-content : center;
align-items : center;
text-align : center;
h1, h3 {
color : white;
font-weight : 400;
}
.emphasis-text-bold {
font-weight : bold;
}
.emphasis-text-color {
color : $color-primary;
}
#helpdesk-logo {
display : block;
width : 100%;
height : auto;
}
#helpdesk-logo-container {
flex : 1;
padding : 25px;
}
#banner-text {
flex : 2;
}
h3, h5 {
color : white;
}
.emphasis-text-bold {
font-weight : bold;
#maparea {
display : flex;
align-items : center;
justify-content : center;
.siema, #map {
width : 50%;
max-height : 300px;
margin : 20px;
}
#map {
height : 60vh;
max-height : 300px;
}
}
.emphasis-text-color {
color : $color-primary;
#pricing {
margin-bottom : 2rem;
p {
margin : 1rem auto;
font-weight : bold;
}
table {
width : auto;
th td {
font-weight : bold;
}
tr:first-child {
max-width : 40%;
}
}
}
#helpdesk-banner-logo {
display : block;
width : 100%;
height : auto;
#location {
h4 {
margin : 0.1rem auto;
}
}
#banner-image, #banner-text {
width : 50%;
}
#contact {
display : flex;
flex-direction : row;
#banner-image {
padding : 25px;
}
.subtext {
opacity : 0.7;
}
}
#opening-times, #contact-methods {
flex : 1;
padding : 15px;
}
#helpdesk-location-mapstuff {
display : flex;
align-items : center;
justify-content : center;
.siema, #map {
width : 50%;
max-height : 300px;
margin : 20px;
}
#map {
height : 60vh;
max-height : 300px;
}
}
#helpdesk-contacts {
display : flex;
flex-direction : row;
.subtext {
opacity : 0.7;
}
#helpdesk-opening-times, #helpdesk-contactssss {
flex : 1;
padding : 15px;
#contact-methods {
h4 {
margin : 0.1rem auto;
}
}
}
}
@media (max-width : 900px) {
#helpdesk-banner {
flex-direction : column;
#helpdesk-page {
#helpdesk-banner {
flex-direction : column;
}
#banner-image, #banner-text {
width : 100%;
table {
tr:first-child {
max-width : 30%;
}
td, th {
padding : 0.5rem 0.5rem;
}
}
#maparea {
flex-direction : column;
.siema, #map {
width : 100%;
}
}
#contact {
flex-direction : column;
}
}
table {
tr:first-child {
max-width : 30%;
}
td, th {
padding : 0.5rem 0.5rem;
}
}
#helpdesk-location-mapstuff {
flex-direction : column;
.siema, #map {
width : 100%;
}
}
#helpdesk-contacts {
flex-direction : column;
}
}
table {
th td {
font-weight : bold;
}
tr:first-child {
max-width : 40%;
}
}