$header-border: 1px solid #eee; body{ background-color: #333; font-family: 'Hammersmith One', sans-serif; color: white; display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } .navbar-list .navbar-item{ text-transform: uppercase; font-weight: 400; display: inline-block; margin: 1em; } ul.navbar-list{ border-top: $header-border; border-bottom: $header-border; margin-bottom: 2rem; } .header { padding-top: 6rem; text-align: center; } @media (min-width: 700px){ .header { padding-top: 14rem; } } .head{ padding: 0 1rem 6rem 1rem; } @media (max-width: 700px){ .navbar-list .navbar-item { width: calc(100% - 2em); } } .navbar-item a{ color: $brand-color; } ul.post-list, ul.navbar-list{ list-style-type: none; margin-left: 0; margin-right: 0; } .header, footer{ background-color: rgba(0,0,0,0.25); } footer{ padding-top: 1rem; } footer .author{ text-align: center; text-transform: uppercase; } .container{ padding-top: 1rem; padding-bottom: 1rem; } .icons{ text-align: center; } a.icon{ display: inline-table; background-color: rgba(255,255,255,0.5); border-radius: 1.75em; width: 3.5em; height: 3.5em; text-align: center; line-height: 3.5em; margin: .5em; color: white; cursor: pointer; &:hover { text-decoration: none; } } a.icon i.fa{ font-size: 2em; display: table-cell; vertical-align: middle; }