footer-2-1-1 styling
This commit is contained in:
parent
c3811c0f47
commit
5a6c031ad1
|
@ -1,6 +1,6 @@
|
||||||
<div class="l-underlay footer-bg"></div>
|
<div class="l-underlay footer-bg"></div>
|
||||||
|
|
||||||
<div class="l-wrapper reduce-padding">
|
<div class="l-wrapper">
|
||||||
|
|
||||||
<ul class="l-flex-list-row footer__body">
|
<ul class="l-flex-list-row footer__body">
|
||||||
|
|
||||||
|
|
|
@ -1,19 +1,19 @@
|
||||||
$footer-bp-s: 28em;
|
$footer-bp-s: 28em;
|
||||||
$footer-bp-m: 60em;
|
$footer-bp-m: 60em;
|
||||||
|
$footer-attr-padding: $unit-size * 0.5;
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
|
||||||
|
padding-top: $unit-size * 2;
|
||||||
|
padding-bottom: $footer-attr-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-bg {
|
.footer-bg {
|
||||||
background-color: rgba(indigo, 0.5);
|
background-color: rgba(indigo, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-section {
|
|
||||||
background-color: rgba(indigo, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer__term {
|
.footer__term {
|
||||||
margin: 0 0.5em;
|
margin: 0 0.5em;
|
||||||
}
|
}
|
||||||
|
@ -29,6 +29,7 @@ $footer-bp-m: 60em;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin-bottom: $unit-size * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__body-section {
|
.footer__body-section {
|
||||||
|
@ -67,20 +68,11 @@ $footer-bp-m: 60em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// reduce padding bottom
|
|
||||||
.reduce-padding {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
|
|
||||||
@media (min-width: $bp-m) {
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer__footer {
|
.footer__footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-top: 2.4rem;
|
padding-top: $footer-attr-padding;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
|
@ -88,7 +80,7 @@ $footer-bp-m: 60em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -1.2rem;
|
top: 0;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue