add basic responsive layout

master
Josha von Gizycki 3 years ago
parent 5f3ed0e363
commit 0d9e44b75d

@ -118,22 +118,23 @@ img, svg {
.app-title { .app-title {
grid-column: 1; grid-column: 1;
font-size: 1.5rem; font-size: 1.5rem;
}
.app-title__hello { .app-title__hello {
font-size: 1rem; font-size: 1rem;
margin-left: @text-padding-h; margin-left: @text-padding-h;
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
}
} }
.header-content { .header-content {
grid-column: 2; grid-column: 2;
}
.header-content__link { .header-content__link {
display: inline-block; display: inline-block;
margin-right: @accent-border-width; margin-right: @accent-border-width;
}
} }
} }
@ -388,3 +389,21 @@ table {
border: 1px solid @ci-highlight; border: 1px solid @ci-highlight;
height: 45rem; height: 45rem;
} }
@media (max-width: 768px) {
.grid {
grid-template-columns: auto;
grid-template-areas: "header" "nav" "main" "footer";
header {
grid-template-columns: auto;
.header-content {
grid-column: 1;
text-align: center;
}
}
}
}

Loading…
Cancel
Save