+
+
-
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 6296e33..ce38d44 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,50 +1,33 @@
@use 'src/app/shared/styles/_variables.color' as colors;
:host {
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow-y: auto;
- justify-content: center;
- align-items: center;
-}
-
-.centre-content {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
+ overflow: hidden;
}
-.page-fixed-width {
+.page-fixed {
width: 1000px;
+ height: 100%;
display: flex;
+ align-items: center;
+ justify-content: center;
flex-direction: column;
- overflow-y: auto;
background-color: colors.$inklets-color-grey;
}
-.content {
- flex-grow: 1;
- overflow-y: auto;
-}
-
-app-nav {
- margin-left: -125px;
-}
-
-app-footer {
- bottom: 20px;
-}
-
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scroll-bar::-webkit-scrollbar {
display: none;
+ overflow: auto;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scroll-bar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
+ overflow: auto;
}
diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss
index 696b855..cea0e4d 100644
--- a/src/app/nav/nav.component.scss
+++ b/src/app/nav/nav.component.scss
@@ -8,16 +8,15 @@ ul {
}
li {
+ display: flex;
+ align-items: center;
+ justify-content: center;
margin: 25px;
- border-radius: 50px;
- width: 100px;
- height: 100px;
- padding-right: 50px;
- margin-right: -15px;
+ width: 120px;
+ height: 120px;
}
li a {
- right: 0;
border-radius: 50px;
width: 100px;
height: 100px;
diff --git a/src/app/nav/nav.component.ts b/src/app/nav/nav.component.ts
index ffc59fd..37ae052 100644
--- a/src/app/nav/nav.component.ts
+++ b/src/app/nav/nav.component.ts
@@ -1,46 +1,84 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { Pages } from '../shared/models/pages.model';
@Component({
- selector: 'app-nav',
- animations: [
- trigger('openClose', [
- state(
- 'bump',
- style({
- 'margin-left': 0
- })
- ),
- state(
- 'norm',
- style({
- 'margin-left': '15px'
- })
- ),
- transition('norm => bump', [
- animate(
- '0.1s'
- )
- ]),
- transition('bump => norm', [
- animate(
- '0.1s'
- )
- ])
- ])
- ],
- templateUrl: './nav.component.html',
- styleUrls: ['./nav.component.scss']
+ selector: 'app-nav',
+ animations: [
+ trigger('openClose', [
+ state(
+ 'bump',
+ style({
+ width: '110px',
+ height: '110px',
+ 'line-height': '110px',
+ 'border-radius': '55px'
+ })
+ ),
+ state(
+ 'norm',
+ style({
+ width: '100px',
+ height: '100px',
+ 'line-height': '100px',
+ 'border-radius': '50px'
+ })
+ ),
+ transition('norm => bump', [
+ animate(
+ '0.2s', keyframes([
+ style({
+ width: '100px',
+ height: '100px',
+ 'line-height': '100px',
+ 'border-radius': '50px'
+ }),
+ style({
+ width: '120px',
+ height: '120px',
+ 'line-height': '120px',
+ 'border-radius': '60px'
+ }),
+ style({
+ width: '110px',
+ height: '110px',
+ 'line-height': '110px',
+ 'border-radius': '55px'
+ })
+ ])
+ )
+ ]),
+ transition('bump => norm', [
+ animate(
+ '0.1s', keyframes([
+ style({
+ width: '110px',
+ height: '110px',
+ 'line-height': '110px',
+ 'border-radius': '55px'
+ }),
+ style({
+ width: '100px',
+ height: '100px',
+ 'line-height': '100px',
+ 'border-radius': '50px'
+ })
+ ])
+ )
+ ])
+ ])
+ ],
+ templateUrl: './nav.component.html',
+ styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
- Pages = Pages;
- state: string[] = ['norm', 'norm', 'norm'];
+ Pages = Pages;
+ state: string[] = ['norm', 'norm', 'norm'];
- constructor() { }
+ constructor() { }
- ngOnInit(): void {
- }
+ ngOnInit(): void {
+ }
}
diff --git a/src/app/projects/project/project.component.html b/src/app/projects/project/project.component.html
index fbeae0b..5760fed 100644
--- a/src/app/projects/project/project.component.html
+++ b/src/app/projects/project/project.component.html
@@ -1,2 +1,3 @@
< back
+
< back
\ No newline at end of file