init media.css

- combine all media queries
- name zmedia to conacat at last
- change some max-width values to group them

assets/css/archive.css

@@ -42,13 +42,3 @@
     color: var(--secondary);
     font-size: 14px
 }
-
-@media (max-width:800px) {
-    .archive-month {
-        flex-direction: column
-    }
-
-    .archive-year {
-        margin-top: 20px
-    }
-}

assets/css/footer.css

@@ -48,9 +48,3 @@
 .top-link:focus {
     outline: 0
 }
-
-@media screen and (max-width:800px) {
-    .list .top-link {
-        transform: translateY(-5rem)
-    }
-}

assets/css/post-entry.css

@@ -7,12 +7,6 @@
     margin: var(--gap) 0 calc(var(--gap) * 2) 0
 }
 
-@media screen and (max-width:600px) {
-    .first-entry {
-        min-height: 260px
-    }
-}
-
 .first-entry .entry-header {
     overflow: hidden;
     display: -webkit-box;
@@ -53,12 +47,6 @@
     transform: scale(.96)
 }
 
-@media (prefers-reduced-motion) {
-    .post-entry:active {
-        transform: none
-    }
-}
-
 .tag-entry .entry-cover {
     display: none
 }

assets/css/post-single.css

@@ -335,12 +335,6 @@
     transform: scale(.96)
 }
 
-@media (prefers-reduced-motion) {
-    .share-buttons svg:active {
-        transform: none
-    }
-}
-
 h1:hover .anchor,
 h2:hover .anchor,
 h3:hover .anchor,

assets/css/profile-mode.css

@@ -28,12 +28,6 @@
     pointer-events: none
 }
 
-@media screen and (max-width:600px) {
-    .profile img {
-        transform: scale(.85)
-    }
-}
-
 .buttons {
     flex-wrap: wrap;
     max-width: 400px;
@@ -56,8 +50,3 @@
     transform: scale(.96)
 }
 
-@media (prefers-reduced-motion) {
-    .button:active  {
-        transform: none
-    }
-}

assets/css/reset.css

@@ -129,10 +129,3 @@ img {
 ::-webkit-scrollbar-thumb:hover {
     background: var(--secondary)
 }
-
-@media screen and (min-width:768px) {
-    ::-webkit-scrollbar {
-        width: 10px;
-        height: 6px
-    }
-}

assets/css/search.css

@@ -43,9 +43,3 @@
     transform: scale(.98);
     border: 2px solid var(--tertiary)
 }
-
-@media (prefers-reduced-motion) {
-    #searchResults .active  {
-        transform: none
-    }
-}

assets/css/terms.css

@@ -16,9 +16,3 @@
     background: var(--tertiary);
     transform: scale(.96)
 }
-
-@media (prefers-reduced-motion) {
-    .terms-tags a:active {
-        transform: none
-    }
-}

assets/css/theme-vars.css

@@ -17,12 +17,6 @@
     --border: #eee;
 }
 
-@media screen and (max-width:600px) {
-    :root {
-        --gap: 14px
-    }
-}
-
 .dark {
     --theme: #1d1e20;
     --entry: #2e2e33;

assets/css/zmedia.css

@@ -0,0 +1,72 @@
+@media screen and (max-width: 768px) {
+    /* theme-vars */
+    :root {
+        --gap: 14px;
+    }
+
+    /* profile-mode */
+    .profile img {
+        transform: scale(0.85);
+    }
+
+    /* post-entry */
+    .first-entry {
+        min-height: 260px;
+    }
+
+    /* archive */
+    .archive-month {
+        flex-direction: column;
+    }
+
+    .archive-year {
+        margin-top: 20px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    /* reset */
+    ::-webkit-scrollbar {
+        width: 10px;
+        height: 6px;
+    }
+}
+
+/* footer */
+@media screen and (max-width: 900px) {
+    .list .top-link {
+        transform: translateY(-5rem);
+    }
+}
+
+@media (prefers-reduced-motion) {
+    /* terms */
+    .terms-tags a:active {
+        transform: none;
+    }
+
+    /* profile-mode */
+    .button:active {
+        transform: none;
+    }
+
+    /* post-single */
+    .share-buttons svg:active {
+        transform: none;
+    }
+
+    /* post-entry */
+    .post-entry:active {
+        transform: none;
+    }
+
+    /* footer */
+    .top-link {
+        transition: none;
+    }
+
+    /* search */
+    #searchResults .active {
+        transform: none;
+    }
+}