ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Adjust some elements to be more mobile friendly

This commit is contained in:
Ramon Wenger 2019-04-08 17:15:16 +02:00
parent 1bce7a710f
commit db96fbac84
4 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/NewsTeaser.vue
View File

@ -18,10 +18,21 @@
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_functions.scss"; @import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss";
.news-teaser { .news-teaser {
display: flex; display: flex;
border-bottom: 1px solid $color-lightgrey;
padding-bottom: $large-spacing;
text-align: center;
@include desktop {
border-bottom: 0;
border-left: 1px solid $color-lightgrey; border-left: 1px solid $color-lightgrey;
padding-bottom: 0;
text-align: left;
}
padding-left: $medium-spacing; padding-left: $medium-spacing;
flex-direction: column; flex-direction: column;
} }

4
client/src/pages/portfolio.vue
View File

@ -54,9 +54,11 @@
grid-row-gap: 30px; grid-row-gap: 30px;
grid-auto-rows: 200px; grid-auto-rows: 200px;
width: 640px; max-width: 640px;
width: auto;
justify-self: center; justify-self: center;
box-sizing: border-box; box-sizing: border-box;
padding: $large-spacing $medium-spacing;
&__page { &__page {
display: flex; display: flex;

7
client/src/pages/project.vue
View File

@ -109,18 +109,17 @@
background-color: $color-grey--lighter; background-color: $color-grey--lighter;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 840px; max-width: 840px;
align-content: center; align-content: center;
margin: 0 auto; margin: 0 auto;
@supports (display: grid) { @supports (display: grid) {
display: grid; display: grid;
width: auto; width: auto;
} }
grid-template-columns: 840px; grid-template-columns: minmax(max-content, 840px);
grid-row-gap: 30px; grid-row-gap: 30px;
justify-content: center; justify-content: center;
padding-top: 30px; padding: $large-spacing $medium-spacing;
padding-bottom: 50px;
} }
} }
</style> </style>

24
client/src/pages/start.vue
View File

@ -185,8 +185,14 @@
-ms-grid-columns: 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr;
@supports (display: grid) { @supports (display: grid) {
display: grid; display: grid;
grid-template-columns: 1fr;
} }
grid-row-gap: $large-spacing;
@include desktop {
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
}
/* /*
* For IE10+ * For IE10+
@ -221,29 +227,21 @@
padding-bottom: 24px; padding-bottom: 24px;
text-align: center; text-align: center;
color: inherit; color: inherit;
margin-bottom: 0;
} }
&__more { &__more {
color: $color-white; color: $color-white;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
border-left: 1px solid $color-lightgrey;
line-height: $default-line-height; line-height: $default-line-height;
padding-left: $medium-spacing; padding-left: $medium-spacing;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} text-align: center;
&__teasers {
@supports (display: grid) {
display: grid;
}
@include desktop { @include desktop {
grid-template-columns: 1fr 1fr 1fr; text-align: left;
} border-left: 1px solid $color-lightgrey;
}
grid-row-gap: 15px;
grid-column-gap: 50px;
} }
} }
</style> </style>