39 changed files with 709 additions and 24 deletions
@ -0,0 +1 @@ |
|||
<p>about works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
@ -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> |
|||
|
|||
@ -0,0 +1 @@ |
|||
<p>entertainment works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1 @@ |
|||
<p>exhibitions works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
@ -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> |
|||
|
|||
@ -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); } |
|||
} |
|||
|
|||
@ -0,0 +1 @@ |
|||
<p>installations works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1 @@ |
|||
<p>performances works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1 @@ |
|||
<p>portfolio works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1 @@ |
|||
<p>workshops works!</p> |
|||
@ -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(); |
|||
}); |
|||
}); |
|||
@ -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 { |
|||
} |
|||
|
|||
} |
|||
|
After Width: | Height: | Size: 7.4 KiB |
@ -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;} |
|||
} |
|||
@ -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; |
|||
} |
|||
} |
|||
|
|||
@ -1,2 +1,3 @@ |
|||
@import "./variables"; |
|||
@import "./fonts"; |
|||
@import "./global"; |
|||
|
|||
Loading…
Reference in new issue