ryan
/
ryanmoon.com
1
0
Fork 0
Code Pull Requests Activity

update styling, links, and contact form

main
Ryan Moon 2024-05-07 18:07:57 -04:00
parent fc430efc81
commit 253127c69f
11 changed files with 60 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/style/_config.scss
View File

@ -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
$f-color: #b9bcc4; // primary 4a5568 #323b4e
$fs-color: #b9bcc4; // secondary 747474
$ft-color: #d8dadf; // trinary
$fd-color: #e9e9e9; // primary

1
assets/style/components/_header.scss
View File

@ -58,6 +58,7 @@ header {
&:hover {
cursor: 'pointer';
color: $fs-color;
background: $btnh-color;
text-decoration: none;
}

30
assets/style/main.scss
View File

@ -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';

2
assets/style/pages/_404.scss
View File

@ -13,7 +13,7 @@
}
a {
color: $link;
color: $s-color;
text-decoration: none;
&:hover {

25
assets/style/pages/_contact.scss
View File

@ -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,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23b9bcc4' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") 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;
}

3
assets/style/pages/_default.scss
View File

@ -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;

6
assets/style/pages/_index.scss
View File

@ -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;

13
assets/style/pages/_projects.scss
View File

@ -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;
}
}
}

3
components/Footer.vue
View File

@ -6,9 +6,8 @@
<footer>
<p v-if="isDesktopOrTablet" >Made with blood, sweat, and media queries.</p>
<div class="links">
<!-- <NuxtLink ><h4>dark</h4></NuxtLink> -->
<NuxtLink to="/" target="_BLANK" ><h4>rss</h4></NuxtLink>
<NuxtLink to="https://git.inspin.co/ryan" target="_BLANK" ><h4>git</h4></NuxtLink>
<NuxtLink to="https://git.inspin.io/ryan" target="_BLANK" ><h4>git</h4></NuxtLink>
<NuxtLink to="mailto:hello@ryanmoon.com"><h4>hello@ryanmoon.com</h4></NuxtLink>
</div>
</footer>

6
content/about.md
View File

@ -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 <a href="https://www.gnu.org/philosophy/free-software-intro.en.html" target="_BLANK">free software movement</a> and the source code for my websites are available on my <a href="https://git.inspin.co/ryan" target="_BLANK">gitea</a> instance, using a GPL Licence.
I believe in the <a href="https://www.gnu.org/philosophy/free-software-intro.en.html" target="_BLANK">free software movement</a> and the source code for my websites is available on this <a href="https://git.inspin.io/ryan" target="_BLANK">git repository</a>, 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 <a href="https://handshake.org" target="_BLANK">Handshake</a> naming system such as <a href="https://ryanmoon/" target="_BLANK">ryanmoon/</a> and <a href="https://dir.ectory" target="_BLANK">dir.ectory/</a>.
My development stack consist of Nuxt.js, Directus.io, PostgreSQL, and many other packages. Some of my websites are also hosted using the <a href="https://handshake.org" target="_BLANK">Handshake</a> naming system, such as <a href="https://ryanmoon/" target="_BLANK">ryanmoon/</a> and <a href="https://dir.ectory" target="_BLANK">dir.ectory/</a>.
<!---
, and <a href="https://p.arked" target="_BLANK">p.arked/</a>.

10
pages/contact.vue
View File

@ -44,12 +44,12 @@ ${ info.message }
<form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
<div class="group">
<label for="name">Name<span aria-hidden="true">*</span></label>
<label for="name">Name</label>
<input v-model="info.name" id="name" type="text" placeholder="Your name" required="true" />
</div>
<div class="group">
<label for="subject">Subject<span aria-hidden="true">*</span></label>
<label for="subject">Subject</label>
<select v-model="info.subject" id="subject" >
<option value="general" >General</option>
<option value="inquiry" >Project Inquiry</option>
@ -59,17 +59,17 @@ ${ info.message }
</div>
<div class="group">
<label for="company">Company</label>
<label for="company">Company <small>(optional)</small></label>
<input v-model="info.company" id="company" type="text" placeholder="Your company" />
</div>
<div class="group">
<label for="email">Email<span aria-hidden="true">*</span></label>
<label for="email">Email</label>
<input v-model="info.email" id="email" type="email" placeholder="Email address" required="true" />
</div>
<div class="group message">
<label for="message">Message<span aria-hidden="true">*</span></label>
<label for="message">Message</label>
<textarea v-model="info.message" id="message" placeholder="Start typing here" required="true" ></textarea>
</div>