Latest updates from the last while

assets/errors/404.html

@@ -4,66 +4,55 @@
     <title>G2's Website | 404 - Not Found</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="/assets/main-style.css">
+    <link rel="preload" as="image" href="/assets/images/cat_light.png">
+    <link rel="preload" as="image" href="/assets/images/cat_dark.png">
     <style>
         @import url('/assets/fonts/fonts.css');
         * {
             margin: 0;
             box-sizing: border-box;
         }
-        ::selection {
-            color: #1e1e2e;
-            background-color: #a6e3a1;
-        }
         body {
             height: 100vh;
             width: 100vw;
 
             display: flex;
-            background-color: #111114;
-            color: white;
-            font-family: 'Roboto', 'Noto Sans', sans-serif;
             font-size: 16pt;
-            overflow: hidden;
         }
         main {
             max-width: 100vw;
-            max-height: 100vh;
             margin: auto;
+            padding-bottom: 20px;
         }
         h1 {
             font-size: 10em;
             text-align: center;
         }
-        h3 {
+        main h3 {
             font-weight: 500;
             margin: 0 10px;
             text-align: center;
+            font-family: "Roboto";
         }
-        p {
+        main p {
+            font-size: 15pt;
             margin: auto;
             padding: 0 5px;
             text-align: center;
             max-width: 540px;
             opacity: 0;
-            overflow: hidden;
             text-overflow: ellipsis;
+            line-height: 1;
         }
         a {
             text-decoration: none;
         }
-        a:link {
-            color: DeepSkyBlue;
-        }
-        a:visited {
-            color: #7289DA;
-        }
-        a:hover {
-            color: DarkTurquoise;
-        }
         hr {
             margin: 20px 10px;
             color: #f9e2af;
         }
+
         button {
             width: 75%;
             margin: 20px auto;
@@ -84,26 +73,16 @@
             background-color: transparent;
             color: #74c7ec;
         }
-        button:hover::before, button:hover::after {
-            content: '↜';
-            position: absolute;
-            left: 25%;
-            animation-duration: 1s;
-            animation-name: slideright;
-            animation-fill-mode: forwards;
-        }
-        button:hover::after {
-            left: unset;
-            right: 25%;
-        }
         button:active {
             background-color: #74c7ec55;
             color: #7dd8ff;
         }
+
         .text-box {
             display: flex;
             flex-direction: column;
             height: 4em;
+            overflow: hidden;
         }
 
         .slide-up {
@@ -124,9 +103,28 @@
 
         .cat {
             position: absolute;
-            top: 31px;
+            top: 29px;
-            left: calc(50% - 1px);
+            left: calc(50%);
             transform: translatex(-50%);
+            background-image: url("/assets/images/cat_light.png");
+            image-rendering: pixelated;
+            width: 137px;
+            height: 178px;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .cat {
+                background-image: url("/assets/images/cat_dark.png");
+            }
+        }
+
+        @media(max-width: 700px) {
+            h1 {
+                font-size: 8em;
+            }
+            main h3 {
+                font-size: 1.2em;
+            }
         }
 
         #cookies {
@@ -170,7 +168,7 @@
     <main class="fade-in">
         <div style="position:relative;display: flex;justify-content: center;">
             <h1>404</h1>
-            <img class="cat" style="display:none;" id="cat" src="/assets/images/cat.png">
+            <div class="cat" style="display:none;" id="cat"></div>
         </div>
         <h3 id="notFound">The page you requested could not be found.</h3>
         <hr>
@@ -185,7 +183,7 @@
     function eatCookie() {
         let numCookies = localStorage.getItem('cookies') || 0;
         if (numCookies >= 1) numCookies--;
-        document.getElementById("cookies").innerHTML = numCookies;
+        document.getElementById('cookies').innerHTML = numCookies;
         localStorage.setItem('cookies', numCookies);
         console.log(numCookies);
     }
@@ -209,7 +207,7 @@
     const strings = [
         "Don't feel bad, have a cookie:</i> 🍪<i><br><sub>You have <span id='cookies'>" + cookiesRecieved + "</span> cookie" + s + "!</sub><br><sup><a style='cursor:pointer;color:teal;' onclick='eatCookie()'>Eat Cookie</a></sup>",
         "Just think, it could be worse",
-        "Instead of staring at this page, you could go outside!",
+        "Instead of staring at this page, <abbr title='If you are already outside, sorry'>you could go outside!</abbr>",
         "Where did it go?",
         "Error reduces<br>Your expensive computer<br>To a simple stone.",
         "Sit back, relax, have some tea...</i> 🍵<i>",
@@ -217,17 +215,21 @@
         "Where has the time gone, it's </i>&lt;currentTime&gt;<i> already!",
         "This message brought to you by JavaScript!",
         "This is not the page you are looking for.",
-        "Go check out <a href='https://xkcd.com/'>xkcd</a> instead!",
+        "Go check out <a href='https://xkcd.com/' target='_blank'>xkcd</a> instead!",
         "Won't you please observe<br>A brief moment of silence<br>For the dead server?",
         "Let's get you home, son",
-        "Nya~~!"
+        "Nya~~!",
+        "Messages made possible by <a href='https://8325.org/haiku/' target='_blank'>NetPositive</a>"
     ];
     let messageIndex = Math.floor(Math.random() * strings.length);
     const message = strings[messageIndex];
     const messageTarget = document.getElementById("message");
     messageTarget.innerHTML = "<i>" + message + "</i>";
 
-    console.log(messageIndex);
+    console.log(message);
+    console.log("Why are you looking at the console on a 404 page...?");
+    // For that matter, why are you looking at the source on a 404 page!
+    // You're probably cool is why.
 
     if (messageIndex == 0) {
         localStorage.setItem('cookies', cookiesRecieved);

assets/images/css3_logo.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+	<path fill="#264de4" d="M71.357 460.819L30.272 0h451.456l-41.129 460.746L255.724 512z"/>
+	<path fill="#2965f1" d="M405.388 431.408l35.148-393.73H256v435.146z"/>
+	<path fill="#ebebeb" d="M124.46 208.59l5.065 56.517H256V208.59zM119.419 150.715H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/>
+	<path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/>
+</svg>

assets/images/html5_logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <title>HTML5 Logo Badge</title>
+  <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
+  <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
+  <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
+  <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
+</svg>

assets/images/js_logo.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 630 630">
+<!--
+The MIT License (MIT)
+
+Copyright (c) 2011 Christopher Williams <chris@iterativedesigns.com>,
+                     Manuel Strehl <boldewyn@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+<g id="logo">
+  <rect id="background" x="0" y="0" width="630" height="630" fill="#f7df1e" />
+  <path id="j" d="m 165.65,526.47375 48.2125,-29.1775 C 223.16375,513.7875 231.625,527.74 251.92,527.74 c 19.45375,0 31.71875,-7.60975 31.71875,-37.21 l 0,-201.3 59.20375,0 0,202.1375 c 0,61.32 -35.94375,89.23125 -88.385,89.23125 -47.36125,0 -74.8525,-24.52875 -88.8075,-54.13" />
+  <path id="s" d="m 375,520.13 48.20625,-27.91125 c 12.69,20.72375 29.1825,35.9475 58.36125,35.9475 24.53125,0 40.17375,-12.26475 40.17375,-29.18125 0,-20.29875 -16.06875,-27.48875 -43.135,-39.32625 l -14.7975,-6.3475 c -42.715,-18.18125 -71.05,-41.0175 -71.05,-89.2275 0,-44.40375 33.83125,-78.2375 86.695,-78.2375 37.6375,0 64.7025,13.11125 84.15375,47.36625 l -46.09625,29.60125 c -10.15,-18.1825 -21.1425,-25.37125 -38.0575,-25.37125 -17.33875,0 -28.335,10.995 -28.335,25.37125 0,17.7625 10.99625,24.9525 36.3675,35.94875 l 14.8,6.3425 c 50.325,21.56875 78.66,43.5575 78.66,93.03375 0,53.2875 -41.86625,82.465 -98.11,82.465 -54.97625,0 -90.5,-26.2175 -107.83625,-60.47375" />
+</g>
+</svg>

assets/img-style.css

@@ -56,6 +56,24 @@ figcaption {
     display: block;
 }
 
+.button-showcase {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    image-rendering: pixelated;
+    justify-content: center;
+    align-items: center;
+}
+
+.button-showcase a {
+    padding: 0;
+    margin: 0;
+}
+
+.button-showcase img {
+    margin: 0 0;
+}
+
 @media(max-width: 700px) {
     section.img_grid {
         flex-direction: column;

assets/lib/scripts/music_status.js

@@ -94,11 +94,13 @@ async function startMusicTile() {
     }
 
     albumArtist.textContent = artistName;
+    albumArtist.title = artistName;
 
     track.textContent = trackName;
     track.title = trackName;
 
     albumTitle.textContent = albumName;
+    albumTitle.title = albumName;
 
     artworkTile.src = artworkSrc;
     if (artworkSrc == "") {
@@ -107,6 +109,10 @@ async function startMusicTile() {
     } else {
         artworkPlaceholder.style.display = "none";
         artworkTile.style.display = "block";
+        artworkTile.alt = "Album artwork for " + track.title;
+        artworkTile.addEventListener("click", (event) => {
+            console.log("test");
+        });
 
         if (playing == true && artworkSrc != "") {
             artworkTile.className = "floaty";

assets/main-style.css

@@ -2,7 +2,7 @@
 @import url('fonts/fonts.css');
 
 /* Auxillary Styles */
-@import url('img-style.css');
+@import url('img-style.css?1.1');
 @import url('code-style.css');
 
 * {
@@ -124,8 +124,8 @@ abbr {
 main {
     display: grid;
     grid-template-columns: 50% 50%;
-    column-gap: 10px;
+    /*column-gap: 10px;*/
-    row-gap: 35px;
+    row-gap: 30px;
 }
 
 h2.sep, main section.centered h2 {
@@ -170,11 +170,6 @@ figure.showcase img {
     border-radius: 13px;
 }
 
-figure.showcase img:hover {
-    transform: scale(1.05) rotate3d(1, 0, 0, 15deg);
-    filter: drop-shadow(0 10px 8px grey);
-}
-
 main section {
     width: 95%;
     margin: 0 auto;
@@ -199,13 +194,12 @@ main section {
 
 main section img {
     max-width: 95%;
-    margin: 20px auto;
+    margin: auto;
+    padding: 5px;
     display: block;
-    border-radius: 13px;
 }
 
-main > a:link, main > a:visited, main > a:hover,
+main > a:link, main > a:visited, main > a:hover {
-.holder > a:link, .holder > a:visited, .holder > a:hover {
     text-decoration: none;
     margin: 0 auto;
     width: 100%;
@@ -388,11 +382,24 @@ nav.paginator {
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
-    font-size: 1.8em;
     position: relative;
+    width: 100%;
 
+    font-size: 1.8em;
+    line-height: 1;
     font-style: normal;
     font-weight: bold;
+    font-family: "Roboto Slab", sans-serif;
+}
+
+nav.paginator a {
+    margin-right: 0;
+}
+
+nav.paginator .current {
+    border-bottom: 2px solid slategray;
+    box-sizing: border-box;
+    font-size: 0.99em;
 }
 
 nav.paginator::hover {

index.html

@@ -21,7 +21,7 @@ A place for personal projects and things. Enjoy!">
         async src="//resize.g2games.dev/count.js"></script>
 
     <!-- The Stylesheets -->
-    <link rel="stylesheet" href="/assets/main-style.css">
+    <link rel="stylesheet" href="/assets/main-style.css?2">
 
     <!-- Music Tile -->
     <link rel="stylesheet" href="/assets/lib/scripts/music_status.css">
@@ -40,17 +40,16 @@ A place for personal projects and things. Enjoy!">
 
     <main>
         <figure class="showcase">
-            <img src="/assets/images/showcase.webp" alt="A picture of the moon through a telescope">
+            <img src="/assets/images/showcase.webp" alt="A picture of the partially eclipsed moon">
         </figure>
 
         <section>
             <h2 class="sep">About Me</h2>
             <p>Hey, I'm G2.</p>
             <p>
-                I spend most of my time avoiding all social media, improving my website, writing code in Rust, bicycling, and thinking about cool tech.
+                I spend most of my time avoiding all social media, improving this website, writing code in Rust, bicycling, and thinking about cool tech.
-                This website is self-hosted on a <a href="https://en.wikipedia.org/wiki/Raspberry_Pi#Series_and_generations">Raspberry Pi 5</a> 8GB running
+                This website is written from scratch by me, and self-hosted on a <a href="https://en.wikipedia.org/wiki/Raspberry_Pi#Series_and_generations">Raspberry Pi 5</a> 8GB running
                 <a href="https://ubuntu.com/server">Ubuntu Server</a>.
-                The CSS can be found <a href="https://g2games.dev/assets/main-style.css">here</a>.
             </p>
 
             <p style="margin-bottom:2px;">If you would like to get in touch with me, I actively check:</p>
@@ -62,7 +61,6 @@ A place for personal projects and things. Enjoy!">
                 <a href="https://github.com/G2-Games">GitHub</a> &blacklozenge;
                 <a href="/git">Forgejo</a> &blacklozenge;
                 <a href="https://ko-fi.com/g2_games">Ko-fi</a> &blacklozenge;
-                <a href="/search">Search</a> &blacklozenge;
                 <a href="/portfolio">Portfolio</a>
             </p>
         </section>
@@ -78,9 +76,9 @@ A place for personal projects and things. Enjoy!">
 
         <a href="/random"><section class="clickable">
             <h3>Random Stuff</h3>
-            <p>I tend to make a lot of random things on the internet. You can
+            <p>I have made a lot of random things on the internet. You can
-            check out many of those things on this page. Most aren't very
+            check out many of those things on this page. Most of them aren't
-            interesting, but they might entertain you for a while at least!</p>
+            very interesting, but they might entertain you for a while at least!</p>
         </section></a>
 
         <!-- More about me -->
@@ -94,17 +92,19 @@ A place for personal projects and things. Enjoy!">
             </p>
             <p>
                 I also like the Sony PSP and PSVita consoles, I hope to do some homebrew for
-                the PSP in the future (check out <a href="https://github.com/overdrivenpotato/rust-psp">
+                the PSP in the future (check out the open-source
-                the Rust SDK</a> for it!).
+                <a href="https://github.com/overdrivenpotato/rust-psp">Rust</a> and
+                <a href="https://github.com/pspdev/pspsdk">C</a> SDKs for it!).
             </p>
             <p>
-                I appreciate physical media of all kinds, such as CDs, DVD/Blu-Rays, MiniDiscs, and
+                I appreciate physical media of all kinds, such as Floppies, CDs, DVD/Blu-Rays, MiniDiscs,
-                anything else physical. It's just nice to have a real high quality copy of the media,
+                and anything else physical. It's just nice to have a real high quality copy of the media,
                 that is yours <i>forever</i>!
             </p>
             <p>
                 I'm interested in aerospace, including rockets, aircraft, and similar things. I've made
-                a few projects related to it as well as part of clubs.
+                a few projects related to it as well as part of my
+                <a href="https://unlaero.space">university's club</a>.
             </p>
         </section>
 
@@ -174,14 +174,31 @@ A place for personal projects and things. Enjoy!">
                 </div>
             </section>
         </div>
+
+        <h2 class="sep center">Buttons</h2>
+        <section class="centered button-showcase">
+            <img src="https://88x31.kate.pet/sun.gif" height="31" />
+            <img src="https://88x31.kate.pet/agplv3-88x31.png" height="31" />
+            <img src="https://nucleartech.wiki/antinft.gif" height="31" />
+            <a href="https://ublockorigin.com/"><img src="https://nucleartech.wiki/ublock-now.png" height="31" /></a>
+            <a href="https://gensokyoradio.net/"><img src="/assets/images/buttons/GensokyoRadio-Button.png" height="31" /></a>
+            <img src="https://nucleartech.wiki/NoAi_04.png" height="31" />
+            <img src="https://88x31.kate.pet/hate_squarespace.jpg" height="31" />
+            <img src="https://88x31.kate.pet/poweredbyfedora.gif" height="31" />
+            <img src="https://u-group13.org/images/buttons/miku.gif" height="31" />
+            <img src="https://nucleartech.wiki/contains-java.png" height="31" />
+            <img src="https://hellnet.work/8831/img/buttons/himiko_shizura_loveyaoi2.gif" />
+            <a href="https://eightyeightthirty.one/"><img src="https://eightyeightthirty.one/88x31.png" height="31" /></a>
+        </section>
     </main>
 
     <footer>
-        <p>&copy;2024 G2</p>
+        <p>&copy;2025 G2</p>
         <p>Powered by
-            <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" alt="HTML logo icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg"></a>
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" alt="HTML logo icon" src="/assets/images/html5_logo.svg"></a>,
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" alt="CSS logo icon" src="/assets/images/css3_logo.svg"></a>
             and
-            <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" alt="CSS logo icon" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"></a>
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/JavaScript"><img class="icon" alt="CSS logo icon" src="/assets/images/js_logo.svg"></a>
         </p>
     </footer>
 </body>

random/index.html

@@ -14,7 +14,7 @@
 A place for personal projects and things. Enjoy!">
     <meta property="og:image" content="/assets/shell3.png">
     <meta name="twitter:title" content="G2's Website">
-    <link rel="icon" href="/icon.webp">
+    <link rel="icon" href="https://g2games.dev/icon.webp">
 
     <!-- Selfhosted Analytics -->
     <script data-goatcounter="https://resize.g2games.dev/count"
@@ -34,7 +34,7 @@ A place for personal projects and things. Enjoy!">
         </nav>
     </header>
 
-    <main class="holder">
+    <main>
         <h2 class="sep center">What's this?</h2>
         <section class="centered">
             <p>This page contains random things I have made. Most of them have very little use, but some are kind of interesting! I'll keep it updated as I add more things. Please enjoy!</p>
@@ -86,8 +86,12 @@ A place for personal projects and things. Enjoy!">
     </main>
 
     <footer>
-        <p>&copy;2024 G2</p>
+        <p>&copy;2025 G2</p>
-        <p>Powered by <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg"></a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"></a></p>
+        <p>Powered by
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" alt="HTML logo icon" src="/assets/images/html5_logo.svg"></a>
+            and
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" alt="CSS logo icon" src="/assets/images/css3_logo.svg"></a>
+        </p>
     </footer>
 </body>
 </html>