From 6c3a07460534efd9c0115f3b59a132cb5d5e77f6 Mon Sep 17 00:00:00 2001
From: Ruben <60184397+sneexy-boi@users.noreply.github.com>
Date: Tue, 2 Jan 2024 21:23:57 -0600
Subject: [PATCH] fix mobile view

---
 style.css | 339 ++++++++++++------------------------------------------
 1 file changed, 71 insertions(+), 268 deletions(-)

diff --git a/style.css b/style.css
index 11dea04..b4f5776 100644
--- a/style.css
+++ b/style.css
@@ -619,76 +619,6 @@ footer > .dot {
 }
 /* -- end of styling the rest of the elements -- */
 
-/* -- shrink cards if screen is small -- */
-@media screen and (max-width: 1000px) {
-    .main {
-        width: 100%;
-        max-width: 90%;
-        transform: translate(6%, 0%);
-        margin-left: unset;
-        margin-right: unset;
-    }
-
-    .intro-box {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        flex-direction: column;
-    }
-
-    .pfp, .pixel-corners--wrapper {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .pixel-corners--wrapper {
-        margin-bottom: 20px;
-    }
-
-    .fedi, .messaging, .platforms, .misc {
-        flex-direction: column;
-    }
-
-    .messaging {
-        margin-left: unset;
-    }
-    
-    .fedi > .dot, .messaging > .dot, .platforms > .dot, .misc > .dot {
-        display: none;
-    }
-
-    .quotes {
-        grid-template-columns: unset;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .quote > small::before {
-        padding-left: unset;
-    }
-
-    .buttons-img:first-child, .buttons-img:nth-child(2), .buttons-img:nth-child(4), .buttons-img {
-        display: flow-root;
-        margin: 1em 0px 1px 0px;
-        text-align: center;
-        justify-content: center;
-    }
-
-    footer {
-        flex-direction: column;
-        text-align: center;
-    }
-
-    footer > p, footer > a, footer > p > a {
-        margin-top: 5px;
-    }
-
-    footer > .dot {
-        display: none;
-    }
-}
-/* -- yea -- */
-
 /* -- the entire css repasted for light theme enjoyers -- */
 @media (prefers-color-scheme: light) {
     :root {
@@ -705,203 +635,6 @@ footer > .dot {
     html {
         background: var(--page-bg);
     }
-
-    /* -- pixelated border radius -- */
-    .pixel-corners,
-    .pixel-corners--wrapper {
-        clip-path: polygon(0px calc(100% - 28px),
-            4px calc(100% - 28px),
-            4px calc(100% - 20px),
-            8px calc(100% - 20px),
-            8px calc(100% - 12px),
-            12px calc(100% - 12px),
-            12px calc(100% - 8px),
-            20px calc(100% - 8px),
-            20px calc(100% - 4px),
-            28px calc(100% - 4px),
-            28px 100%,
-            calc(100% - 28px) 100%,
-            calc(100% - 28px) calc(100% - 4px),
-            calc(100% - 20px) calc(100% - 4px),
-            calc(100% - 20px) calc(100% - 8px),
-            calc(100% - 12px) calc(100% - 8px),
-            calc(100% - 12px) calc(100% - 12px),
-            calc(100% - 8px) calc(100% - 12px),
-            calc(100% - 8px) calc(100% - 20px),
-            calc(100% - 4px) calc(100% - 20px),
-            calc(100% - 4px) calc(100% - 28px),
-            100% calc(100% - 28px),
-            100% 28px,
-            calc(100% - 4px) 28px,
-            calc(100% - 4px) 20px,
-            calc(100% - 8px) 20px,
-            calc(100% - 8px) 12px,
-            calc(100% - 12px) 12px,
-            calc(100% - 12px) 8px,
-            calc(100% - 20px) 8px,
-            calc(100% - 20px) 4px,
-            calc(100% - 28px) 4px,
-            calc(100% - 28px) 0px,
-            28px 0px,
-            28px 4px,
-            20px 4px,
-            20px 8px,
-            12px 8px,
-            12px 12px,
-            8px 12px,
-            8px 20px,
-            4px 20px,
-            4px 28px,
-            0px 28px);
-        position: relative;
-    }
-    .pixel-corners {
-        border: 4px solid transparent;
-        margin-bottom: 30px;
-    }
-    .pixel-corners--wrapper {
-        width: fit-content;
-        height: fit-content;
-    }
-    .pixel-corners--wrapper .pixel-corners {
-        display: block;
-        clip-path: polygon(4px 28px,
-            8px 28px,
-            8px 20px,
-            12px 20px,
-            12px 12px,
-            20px 12px,
-            20px 8px,
-            28px 8px,
-            28px 4px,
-            calc(100% - 28px) 4px,
-            calc(100% - 28px) 8px,
-            calc(100% - 20px) 8px,
-            calc(100% - 20px) 12px,
-            calc(100% - 12px) 12px,
-            calc(100% - 12px) 20px,
-            calc(100% - 8px) 20px,
-            calc(100% - 8px) 28px,
-            calc(100% - 4px) 28px,
-            calc(100% - 4px) calc(100% - 28px),
-            calc(100% - 8px) calc(100% - 28px),
-            calc(100% - 8px) calc(100% - 20px),
-            calc(100% - 12px) calc(100% - 20px),
-            calc(100% - 12px) calc(100% - 12px),
-            calc(100% - 20px) calc(100% - 12px),
-            calc(100% - 20px) calc(100% - 8px),
-            calc(100% - 28px) calc(100% - 8px),
-            calc(100% - 28px) calc(100% - 4px),
-            28px calc(100% - 4px),
-            28px calc(100% - 8px),
-            20px calc(100% - 8px),
-            20px calc(100% - 12px),
-            12px calc(100% - 12px),
-            12px calc(100% - 20px),
-            8px calc(100% - 20px),
-            8px calc(100% - 28px),
-            4px calc(100% - 28px));
-    }
-    .pixel-corners::after,
-    .pixel-corners--wrapper::after {
-        content: "";
-        position: absolute;
-        clip-path: polygon(0px calc(100% - 28px),
-            4px calc(100% - 28px),
-            4px calc(100% - 20px),
-            8px calc(100% - 20px),
-            8px calc(100% - 12px),
-            12px calc(100% - 12px),
-            12px calc(100% - 8px),
-            20px calc(100% - 8px),
-            20px calc(100% - 4px),
-            28px calc(100% - 4px),
-            28px 100%,
-            calc(100% - 28px) 100%,
-            calc(100% - 28px) calc(100% - 4px),
-            calc(100% - 20px) calc(100% - 4px),
-            calc(100% - 20px) calc(100% - 8px),
-            calc(100% - 12px) calc(100% - 8px),
-            calc(100% - 12px) calc(100% - 12px),
-            calc(100% - 8px) calc(100% - 12px),
-            calc(100% - 8px) calc(100% - 20px),
-            calc(100% - 4px) calc(100% - 20px),
-            calc(100% - 4px) calc(100% - 28px),
-            100% calc(100% - 28px),
-            100% 28px,
-            calc(100% - 4px) 28px,
-            calc(100% - 4px) 20px,
-            calc(100% - 8px) 20px,
-            calc(100% - 8px) 12px,
-            calc(100% - 12px) 12px,
-            calc(100% - 12px) 8px,
-            calc(100% - 20px) 8px,
-            calc(100% - 20px) 4px,
-            calc(100% - 28px) 4px,
-            calc(100% - 28px) 0px,
-            28px 0px,
-            28px 4px,
-            20px 4px,
-            20px 8px,
-            12px 8px,
-            12px 12px,
-            8px 12px,
-            8px 20px,
-            4px 20px,
-            4px 28px,
-            0px 28px,
-            0px 50%,
-            4px 50%,
-            4px 28px,
-            8px 28px,
-            8px 20px,
-            12px 20px,
-            12px 12px,
-            20px 12px,
-            20px 8px,
-            28px 8px,
-            28px 4px,
-            calc(100% - 28px) 4px,
-            calc(100% - 28px) 8px,
-            calc(100% - 20px) 8px,
-            calc(100% - 20px) 12px,
-            calc(100% - 12px) 12px,
-            calc(100% - 12px) 20px,
-            calc(100% - 8px) 20px,
-            calc(100% - 8px) 28px,
-            calc(100% - 4px) 28px,
-            calc(100% - 4px) calc(100% - 28px),
-            calc(100% - 8px) calc(100% - 28px),
-            calc(100% - 8px) calc(100% - 20px),
-            calc(100% - 12px) calc(100% - 20px),
-            calc(100% - 12px) calc(100% - 12px),
-            calc(100% - 20px) calc(100% - 12px),
-            calc(100% - 20px) calc(100% - 8px),
-            calc(100% - 28px) calc(100% - 8px),
-            calc(100% - 28px) calc(100% - 4px),
-            28px calc(100% - 4px),
-            28px calc(100% - 8px),
-            20px calc(100% - 8px),
-            20px calc(100% - 12px),
-            12px calc(100% - 12px),
-            12px calc(100% - 20px),
-            8px calc(100% - 20px),
-            8px calc(100% - 28px),
-            4px calc(100% - 28px),
-            4px 50%,
-            0px 50%);
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: #36ffc4;
-        display: block;
-        pointer-events: none;
-    }
-    .pixel-corners::after {
-        margin: -4px;
-    }
-    /* -- end of pixelated borders -- */
     
     /* -- usual css things -- */
     h1 {
@@ -1056,4 +789,74 @@ footer > .dot {
         color: var(--fg);
     }
     /* -- end of styling the rest of the elements -- */
-}
\ No newline at end of file
+}
+
+/* -- shrink cards if screen is small -- */
+@media screen and (max-width: 1000px) {
+    .main {
+        width: 100%;
+        max-width: 90%;
+        transform: translate(6%, 0%);
+        margin-left: unset;
+        margin-right: unset;
+    }
+
+    .intro-box {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        flex-direction: column;
+    }
+
+    .pfp, .pixel-corners--wrapper {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .pixel-corners--wrapper {
+        margin-bottom: 20px;
+    }
+
+    .fedi, .messaging, .platforms, .misc {
+        flex-direction: column;
+    }
+
+    .messaging {
+        margin-left: auto;
+    }
+    
+    .fedi > .dot, .messaging > .dot, .platforms > .dot, .misc > .dot {
+        display: none;
+    }
+
+    .quotes {
+        grid-template-columns: unset;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .quote > small::before {
+        padding-left: unset;
+    }
+
+    .buttons-img:first-child, .buttons-img:nth-child(2), .buttons-img:nth-child(4), .buttons-img {
+        display: flow-root;
+        margin: 1em 0px 1px 0px;
+        text-align: center;
+        justify-content: center;
+    }
+
+    footer {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    footer > p, footer > a, footer > p > a {
+        margin-top: 5px;
+    }
+
+    footer > .dot {
+        display: none;
+    }
+}
+/* -- yea -- */
\ No newline at end of file