diff --git a/src/app/app-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index 04d51c8..4b338cb 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,2 +1,54 @@

app-layout works!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 3c43e57..44f716b 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,3 +1,18 @@ -
+
+
+ + +
+ +
+ +
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 7281308..fd99b8d 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -1,9 +1,131 @@ +@import "../../assets/scss/variables"; .component-header { position: fixed; + display: flex; top: 0; left: 0; - height: 5px; - width: 100%; - background: black; + height: 100vh; + width: 100vw; + background: $yellow; + transition: height .5s; + + .logo-container { + height: 200px; + width: 200px; + max-height: 50vh; + max-width: 90vw; + position: relative; + margin: auto; + padding-top: 20px; + transition: height .6s, width .6s; + z-index: 101; + + .logo { + display: flex; + height: 100%; + width: 100%; + margin: auto; + cursor: pointer; + object-fit: contain; + } + + .circles { + &:before, + &:after { + content: ' '; + position: absolute; + top: -12%; + left: -12%; + display: block; + height: 125%; + width: 125%; + background: $white-alpha; + border-radius: 5px; + z-index: -1; + opacity: .3; + transition: background .6s; + } + + &:after { + border-radius: 20px; + animation: circle2 13s linear infinite; + opacity: .4; + } + &:before { + border-radius: 20px; + animation: circle1 10s linear infinite; + } + } + } + + &.sticky { + height: 0px; + + .logo-container { + height: 80px; + width: 80px; + + .circles { + &:before, + &:after { + background: $yellow; + } + } + + &.menu-open { + height: 120px; + width: 120px; + .circles { + &:before, + &:after { + background: $white-alpha; + } + } + } + } + } + + .menu { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: $yellow; + border-radius: 100px; + transform: scale(0) skew(20deg, 20deg); + transition: transform .5s, border-radius .4s; + z-index: -1; + + .nav { + display: block; + text-align: center; + padding-top: 150px; + height: 100vh; + overflow: auto; + border: 1px solid red; + } + + &.open { + border-radius: 0; + transform: scale(1) skew(0deg, 0deg); + z-index: 100; + } + } + +} + + +@keyframes circle1 { + 0% { transform: translate(-5%, 8%) rotate(10deg) scale(1) skew(20deg, 20deg); } + 75% { transform: translate(10%, -5%) rotate(20deg) scale(1.1) skew(-10deg, -20deg); } + 50% { transform: translate(5%, 0%) rotate(-16deg) scale(.6) skew(-40deg, -10deg); } + 100% { transform: translate(-5%, 8%) rotate(10deg) scale(1) skew(20deg, 20deg); } +} +@keyframes circle2 { + 0% { transform: translate(10%, 5%) rotate(-30deg) scale(1) skew(20deg, 20deg); } + 50% { transform: translate(-5%, 8%) rotate(-17deg) scale(.7) skew(-10deg, -20deg); } + 75% { transform: translate(0%, -10%) rotate(10deg) scale(1.2) skew(-10deg, -50deg); } + 100% { transform: translate(10%, 5%) rotate(-30deg) scale(1) skew(20deg, 20deg); } } diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 7ab4cf7..33cc14c 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, HostListener, Inject } from '@angular/core' +import { DOCUMENT } from '@angular/common' @Component({ selector: 'app-header', @@ -7,9 +8,31 @@ import { Component, OnInit } from '@angular/core'; }) export class HeaderComponent implements OnInit { - constructor() { } + public isSticky: boolean = false + public isMenuOpen: boolean = false + + constructor(@Inject(DOCUMENT) private document: Document) { } ngOnInit(): void { } + @HostListener('window:scroll', ['$event']) + onScroll(event) { + const verticalOffset = window.pageYOffset + || document.documentElement.scrollTop + || document.body.scrollTop || 0 + + this.isSticky = this.isMenuOpen || verticalOffset > 10 + } + + toggleMenu(): void { + this.isMenuOpen = !this.isMenuOpen + if(this.isMenuOpen) { + this.isSticky = true + this.document.body.classList.add('no-scroll') + } else { + this.document.body.classList.remove('no-scroll') + } + } + } diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg new file mode 100644 index 0000000..c1073ec --- /dev/null +++ b/src/assets/images/logo.svg @@ -0,0 +1,109 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/scss/fonts.scss b/src/assets/scss/fonts.scss new file mode 100644 index 0000000..aba175e --- /dev/null +++ b/src/assets/scss/fonts.scss @@ -0,0 +1,10 @@ +@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); + +.font-primary { font-family: $font-primary; } +.font-secondary { font-family: $font-secondary; } +.font-bold { font-weight: bold !important; } +.font-light { font-weight: ight !important; } + +@each $size in 8, 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 46, 48, 50, 52, 54, 60, 72 { + .font-#{$size} {font-size: #{$size/16}rem !important;} +} diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index 5b51c54..cf6408b 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -1,6 +1,12 @@ - body { padding: 0; margin: 0; + height: 100%; + font-family: $font-primary; + font-size: $font-20; + + &.no-scroll { + overflow: hidden; + } } diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 369a37a..a43e426 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -1,2 +1,3 @@ @import "./variables"; +@import "./fonts"; @import "./global"; diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 7479928..fa4843e 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -23,23 +23,18 @@ $breadcrumb-height: 60px; // Colors $white: #fff; $black: #000; -$gray: #e8e8e8; -$gray2: #666; +$gray: #666; $light-gray: #f5f5f5; -$light-gray2: #c3c3c3; $dark-gray: #47464e; -$dark-gray2: #2c2c2c; -$gold: #f1c060; -$red: #ea2d31; -$green: #55aa2a; -$blue: #3785ff; + +$yellow: #a2dc02; $white-alpha: rgba(255, 255, 255, 0.9); -$white-alpha-light: rgba(255, 255, 255, 0.2); +$black-alpha: rgba(0, 0, 0, 0.9); // Fonts -$font-primary: 'Akzidenz'; -$font-secondary: 'Akzidenz'; +$font-primary: 'Abel'; +$font-secondary: 'Abel'; $font-icon: 'icomoon'; // Font-size variables