Improve mobile layout
This commit is contained in:
parent
8c86f0e9a6
commit
be83722dea
|
@ -71,7 +71,7 @@ h1, h2, h3, h4, h5 {
|
|||
font-size: $header_size;
|
||||
font-weight: bold;
|
||||
font-variant: small-caps;
|
||||
line-height: $header_size * 1.1;
|
||||
line-height: $header_size * 1.7;
|
||||
color: $header;
|
||||
margin: 0.67rem 0;
|
||||
}
|
||||
|
@ -212,17 +212,22 @@ table td, table th {
|
|||
padding: 0.2rem 1rem;
|
||||
}
|
||||
|
||||
.flex-columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
&#popular_posts {
|
||||
order: 1;
|
||||
@media(min-width:768px) {
|
||||
.flex-columns {
|
||||
display: flex;
|
||||
// flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
&#recent_posts {
|
||||
order: 2;
|
||||
|
||||
.flex-column {
|
||||
width: 50%;
|
||||
|
||||
&#popular_posts {
|
||||
order: 1;
|
||||
}
|
||||
&#recent_posts {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -252,4 +257,4 @@ img.about-avatar {
|
|||
color: $links;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -33,5 +33,5 @@
|
|||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user