[ASTRO] Code cleanup and make phone Song list responsive

sonicjhon1 · Dec 16, 2022 · ab30ee8 · ab30ee8
1 parent d74437c
commit ab30ee8
Showing 1 changed file with 10 additions and 15 deletions.
diff --git a/05 KanoColle-UI/src/components/Main.astro b/05 KanoColle-UI/src/components/Main.astro
@@ -1,6 +1,5 @@
 ---
 import Song from "./Song.astro";
-import ThreeDotsIcon from "./ThreeDotsIcon.astro";
 ---
 
 <main class="font-700">
@@ -52,18 +51,12 @@ import ThreeDotsIcon from "./ThreeDotsIcon.astro";
         }
     }
 
-    @media screen and (min-width:381px) and (max-width: 580px) {
+    @media screen and (min-width:381px) and (max-width: 800px) {
         main {
             padding-left: 2rem;
         }
     }
 
-    @media screen and (min-width:581px) and (max-width:800px) {
-        main {
-            padding-left: 7rem;
-        }
-    }
-
     @media screen and (min-width:801px) {
         main {
             padding-left: 7rem;
@@ -90,17 +83,13 @@ import ThreeDotsIcon from "./ThreeDotsIcon.astro";
         letter-spacing: -.02em;
         text-shadow: rgba(0,0,0,.171) .2rem -.12rem .5rem;
     }
-    @media (min-width: 320px) and (max-width: 499px) {
-        .title {
-            font-size: 2rem;
-        }
-	}
-	@media (min-width: 500px) and (max-width: 640px) {
+
+    @media (min-width: 320px) and (max-width: 640px) {
         .title {
             font-size: 2rem;
         }
 	}
-    @media screen and (min-width: 642px) and (max-width: 839px) {
+    @media screen and (min-width: 641px) and (max-width: 839px) {
         .title {
             font-size: 2.5rem;
         }
@@ -119,4 +108,10 @@ import ThreeDotsIcon from "./ThreeDotsIcon.astro";
     section {
         width: calc(100vw - 14rem);
     }
+
+    @media screen and (max-width: 800px) {
+        section {
+            width: calc(100vw - 5rem);
+        }
+    }
 </style>