diff --git a/assets/css/style.css b/assets/css/style.css index 5af72e8..ccf290a 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -801,16 +801,41 @@ hr.-even { /* footer - Start */ footer { - margin-top: 2px; background-color: var(--wtf-footer-grey); color: white; - padding: 3% 1%; + padding: 0 0 3% 0; + display: grid; + grid-template-rows: 46px auto; + grid-template-columns: auto 68px 15%; +} + +.footer__wrapper { + grid-column: 1 / span 3; display: flex; flex-direction: row; justify-content: center; + padding-top: 3%; + max-width: 1200px; + margin: 0 auto; } -.footer__wrapper, .footer__nav { +.footer__top_bar_left { + background-color: var(--wtf-light-grey); +} + +.footer__top_bar_mid { + background-image: url("../images/footer_triangles.svg"); +} + +.footer__top_bar_right { + background-color: var(--wtf-footer-grey); +} + +.footer__content_box { + +} + +.footer__nav { display: flex; flex-direction: row; justify-content: center; @@ -1464,4 +1489,28 @@ footer { max-width: 450px; } /* homepage - end */ + + /* footer - start */ + footer { + grid-template-rows: 23px auto; + grid-template-columns: auto 34px 15%; + } + + .footer__wrapper { + padding: 6% 0%; + } + .footer__nav { + flex-direction: column; + } + + .footer__navitem { + margin: 1rem 0; + padding: 0; + order: 2; + } + + .footer__navitem.-second { + order: 1; + } + /* footer - end */ } diff --git a/assets/images/footer_triangles.svg b/assets/images/footer_triangles.svg new file mode 100644 index 0000000..814a516 --- /dev/null +++ b/assets/images/footer_triangles.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/templates/layout.html b/templates/layout.html index 3e2e71c..77165f9 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -74,31 +74,34 @@ __ ____________________