wulkanowy/wulkanowy.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve download mobile responsiveness

Browse source
This commit is contained in:
Dominik Korsa 2019-02-27 21:26:45 +01:00
parent 3e570b0d4a
commit 5fbb257747
3 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/HomeDownloadDevItem.vue
View file

@ -3,7 +3,7 @@
<div class="header">
<a :href="github" target="_blank">
<span class="title">{{ title }}</span>
<span class="number">#{{ number }}</span>
<span class="number"> #{{ number }}</span>
</a>
</div>
<div class="subheader">
@ -106,6 +106,10 @@ export default {
margin-bottom: 8px;
line-height: 24px;
@media screen and (max-width: 450px) {
font-size: 18px;
}
.title {
color: #D32F2F;
}
@ -113,7 +117,6 @@ export default {
.number {
color: #0009;
font-weight: 300;
margin-left: 4px;
}
a {

4
src/components/HomeDownloadDevMaster.vue
View file

@ -77,6 +77,10 @@ export default {
margin-bottom: 8px;
line-height: 24px;
@media screen and (max-width: 450px) {
font-size: 18px;
}
.number {
color: #0009;
font-weight: 300;

10
src/components/HomeDownloadSection.vue
View file

@ -44,15 +44,21 @@ export default {
<style lang="scss" scoped>
#download {
height: 100vh;
padding: 0 32px;
box-sizing: border-box;
padding: 0 32px 32px;
overflow: hidden;
background-color: #F6F6F6;
display: grid;
grid-template-columns: 1fr 32px 1fr;
grid-template-rows: auto auto 1fr 64px;
grid-template-rows: auto auto 1fr;
@media screen and (max-width: 875px) {
grid-template-columns: 1fr;
padding: 0 16px 16px;
}
@media screen and (max-width: 450px) {
padding: 0 8px 16px;
}
}