flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Edit mobile style on Footer

Browse Source
This commit is contained in:
Shelby Kay
2022-09-09 15:00:52 +02:00
parent 3374871f2f
commit 4442f268f9
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/style/organisms/_footer.scss
View File

@@ -2,7 +2,7 @@
position: relative; position: relative;
z-index: 200; z-index: 200;
background-color: $color-primary-darker; background-color: $color-primary-darker;
padding: 40px 0; padding: 24px 0 40px;
@include bp (md) { @include bp (md) {
padding: 0; padding: 0;
@@ -20,9 +20,9 @@
// Site title // Site title
&__title { &__title {
grid-column: 1 / span 4; grid-column: 1 / -1;
display: block; display: block;
margin-bottom: 40px; margin: 0 auto 40px;
text-decoration: none; text-decoration: none;
@include bp (sm) { @include bp (sm) {
@@ -45,41 +45,49 @@
// Links // Links
&__links { &__links {
grid-column: 5 / span 3; grid-column: 1 / -1;
margin-left: auto; margin: 0 auto;
@include bp (sm) { @include bp (sm) {
grid-column: 5 / span 19; grid-column: 6 / span 18;
width: 100%;
grid-row: 1; grid-row: 1;
margin-left: auto;
margin-top: 0.15em; margin-top: 0.15em;
} }
ul { ul {
@include bp (sm) { @include bp (sm) {
display: flex; display: flex;
justify-content: center; justify-content: flex-end;
} }
} }
li { li {
display: block; display: block;
margin-bottom: 16px;
@include bp (sm) { @include bp (sm) {
margin: 0 12px; margin-left: 12px;
} }
@include bp (md) { @include bp (md) {
margin: 0 16px; margin-left: 16px;
} }
&:last-child { &:not(:last-child) {
margin-bottom: 0; margin-bottom: 12px;
@include bp (sm) {
margin-right: 12px;
margin-bottom: 0;
}
@include bp (md) {
margin-right: 16px;
}
} }
} }
a { a {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-size: rem(14px); font-size: rem(14px);
@@ -88,6 +96,7 @@
@include bp (md) { @include bp (md) {
font-size: rem(16px); font-size: rem(16px);
justify-content: flex-end;
} }
} }
svg { svg {