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-size: $header_size;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
line-height: $header_size * 1.1;
|
line-height: $header_size * 1.7;
|
||||||
color: $header;
|
color: $header;
|
||||||
margin: 0.67rem 0;
|
margin: 0.67rem 0;
|
||||||
}
|
}
|
||||||
|
@ -212,17 +212,22 @@ table td, table th {
|
||||||
padding: 0.2rem 1rem;
|
padding: 0.2rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-columns {
|
@media(min-width:768px) {
|
||||||
display: flex;
|
.flex-columns {
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
}
|
// flex-direction: row;
|
||||||
|
flex-flow: row wrap;
|
||||||
.flex-column {
|
|
||||||
&#popular_posts {
|
|
||||||
order: 1;
|
|
||||||
}
|
}
|
||||||
&#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;
|
color: $links;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -33,5 +33,5 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user