From b31739cbb9fb892735fda3e054de4bcea6541085 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Fri, 3 Nov 2023 17:50:44 -0500
Subject: [PATCH] did you know? <div>

---
 index.html | 18 ++++++++++++++----
 style.css  | 33 ++++++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 645f14a..4bc34f1 100644
--- a/index.html
+++ b/index.html
@@ -17,17 +17,27 @@
             <div class="pixel-corners--wrapper">
                 <div class="pfp"> <img src="/home/ruben/signal-2023-10-26-124534_002.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
             </div>
-            <h1>hey, i'm ruben.</h1>
-            <h2>welcome to my site.</h2>
+
+            <div class="intro-text">
+                <h1>hey, i'm ruben.</h1>
+                <h2>welcome to my site.</h2>
+            </div>
         </div>
     </div>
 
     <div class="pixel-corners">
-        <div class="about-me">
-            <p>i'm your "average" 17 year old gay foss enjoyer.</p>
+        <div class="socials">
+            <h2>~/socials</h2>
         </div>
     </div>
 
+    <div class="pixel-corners">
+        <article class="about-me">
+            <h1>~/about-me</h1>
+            <p>i'm your "average" 17 year old gay foss enjoyer.</p>
+        </article>
+    </div>
+
 </div>
 
 
diff --git a/style.css b/style.css
index f075ea0..f292653 100644
--- a/style.css
+++ b/style.css
@@ -65,7 +65,7 @@ html {
 }
 .pixel-corners {
     border: 4px solid transparent;
-    margin-bottom: 40px;
+    margin-bottom: 30px;
 }
 .pixel-corners--wrapper {
     width: fit-content;
@@ -214,13 +214,13 @@ html {
 
 .main {
     width: 100%;
-    max-width: 80%;
+    max-width: 60%;
     position: absolute;
     top: 20%;
-    transform: translate(11%, -15%);
+    transform: translate(31%, -15%);
 }
 
-.intro-box, .about-me {
+.intro-box, .socials, .about-me {
     position: relative;
     display: flex;
     justify-content: space-evenly;
@@ -229,13 +229,32 @@ html {
 }
 
 .pfp {
-    width: 200px;
-    height: 200px;
+    width: 150px;
+    height: 150px;
+}
+
+.intro-text {
+    flex-direction: column;
+    text-align: center;
+    transform: translateY(4%)
+}
+
+.socials {
+    position: relative;
+    flex-direction: column;
+}
+
+/* -- shirnk cards if screen is small -- */
+@media screen and (max-width: 600px) {
+    .main {
+      width: 100%;
+      max-width: 90%;
+      transform: translate(4%, -15%);
+    }
 }
 
 h1 {
     color: var(--header);
-    text-align: center;
     font-size: 32px;
     text-shadow: 0px 0px 14px var(--accent-1);
 }