Skip to content

Instantly share code, notes, and snippets.

@jankal
Last active March 20, 2018 05:50
Show Gist options
  • Save jankal/ebda1b527dc869895b81af58572224e7 to your computer and use it in GitHub Desktop.
Save jankal/ebda1b527dc869895b81af58572224e7 to your computer and use it in GitHub Desktop.
zeraton.de dev styles
$color-primary: #134074;
$color-primary-light: #8da9c4;
$color-grey-dark: #878787;
$color-white: #fbfdfb;
$color-black: #000000;
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 16px;
}
body {
box-sizing: border-box;
}
body {
font-family: 'Comfortaa', cursive;
font-weight: 400;
line-height: 1.875rem;
color: $color-grey-dark;
}
$cursive: "Comfortaa", cursive;
$decorative: "Coda", cursive;
$header-font: $decorative;
h1, h2, h3, h4, h5, h6 {
font-family: $header-font;
}
.section-heading {
text-transform: uppercase;
margin-top: 5rem;
color: $color-primary;
}
.button-primary {
font-family: $decorative;
color: white;
text-transform: uppercase;
background-color: transparent;
border: 1px solid $color-white;
padding: .5em 3em;
font-size: .9rem;
transition: all .4s;
&:hover {
text-decoration: none;
color: $color-primary;
background-color: $color-white;
}
}
.Hero {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
margin-top: -60px;
&__content {
transform: translateY(60px);
@media (min-width: 768px) {
transform: translateY(95px);
}
}
.heading-primary {
margin-bottom: 2rem;
@media (min-width: 768px) {
margin-bottom: 3.5rem;
}
&--main {
font-size: 4.5rem;
color: $color-primary-light;
display: block;
margin-bottom: .1em;
animation: moveInLeft 6s;
@media (max-width: 767px) {
font-size: 2.5rem;
margin-bottom: 1rem;
}
}
&--sub {
font-size: 1rem;
font-family: $cursive;
color: $color-white;
display: block;
animation: moveInRight 6s;
@media (min-width: 768px) {
margin-left: 2.5rem;
font-size: 1.3rem;
}
}
}
.button-primary {
@media (min-width: 768px) {
margin-left: 2.5rem;
}
}
}
.header-container {
height: 60px;
}
.top-header {
width: 100%;
position: fixed;
height: 75px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba($color-black, .6);
z-index: 100;
box-sizing: border-box;
padding: 0 60px;
@media (max-width: 767px) {
padding: 0 32px;
}
&__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 1.5em;
&:last-child {
margin-right: 0;
}
a {
text-decoration: none;
font-family: Coda;
font-size: .9rem;
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: 300px;
background-color: $color-black;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
padding: 30px;
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: 20px 0;
a {
text-decoration: none;
color: $color-white;
font-family: Coda;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
&:hover,
&:active,
&.nuxt-link-active {
color: $color-primary-light;
}
}
}
}
}
.drawer-toggle {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 50%;
width: 35px;
cursor: pointer;
@media (min-width: 768px) {
display: none;
}
&__bar {
width: 90%;
height: 2px;
background-color: white;
}
}
.logo {
height: 40px;
width: auto;
&:hover {
opacity: .9;
}
}
@jankal
Copy link
Author

jankal commented Mar 20, 2018

These styles where copied in correct order from several .scss files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment