$base-duration: 250ms;

// Colors
$primary: hsla((1*20.4), 60%, 50%, 1);
$accent: #ccac9b33;
$white: whitesmoke;

$max-width: 1200px;
// Breakpoints
$sm: 20rem;
$med: 48rem;
$lg: 64rem;

$sans: ‘Source Sans Pro’, sans-serif;
$mono: ‘Source Code Pro’, monospace;

*, *:before, *:after {
box-sizing: border-box;
outline: none;
}

html {
font-family: $sans;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
}

body {
padding-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
font-family: $mono;
}

h2 {
margin: 5px 0;
color: white;
}

p {
margin: 200px 0;
}

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 15px 0;
background-color: $white;
box-shadow: 0 0 10px rgba(black,0.3);
z-index: 9998;
}

.logo {
position: relative;
display: block;
color: $primary;
font-size: 18px;
font-weight: 400;
text-decoration: none;
i {
margin-right: 10px;
color: $primary;
}
}
.nav-menu {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-end;
margin: 0;
padding: 0;
}
.navigation {
position: fixed;
top: 0;
left: -100vw;
width: 100vw;
height: 100vh;
// background-color: $primary;
background-color: rgba($white,0.95);
transition: 0.25s linear;
z-index: 9998;
&.is-open {
left: 0;
}
ul {
position: 0;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style-type: none;
li {
position: relative;
height: 25vh;
border-bottom: 1px solid rgba(#444, 0.1);
}
}
a {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
padding: 20px;
color: $primary;
font-family: $mono;
font-size: 32px;
text-decoration: none;
&:before {
position: absolute;
content: ”;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: $accent;
transition: 0.25s;
z-index: -1;
}
&:hover {
color: $white;
&:before {
width: 100%;
}
}
}
}
.hamburger {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-left: auto;
padding: 0;
border: none;
background-color: rgba(white,0.0);
cursor: pointer;
z-index: 9999;
&.is-open {
span {
background-color: black;
transition: 0.25s transform linear;
&:first-child {
transform: translateY(2px) rotate(45deg);
animation: hamburger3 0.25s linear;
}
@keyframes hamburger3 {
0% { transform: translateY(0); }
50% { transform: translateY(0); }
100% { transform: translateY(2px) rotate(45deg); }
}
&:nth-child(2) {
width: 0;
}
&:last-child {
transform: translateY(-2px) rotate(-45deg);
animation: hamburger4 0.25s linear;
}
@keyframes hamburger4 {
0% { transform: translateY(0); }
50% { transform: translateY(0); }
100% { transform: translateY(-2px) rotate(-45deg); }
}
}
}
span {
position: relative;
display: block;
width: 30px;
height: 2px;
background-color: hsla((1*20.4), 60%, 50%, 1);
border-radius: 10px;
transform-origin: center center;
transition: 0.25s transform linear;
&:first-child {
transform: translateY(-5px) rotate(0deg);
animation: hamburger1 0.25s linear;
}
@keyframes hamburger1 {
0% { transform: translateY(0); }
50% { transform: translateY(0); }
100% { transform: translateY(-5px) rotate(0deg); }
}
&:last-child {
transform: translateY(5px) rotate(0deg);
animation: hamburger2 0.25s linear;
}
@keyframes hamburger2 {
0% { transform: translateY(0); }
50% { transform: translateY(0); }
100% { transform: translateY(5px) rotate(0deg); }
}
}
}

section {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
@for $i from 1 through 5 {
&:nth-of-type(#{$i}) {
//background-color: rgba(salmon,($i*0.9));
background-color: hsla(($i*20.4), 60%, 50%, 1);
animation: backgrounder 30s linear infinite;
}
}
.section-heading {
position: sticky;
top: 60px;
width: 100%;
//margin-bottom: 30px;
background-color: rgba($white,0.3);
box-shadow: 0 3px 5px rgba(black,0.1);
z-index: 9996;
}
}

footer {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 200px 0;
background-color: #333;
color: white;
}

// grid shtuff
.grid-container {
max-width: $max-width;
margin: 0 auto;
padding: 0 10px;
@media (min-width: $med) {
padding: 0 20px;
}
&.full {
max-width: 100%;
padding: 0 10px;
@media (min-width: $med) {
padding: 0 20px;
}
}
.grid-x {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
@media (min-width: $sm) {

}
@media (min-width: $med) {
flex-direction: row;
flex-wrap: wrap;
}
&.align-left {
justify-content: flex-start;
}
&.align-right {
justify-content: flex-end;
}
&.align-justify {
justify-content: space-between;
}
&.align-top {
align-items: flex-start;
}
&.align-bottom {
align-items: flex-end;
}
&.align-middle {
align-items: center;
}
&.align-center {
align-items: center;
justify-content: center;
}
&.grid-margin-x {
.cell {
margin-left: 10px;
margin-right: 10px;
}
}
&.grid-padding-x {
.cell {
padding-left: 10px;
padding-right: 10px;
}
}
&.grid-margin-y {
.cell {
margin-top: 10px;
margin-bottom: 10px;
}
}
&.grid-padding-y {
.cell {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
}
.cell {
display: block;
width: 100%;
&.small-1 {
@media (min-width: $sm) {
width: 8.3333%;
}
}
&.small-2 {
@media (min-width: $sm) {
width: 16.6666%;
}
}
&.small-3 {
@media (min-width: $sm) {
width: 25%;
}
}
&.small-4 {
@media (min-width: $sm) {
width: 33.3333%;
}
}
&.small-5 {
@media (min-width: $sm) {
width: 41.6666%;
}
}
&.small-6 {
@media (min-width: $sm) {
width: 50%;
}
}
&.small-7 {
@media (min-width: $sm) {
width: 58.3333%;
}
}
&.small-8 {
@media (min-width: $sm) {
width: 66.6666%;
}
}
&.small-9 {
@media (min-width: $sm) {
width: 75%;
}
}
&.small-10 {
@media (min-width: $sm) {
width: 83.3333%;
}
}
&.small-11 {
@media (min-width: $sm) {
width: 91.666612%;
}
}
&.medium-1 {
@media (min-width: $med) {
width: 8.3333%;
}
}
&.medium-2 {
@media (min-width: $med) {
width: 16.6666%;
}
}
&.medium-3 {
@media (min-width: $med) {
width: 25%;
}
}
&.medium-4 {
@media (min-width: $med) {
width: 33.3333%;
}
}
&.medium-5 {
@media (min-width: $med) {
width: 41.6666%;
}
}
&.medium-6 {
@media (min-width: $med) {
width: 50%;
}
}
&.medium-7 {
@media (min-width: $med) {
width: 58.3333%;
}
}
&.medium-8 {
@media (min-width: $med) {
width: 66.6666%;
}
}
&.medium-9 {
@media (min-width: $med) {
width: 75%;
}
}
&.medium-10 {
@media (min-width: $med) {
width: 83.3333%;
}
}
&.medium-11 {
@media (min-width: $med) {
width: 91.666612%;
}
}
&.large-1 {
@media (min-width: $lg) {
width: 8.3333%;
}
}
&.large-2 {
@media (min-width: $lg) {
width: 16.6666%;
}
}
&.large-3 {
@media (min-width: $lg) {
width: 25%;
}
}
&.large-4 {
@media (min-width: $lg) {
width: 33.3333%;
}
}
&.large-5 {
@media (min-width: $lg) {
width: 41.6666%;
}
}
&.large-6 {
@media (min-width: $lg) {
width: 50%;
}
}
&.large-7 {
@media (min-width: $lg) {
width: 58.3333%;
}
}
&.large-8 {
@media (min-width: $lg) {
width: 66.6666%;
}
}
&.large-9 {
@media (min-width: $lg) {
width: 75%;
}
}
&.large-10 {
@media (min-width: $lg) {
width: 83.3333%;
}
}
&.large-11 {
@media (min-width: $lg) {
width: 91.666612%;
}
}

&.align-self-right {
display: flex;
justify-content: flex-end;
}
&.align-self-left {
display: flex;
justify-content: flex-start;
}
}
.top-bar {
.grid-x {
flex-wrap: nowrap;
}
}

X