Add and edit responsive style on homepage

This commit is contained in:
2021-10-03 19:14:24 +02:00
parent f6da3c4b55
commit 54afac2ed5
11 changed files with 203 additions and 55 deletions

View File

@@ -1,6 +1,10 @@
.footer {
height: 120px;
background-color: $color-primary-darker;
padding: 40px 0;
@include bp (sm) {
height: 120px;
}
.container {
align-items: center;
@@ -9,21 +13,44 @@
}
.site-title {
grid-column: 2 / span 3;
grid-column: 1 / span var(--columns);
grid-row: 1;
margin-bottom: 40px;
@include bp (sm) {
grid-column: 2 / span 5;
grid-row: 1;
margin: 0;
}
}
&__links {
grid-column: 5 / span 16;
grid-row: 1;
grid-column: 1 / span var(--columns);
grid-row: 2;
@include bp (sm) {
grid-column: 5 / span 16;
grid-row: 1;
}
ul {
display: flex;
justify-content: center;
@include bp (sm) {
display: flex;
justify-content: center;
}
}
li {
display: block;
margin: 0 16px;
margin-bottom: 16px;
@include bp (sm) {
margin: 0 16px;
}
&:last-child {
margin-bottom: 0;
}
}
a {
display: block;
@@ -38,9 +65,16 @@
}
&__ctf {
grid-column: 19 / span 5;
grid-row: 1;
grid-column: 1 / span var(--columns);
grid-row: 2;
margin-left: auto;
margin-top: auto;
@include bp (sm) {
grid-column: 19 / span 5;
grid-row: 1;
margin-top: 0;
}
span {
font-size: rem(12px);