Add some mobile css for themes

This commit is contained in:
Vincent Prouillet 2018-03-05 18:26:59 +01:00
parent c0ea30e2e1
commit fcd6cbcd32
2 changed files with 28 additions and 1 deletions

View file

@ -1,12 +1,21 @@
.themes-container { .themes-container {
padding: 3rem; padding: 3rem;
width: 80%;
margin: 0 auto;
img { img {
max-width: 100%; max-width: 100%;
} }
} }
@media only screen and (max-width: 1000px) {
.themes-container {
width: 100%;
margin: 0 1rem;
}
}
.themes { .themes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -50,3 +59,21 @@
padding: 1rem; padding: 1rem;
} }
@media only screen and (max-width: 1000px) {
.themes .theme {
width: 100%;
}
}
@media only screen and (max-width: 1000px) {
.theme-info {
flex-direction: column;
align-items: center;
img {
margin-bottom: 1rem;
}
}
}

View file

@ -9,7 +9,7 @@
<p>{{ page.description }}</p> <p>{{ page.description }}</p>
<p><b>Author:</b> {{page.extra.author.name}}</p> <p><b>Author:</b> {{page.extra.author.name}}</p>
<p><b>License:</b> {{page.extra.license}}</p> <p><b>License:</b> {{page.extra.license}}</p>
<p><b>Homepage:</b> {{page.extra.homepage}}</p> <p><b>Homepage:</b> <a href="{{page.extra.homepage}}">{{page.extra.homepage}}</a></p>
<p><b>Last updated:</b> {{page.extra.updated }}</p> <p><b>Last updated:</b> {{page.extra.updated }}</p>
</div> </div>
</div> </div>