get most of it done

index.html

@@ -15,20 +15,22 @@
     <div class="pixel-corners">
         <div class="intro-box">
             <div class="pixel-corners--wrapper">
-                <div class="pfp"> <img src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
+                <div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
             </div>
 
             <div class="intro-text">
-                <h1>hey, i'm ruben.</h1>
-                <h2>welcome to my site.</h2>
+                <h1 class="site-intro">hey, i'm ruben.</h1>
+                <h2 class="site-subtitle">welcome to my site.</h2>
+                <small class="navnt">~/links <span class="arrow">→</span> ~/about-me <span class="arrow">→</span> ~/fun-facts</small>
             </div>
         </div>
     </div>
 
     <div class="pixel-corners">
-        <div class="socials">
-            <h2>~/socials</h2>
-        </div>
+        <article class="links-n-socials">
+            <h1>~/links-n-socials</h1>
+            <p>wip xdd</p>
+        </article>
     </div>
 
     <div class="pixel-corners">
@@ -51,6 +53,8 @@
                 <li>my profile pictures are usually random characters from different types of media that i grayscale and use as my profile picture. my current phase is <a href="https://www.mariowiki.com/Yoshi" target="_blank">yoshi</a>.</li>
                 <li>i used to have a joke where i loved cheese, in a "i cannot live with cheese, give me the cheese or i die" way. technically the joke does still exist to some extent in a friend group, but otherwise has mostly died out. 🧀</li>
                 <li>joined <a href="https://fediverse.info" target="_blank">fedi</a> around 2020 or so, originally on <a href="https://mas.to" target="_blank">mas.to</a> before closing shop and moving to <a href="https://types.pl" target="_blank">types.pl</a> which has a nice local community, before moving to <a href="https://miruku.cafe" target="_blank">miruku.cafe</a> for a short while before finally landing at <a href="https://lea.pet" target="_blank">lea.pet</a>.</li>
+                <li>i prefer lowercase when possible. it just seems more natural.</li>
+                <li>i am <i>terrible</i> at spelling. i had to at least search up like 10 words when typing this entire site out to make sure i didn't misspell anything.</li>
             </ul>
         </article>
     </div>

style.css

@@ -211,6 +211,44 @@ html {
 }
 /* -- end of pixelated borders -- */
 
+/* -- usual css things -- */
+h1 {
+    color: var(--header);
+    font-size: 32px;
+    text-shadow: 0px 0px 14px var(--accent-1);
+    margin: 0px 0px 5px;
+}
+
+h2 {
+    color: var(--header-2);
+    font-size: 26px;
+    text-shadow: 0px 0px 8px var(--header-2);
+}
+
+li, p {
+    color: var(--fg);
+    font-size: 20px;
+    margin: 20px 0px 0px 0px;
+}
+
+ul {
+    margin: 0px;
+}
+
+small {
+    color: var(--fg);
+    font-size: 16px;
+}
+
+a {
+    color: var(--accent-1);
+    text-shadow: 0px 0px 5px var(--accent-1);
+    font-size: 20px;
+}
+
+/* -- end of usual css things -- */
+
+/* -- styling the rest of the elements/custom stuff -- */
 .main {
     width: 100%;
     max-width: 60%;
@@ -219,14 +257,34 @@ html {
     transform: translate(31%, -7%);
 }
 
-.intro-box, .socials, .about-me, .fun-facts {
+.pfp-image {
+    width: 150px;
+    height: 150px;
+}
+
+.site-intro {
+    margin: -2px;
+}
+
+.navnt {
+    color: var(--header-2);
+    text-shadow: 0px 0px 8px var(--header-2);
+}
+
+.arrow {
+    color: var(--accent-1);
+    text-shadow: 0px 0px 8px var(--accent-1);
+    font-size: 16px;
+}
+
+.intro-box, .links-n-socials, .about-me, .fun-facts {
     position: relative;
     display: flex;
     padding: 30px;
     background-color: var(--bg);
 }
 
-.intro-text, .socials, .about-me, .fun-facts {
+.intro-text, .links-n-socials, .about-me, .fun-facts {
     flex-direction: column;
 }
 
@@ -234,6 +292,10 @@ html {
     justify-content: space-evenly;
 }
 
+.links-n-socials .links-list {
+    flex-direction: row;
+}
+
 .pfp {
     width: 150px;
     height: 150px;
@@ -244,9 +306,10 @@ html {
     transform: translateY(4%)
 }
 
-.socials {
+.links-n-socials {
     position: relative;
 }
+/* -- end of styling the rest of the elements -- */
 
 /* -- shirnk cards if screen is small -- */
 @media screen and (max-width: 600px) {
@@ -256,35 +319,4 @@ html {
       transform: translate(4%, -3%);
     }
 }
-
-h1 {
-    color: var(--header);
-    font-size: 32px;
-    text-shadow: 0px 0px 14px var(--accent-1);
-}
-
-h2 {
-    color: var(--header-2);
-    font-size: 26px;
-    text-shadow: 0px 0px 8px var(--header-2);
-}
-
-li, p {
-    color: var(--fg);
-    font-size: 20px;
-}
-
-li {
-    margin-bottom: 20px;
-}
-
-a {
-    color: var(--accent-1);
-    text-shadow: 0px 0px 5px var(--accent-1);
-    font-size: 20px;
-}
-
-img:nth-child(1) {
-    width: 150px;
-    height: 150px;
-}
+/* -- yea -- */