From 2bc117d3b54aed69473922d4d4f745f5240eb53e Mon Sep 17 00:00:00 2001
From: Grayson Riffe <grayson@graysonriffe.com>
Date: Tue, 22 Aug 2023 21:54:12 -0500
Subject: [PATCH] Remove keywords, update year, change animations
---
about/index.html | 6 ++---
index.html | 10 ++++-----
nf/index.html | 6 ++---
style.css | 57 +++++++++++++++---------------------------------
transitions.js | 12 +++++++++-
5 files changed, 39 insertions(+), 52 deletions(-)
diff --git a/about/index.html b/about/index.html
index 0514fa5..83643e4 100644
--- a/about/index.html
+++ b/about/index.html
@@ -17,7 +17,7 @@
<script src="/transitions.js" defer></script>
</head>
-<body style="--headercolor: #ff3535; --maincolor: #c41818aa; --articlecolor: #c0252599;">
+<body style="--headercolor: var(--aboutheadercolor); --maincolor: #c41818aa; --articlecolor: #c0252599;">
<div class="background" style="--background: url(/about/aboutbackground.jpg);"></div>
<header>
@@ -28,7 +28,7 @@
<ul>
<a href="/"><li>Home</li></a>
<a href="/nf"><li>Nothin' Fancy</li></a>
- <a href="#"><li class="selectedpage">About</li></a>
+ <a class="selectedpage" href="#"><li>About</li></a>
</ul>
</nav>
</header>
@@ -59,7 +59,7 @@
</ul>
</article>
<footer>
- Copyright 2022 Grayson Riffe
+ Copyright 2023 Grayson Riffe
</footer>
</main>
</body>
diff --git a/index.html b/index.html
index 9f1601e..a0082fa 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
<script src="transitions.js" defer></script>
</head>
-<body style="--headercolor: #7595ff; --maincolor: #a1cdffaa; --articlecolor: #558bc999;">
+<body style="--headercolor: var(--indexheadercolor); --maincolor: #a1cdffaa; --articlecolor: #558bc999;">
<div class="background" style="--background: url('/background.png');"></div>
<header>
@@ -25,7 +25,7 @@
</div>
<nav>
<ul>
- <a href="#"><li class="selectedpage">Home</li></a>
+ <a class="selectedpage" href="#"><li>Home</li></a>
<a href="nf"><li>Nothin' Fancy</li></a>
<a href="about"><li>About</li></a>
</ul>
@@ -36,16 +36,16 @@
<article>
<h1>Grayson Riffe</h1>
<p>
- Hello! My name is Grayson Riffe, and I am an engineering student at Texas A&M studying <mark class="keyword1">Computer Science</mark>. Ever since I can remember, I've been interested in computers and how to tell them what to do. I started my programming journey in 5th grade with <mark class="keyword2">Java</mark>, writing tiny games such as tic-tac-toe, a number guessing game, and "Button Clicker" (a very bad knockoff of Cookie Clicker with only two buyable things). As I started to get more competent, I then started looking into <mark class="keyword2">C++</mark> on Windows and quickly fell in love with <mark class="keyword3">MSVC</mark> and <mark class="keyword3">Visual Studio</mark>. I'm mainly interested in <mark class="keyword1">compiled application development</mark>.
+ Hello! My name is Grayson Riffe, and I am an engineering student at Texas A&M studying Computer Science. Ever since I can remember, I've been interested in computers and how to tell them what to do. I started my programming journey in 5th grade with Java, writing tiny games such as tic-tac-toe, a number guessing game, and "Button Clicker" (a very bad knockoff of Cookie Clicker with only two buyable things). As I started to get more competent, I then started looking into C++ on Windows and quickly fell in love with MSVC and Visual Studio. I'm mainly interested in compiled application development.
</p>
<div class="space"></div>
<h2>What's on this website?</h2>
<p>
- Mostly words, but it will eventually contain a portfolio which includes an in-development project of mine, a <mark class="keyword1">game engine</mark> I call <mark class="keyword2">Nothin' Fancy</mark>.
+ Mostly words, but it will eventually contain a portfolio which includes an in-development project of mine, a game engine I call Nothin' Fancy.
</p>
</article>
<footer>
- Copyright 2022 Grayson Riffe
+ Copyright 2023 Grayson Riffe
</footer>
</main>
</body>
diff --git a/nf/index.html b/nf/index.html
index 82d2ab8..8d835a8 100644
--- a/nf/index.html
+++ b/nf/index.html
@@ -16,7 +16,7 @@
<script src="/transitions.js" defer></script>
</head>
-<body style="--headercolor: #d0c000; --maincolor: #ebdd4daa; --articlecolor: #c2b52999;">
+<body style="--headercolor: var(--nfheadercolor); --maincolor: #ebdd4daa; --articlecolor: #c2b52999;">
<div class="background" style="--background: url('/nf/nfbackground.png');"></div>
<header>
@@ -26,7 +26,7 @@
<nav>
<ul>
<a href="/"><li>Home</li></a>
- <a href="#"><li class="selectedpage">Nothin' Fancy</li></a>
+ <a class="selectedpage" href="#"><li>Nothin' Fancy</li></a>
<a href="/about"><li>About</li></a>
</ul>
</nav>
@@ -59,7 +59,7 @@
</p>
</article>
<footer>
- Copyright 2022 Grayson Riffe
+ Copyright 2023 Grayson Riffe
</footer>
</main>
</body>
diff --git a/style.css b/style.css
index bb8df86..0c22fe8 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,11 @@
+:root {
+ --indexheadercolor: #7595ff;
+ --nfheadercolor: #d0c000;
+ --aboutheadercolor: #ff3535;
+
+ --targetheadercolor: #ffffff;
+}
+
* {
margin: 0;
padding: 0;
@@ -10,7 +18,7 @@
body {
font-family: "Consolas Custom";
-
+ overflow-y: scroll;
}
.background {
@@ -46,15 +54,10 @@ header {
display: flex;
justify-content: center;
align-items: center;
-
- transform: translateY(-100%);
- animation: nav-animation 500ms cubic-bezier(0.42, 0, 0.13, 1.04);
- animation-fill-mode: forwards;
z-index: 100;
}
header.out {
- transform: translateY(0%);
animation: nav-animation-out 500ms ease-in-out;
animation-fill-mode: forwards;
}
@@ -101,16 +104,16 @@ nav li {
pointer-events: none;
}
-nav li:not(.selectedpage):hover {
- background-color: #FFFFFF44;
- border-radius: 5px;
-}
-
.selectedpage {
background-color: grey;
border-radius: .5em;
}
+nav a:not(.selectedpage):hover {
+ background-color: #FFFFFF44;
+ border-radius: 5px;
+}
+
main {
margin: 0 auto;
margin-top: 7em;
@@ -148,7 +151,7 @@ main.out {
.centeredportrait img {
box-sizing: border-box;
border: 0.5em black solid;
- border-radius: 10% 30%;
+ border-radius: 10%;
}
.centeredportrait {
@@ -172,7 +175,6 @@ article {
h1 {
font-size: 3em;
- margin-bottom: 0.2em;
}
p {
@@ -186,37 +188,12 @@ p {
font-size: 1.2em;
}
-.keyword1 {
- color: orange;
- background: none;
-}
-
-.keyword2 {
- color: rgb(255, 234, 43);
- background: none;
-}
-
-.keyword3 {
- color: rgb(155, 230, 126);
- background: none;
-}
-
footer {
text-align: center;
font-size: 1.2em;
margin: 0.5em;
}
-@keyframes nav-animation {
- 0% {
- transform: translateY(-100%);
- }
-
- 100% {
- transform: translateY(0);
- }
-}
-
@keyframes main-animation {
0% {
opacity: 0;
@@ -229,11 +206,11 @@ footer {
@keyframes nav-animation-out {
0% {
- transform: translateY(0);
+ background-color: var(--headercolor)
}
100% {
- transform: translateY(-100%);
+ background-color: var(--targetheadercolor)
}
}
diff --git a/transitions.js b/transitions.js
index a02512e..99ec32a 100644
--- a/transitions.js
+++ b/transitions.js
@@ -7,7 +7,7 @@ window.onload = () => {
for (let i = 0; i < anchors.length; i++) {
const anchor = anchors[i];
- if(anchor.classList.contains("notransition"))
+ if (anchor.classList.contains("notransition"))
return;
anchor.addEventListener('click', e => {
@@ -16,6 +16,16 @@ window.onload = () => {
if (target[target.length - 1] == '#')
return;
+ let dest = `${target}`
+
+ if (dest.includes('nf')) {
+ document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--nfheadercolor'))
+ } else if (dest.includes('about')) {
+ document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--aboutheadercolor'))
+ } else {
+ document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--indexheadercolor'))
+ }
+
trans1.classList.add('out');
trans2.classList.add('out');
trans3.classList.add('out');