We will do a few style improvements to the website.
First we will put all the elements under the footer to the center:
@media only screen and (max-width: 48em) { .footer { text-align: center; .footnav, .social { margin-bottom: 20px; ul { float: none; } li { display: inline-block; float: none; margin: { left: 10px; right: 10px; } } } } }
Then, we will remove unnecessary styles from Foundation. So, let's open
base.scss
and comment out the following@import
rule:// @import "foundation";
Uncomment the following
@import
rules:@import "foundation/foundation-global"; @import "foundation/components/grid"; @import "foundation/components/visibility"; @import "foundation/components/type"; @import "foundation/components/buttons"; @import "foundation/components/forms"; @import "foundation/components/top-bar"; @import "foundation/components/orbit"; @import "foundation...