From 9cc5831f3a885ab42c8ae99370389e24a1db80ed Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Sun, 11 Aug 2024 13:44:26 -0500
Subject: [PATCH] add navbar, less edgy aboutme edit

---
 index.html |  17 +++++-
 style.css  | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 163 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index d6788d9..2c8481c 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,21 @@
 
 <body>
 
+<!-- top navbar -->
+<div class="navbar">
+    <a class="nav-base nav-baselink" href="https://sneexy.pages.gay"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
+    <a class="nav-base nav-baselink-mobile" href="https://sneexy.pages.gay"><i class="ph-bold ph-squares-four"></i> s <i class="ph-bold ph-dot"></i> p <i class="ph-bold ph-dot"></i> g</a>
+    <div class="nav-base hover-tip"><i class="ph-bold ph-hand-pointing" alt="hover or tap"></i> here</div>
+    <nav class="nav-base nav-links">
+        <a href="https://sneexy.pages.gay"><i class="ph-bold ph-house"></i> home</a>
+        <i class="ph-bold ph-dot"></i>
+        <a href="https://sneexy.pages.gay/blog"><i class="ph-bold ph-article"></i> blog</a>
+        <i class="ph-bold ph-dot"></i>
+        <a href="https://sneexy.pages.gay/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
+    </nav>
+    <p class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
+</div>
+
 <!-- simple introduction -->
 <div id="sneexy" class="terminal">
     <!-- theres probably a much better way to do this instead of manually
@@ -54,7 +69,7 @@
     </div>
     <section>
         <h2><a href="#about-me">about me</a></h2>
-        <p>i'm just some 18 year old <span class="rainbow">gay</span> foss enjoyer with adhd, going around the internet and slowly realizing how fucked the world is. or something like that.</p>
+        <p>i'm just some 18 year old <span class="rainbow">gay</span> foss enjoyer with adhd (and probably autistic), with access to the internet and nothing to do.</p>
         <p>i consider myself to be a Professional Computer Toucher™. in both soulless boxes running either corporate or free software and robot-aligned beings <small>(you know, synths or protogens. love em!)</small>.</p>
         <p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">free and open source</a> software <small>(as noted above)</small> and privacy stuff, along with other libre things. i'm not a programmer or anything, though. i've tried, didn't work out.</p>
         <p>also a nerd into <a href="https://www.redhat.com/en/topics/linux/what-is-linux" target="_blank">Linux</a> stuff, mostly touched <a href="https://archlinux.org" target="_blank">Arch</a> and a little bit of <a href="https://nixos.org" target="_blank">NixOS</a> but have found to stuck with <a href="https://fedoraproject.org" target="_blank">Fedora</a>.</p>
diff --git a/style.css b/style.css
index ad60245..e882c46 100644
--- a/style.css
+++ b/style.css
@@ -151,6 +151,7 @@ body {
     -webkit-animation: bg-gradient 10s ease infinite;
     font-family: "JetBrains Mono";
     font-size: 18px;
+    margin: unset !important; /* idk why it does that */
 }
 
 /*
@@ -160,7 +161,7 @@ styling of the terminal windows
     /* the titlebar of the terminals */
     .term-titlebar {
         display: grid;
-        grid-template-columns: 2fr auto 2fr;;
+        grid-template-columns: 2fr auto 2fr;
         grid-template-areas:
             "term-icon term-title term-buttons";
 
@@ -300,6 +301,75 @@ styling of the terminal windows
     text-decoration: underline;
 }
 
