rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

footer-2-1-1 styling

This commit is contained in:
Ray Elliott 2020-04-22 11:28:39 +00:00
parent c3811c0f47
commit 5a6c031ad1
2 changed files with 8 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/layouts/partials/components/footer/footer-2-1-1.html
View File

@ -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">

22
src/css/imports/components/footer/footer-2-1-1.scss
View File

@ -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;
} }