Fix gallery image layout

Author: shiro

src/BlogIndex.tsx

@@ -9,21 +9,21 @@ const articles = getArticles();
 const BlogIndex: Component = () => {
   return (
     <main>
-      <h1 class="mb-4 bg-colors-primary-500 pl-8 pr-8 text-center text-big text-colors-text-900a">
+      <h1 class="bg-colors-primary-500 text-big text-colors-text-900a mb-4 pr-8 pl-8 text-center">
         Blog of a programming rabbit
       </h1>
       <ul class="flex flex-col gap-4">
         <For each={articles}>
           {(item, idx) => (
             <>
-              <li class="flex flex-col hover:bg-colors-primary-100">
+              <li class="hover:bg-colors-primary-100 flex flex-col">
                 <a
                   href={`${config.base}${item.url}`}
                   class="flex flex-col p-4 no-underline">
                   <span class="text-heading2 text-colors-primary-800">
                     {item.title}
                   </span>
-                  <span class="textbody mb-4 mt-1 text-colors-text-300a !no-underline">
+                  <span class="textbody text-colors-text-300a mt-1 mb-4 !no-underline">
                     {item.date} by Matic Utsumi Gačar
                   </span>
                   <span

src/GallerySite.tsx

@@ -2,7 +2,11 @@ import { css } from "@linaria/core";
 import cn from "classnames";
 import { Component, JSX } from "solid-js";
 import DialogImage from "~/DialogImage";
-import { breakpoint, breakpointUntil } from "~/style/commonStyle";
+import {
+  breakpoint,
+  breakpointFrom,
+  breakpointUntil,
+} from "~/style/commonStyle";
 
 const images: Component[] = Object.values(
   import.meta.glob("@assets/gallery/*.jpg", {
@@ -47,20 +51,21 @@ const _GallerySite = css``;
 
 const Grid = css`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   grid-gap: 0;
-  ${breakpointUntil("m")} {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  ${breakpoint("xs")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  ${breakpoint("l")} {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  ${breakpoint("xl")} {
+    grid-template-columns: repeat(5, 1fr);
   }
 `;
 
 const card = css`
-  ${breakpoint("s")} {
-    &:nth-child(1n + 18) + div {
-      display: none;
-    }
-  }
-  ${breakpoint("m")} {
+  ${breakpoint("s", "m")} {
     &:nth-child(1n + 18) + div {
       display: none;
     }