dslak
/
dslak_website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add header

hotfix/class_typo
Dslak 5 years ago
parent
4b14df59cd
commit
59fdb51857
9 changed files with 351 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      src/app/app-layout/app-layout.component.html
  2. 17
      src/app/header/header.component.html
  3. 126
      src/app/header/header.component.scss
  4. 27
      src/app/header/header.component.ts
  5. 109
      src/assets/images/logo.svg
  6. 10
      src/assets/scss/fonts.scss
  7. 8
      src/assets/scss/global.scss
  8. 1
      src/assets/scss/main.scss
  9. 17
      src/assets/scss/variables.scss

52
src/app/app-layout/app-layout.component.html
View File

@ -1,2 +1,54 @@
<app-header></app-header> <app-header></app-header>
<p>app-layout works!</p> <p>app-layout works!</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

17
src/app/header/header.component.html
View File

@ -1,3 +1,18 @@
<header class="component-header">
<header class="component-header" [ngClass]="{'sticky': isSticky}">
<div class="logo-container" [ngClass]="{'menu-open': isMenuOpen}">
<span class="circles"></span>
<img class="logo" src="assets/images/logo.svg" (click)="toggleMenu()">
</div>
<div class="menu" [ngClass]="{'open': isMenuOpen}">
<nav class="nav">
<ul class="items">
<li class="item">aaa</li>
<li class="item">bbb</li>
<li class="item">ccc</li>
<li class="item">ddd</li>
</ul>
</nav>
</div>
</header> </header>

126
src/app/header/header.component.scss
View File

@ -1,9 +1,131 @@
@import "../../assets/scss/variables";
.component-header { .component-header {
position: fixed; position: fixed;
display: flex;
top: 0; top: 0;
left: 0; left: 0;
height: 5px;
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%; width: 100%;
background: black;
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); }
} }

27
src/app/header/header.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, HostListener, Inject } from '@angular/core'
import { DOCUMENT } from '@angular/common'
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
@ -7,9 +8,31 @@ import { Component, OnInit } from '@angular/core';
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
constructor() { }
public isSticky: boolean = false
public isMenuOpen: boolean = false
constructor(@Inject(DOCUMENT) private document: Document) { }
ngOnInit(): void { 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')
}
}
} }

109
src/assets/images/logo.svg
View File

