mobile optimization

src/components/friends.astro

@@ -9,8 +9,8 @@ import FriendButton from "../components/Friendbutton.astro"
        <FriendButton website="https://tiramisu.gay/" image=" https://dp.nea.moe/avatar/1215758862444007465.png" title="Tiramisu"/>
        <FriendButton website="Https://vendicated.dev/" image=" https://dp.nea.moe/avatar/343383572805058560.png" title="Vee"/>
        <FriendButton website="https://zoey-on-github.github.io/" image=" https://dp.nea.moe/avatar/696593747353534544.png" title="Julie"/>
-       <FriendButton website="https://alphexo.dev/" image=" https://dp.nea.moe/avatar/477497542205243392.png" title="Alphexo"/>
-       <FriendButton website="https://viggy.moe" image=" https://dp.nea.moe/avatar/1012800881474949221.png" title="Creamsoda"/>
+       <FriendButton website="https://alphexo.dev/" image="koi.png" title="Alphexo"/>
+       <FriendButton website="https://viggy.moe" image="/soda.webp" title="Creamsoda"/>
        <FriendButton website="https://exhq.dev" image=" https://dp.nea.moe/avatar/712639419785412668.png" title="Echo"/>
        <FriendButton website=" https://instellate.xyz/" image=" https://dp.nea.moe/avatar/565197576026980365.png" title="Instellate"/>
        <FriendButton website=" https://blahai.gay/" image=" https://dp.nea.moe/avatar/381494697073573899.png" title="Blahai"/>

src/components/socials.astro

@@ -6,8 +6,8 @@ import Socialsbutton from "../components/socialsbutton.astro"
     Discord 
     <a><img width=40rem class="socialimage" title="" src="/discord.svg"></a>
      
-       <span class="discordtext">
-       elh.gay
+       <span class="Button">
+        <Socialsbutton link="https://discord.com/users/334833943838720000" text="elh.gay" />
        </span>
    </div>
    <div class="social">
@@ -58,9 +58,5 @@ margin-bottom: 1rem;
         display: flex;
   flex-wrap: wrap;
   justify-content:center;   }
-  .discordtext {
-    margin:0.5rem;
-    font-size:large;
-  }
 
 </style>

src/styles/global.css

@@ -80,7 +80,7 @@ font-size: 2rem
   .nav-links {
     width: 50%;
     top: 5rem;
-    left: 48px;
+    left: 20px;
     background-color: #ff9776;
     display: none;
     margin: 0;
@@ -89,20 +89,25 @@ font-size: 2rem
   .nav-links a {
     display: block;
     text-align: center;
-    padding: 10px 0;
+    padding: 15px 20px;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: bold;
     text-transform: uppercase;
+  
   }
   
-
-  
+  @media only screen and (max-width: 768px){
+    .nav-links a {
+    font-size: 1rem;
+    padding: 10px 10px;
+    }
+  }  
   .expanded {
     display: unset;
   }
   
-  @media screen and (min-width: 636px) {
+
     .nav-links {
       margin-left: 5em;
       display: block;
@@ -110,13 +115,7 @@ font-size: 2rem
       width: auto;
       background: none;
     }
-  
-    .nav-links a {
-      display: inline-block;
-      padding: 15px 20px;
-    }
-  
-  }
+
 
   .navbutton {
     border-radius: 30%;
@@ -126,7 +125,7 @@ font-size: 2rem
   .navbutton:hover, .navbutton:active
 {
   background-color: darkorange;
-  border-radius: 30%;
+
 }
 .fbutton {
   border-radius: 100px;
@@ -161,3 +160,9 @@ padding: 2rem;
         padding: .75rem ;
       }
     }
+
+    @media only screen and (max-width: 768px){
+      .navbutton{
+        border-radius: 20rem;
+      } 
+    }