From 253127c69f847cfb3a0dc3f2b0c2f546e3738a21 Mon Sep 17 00:00:00 2001 From: ryan Date: Tue, 7 May 2024 18:07:57 -0400 Subject: [PATCH] update styling, links, and contact form --- assets/style/_config.scss | 27 ++++++++----------------- assets/style/components/_header.scss | 1 + assets/style/main.scss | 30 ++++++++++++++-------------- assets/style/pages/_404.scss | 2 +- assets/style/pages/_contact.scss | 25 ++++++++++------------- assets/style/pages/_default.scss | 3 ++- assets/style/pages/_index.scss | 6 +++--- assets/style/pages/_projects.scss | 13 ++++++++++-- components/Footer.vue | 3 +-- content/about.md | 6 +++--- pages/contact.vue | 10 +++++----- 11 files changed, 60 insertions(+), 66 deletions(-) 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/.