Improve mobile layout

This commit is contained in:
Ariejan de Vroom 2023-02-28 10:11:27 +01:00
parent 8c86f0e9a6
commit be83722dea
Signed by: ariejan
GPG Key ID: AD739154F713697B
2 changed files with 19 additions and 14 deletions

View File

@ -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;
}
} }
} }