Merge branch 'feature/header' into develop

src/app/about/about.component.html

@@ -0,0 +1 @@
+<p>about works!</p>

src/app/about/about.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/app-layout/app-layout.component.html

@@ -1,2 +1,54 @@
 <app-header></app-header>
-<p>app-layout works!</p>
+<router-outlet></router-outlet>
+<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>

src/app/app-routing.module.ts

@@ -1,13 +1,29 @@
 import { NgModule } from '@angular/core'
 import { Routes, RouterModule } from '@angular/router'
 import { AppLayoutComponent } from './app-layout/app-layout.component'
+import { AboutComponent } from './about/about.component'
+import { PortfolioComponent } from './portfolio/portfolio.component'
+import { ExhibitionsComponent } from './exhibitions/exhibitions.component'
+import { InstallationsComponent } from './installations/installations.component'
+import { EntertainmentComponent } from './entertainment/entertainment.component'
+import { PerformancesComponent } from './performances/performances.component'
+import { WorkshopsComponent } from './workshops/workshops.component'
 
 
 const routes: Routes = [
   {
     path: '',
     component: AppLayoutComponent,
-    children: []
+    children: [
+      { path: '', redirectTo: '/portfolio', pathMatch: 'full' },
+      { path: 'portfolio', component: PortfolioComponent },
+      { path: 'about', component: AboutComponent },
+      { path: 'exhibitions', component: ExhibitionsComponent },
+      { path: 'installations', component: InstallationsComponent },
+      { path: 'entertainment', component: EntertainmentComponent },
+      { path: 'performances', component: PerformancesComponent },
+      { path: 'workshops', component: WorkshopsComponent }
+    ]
   }
 ]
 

src/app/app.module.ts

@@ -5,12 +5,26 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { AppLayoutComponent } from './app-layout/app-layout.component';
+import { AboutComponent } from './about/about.component';
+import { PortfolioComponent } from './portfolio/portfolio.component';
+import { ExhibitionsComponent } from './exhibitions/exhibitions.component';
+import { InstallationsComponent } from './installations/installations.component';
+import { EntertainmentComponent } from './entertainment/entertainment.component';
+import { PerformancesComponent } from './performances/performances.component';
+import { WorkshopsComponent } from './workshops/workshops.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    AppLayoutComponent
+    AppLayoutComponent,
+    AboutComponent,
+    PortfolioComponent,
+    ExhibitionsComponent,
+    InstallationsComponent,
+    EntertainmentComponent,
+    PerformancesComponent,
+    WorkshopsComponent
   ],
   imports: [
     BrowserModule,

src/app/entertainment/entertainment.component.html

@@ -0,0 +1 @@
+<p>entertainment works!</p>

src/app/entertainment/entertainment.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntertainmentComponent } from './entertainment.component';
+
+describe('EntertainmentComponent', () => {
+  let component: EntertainmentComponent;
+  let fixture: ComponentFixture<EntertainmentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EntertainmentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EntertainmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/entertainment/entertainment.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-entertainment',
+  templateUrl: './entertainment.component.html',
+  styleUrls: ['./entertainment.component.scss']
+})
+export class EntertainmentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/exhibitions/exhibitions.component.html

@@ -0,0 +1 @@
+<p>exhibitions works!</p>

src/app/exhibitions/exhibitions.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExhibitionsComponent } from './exhibitions.component';
+
+describe('ExhibitionsComponent', () => {
+  let component: ExhibitionsComponent;
+  let fixture: ComponentFixture<ExhibitionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExhibitionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExhibitionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/exhibitions/exhibitions.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-exhibitions',
+  templateUrl: './exhibitions.component.html',
+  styleUrls: ['./exhibitions.component.scss']
+})
+export class ExhibitionsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/header/header.component.html

@@ -1,3 +1,21 @@
-<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" routerLink="/about" [routerLinkActive]="'active'">About</li>
+        <li class="item" routerLink="/portfolio" [routerLinkActive]="'active'">Portfolio</li>
+        <li class="item" routerLink="/exhibitions" [routerLinkActive]="'active'">Exhibitions</li>
+        <li class="item" routerLink="/installations" [routerLinkActive]="'active'">Installations</li>
+        <li class="item" routerLink="/entertainment" [routerLinkActive]="'active'">Entertainment</li>
+        <li class="item" routerLink="/performances" [routerLinkActive]="'active'">Performances</li>
+        <li class="item" routerLink="/workshops" [routerLinkActive]="'active'">Workshops</li>
+      </ul>
+    </nav>
+  </div>
 
 </header>