+/*
+top navbar styling. attempts to look like a desktop panel/window manager bar
+*/
+.navbar {
+    position: fixed;
+    top: 0 !important;
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 2.3em;
+    max-height: 2.3em;
+
+    display: grid;
+    grid-gap: 1em;
+    grid-template-columns: max-content auto max-content;
+
+    font-family: "Lexend";
+    align-content: center;
+    vertical-align: middle;
+    color: var(--text);
+
+    .nav-base {
+        padding: .2em;
+        border-radius: 8px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
+        max-width: fit-content;
+        align-content: center;
+    }
+    .nav-baselink {
+        background-color: var(--green);
+        text-decoration: unset !important;
+        color: var(--crust);
+        margin-left: .4em !important;
+    }
+    .nav-baselink-mobile {
+        display: none;
+    }
+    .hover-tip {
+        display: none;
+    }
+    .nav-links {
+        background-color: var(--base);
+        color: var(--text);
+        padding: 0px 5px 0px;
+    }
+    .nav-links a {
+        color: var(--text);
+        text-decoration: unset !important;
+    }
+    .nav-links a:hover {
+        color: var(--green);
+        text-decoration: underline !important;
+    }
+    .nav-systray {
+        background-color: var(--crust);
+        color: var(--text);
+        margin-right: .4em !important;
+        i {
+            padding: 0px 2px 0px 2px;
+        }
+    }
+
+    a, p {
+        margin: unset !important;
+    }
+    small {
+        opacity: .7;
+    }
+}
+
 /*
 text formatting and config stuff
 font-family and <p> is set under .terminal
@@ -353,7 +423,7 @@ h1 a:hover {
 /*
 about me section/terminal
 */
-.terminal:first-child {
+.terminal:nth-child(2) {
     margin-top: 3.8em;
 }
 
@@ -783,6 +853,11 @@ animations
     50% { opacity: 1.0; }
     100% { opacity: 0; }
 }
+@keyframes blink-navbar-text {
+    0% { opacity: 0; }
+    50% { opacity: .8; }
+    100% { opacity: 0; }
+}
 @keyframes spin-y {
     /* values: 128px, 256px, 348px, 396px*/
     0% { transform: perspective(396px) rotateY(0); }
@@ -802,6 +877,11 @@ animations
     50% { opacity: 1.0; }
     100% { opacity: 0; }
 }
+@-moz-keyframes blink-navbar-text {
+    0% { opacity: 0; }
+    50% { opacity: .8; }
+    100% { opacity: 0; }
+}
 @-moz-keyframes spin-y {
     /* values: 128px, 256px, 348px, 396px*/
     0% { transform: perspective(396px) rotateY(0); }
@@ -821,6 +901,11 @@ animations
     50% { opacity: 1.0; }
     100% { opacity: 0; }
 }
+@-webkit-keyframes blink-navbar-text {
+    0% { opacity: 0; }
+    50% { opacity: .8; }
+    100% { opacity: 0; }
+}
 @-webkit-keyframes spin-y {
     /* values: 128px, 256px, 348px, 396px*/
     0% { transform: perspective(396px) rotateY(0); }
@@ -840,14 +925,71 @@ animations
 modify widths and spacing depending on the size of the display
 */
 @media screen and (max-width: 59em) {
-    .terminal:first-child {
-        margin-top: 0.4em;
+    .navbar {
+        min-height: 2.3em;
+        max-height: 2.3em;
+    
+        font-family: "Lexend";
+        align-content: center;
+        vertical-align: middle;
+        color: var(--text);
+
+        .nav-baselink {
+            display: none !important;
+        }
+        .nav-baselink-mobile {
+            display: unset !important;
+            background-color: var(--green);
+            text-decoration: unset !important;
+            color: var(--crust);
+            margin-left: .4em !important;
+            i:not(:first-child) {
+                margin-left: -.5em;
+                margin-right: -.5em;
+                opacity: .6;
+            }
+        }
+        .hover-tip {
+            display: unset !important;
+            background-color: var(--base);
+            animation: blink 3s ease-inr-out infinite;
+            -moz-animation: blink 3s ease-in-out infinite;
+            -webkit-animation: blink 3s ease-in-out infinite;
+        }
+        .nav-links {
+            display: none !important;
+        }
+    }
+    .navbar:hover {
+        grid-template-columns: max-content auto;
+        grid-template-rows: auto auto;
+        min-height: 4.9em !important;
+        max-height: 5.5em !important;
+        .hover-tip {
+            display: none !important;
+        }
+        .nav-links {
+            display: unset !important;
+            grid-row: 2 !important;
+            padding: .2em;
+            margin-left: .4em !important;
+        }
+        .nav-baselink-mobile {
+            padding: .2em !important;
+        }
+        .nav-systray {
+            margin-left: auto !important;
+        }
+    }
+
+    .terminal:nth-child(2) {
+        margin-top: 2.4em;
     }
     .terminal {
         .term-titlebar {
             margin: -16px 0px -24px;
         }
-        margin-bottom: 0.7em;
+        margin: 0px .7em .7em;
         padding: 10px 16px;
     }
     #sneexy > section {
