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