Skip to content

Instantly share code, notes, and snippets.

@jankal
Created March 21, 2018 21:09
Show Gist options
  • Save jankal/d99ee755fb3ae22e8bbb779ec3d45640 to your computer and use it in GitHub Desktop.
Save jankal/d99ee755fb3ae22e8bbb779ec3d45640 to your computer and use it in GitHub Desktop.
Full SCSS of bug-report
$color-primary: #134074;
$color-primary-light: #8da9c4;
$color-grey-dark: #878787;
$color-white: #fbfdfb;
$color-black: #000000;
.slideInRight {
animation: slideInRight 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@keyframes slideInRight {
0% {
transform: translateX(10rem);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
}
.slideInLeft {
animation: slideInLeft 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@keyframes slideInLeft {
0% {
transform: translateX(-10rem);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
}
.slideInTopFwd {
animation: slideInTopFwd 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@keyframes slideInTopFwd {
0% {
transform: translateY(-80rem) rotateX(-30deg) scale(0);
transform-origin: 50% 100%;
opacity: 0;
}
100% {
transform: translateY(0) rotateX(0) scale(1);
transform-origin: 50% 140rem;
opacity: 1;
}
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 10px;
}
body {
box-sizing: border-box;
}
body {
font-family: 'Comfortaa', cursive;
font-weight: 400;
line-height: 3rem;
color: $color-grey-dark;
}
$cursive: "Comfortaa", cursive;
$decorative: "Coda", cursive;
$header-font: $decorative;
h1, h2, h3, h4, h5, h6 {
font-family: $header-font;
}
h2 {
font-size: 3.2rem;
font-weight: 400;
}
h3 {
font-size: 2.4rem;
text-transform: uppercase;
font-weight: 400;
color: $color-primary;
}
.section-heading {
text-transform: uppercase;
margin-top: 8rem;
&--dark {
color: $color-primary;
}
&--light {
color: $color-primary-light;
}
&--white {
color: $color-white;
}
}
.button-primary {
font-family: $decorative;
text-transform: uppercase;
background-color: transparent;
padding: .8rem 4.8rem;
font-size: 1.4rem;
transition: all .4s;
border: .1rem solid;
&:hover {
text-decoration: none;
}
&--white {
color: $color-white;
border-color: $color-white;
&:hover {
color: $color-primary;
background-color: $color-white;
}
}
&--dark {
color: $color-primary;
border-color: $color-primary;
&:hover {
color: $color-white;
background-color: $color-primary;
}
}
}
.header-container {
height: 6rem;
}
.top-header {
width: 100vw;
position: fixed;
height: 7.5rem;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba($color-black, .6);
z-index: 100;
box-sizing: border-box;
padding: 0 6rem;
@media (max-width: 767px) {
padding: 0 3.2rem;
}
&__spacer {
flex: 1;
}
&__navigation-items {
display: none;
@media (min-width: 768px) {
display: block;
}
}
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
&__item {
margin: 0 2.4rem;
&:last-child {
margin-right: 0;
}
a {
text-decoration: none;
font-family: Coda;
font-size: 1.4rem;
font-weight: 400;
text-transform: uppercase;
color: $color-white;
&:hover,
&:active,
&.nuxt-link-active {
color: $color-primary-light;
}
}
}
}
}
.sidenav-container {
height: 100%;
width: 100%;
&__backdrop {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
position: fixed;
top: 0;
left: 0;
}
.sidenav {
height: 100%;
width: 30rem;
background-color: $color-black;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
padding: 3rem;
justify-content: center;
}
.slide-side-enter-active,
.slide-side-leave-active {
transition: all 0.3s ease-out;
}
.slide-side-enter,
.slide-side-leave-to {
transform: translateX(-100%);
}
.nav-list {
list-style: none;
padding: 0;
margin: 0;
&__item {
margin: 2rem 0;
a {
text-decoration: none;
color: $color-white;
font-family: Coda;
font-size: 1.6rem;
font-weight: 400;
text-transform: uppercase;
&:hover,
&:active,
&.nuxt-link-active {
color: $color-primary-light;
}
}
}
}
}
.drawer-toggle {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 50%;
width: 3.5rem;
cursor: pointer;
@media (min-width: 768px) {
display: none;
}
&__bar {
width: 90%;
height: .2rem;
background-color: white;
}
}
.logo {
height: 4rem;
width: auto;
&:hover {
opacity: .9;
}
}
.Hero {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
margin-top: -6rem;
overflow-x: hidden;
&__content {
transform: translateY(6rem);
@media (min-width: 768px) {
transform: translateY(9.5rem);
}
}
.heading-primary {
margin-bottom: 3rem;
@media (min-width: 768px) {
margin-bottom: 3.5rem;
}
&--main {
font-size: 7.2rem;
color: $color-primary-light;
display: block;
margin-bottom: .2rem;
@media (max-width: 767px) {
font-size: 4rem;
margin-bottom: 1.6rem;
}
}
&--sub {
font-size: 1.6rem;
font-family: $cursive;
color: $color-white;
display: block;
@media (min-width: 768px) {
margin-left: 4rem;
font-size: 2rem;
}
}
}
.button-primary {
@media (min-width: 768px) {
margin-left: 5.5rem;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment