From 584af953ca13be571b3635adce0658cb0c4e680b Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Sun, 9 Jan 2022 20:29:37 +0900
Subject: [PATCH] Apply responsive size for cards and images

---
 src/components/molecules/BattlesuitCard.tsx        | 4 ++--
 src/components/molecules/ElfCard.tsx               | 4 ++--
 src/components/molecules/StigmataCard.tsx          | 8 ++++----
 src/components/pages/SingleStigmataPage.tsx        | 6 +++---
 src/pages/honkai3rd/battlesuits/[battlesuitId].tsx | 6 +++---
 src/pages/honkai3rd/elfs/[elfId].tsx               | 4 ++--
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/molecules/BattlesuitCard.tsx b/src/components/molecules/BattlesuitCard.tsx
index 9c5bed26..88257f82 100644
--- a/src/components/molecules/BattlesuitCard.tsx
+++ b/src/components/molecules/BattlesuitCard.tsx
@@ -24,7 +24,7 @@ const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
     <Card
       className={hidden ? 'hidden' : ''}
       sx={{
-        width: [140, 160],
+        width: 120,
         padding: 2,
         margin: 2,
         '&.hidden': {
@@ -39,7 +39,7 @@ const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
         <SquareImageBox
           alt={battlesuitName}
           src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-          size={[120, 140]}
+          size={100}
         />
         <Box
           sx={{
diff --git a/src/components/molecules/ElfCard.tsx b/src/components/molecules/ElfCard.tsx
index ab97ce62..7bbe37d6 100644
--- a/src/components/molecules/ElfCard.tsx
+++ b/src/components/molecules/ElfCard.tsx
@@ -21,7 +21,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
       sx={{
         m: 2,
         p: 2,
-        width: [140, 160],
+        width: [120],
         '&.hiden': {
           display: 'none',
         },
@@ -31,7 +31,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
         <SquareImageBox
           alt={elfName}
           src={`/assets/honkai3rd/elfs/icon-${elf.id}.png`}
-          size={[120, 140]}
+          size={[100]}
         />
         <Box
           sx={{
diff --git a/src/components/molecules/StigmataCard.tsx b/src/components/molecules/StigmataCard.tsx
index 64299fd2..5734ab86 100644
--- a/src/components/molecules/StigmataCard.tsx
+++ b/src/components/molecules/StigmataCard.tsx
@@ -20,14 +20,14 @@ const StigmataCard = ({ stigmata }: StigmataCardProps) => {
   return (
     <Card
       sx={{
-        width: '120px',
-        padding: 2,
-        margin: 2,
+        width: [85, 120],
+        padding: [1, 2],
+        margin: [1, 2],
       }}
     >
       <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
         <SquareImageBox
-          size={100}
+          size={[75, 100]}
           alt={stigmataName}
           src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
         />
diff --git a/src/components/pages/SingleStigmataPage.tsx b/src/components/pages/SingleStigmataPage.tsx
index fe552895..9f98e655 100644
--- a/src/components/pages/SingleStigmataPage.tsx
+++ b/src/components/pages/SingleStigmataPage.tsx
@@ -62,15 +62,15 @@ const SingleStigmataPage = ({
             position: 'relative',
             overflow: 'hidden',
             width: '100%',
-            maxWidth: '600px',
+            maxWidth: [300, 400],
             borderRadius: 4,
           }}
         >
           <Image
             alt={stigmataName}
             src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
-            width={600}
-            height={600}
+            width={400}
+            height={400}
             layout='responsive'
           />
         </Box>
diff --git a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
index 42203074..0ef820a0 100644
--- a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+++ b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
@@ -64,14 +64,14 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
               position: 'relative',
               overflow: 'hidden',
               width: '100%',
-              maxWidth: '600px',
+              maxWidth: [300, 400],
             }}
           >
             <Image
               alt={battlesuitName}
               src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`}
-              width={600}
-              height={600}
+              width={400}
+              height={400}
               layout='responsive'
             />
           </Box>
diff --git a/src/pages/honkai3rd/elfs/[elfId].tsx b/src/pages/honkai3rd/elfs/[elfId].tsx
index 3d3b2175..46ddb8c8 100644
--- a/src/pages/honkai3rd/elfs/[elfId].tsx
+++ b/src/pages/honkai3rd/elfs/[elfId].tsx
@@ -45,8 +45,8 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
             sx={{
               position: 'relative',
               overflow: 'hidden',
-              width: '400px',
-              height: '400px',
+              width: [300, 400],
+              height: [300, 400],
               borderRadius: 4,
             }}
           >