diff --git a/assets/style/_config.scss b/assets/style/_config.scss
index 9712d5d..4362dd7 100644
--- a/assets/style/_config.scss
+++ b/assets/style/_config.scss
@@ -4,30 +4,19 @@ $p-font: 'Source Sans Pro', sans-serif;
$s-font: 'Source Serif Pro', sans-serif;
// Primary Colors
-$b-color: #fcf7f5; // background
-$s-color: #ff3b2d; // secondary
-$t-color: #5271ff; // trinary
+$b-color: #19212D; // background
+$s-color: #31B553; // secondary
$h-color: #596170; // hover
$w-color: #ffffff; // white
$bl-color: #000000; // black
$error: #d30012; // error
-$hr: #d30012; // hr
-$btn-color: #faf1e5; // button
-$btnh-color: #f5ece0; // button hover
-$btns-color: #3182ce; // button secondary
-$btnsh-color: #2b6cb0; // button secondary hover
-$i-color: #faf3ea; // input
+$btn-color: #303742; // button
+$btnh-color: #2a323d; // button hover
// Font Colors
-$f-color: #323b4e; // primary 4a5568 #323b4e
-$fs-color: #4a5568; // secondary 747474
-$ft-color: #2d3748; // trinary
-$link: #3182ce; // link
-
-// Dark Colors
-$bd-color: #101010; // background
-$fd-color: #e9e9e9; // primary
-$hd-color: #bbbbbb; // hover
-$hrd: #ffffff; // hr dark
\ No newline at end of file
+$f-color: #b9bcc4; // primary 4a5568 #323b4e
+$fs-color: #b9bcc4; // secondary 747474
+$ft-color: #d8dadf; // trinary
+$fd-color: #e9e9e9; // primary
\ No newline at end of file
diff --git a/assets/style/components/_header.scss b/assets/style/components/_header.scss
index 17a50da..8ada5dd 100644
--- a/assets/style/components/_header.scss
+++ b/assets/style/components/_header.scss
@@ -58,6 +58,7 @@ header {
&:hover {
cursor: 'pointer';
+ color: $fs-color;
background: $btnh-color;
text-decoration: none;
}
diff --git a/assets/style/main.scss b/assets/style/main.scss
index 91d2b98..217396e 100644
--- a/assets/style/main.scss
+++ b/assets/style/main.scss
@@ -2,30 +2,30 @@
@import 'config';
body {
- background: $b-color;
- margin: 0;
+ background: $b-color;
+ margin: 0;
}
main {
- max-width: 42rem;
- min-height: calc(100vh - 130px);
- margin: 70px auto 0 auto;
+ max-width: 42rem;
+ min-height: calc(100vh - 130px);
+ margin: 70px auto 0 auto;
}
@media only screen and (max-width: 600px) {
- main { min-height: calc(100vh - 155px) }
+ main { min-height: calc(100vh - 155px) }
}
html {
- scroll-behavior: smooth;
+ scroll-behavior: smooth;
}
*, *:after, *:before {
- box-sizing: border-box;
-
- &:focus {
- outline: none;
- }
+ box-sizing: border-box;
+
+ &:focus {
+ outline: none;
+ }
}
h1,
@@ -38,9 +38,9 @@ p,
a,
b,
label {
- font-family: $p-font;
- margin: 0;
- padding: 0;
+ font-family: $p-font;
+ margin: 0;
+ padding: 0;
}
@import 'components/index';
diff --git a/assets/style/pages/_404.scss b/assets/style/pages/_404.scss
index baa5890..539a922 100644
--- a/assets/style/pages/_404.scss
+++ b/assets/style/pages/_404.scss
@@ -13,7 +13,7 @@
}
a {
- color: $link;
+ color: $s-color;
text-decoration: none;
&:hover {
diff --git a/assets/style/pages/_contact.scss b/assets/style/pages/_contact.scss
index f94c5cd..d41d35c 100644
--- a/assets/style/pages/_contact.scss
+++ b/assets/style/pages/_contact.scss
@@ -19,14 +19,10 @@
label {
display: block;
- text-align: start;
+ color: $f-color;
font-size: .825rem;
- margin-inline-end: 12px;
- margin-bottom: 8px;
font-weight: 600;
- opacity: 1;
- line-height: 1;
- margin-left: 4px;
+ margin: 0 .25rem .5rem .25rem;
text-transform: uppercase;
span {
@@ -42,18 +38,17 @@
width: 100%;
height: 2.5rem;
color: $f-color;
- background: #faf3ea;
+ background: $b-color;
font-family: $p-font;
font-size: .925rem;
font-weight: 400;
padding: 0 1rem;
- border: 1px solid #e6dfd6;
+ border: .1rem solid $btn-color;
border-radius: .375rem;
- outline: .1rem solid transparent;
+ outline: none;
&:focus {
- border-color: $btns-color;
- box-shadow: 0 0 0 .075rem $btns-color;
+ border-color: $s-color;
}
&::placeholder {
@@ -64,9 +59,9 @@
}
select {
- background: url("data:image/svg+xml,") no-repeat;
+ background: url("data:image/svg+xml,") no-repeat;
background-position: calc(100% - 0.75rem) center;
- background-color: #faf3ea;
+ background-color: $b-color;
appearance: none;
padding-right: 2rem;
}
@@ -89,7 +84,7 @@
align-items: center;
vertical-align: middle;
color: $w-color;
- background: $btns-color;
+ background: $btn-color;
font-family: $p-font;
font-size: 0.925rem;
font-weight: 600;
@@ -98,7 +93,7 @@
border-radius: .375rem;
&:hover {
- background: $btnsh-color;
+ background: $btnh-color;
text-decoration: none;
cursor: pointer;
}
diff --git a/assets/style/pages/_default.scss b/assets/style/pages/_default.scss
index b4c7895..a621b46 100644
--- a/assets/style/pages/_default.scss
+++ b/assets/style/pages/_default.scss
@@ -22,7 +22,7 @@
line-height: 1.5;
a {
- color: $link;
+ color: $s-color;
text-decoration: none;
}
}
@@ -76,6 +76,7 @@
.address {
width: 65%;
+ color: $w-color;
font-size: .8rem;
margin: 6px 0 0 0;
overflow-wrap: break-word;
diff --git a/assets/style/pages/_index.scss b/assets/style/pages/_index.scss
index 8978ac4..9c2e36b 100644
--- a/assets/style/pages/_index.scss
+++ b/assets/style/pages/_index.scss
@@ -27,7 +27,7 @@
a {
p {
- color: $link;
+ color: $s-color;
margin-left: .5rem;
}
@@ -42,8 +42,8 @@
padding: 2rem 1rem;
h3 {
- font-size: .875rem;
- font-weight: 500;
+ font-size: 1rem;
+ font-weight: 700;
color: $s-color;
text-transform: uppercase;
letter-spacing: .2rem;
diff --git a/assets/style/pages/_projects.scss b/assets/style/pages/_projects.scss
index 5cf23b2..c4df008 100644
--- a/assets/style/pages/_projects.scss
+++ b/assets/style/pages/_projects.scss
@@ -16,8 +16,12 @@
margin: 0 0 0 -4em;
}
- h1 {
+ h1,
+ h2 {
color: $f-color;
+ }
+
+ h1 {
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 .25rem;
@@ -26,6 +30,7 @@
h2 {
display: block;
+ color: $fd-color;
font-size: 1.75rem;
font-weight: 600;
line-height: 2rem;
@@ -106,7 +111,7 @@
scroll-margin-top: 4.6em;
a {
- color: $f-color;
+ color: $fd-color;
text-decoration: none;
}
}
@@ -116,6 +121,10 @@
font-size: 1.05rem;
line-height: 26px;
margin-top: 16px;
+
+ a {
+ color: $s-color;
+ }
}
}
diff --git a/components/Footer.vue b/components/Footer.vue
index 3ddcb63..ed3d111 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -6,9 +6,8 @@
diff --git a/content/about.md b/content/about.md
index 06980a0..033164e 100644
--- a/content/about.md
+++ b/content/about.md
@@ -7,11 +7,11 @@ slug: donate
Hello, nice to meet you. I'm Ryan and this is my webpage.
-A little bit about myself. I created my first website in 2017 for playing flash games at school. Since then, I've learned how to develop more intricate websites that include authentication and user functionality.
+A little bit about myself. I created my first website in 2017 for playing flash games at school. Since then, I've learned how to develop more intricate websites that include authentication and unique user functionality.
-I believe in the free software movement and the source code for my websites are available on my gitea instance, using a GPL Licence.
+I believe in the free software movement and the source code for my websites is available on this git repository, using a GPL Licence.
-My development stack consist of Nuxt.js, Directus.io, PostgreSQL, and a few more tools. Some of my websites are also hosted using the Handshake naming system such as ryanmoon/ and dir.ectory/.
+My development stack consist of Nuxt.js, Directus.io, PostgreSQL, and many other packages. Some of my websites are also hosted using the Handshake naming system, such as ryanmoon/ and dir.ectory/.