/* Layout
=============== */
.push-down {
margin-top: 60px;
}
.main {
position: relative;
}
.home-header, .post-header {
background-color: darken($primary-color, 20%); position: relative; z-index: 2; color: $background !important;
}
.post-header {
background-size: cover; background-position: center; background-repeat: no-repeat; align-items: flex-end; height: 420px;
}
.home-header {
background-image: url("/assets/pattern.svg"); background-repeat: repeat; background-size: 40%; z-index: 1; position: relative;
}
.home-header::after {
content: ""; z-index: 3; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.15; background-color: darken($primary-color, 20%); opacity: 0.9;
}
.post-header::before {
content: ""; z-index: 2; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.home-header .small-container {
padding: 180px $padding; z-index: 4;
}
.post-header .small-container {
width: 100%; margin-bottom: $margins * 2;
}
.post-header .small-container h2, .post-header .small-container p {
display: inline-block; margin: 0; padding: $padding / 2 $padding; background-color: $background; box-shadow: 0 2px 5px rgba(0,0,0,.1); color: $font-color; float: left; clear: both;
}
.post-header .small-container p {
margin-top: $margins / 3; display: flex; flex-direction: row; align-items: center; font-size: $code-size;
}
.post-header .small-container p .icon {
margin-right: $margins / 3;
}
.post-header .small-container p .icon:nth-of-type(2) {
margin-left: $margins;
}
.home-header h2, .home-header p {
color: $background !important; width: 80%; margin-left: auto; margin-right: auto;
}
.mailchimp-form {
padding: 0 $padding; display: flex; flex-direction: row; justify-content: center; font-size: 1.1rem;
}
.mailchimp-form .input {
height: $large-buttons;
}
.mailchimp-form .input {
width: 80%;
}
.posts >.container {
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;
}
.cell {
width: 100%; margin-bottom: $margins * 2; box-shadow: 0 2px 5px rgba(0,0,0,.1); display: flex; flex-direction: column;
}
@include large-breakpoint {
.cell { width: 45% }
}
.cell .container {
padding: $padding $padding * 2; background-color: $background; flex: 1; width: 100%;
}
.cell:hover, .cell:focus {
box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.main-footer {
background-color: $alternate-color;
}
.main-footer .small-container {
padding: 60px $padding; color: $accent-color; display: flex; flex-direction: column; font-size: 1rem;
}
@include large-breakpoint {
.main-footer .small-container { flex-direction: row; justify-content: space-between; }
}
.footer-social, .footer-disclaimer {
@extend %column-padding; margin-bottom: $margin-bottom; flex: 1;
}
.social-icons {
margin-bottom: $margins;
}
.social-icon {
fill: $background; width: 40px; height: 40px; margin-right: $margins / 1.5;
}
.post-content {
padding: 60px $padding * 2; background-color: $background; box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
.after-post {
padding-top: 60px; padding-bottom: 60px; margin: $margins * 2 auto 0;
}
@include large-breakpoint {
.after-post .cell { width: calc(90% / 3); }
}
.after-post h3 {
margin-bottom: $margins * 2;
}
.form-box {
background-color: $alternate-background; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); text-shadow: -2px -2px 0 $background, 2px -2px 0 $background, -2px 2px 0 $background, 2px 2px 0 $background;
}
.form-box p {
max-width: 80%; margin-left: auto; margin-right: auto;
}
p img {
max-width: 100%; width: 100%; margin: auto;
}
@include large-breakpoint {
p img { width: 50%; float: right; }
}