@ -0,0 +1,109 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg291"
version="1.1"
viewBox="0 0 134.02536 119.09393"
height="119.09393mm"
width="134.02536mm">
<defs
id="defs285" />
<metadata
id="metadata288">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(26.947181,-31.923306)"
id="layer1">
<g
transform="matrix(0.85764954,0,0,0.85764954,-2439.8694,1481.7208)"
id="g5142"
style="opacity:1;stroke-width:0.3085;stop-opacity:1">
<g
transform="matrix(1.6074173,-0.06506215,0.06506215,1.6074173,2783.9869,396.74804)"
id="g4123"
style="opacity:1;stroke-width:0.191764;stop-opacity:1">
<path
id="rect4119"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.17434;stroke-linecap:round;stop-opacity:1"
d="m 78.642441,-1290.2797 h 77.756669 c 4.67863,0 8.44519,3.7666 8.44519,8.4452 v 63.1761 c 0,4.6786 -3.76656,8.4452 -8.44519,8.4452 H 78.642441 c -4.678636,0 -8.445191,-3.7666 -8.445191,-8.4452 v -63.1761 c 0,-4.6786 3.766555,-8.4452 8.445191,-8.4452 z" />
<path
d="m 101.70376,-1285.4686 52.03314,-6.6491 c 7.49898,-0.9582 14.01226,7.6726 12.14454,14.9982 l -13.74945,53.9284 c -1.86771,7.3256 -7.4443,11.8412 -14.99818,12.1445 l -55.608725,2.2332 c -7.553888,0.3035 -14.641402,-7.8624 -12.144536,-14.9981 l 17.325021,-49.5126 c 2.496887,-7.1358 7.499187,-11.1862 14.99819,-12.1445 z"
style="opacity:1;fill:#282828;fill-opacity:1;stroke-width:2.17434;stroke-linecap:round;stop-opacity:1"
id="path4121" />
</g>
<g
id="g4147-8-9"
style="opacity:1;stroke-width:0.21846;stop-opacity:1"
transform="matrix(1.4786476,0,0,1.3486498,1787.459,186.3728)">
<path
id="rect4125-6-4"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 719.07696,-1327.05 h 9.51459 c 0.66504,0 1.20044,0.5464 1.20044,1.2251 v 9.5083 c 0,0.6787 -0.5354,1.2252 -1.20044,1.2252 h -9.51459 c -0.66504,0 -1.20043,-0.5465 -1.20043,-1.2252 v -9.5083 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
<path
id="rect4127-8-2"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 733.01366,-1333.8127 h 14.62838 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 14.6406 c 0,0.6787 -0.53539,1.2252 -1.20043,1.2252 h -14.62838 c -0.66503,0 -1.20043,-0.5465 -1.20043,-1.2252 v -14.6406 c 0,-0.6787 0.5354,-1.2251 1.20043,-1.2251 z" />
<path
id="rect4129-9-1"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 752.04498,-1334.4426 h 11.89331 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 11.8957 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -11.89331 c -0.66504,0 -1.20044,-0.5464 -1.20044,-1.2251 v -11.8957 c 0,-0.6787 0.5354,-1.2251 1.20044,-1.2251 z" />
<path
id="rect4131-3-7"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 752.86669,-1316.9962 h 5.19802 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 5.1761 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -5.19802 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -5.1761 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
<path
id="rect4133-1-75"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 737.72674,-1314.4257 h 10.71582 c 0.66504,0 1.20043,0.5465 1.20043,1.2252 v 10.7139 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -10.71582 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -10.7139 c 0,-0.6787 0.53539,-1.2252 1.20043,-1.2252 z" />
<path
id="rect4135-2-60"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 728.25585,-1313.5555 h 4.41987 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 4.3951 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -4.41987 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -4.3951 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
<path
id="rect4137-7-9"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 759.00152,-1349.4855 h 10.63346 c 0.66504,0 1.20043,0.5464 1.20043,1.2252 v 10.6312 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -10.63346 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -10.6312 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z" />
<path
id="rect4139-2-1"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 769.62182,-1362.4576 h 7.93585 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 7.9238 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -7.93585 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -7.9238 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
<path
id="rect4141-3-7"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 786.83764,-1379.2218 h 2.58218 c 0.66504,0 1.20043,0.5464 1.20043,1.2252 v 2.5507 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -2.58218 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -2.5507 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z" />
<path
id="rect4143-9-8"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 779.15331,-1372.4268 h 4.94383 c 0.66504,0 1.20043,0.5465 1.20043,1.2252 v 4.921 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -4.94383 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -4.921 c 0,-0.6787 0.53539,-1.2252 1.20043,-1.2252 z" />
<path
id="rect4145-3-8"
style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
transform="matrix(1,0,0.00451391,0.99998981,0,0)"
d="m 793.26153,-1383.2676 h 1.42925 c 0.66504,0 1.20044,0.5464 1.20044,1.2252 v 1.3937 c 0,0.6787 -0.5354,1.2251 -1.20044,1.2251 h -1.42925 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -1.3937 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

10
src/assets/scss/fonts.scss
View File

@ -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;}
}

8
src/assets/scss/global.scss
View File

@ -1,6 +1,12 @@
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%;
font-family: $font-primary;
font-size: $font-20;
&.no-scroll {
overflow: hidden;
}
} }

1
src/assets/scss/main.scss
View File

@ -1,2 +1,3 @@
@import "./variables"; @import "./variables";
@import "./fonts";
@import "./global"; @import "./global";

17
src/assets/scss/variables.scss
View File

@ -23,23 +23,18 @@ $breadcrumb-height: 60px;
// Colors // Colors
$white: #fff; $white: #fff;
$black: #000; $black: #000;
$gray: #e8e8e8;
$gray2: #666;
$gray: #666;
$light-gray: #f5f5f5; $light-gray: #f5f5f5;
$light-gray2: #c3c3c3;
$dark-gray: #47464e; $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: rgba(255, 255, 255, 0.9);
$white-alpha-light: rgba(255, 255, 255, 0.2);
$black-alpha: rgba(0, 0, 0, 0.9);
// Fonts // Fonts
$font-primary: 'Akzidenz';
$font-secondary: 'Akzidenz';
$font-primary: 'Abel';
$font-secondary: 'Abel';
$font-icon: 'icomoon'; $font-icon: 'icomoon';
// Font-size variables // Font-size variables

Write Preview
Loading…
Cancel
Save