Refactor layout and button styles

* Add single-column layout for forms
* Add optional nav/buttons to section headers
This commit is contained in:
2019-05-23 12:18:02 +02:00
parent 8bd4c6e6e1
commit c30c6c2b36
6 changed files with 74 additions and 23 deletions
+42 -3
View File
@@ -13,6 +13,21 @@ main {
"stats"
"contributions";
}
&.center-column {
display: flex;
flex-direction: column;
align-items: center;
section {
width: 600px;
max-width: 100%;
header {
text-align: center;
}
}
}
}
@media (min-width: 550px) {
@@ -39,11 +54,35 @@ main section {
}
header {
padding-bottom: 3rem;
text-align: center;
margin-bottom: 3rem;
&.with-nav {
display: grid;
grid-template-columns: auto 5rem;
grid-template-areas:
"title" "actions";
@include media-min(medium) {
grid-template-columns: auto 5rem 1.2rem;
grid-template-areas:
"title" "actions" "padding";
}
}
h2 {
display: inline-block;
// padding-left: 1.2rem;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
@include media-max(small) {
padding-bottom: 2rem;
margin-bottom: 2rem;
}
}
}