html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
html, body {
height: 100%;
}
body {
margin: 0;
}
img {
display: block;
}
.content {
max-width: 1200px; margin: 0 $margins;
} // Header header {
display: flex; flex-direction: column; margin: 2 * $margins 0; padding: $padding 0;
}
// Logo and Site Heading .title-area {
display: flex; justify-content: space-between; align-items: center;
}
.logo-container {
display: flex; justify-content: flex-start; align-items: center; .logo { padding-right: $padding; width: 75px; height: 75px; } h1 { margin-bottom: 0; }
}
.menu-icon {
font-size: 20px;
}
// Navigation nav nav {
list-style-type: none; padding: 0; .nav__item { padding-bottom: $padding; } .nav__item > a { padding: $padding; }
}
.hidden {
display: none;
}
// Responsive Navigation @media screen and (min-width: 850px) {
header { flex-direction: row; justify-content: space-between; align-items: center; } .menu-icon { display: none; } .nav-container { margin: 0 auto; align-items: center; width: 1200px; max-width: 100%; } nav #nav { display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 0; .nav__item { padding-bottom: 0; } .nav__item > a { padding: 0 $padding; } .nav__item:last-child a { padding-right: 0; } }
}
// Index Page Sections section {
margin-bottom: 4 * $margins;
}
// Image Banner .image-banner {
display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: $light-gray; background-image: url("/assets/images/sebastian-unrau-47679-unsplash.jpg"); background-size: cover; margin-bottom: 6em; height: 600px;
}
@keyframes fade-in{
0% { opacity:0; transform:translateY(40px); } 100% { opacity:1; transform:translateY(0); }
}
.fade-in {
opacity: 0; animation: fade-in ease 1s; animation-fill-mode: forwards; animation-delay: 1s;
}
// Mega title @keyframes slide-up{
0% { transform:translateY(40px); } 100% { transform:translateY(0); }
}
.slide-up {
animation: slide-up ease 500ms; animation-fill-mode: forwards; animation-delay: 1s;
}
.mega-title {
color: white; text-align: center;
}
.tagline {
color: white; font-family: $base-font-family;
}
.intro {
text-align: center;
} // Footer .footer {
padding: $padding 0; margin-top: 2 * $margins;
}
.footer-module {
margin-bottom: 2 * $margins; ul { list-style-type: none; padding: 0; }
}
// Responsive Footer @media screen and (min-width: 500px) {
.footer-module { margin-bottom: 0; }
}
ul.social-list {
display: flex; flex-wrap: wrap; li { font-size: 24px; padding-right: $padding; }
}
// Responsiveness @media screen and (min-width: 1200px) {
.content { margin: 0 auto; }
}