+
+
-
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/app.module.ts b/src/app/app.module.ts
index 1464527..bacf059 100644
--- a/src/app/app.module.ts
+++ b/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
],
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index a287f14..0321415 100644
--- a/src/app/home/home.component.scss
+++ b/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;
}
}
}
\ No newline at end of file
diff --git a/src/app/links/links.component.scss b/src/app/links/links.component.scss
index f6564c0..9900556 100644
--- a/src/app/links/links.component.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/app/nav/nav.component.html b/src/app/nav/nav.component.html
index cb8f373..4501355 100644
--- a/src/app/nav/nav.component.html
+++ b/src/app/nav/nav.component.html
@@ -1,6 +1,6 @@
\ No newline at end of file
diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss
index 8a044e1..cea0e4d 100644
--- a/src/app/nav/nav.component.scss
+++ b/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: 100px;
- height: 100px;
+ width: 120px;
+ height: 120px;
}
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 {
- background-color: colors.$inklets-color-highlight-bg;
- color: colors.$inklets-color-white;
-}
+// li a:hover {
+// background-color: colors.$inklets-color-blue-dark;
+// color: colors.$inklets-color-white;
+// }
- li a:hover.activeRoute {
- background-color: colors.$inklets-color-highlight-fg;
- color: colors.$inklets-color-black;
-}
+// li a:hover.activeRoute {
+// background-color: colors.$inklets-color-blue-light;
+// color: colors.$inklets-color-black;
+// }
diff --git a/src/app/nav/nav.component.ts b/src/app/nav/nav.component.ts
index fc97dbd..37ae052 100644
--- a/src/app/nav/nav.component.ts
+++ b/src/app/nav/nav.component.ts
@@ -1,22 +1,84 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
import { Pages } from '../shared/models/pages.model';
-import { NavService } from './nav.service';
@Component({
- selector: 'app-nav',
- 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;
+ Pages = Pages;
+ state: string[] = ['norm', 'norm', 'norm'];
- constructor() { }
+ constructor() { }
- ngOnInit(): void {
- }
+ ngOnInit(): void {
+ }
}
diff --git a/src/app/projects/project-card/project-card.component.scss b/src/app/projects/project-card/project-card.component.scss
index c47453d..7710bae 100644
--- a/src/app/projects/project-card/project-card.component.scss
+++ b/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 {
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
diff --git a/src/app/projects/projects.component.scss b/src/app/projects/projects.component.scss
index 66ca070..3be2d70 100644
--- a/src/app/projects/projects.component.scss
+++ b/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;
}
}
diff --git a/src/app/shared/styles/_variables.color.scss b/src/app/shared/styles/_variables.color.scss
index 5eefc32..a298a6d 100644
--- a/src/app/shared/styles/_variables.color.scss
+++ b/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-highlight-fg:#6a9ccc;
-$inklets-color-bg:#6d1d00;
-$inklets-color-fg:#e6906c;
+$inklets-color-red-dark:#6d1d00;
+$inklets-color-red-light:#e6906c;
+$inklets-color-blue-dark: #181846;
+$inklets-color-blue-light:#6a9ccc;
$inklets-color-text-highlight: #f5d870;
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 74adf1a..bfe7946 100644
--- a/src/styles.scss
+++ b/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 {