fix: match footer to design documents with typography and colors

This commit is contained in:
Christian Andolf
2025-05-27 13:12:01 +02:00
parent 32cc0cbe88
commit ade0279c8d
7 changed files with 100 additions and 138 deletions

View File

@@ -1,15 +1,15 @@
.details {
background: var(--Base-Text-High-contrast);
background: var(--Primary-Dark-Surface-Normal);
color: var(--Primary-Dark-On-Surface-Text);
padding: var(--Spacing-x3) 0 var(--Spacing-x6);
padding: var(--Space-x3) 0 var(--Space-x6);
}
.topContainer {
display: flex;
justify-content: space-between;
padding-bottom: var(--Spacing-x2);
padding-bottom: var(--Space-x2);
max-width: var(--max-width-page);
margin: 0 auto var(--Spacing-x2);
margin: 0 auto var(--Space-x2);
}
.bottomContainer {
@@ -22,26 +22,26 @@
.socialNav {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.navigationContainer {
display: flex;
justify-content: space-between;
margin-bottom: var(--Spacing-x2);
padding-bottom: var(--Spacing-x2);
border-bottom: 1px solid var(--Base-Text-Medium-contrast);
margin-bottom: var(--Space-x2);
padding-bottom: var(--Space-x2);
border-bottom: 1px solid var(--Primary-Dim-On-Surface-Accent);
}
.navigation {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.link {
&::after {
content: "·";
margin-left: var(--Spacing-x1);
margin-left: var(--Space-x1);
}
&:last-child {
@@ -51,19 +51,14 @@
}
}
.copyrightContainer {
display: flex;
gap: var(--Spacing-x1);
}
@media screen and (min-width: 768px) {
.details {
padding: var(--Spacing-x6) 0 var(--Spacing-x4);
padding: var(--Space-x6) 0 var(--Space-x4);
}
.bottomContainer {
border-top: 1px solid var(--Base-Text-Medium-contrast);
padding-top: var(--Spacing-x2);
border-top: 1px solid var(--Primary-Dark-On-Surface-Divider);
padding-top: var(--Space-x2);
flex-direction: row;
align-items: center;
}
@@ -72,7 +67,7 @@
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
align-items: center;
}
}