lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-03-21 12:37:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Data binding and style fixes

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

14
_sass/contact.scss
View File

@@ -25,13 +25,13 @@
#contact-management {
#contact-management-container {
#container {
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : center;
.contact-management-person {
.person {
margin-left : 2rem;
margin-right : 2rem;
margin-bottom : 5rem;
@@ -42,7 +42,17 @@
height : auto;
}
* {
margin: 0.2rem 0;
}
}
}
}
#contact-main {
* {
margin: 0.2rem 0;
}
}

7
_sass/header.scss
View File

@@ -9,11 +9,16 @@
max-width: 112.0rem;
.logo {
height: 8rem;
height: 32px;
vertical-align: middle;
display: inline;
}
#header-logo {
height : 8rem;
}
.menu {
display: inline;

211
_sass/helpdesk.scss
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%;
}
}

76
_sass/mentors.scss
View File

@@ -1,14 +1,74 @@
.mentors-page-container {
#mentors {
.mentor {
margin-bottom: 3rem;
display : flex;
flex-direction : row;
margin : 4rem auto;
.profile-img {
object-fit: cover;
width: 300px;
height: 350px;
float: left;
margin-right: 2rem;
.photo-container {
flex : 1;
img {
display : block;
height : auto;
width : 100%;
margin-top : 2rem;
}
}
.description {
flex : 2;
display : flex;
flex-direction : row;
* {
margin : 0.1rem 0;
}
h1, h4 {
margin : 1rem 0;
}
.general {
flex : 2;
margin : 0 3rem;
}
.varia {
flex : 3;
margin : 1rem 3rem 0;
}
}
.mentor-info-text {
flex : 3;
display : flex;
flex-direction : column;
padding-left : 5rem;
padding-right : 3rem;
}
}
}
@media (max-width : 900px) {
#mentors {
.mentor {
flex-direction : column;
.description {
flex-direction : column;
.general, .varia {
margin : 0 auto;
}
}
.photo-container {
img {
max-height : 75vh;
}
}
}
}
}

75
_sass/ourwork.scss
View File

@@ -1,29 +1,68 @@
#ourwork-banner {
margin : 5rem 0;
a {
display : flex;
justify-content : center;
}
}
.work-item {
padding : 1rem;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
max-height : 75vh;
#ourwork-done {
.work-item {
padding : 1rem;
margin : 7rem 0;
display : flex;
flex-direction : row;
max-height : 75vh;
.description {
flex : 2;
h3 {
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
}
.thumbnail {
flex : 3;
display : flex;
justify-content : center;
align-items : center;
}
img {
display : block;
width : auto;
height : auto;
max-height : 50vh;
}
h2, h3 {
text-align : center;
margin-bottom : 0.3rem;
}
img {
display : block;
max-height : 50vh;
width : auto;
}
h3, h5 {
text-align : center;
}
}
@media (max-width: 900px){
#ourwork-banner {
h1 {
font-size: 3.6rem;
@media (max-width : 900px) {
#ourwork-done {
.work-item {
flex-direction : column;
max-height : none;
}
}
#ourwork-banner {
h1 {
font-size : 3.6rem;
}
}
}

18
_sass/shared.scss Normal file
View File

@@ -0,0 +1,18 @@
.banner {
background : #f0941d;
color : white;
font-weight : bold;
padding : 2rem;
border-radius : 8rem;
}
.page {
display : flex;
flex-direction : column;
flex : 1;
width : 85vw;
max-width : 1200px;
margin : 5rem auto 0;
}

44
_sass/student.scss
View File

@@ -1,25 +1,27 @@
.mentor-info {
display : flex;
.activities-info {
display : flex;flex-direction: row;
margin: 3rem auto;
img {
flex : 1;
display : block;
max-height: 30rem;
max-width: 30rem;
height: auto;
width: auto;
.desc {
flex: 1;
h2 {
}
}
.mentor-info-text {
flex : 3;
display : flex;
.promo-image {
flex: 1;
img {
display : block;
width: 100%;
height: auto;
}
}
}
@media (max-width : 900px) {
.activities-info {
flex-direction: column;
padding-left: 5rem;
padding-right: 3rem; }
}
.row {
display : flex;
flex-direction: row;
}
}