Created
March 21, 2018 21:09
-
-
Save jankal/d99ee755fb3ae22e8bbb779ec3d45640 to your computer and use it in GitHub Desktop.
Full SCSS of bug-report
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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