src/app/header/header.component.scss

@@ -1,9 +1,155 @@
+@import "../../assets/scss/variables";
 
 .component-header {
   position: fixed;
+  display: flex;
   top: 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%;
-  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: 180px;
+      height: calc(100vh - 180px);
+      overflow: hidden;
+      overflow-y: auto;
+
+      .items {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .item {
+          padding: 0;
+          margin: 10px 0;
+          font-weight: bold;
+          font-size: $font-30;
+          color: $black;
+          cursor: pointer;
+          transition: transform .4s;
+
+          &:hover {
+            transform: scale(1.4);
+          }
+
+          &.active {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    &.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); }
 }

src/app/header/header.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener, Inject } from '@angular/core'
+import { Router, NavigationEnd } from '@angular/router'
+import { DOCUMENT } from '@angular/common'
 
 @Component({
   selector: 'app-header',
@@ -7,9 +9,37 @@ 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, private router: Router) {
+    router.events.subscribe((val) => {
+      this.isMenuOpen = false
+      this.isSticky = true
+      this.document.body.classList.remove('no-scroll')
+    })
+  }
 
   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')
+    }
+  }
+
 }

src/app/installations/installations.component.html

@@ -0,0 +1 @@
+<p>installations works!</p>

src/app/installations/installations.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstallationsComponent } from './installations.component';
+
+describe('InstallationsComponent', () => {
+  let component: InstallationsComponent;
+  let fixture: ComponentFixture<InstallationsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InstallationsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstallationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/installations/installations.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-installations',
+  templateUrl: './installations.component.html',
+  styleUrls: ['./installations.component.scss']
+})
+export class InstallationsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/performances/performances.component.html

@@ -0,0 +1 @@
+<p>performances works!</p>

src/app/performances/performances.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformancesComponent } from './performances.component';
+
+describe('PerformancesComponent', () => {
+  let component: PerformancesComponent;
+  let fixture: ComponentFixture<PerformancesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformancesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformancesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/performances/performances.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-performances',
+  templateUrl: './performances.component.html',
+  styleUrls: ['./performances.component.scss']
+})
+export class PerformancesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/portfolio/portfolio.component.html

@@ -0,0 +1 @@
+<p>portfolio works!</p>

src/app/portfolio/portfolio.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PortfolioComponent } from './portfolio.component';
+
+describe('PortfolioComponent', () => {
+  let component: PortfolioComponent;
+  let fixture: ComponentFixture<PortfolioComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PortfolioComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PortfolioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portfolio/portfolio.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-portfolio',
+  templateUrl: './portfolio.component.html',
+  styleUrls: ['./portfolio.component.scss']
+})
+export class PortfolioComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/workshops/workshops.component.html

@@ -0,0 +1 @@
+<p>workshops works!</p>

src/app/workshops/workshops.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkshopsComponent } from './workshops.component';
+
+describe('WorkshopsComponent', () => {
+  let component: WorkshopsComponent;
+  let fixture: ComponentFixture<WorkshopsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkshopsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkshopsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/workshops/workshops.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-workshops',
+  templateUrl: './workshops.component.html',
+  styleUrls: ['./workshops.component.scss']
+})
+export class WorkshopsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/assets/images/logo.svg

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

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

src/assets/scss/global.scss

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

src/assets/scss/main.scss

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

src/assets/scss/variables.scss

@@ -22,24 +22,19 @@ $breadcrumb-height: 60px;
 
 // Colors
 $white:       #fff;
-$black:       #000;
-$gray:        #e8e8e8;
-$gray2:       #666;
-$light-gray:  #f5f5f5;
-$light-gray2: #c3c3c3;
-$dark-gray:   #47464e;
-$dark-gray2:  #2c2c2c;
-$gold:        #f1c060;
-$red:         #ea2d31;
-$green:       #55aa2a;
-$blue:        #3785ff;
+$black:       #111;
+$gray:        #ccc;
+$light-gray:  #eee;
+$dark-gray:   #666;
+
+$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