Merge branch 'feature/nav-theme' into 'develop'

Feature/nav theme

See merge request inkletblot/inkletblot-com-v2!13

src/app/app.component.html

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

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/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -27,6 +28,7 @@ import { Page404Component } from './page404/page404.component';
   imports: [
     SharedModule,
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule
   ],

src/app/home/home.component.scss

@@ -19,7 +19,7 @@
         .headshot {
             width: 200px;
             height: 200px;
-            border: colors.$inklets-color-fg 5px solid;
+            border: colors.$inklets-color-red-light 5px solid;
             border-radius: 100px;
         }
     
@@ -27,7 +27,7 @@
             margin-left: 30px;
 
             h1 {
-                border-bottom: colors.$inklets-color-fg 2px dashed;
+                border-bottom: colors.$inklets-color-red-light 2px dashed;
 
                 img {
                     width: 30px;
@@ -50,7 +50,7 @@
             color: colors.$inklets-color-white;
         }
         > a:hover {
-            color: colors.$inklets-color-fg;
+            color: colors.$inklets-color-red-light;
         }
     }
 }

src/app/links/links.component.scss

@@ -28,7 +28,7 @@ a {
     margin: 0;
     color: colors.$inklets-color-white;
     background-color: colors.$inklets-color-black;
-    border: 2px solid colors.$inklets-color-bg;
+    border: 2px solid colors.$inklets-color-red-dark;
     border-radius: 10px;
 
     > * {
@@ -38,5 +38,5 @@ a {
 }
 
 a:hover {
-    border: colors.$inklets-color-fg 2px solid;
+    border: colors.$inklets-color-red-light 2px solid;
   }

src/app/nav/nav.component.html

@@ -1,6 +1,6 @@
 <ul>
-    <li><a routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
+    <li (mouseover)="state[0] = 'bump'" (mouseout)="state[0] = 'norm'"><a [@openClose]="state[0]" routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
-    <li><a routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
+    <li (mouseover)="state[1] = 'bump'" (mouseout)="state[1] = 'norm'"><a [@openClose]="state[1]"  routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
     <!-- <li><a routerLink="{{Pages.GALLERY}}" routerLinkActive="activeRoute">{{Pages.GALLERY}}</a></li> -->
-    <li><a routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
+    <li (mouseover)="state[2] = 'bump'" (mouseout)="state[2] = 'norm'"><a [@openClose]="state[2]"  routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
 </ul>

src/app/nav/nav.component.scss

@@ -8,10 +8,12 @@ ul {
 }
 
 li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin: 25px;
-  border-radius: 50px;
+  width: 120px;
-  width: 100px;
+  height: 120px;
-  height: 100px;
 }
 
 li a {
@@ -20,24 +22,24 @@ li a {
   height: 100px;
   line-height: 100px;
   color: colors.$inklets-color-white;
-  background-color: colors.$inklets-color-bg;
+  background-color: colors.$inklets-color-red-dark;
   display: block;
   text-align: center;
   text-decoration: none;
 }
 
 li .activeRoute {
-  background-color: colors.$inklets-color-fg;
+  background-color: colors.$inklets-color-red-light;
   color: colors.$inklets-color-black;
 }
 
-li a:hover {
+// li a:hover {
-  background-color: colors.$inklets-color-highlight-bg;
+//   background-color: colors.$inklets-color-blue-dark;
-  color: colors.$inklets-color-white;
+//   color: colors.$inklets-color-white;
-}
+// }
 
 
- li a:hover.activeRoute {
+//  li a:hover.activeRoute {
-  background-color: colors.$inklets-color-highlight-fg;
+//   background-color: colors.$inklets-color-blue-light;
-  color: colors.$inklets-color-black;
+//   color: colors.$inklets-color-black;
-}
+// }

src/app/nav/nav.component.ts

@@ -1,22 +1,84 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { Pages } from '../shared/models/pages.model';
-import { NavService } from './nav.service';
 
 @Component({
-  selector: 'app-nav',
+    selector: 'app-nav',
-  templateUrl: './nav.component.html',
+    animations: [
-  styleUrls: ['./nav.component.scss']
+        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;
+    Pages = Pages;
+    state: string[] = ['norm', 'norm', 'norm'];
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit(): void {
+    ngOnInit(): void {
-  }
+    }
 
 }

src/app/projects/project-card/project-card.component.scss

@@ -8,14 +8,14 @@
     a {
         color: colors.$inklets-color-white;
         background-color: colors.$inklets-color-black;
-        border: 2px solid colors.$inklets-color-bg;
+        border: 2px solid colors.$inklets-color-red-dark;
         text-decoration: none;
         padding: 15px 20px 15px 20px;
         border-radius: 10px;
     }
 
     a:hover {
-        border: 2px solid colors.$inklets-color-fg;
+        border: 2px solid colors.$inklets-color-red-light;
     }
 
     .right {

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>

src/app/projects/projects.component.scss

@@ -8,6 +8,6 @@
   padding: 0 20px 0 20px;
 
   h2 {
-      border-bottom: colors.$inklets-color-fg 2px dashed;
+      border-bottom: colors.$inklets-color-red-light 2px dashed;
   }
 }

src/app/shared/styles/_variables.color.scss

@@ -14,8 +14,8 @@
 $inklets-color-black: #0e0906;
 $inklets-color-grey: #191511;
 $inklets-color-white: #f4efea;
-$inklets-color-highlight-bg: #181846;
+$inklets-color-red-dark:#6d1d00;
-$inklets-color-highlight-fg:#6a9ccc;
+$inklets-color-red-light:#e6906c;
-$inklets-color-bg:#6d1d00;
+$inklets-color-blue-dark: #181846;
-$inklets-color-fg:#e6906c;
+$inklets-color-blue-light:#6a9ccc;
 $inklets-color-text-highlight: #f5d870;

src/styles.scss

@@ -99,7 +99,7 @@ span.linenos.special { color: #979797; background-color: #ffffc0; padding-left:
 }
 
 * a:hover {
-    color: colors.$inklets-color-highlight-fg;
+    color: colors.$inklets-color-blue-light;
 }
 
 * img {