finished nav re-theme and fixed scrolling bug

src/app/app.component.html

@@ -1,10 +1,8 @@
-<div class="centre-content">
 <app-nav></app-nav>
-  <div class="page-fixed-width">
+<div class="page-fixed">
+  <div class="no-scroll-bar">
     <app-header></app-header>
-    <div class="content no-scroll-bar">
     <router-outlet></router-outlet>
-    </div>
-  </div>
-</div>
     <app-footer></app-footer>
+  </div>
+</div>

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

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;

src/app/nav/nav.component.ts

@@ -1,4 +1,4 @@
-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';
 
@@ -9,23 +9,61 @@ import { Pages } from '../shared/models/pages.model';
             state(
                 'bump',
                 style({
-                  'margin-left': 0
+                    width: '110px',
+                    height: '110px',
+                    'line-height': '110px',
+                    'border-radius': '55px'
                 })
             ),
             state(
                 'norm',
                 style({
-                  'margin-left': '15px'
+                    width: '100px',
+                    height: '100px',
+                    'line-height': '100px',
+                    'border-radius': '50px'
                 })
             ),
             transition('norm => bump', [
                 animate(
-                  '0.1s'
+                    '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'
+                    '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'
+                        })
+                    ])
                 )
             ])
         ])

src/app/projects/project/project.component.html

@@ -1,2 +1,3 @@
 <a routerLink="..">&lt; back</a>
 <span [innerHTML]="project.content"></span>
+<a routerLink="..">&lt; back</a>