html {
box-sizing: border-box;
} *, *:before, *:after {
box-sizing: inherit;
}
/* material design box shadow */ .card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); &:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
}
.card-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); &:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.35), 0 10px 10px rgba(0,0,0,0.22); }
}
.card-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
/* animation keyframes */ @keyframes fadeInUp {
from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; }
}
.fadeInUp {
animation-name: fadeInUp;
}
.no-select {
-webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
/* Google font */ $primary-fomt: 'Fjalla One', sans-serif; $secondary-font: 'Anton', sans-serif;
/* color palette */ $primary-100: #8a9a9a; $primary-500: #CC00FF; $primary-700: #8F00B2;
$accent-100: #B9F6CA; $accent-200: #88B04B; $accent-300: #A4FF19; $accent-400: #44883c;
$primary-link: $accent-400;
$font-small-x: 1.2rem; $font-small: 1.4rem; $font-regular: 1.6rem; $font-large: 2rem;
/* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
html { font-size: 62.5%; } /* =10px */ body { font-size: 1.6rem; } /* =14px */ h1 { font-size: 2.6rem; } /* =24px */ h2 { font-size: 2.2rem; } /* =24px */ h3 { font-size: 2rem; } /* =24px */
body {
background: #ffffff;
}
header {
display: flex; justify-content: space-between; z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: 60px; padding: 5px 10px; background: $primary-700; .header-logo { display: flex; align-items: center; a { font-family: $secondary-font; font-size: 40px; color: $accent-300; text-decoration: none; @include transition(color .3s ease-out); &:hover { color: $accent-300; } } }
}
.header-navigation {
position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: row-reverse; align-items: center; &-icon { display: flex; flex-direction: column; align-items: center; z-index: 10; color: #ffffff; cursor: pointer; @include transition(all .3s ease-out); div { display: flex; border-radius: 50%; padding: 5px; background: $primary-700; } &:hover { div { background: $primary-500; } } &.enabled { div { background: #ffffff; color: $primary-700; transform: rotate(360deg); } } @include media (">phone") { } } &-menu { display: flex; flex-flow: column; justify-content: space-around; align-items: flex-start; z-index: 8; animation: .3s ease-out fadeInUp; list-style: none; margin: 0; &.disabled { display: none; } &.enabled { display: flex; position: fixed; top: 60px; left: 0; width: 100%; height: 100%; background-color: rgba($primary-700, .9); } a { font-size: $font-large; font-weight: bold; text-transform: uppercase; text-decoration: none; color: $accent-100; } @include media (">phone") { } }
}
main {
margin: 20px 0; padding: 10px 20px;
}