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 hidden or 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