-
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index ecd4954..6296e33 100644
--- a/src/app/app.component.scss
+++ b/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;
- border-right: colors.$inklets-color-fg 2px dashed;
+ background-color: colors.$inklets-color-grey;
}
.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;
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index ab83378..0d1d88b 100644
--- a/src/app/header/header.component.scss
+++ b/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;
- margin: 10px 0 10px 0;
+ padding: 0 20px 0 20px;
}
\ No newline at end of file
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 7855317..a287f14 100644
--- a/src/app/home/home.component.scss
+++ b/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 {
diff --git a/src/app/links/links.component.scss b/src/app/links/links.component.scss
index 8615f81..f6564c0 100644
--- a/src/app/links/links.component.scss
+++ b/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;
- background-color: colors.$inklets-color-fg;
+ color: colors.$inklets-color-white;
+ 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;
- color: colors.$inklets-color-black;
+ border: colors.$inklets-color-fg 2px solid;
}
\ No newline at end of file
diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss
index dad05d9..8a044e1 100644
--- a/src/app/nav/nav.component.scss
+++ b/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;
- background-color: colors.$inklets-color-fg;
+ margin: 25px;
+ 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 {
- background-color: colors.$inklets-color-highlight-bg;
+li .activeRoute {
+ 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;
}
diff --git a/src/app/projects/project-card/project-card.component.html b/src/app/projects/project-card/project-card.component.html
index b257702..ff8a733 100644
--- a/src/app/projects/project-card/project-card.component.html
+++ b/src/app/projects/project-card/project-card.component.html
@@ -1,3 +1,4 @@
{{project.title + " - " + project.date}}
+ {{project.category}}
\ No newline at end of file
diff --git a/src/app/projects/project-card/project-card.component.scss b/src/app/projects/project-card/project-card.component.scss
index 11d9562..c47453d 100644
--- a/src/app/projects/project-card/project-card.component.scss
+++ b/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-fg;
+ background-color: colors.$inklets-color-black;
+ 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;
- color: colors.$inklets-color-black;
+ border: 2px solid colors.$inklets-color-fg;
}
+ .right {
+ float: right;
+ }
}
\ No newline at end of file
diff --git a/src/app/projects/project/project.component.html b/src/app/projects/project/project.component.html
index c6545ee..fbeae0b 100644
--- a/src/app/projects/project/project.component.html
+++ b/src/app/projects/project/project.component.html
@@ -1 +1,2 @@
+
< back
diff --git a/src/app/projects/project/project.component.scss b/src/app/projects/project/project.component.scss
index 7bfa459..8fa917e 100644
--- a/src/app/projects/project/project.component.scss
+++ b/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;
- margin: 0 140px 10px 140px;
+ padding: 0 40px 0 40px;
}
\ No newline at end of file
diff --git a/src/app/projects/projects.component.scss b/src/app/projects/projects.component.scss
index 7bfa459..66ca070 100644
--- a/src/app/projects/projects.component.scss
+++ b/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;
- flex-direction: column;
- flex-grow: 1;
- overflow-y: auto;
- padding: 0 20px 0 20px;
- margin: 0 140px 10px 140px;
-}
\ No newline at end of file
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 0 20px 0 20px;
+
+ h2 {
+ border-bottom: colors.$inklets-color-fg 2px dashed;
+ }
+}
diff --git a/src/app/shared/styles/_variables.color.scss b/src/app/shared/styles/_variables.color.scss
index 3e37033..5eefc32 100644
--- a/src/app/shared/styles/_variables.color.scss
+++ b/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-white: #fafafa;
-$inklets-color-bg: #1b262c;
-$inklets-color-fg:#0f4c75;
-$inklets-color-highlight-bg:#3282b8;
-$inklets-color-highlight-fg:#bbe1fa;
-$inklets-color-text-highlight: #009fc1;
\ No newline at end of file
+$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-text-highlight: #f5d870;
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index e5950b8..9058cd3 100644
--- a/src/styles.scss
+++ b/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 {