completed first re-theme, colors are red and brown/grey now also layout is drasitaclly changed

src/app/app.component.html

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

src/app/app.component.scss

@@ -4,18 +4,25 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    align-items: center;
     overflow-y: auto;
+    justify-content: center;
+    align-items: center;
+}
+
+.centre-content {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
 }
 
 .page-fixed-width {
     width: 1000px;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
     overflow-y: auto;
-    border-left: colors.$inklets-color-fg 2px dashed;
+    background-color: colors.$inklets-color-grey;
-    border-right: colors.$inklets-color-fg 2px dashed;
 }
 
 .content {
@@ -23,6 +30,14 @@
     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;

src/app/header/header.component.scss

@@ -1,6 +1,5 @@
 @use 'src/app/shared/styles/_variables.color' as colors;
 
 :host {
-    padding: 0 40px 0 40px;
+    padding: 0 20px 0 20px;
-    margin: 10px 0 10px 0;
 }

src/app/home/home.component.scss

@@ -6,7 +6,6 @@
     flex-grow: 1;
     overflow-y: auto;
     padding: 0 20px 0 20px;
-    margin: 0 140px 10px 140px;
 }
 
 .bio {

src/app/links/links.component.scss

@@ -2,7 +2,6 @@
 
 :host {
     padding: 0 20px 0 20px;
-    margin: 0 140px 10px 140px;
     display: flex;
     align-items: center;
     justify-items: center;
@@ -10,6 +9,7 @@
 
 // padding 20, total width 1000, width 700 so 280/2 = margin left and right of 140
 .card-wrapper {
+    padding-top: 20px;
     display: grid;
     grid-template-columns: auto auto auto auto;
     grid-template-rows: auto auto auto auto;
@@ -20,15 +20,16 @@
 }
 
 a {
-    color: colors.$inklets-color-white;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-items: center;
     margin: 0;
-    border: colors.$inklets-color-highlight-bg 2px dashed;
+    color: colors.$inklets-color-white;
-    background-color: colors.$inklets-color-fg;
+    background-color: colors.$inklets-color-black;
+    border: 2px solid colors.$inklets-color-bg;
+    border-radius: 10px;
 
     > * {
         margin: 10px;
@@ -37,6 +38,5 @@ a {
 }
 
 a:hover {
-    background-color: colors.$inklets-color-highlight-fg;
+    border: colors.$inklets-color-fg 2px solid;
-    color: colors.$inklets-color-black;
   }

src/app/nav/nav.component.scss

@@ -1,10 +1,5 @@
 @use 'src/app/shared/styles/_variables.color'as colors;
 
-:host {
-  padding: 0 90px 0 90px;
-  margin: 10px 0 60px 0;
-}
-
 ul {
   list-style-type: none;
   margin: 0;
@@ -13,23 +8,36 @@ ul {
 }
 
 li {
-  float: left;
+  margin: 25px;
-  background-color: colors.$inklets-color-fg;
+  border-radius: 50px;
+  width: 100px;
+  height: 100px;
 }
 
 li a {
+  border-radius: 50px;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
   color: colors.$inklets-color-white;
+  background-color: colors.$inklets-color-bg;
   display: block;
   text-align: center;
-  padding: 14px 16px;
   text-decoration: none;
 }
 
-.activeRoute {
+li .activeRoute {
-  background-color: colors.$inklets-color-highlight-bg;
+  background-color: colors.$inklets-color-fg;
+  color: colors.$inklets-color-black;
 }
 
 li a:hover {
+  background-color: colors.$inklets-color-highlight-bg;
+  color: colors.$inklets-color-white;
+}
+
+
+ li a:hover.activeRoute {
   background-color: colors.$inklets-color-highlight-fg;
   color: colors.$inklets-color-black;
 }

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

@@ -1,3 +1,4 @@
 <a routerLink="{{project.slug}}">
     {{project.title + " - " + project.date}}
+    <span class="right">{{project.category}}</span>
 </a>

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

@@ -3,20 +3,22 @@
 :host {
     flex-direction: column;
     display: flex;
-    background-color: colors.$inklets-color-bg;
     margin-bottom: 20px;
 
     a {
         color: colors.$inklets-color-white;
-        border: colors.$inklets-color-highlight-bg 2px dashed;
+        background-color: colors.$inklets-color-black;
-        background-color: colors.$inklets-color-fg;
+        border: 2px solid colors.$inklets-color-bg;
         text-decoration: none;
-        padding: 5px 20px 5px 20px;
+        padding: 15px 20px 15px 20px;
+        border-radius: 10px;
     }
 
     a:hover {
-        background-color: colors.$inklets-color-highlight-fg;
+        border: 2px solid colors.$inklets-color-fg;
-        color: colors.$inklets-color-black;
     }
 
+    .right {
+        float: right;
+    }
 }

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

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

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

@@ -5,6 +5,5 @@
     flex-direction: column;
     flex-grow: 1;
     overflow-y: auto;
-    padding: 0 20px 0 20px;
+    padding: 0 40px 0 40px;
-    margin: 0 140px 10px 140px;
 }

src/app/projects/projects.component.scss

@@ -1,10 +1,13 @@
-@use 'src/app/shared/styles/_variables.color' as colors;
+@use 'src/app/shared/styles/_variables.color'as colors;
 
 :host {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    flex-grow: 1;
+  flex-grow: 1;
-    overflow-y: auto;
+  overflow-y: auto;
-    padding: 0 20px 0 20px;
+  padding: 0 20px 0 20px;
-    margin: 0 140px 10px 140px;
+
+  h2 {
+      border-bottom: colors.$inklets-color-fg 2px dashed;
+  }
 }

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

@@ -11,10 +11,11 @@
 * e.g. body { background-color: colors.$inklets-color-black; }
 */
 
-$inklets-color-black: #0f0f0f;
+$inklets-color-black: #0e0906;
-$inklets-color-white: #fafafa;
+$inklets-color-grey: #191511;
-$inklets-color-bg: #1b262c;
+$inklets-color-white: #f4efea;
-$inklets-color-fg:#0f4c75;
+$inklets-color-highlight-bg: #181846;
-$inklets-color-highlight-bg:#3282b8;
+$inklets-color-highlight-fg:#6a9ccc;
-$inklets-color-highlight-fg:#bbe1fa;
+$inklets-color-bg:#6d1d00;
-$inklets-color-text-highlight: #009fc1;
+$inklets-color-fg:#e6906c;
+$inklets-color-text-highlight: #f5d870;

src/styles.scss

@@ -8,7 +8,7 @@ html, body {
 body {
     margin: 0;
     font-family: Roboto, 'Helvetica Neue', sans-serif;
-    background-color: colors.$inklets-color-black;
+    background-color: colors.$inklets-color-grey;
     color: colors.$inklets-color-white;
 }
 
@@ -23,7 +23,7 @@ span.linenos { color: inherit; background-color: transparent; padding-left: 5px;
 td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
 span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
 .codehilite .hll { background-color: #ffffcc }
-.codehilite { background: #000000; padding: 5px; }
+.codehilite { background: colors.$inklets-color-black; padding: 5px; }
 .codehilite .c { color: #408080; font-style: italic } /* Comment */
 .codehilite .err { border: 1px solid #FF0000 } /* Error */
 .codehilite .k { color: #008000; font-weight: bold } /* Keyword */
@@ -95,7 +95,7 @@ span.linenos.special { color: #979797; background-color: #ffffc0; padding-left:
 
 * a {
     text-decoration: none;
-    color: colors.$inklets-color-fg;
+    color: colors.$inklets-color-text-highlight;
 }
 
 * a:hover {