mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-03-21 12:37:49 +00:00
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:
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user