socials fixed

css/discord.css

@@ -852,8 +852,7 @@ body:has(.presence-stage) {
 .presence-stage .presence-card {
   position: static;
   margin: 0;
-  width: 100%;
+  width: 60vw;
-  max-width: 680px;
   border-radius: 20px;
 }
 

css/index.css

@@ -232,20 +232,54 @@ body::after {
   font-family: "Comic Code";
   transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
   box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.7);
-
 }
 
-.links {
+.links-socials {
-  display: inline-flex;
+    width: 60vw;
+    display: flex;
     flex-direction: column;
     gap: 8px;
+    max-width: 800px;
 }
 
 .gitgay-link {
   display: block;
   text-align: center;
+  width: 100%;
 }
 
+
+/* Normal desktop */
+#discord,
+.links-socials {
+    width: 60vw;
+    max-width: 800px;
+}
+
+.gitgay-link,
+.presence-stage .presence-card {
+    width: 100%;
+    max-width: 100%;
+}
+
+/* Wide screens (16:9 and wider) */
+@media (min-aspect-ratio: 16/9) {
+    #discord,
+    .links-socials {
+        width: 40vw;
+      max-width: 600px;
+    }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    #discord,
+    .links-socials {
+        width: 90vw;
+    }
+}
+
+
 .gitgay-link:hover {
   transform: translateY(-2px);
   filter: brightness(1.05);

socials/index.html

@@ -44,6 +44,7 @@
     <title>Ari</title>
     <link rel="icon" type="image/png" href="/assets/media/favicon.png" />
     <link rel="stylesheet" href="/css/index.css">
+    <!-- <link rel="stylesheet" href="/css/i_stole_all_of_this_from_clove.css"> -->
     <script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
     <!-- SEO Meta Tags -->
     <meta name="description" content="Personal site for Ari on git.gay/AriTheStupidCat on GitHub" />
@@ -75,27 +76,24 @@
     <span class="hamburger" onclick="openNav()">&#9776;</span>
     <div id="mySidenav" class="sidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <a href="/">Index</a>
+        <a href="/" class="active">Index</a>
         <a href="/dev-info/">Dev Info</a>
         <a href="/hardware/">Hardware</a>
         <a href="/cv/">Curriculum Vitae</a>
-        <a href="/socials/" class="active">Socials</a>
+        <a href="/socials/">Socials</a>
 
     </div>
+    </header>
 
-
+    <main class="presence-stage">
-    <main class="intro">
-        
-        <header class="hub-header">
-            <div>
                 <h1 class="hey">My Socials</h1>
             </div>
             <div class="intro-text">
                 A list of all of my socials
             </div>
-            <div class="presence-embed">
             <div id="discord"></div>
-            </div>
+            <header class="hub-header">
+                <div>
                 <h2 class="pronouns">Socials</h2>
 
                 <div class="links-socials">
@@ -106,15 +104,13 @@
                     <a class="gitgay-link" href="https://namemc.com/profile/4375b950-d06f-4a3a-ab0a-6234d4a4f077" target="_blank" rel="noopener">NameMC</a>
                     <a class="gitgay-link" href="https://sky.shiiyu.moe/stats/4375b950-d06f-4a3a-ab0a-6234d4a4f077" target="_blank" rel="noopener">SkyCrypt</a>
 
-
-
                 </div>
         </header>
     </main>
+    <script src="/js/index.js" data-cat="/assets/oneko/classics/classic.png"></script>
+    <script src="/js/flavors.js"></script>
+    <script src="/js/cat.js"></script>
+    <script src="/js/discord.js" data-user="1474568910736199825"></script>    
 </body>
-<script src="/js/index.js"></script>
+
-<script src="/js/flavors.js"></script>
-<script src="/js/cat.js"></script>
-<script src="/js/heatmap.js"></script>
-<script src="/js/discord.js" data-user="1474568910736199825"></script>
 </html>