Merge pull request #11 from tokyorubykaigi12/terfno/rg-sponsors

add sponsors
tokyorubykaigi12 · Nov 11, 2024 · d141d76 · d141d76
2 parents abec0f8 + e894a25
commit d141d76
Show file tree

Hide file tree

Showing 22 changed files with 1,055 additions and 80 deletions.
diff --git a/src/components/Layouts/MiniPanel.astro b/src/components/Layouts/MiniPanel.astro
@@ -7,6 +7,7 @@ const {backgroundColor = "#fcece8"} = Astro.props;
     border-radius: 24px;
     padding: 32px;
     background-color: var(--backgroundColor);
+    height: 100%;
   }
 </style>
 

diff --git a/src/components/sponsors/Logo.astro b/src/components/sponsors/Logo.astro
@@ -21,7 +21,7 @@ const SilverLargeSize = "160px";
 const SilverSmallSize = "160px";
 ---
 
-<div class:list={grade}>
+<div class:list={["logo", grade]}>
   <img src={company.logoImageSrc} alt={company.name} />
 </div>
 
@@ -35,34 +35,45 @@ const SilverSmallSize = "160px";
     SilverSmallSize,
   }}
 >
-  .Ruby {
+  .logo {
+    background-color: #fff;
     img {
-      width: var(--RubyLargeSize);
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
     }
-    @media screen and (width <= 960px) {
-      img {
-        width: var(--RubySmallSize);
-      }
+  }
+
+  .Ruby {
+    width: var(--RubyLargeSize);
+    height: var(--RubyLargeSize);
+  }
+  @media screen and (width <= 960px) {
+    .Ruby {
+      width: var(--RubySmallSize);
+      height: var(--RubySmallSize);
     }
   }
+
   .Gold {
-    img {
-      width: var(--GoldLargeSize);
-    }
-    @media screen and (width <= 960px) {
-      img {
-        width: var(--GoldSmallSize);
-      }
+    width: var(--GoldLargeSize);
+    height: var(--GoldLargeSize);
+  }
+  @media screen and (width <= 960px) {
+    .Gold {
+      width: var(--GoldSmallSize);
+      height: var(--GoldSmallSize);
     }
   }
+
   .Silver {
-    img {
-      width: var(--SilverLargeSize);
-    }
-    @media screen and (width <= 960px) {
-      img {
-        width: var(--SilverSmallSize);
-      }
+    width: var(--SilverLargeSize);
+    height: var(--SilverLargeSize);
+  }
+  @media screen and (width <= 960px) {
+    .Silver {
+      width: var(--SilverSmallSize);
+      height: var(--SilverSmallSize);
     }
   }
 </style>
diff --git a/src/components/sponsors/Sponsor.astro b/src/components/sponsors/Sponsor.astro
@@ -11,11 +11,11 @@ type Company = {
 
 interface Props {
   grade: "Ruby" | "Gold" | "Silver";
-  label: string | null;
+  label?: string;
   company: Company;
 }
 
-const { grade, label = null, company } = Astro.props;
+const { grade, label, company } = Astro.props;
 ---
 
 <div class:list={grade == "Silver" ? "outer" : ""}>
@@ -40,7 +40,7 @@ const { grade, label = null, company } = Astro.props;
 
 <style>
   .outer {
-    width: 45%;
+    width: 46%;
   }
   @media screen and (width <= 960px) {
     .outer {
@@ -52,6 +52,7 @@ const { grade, label = null, company } = Astro.props;
   .inner {
     display: flex;
     gap: 32px;
+    align-items: flex-start;
   }
   @media screen and (width <= 720px) {
     .inner {
@@ -66,8 +67,15 @@ const { grade, label = null, company } = Astro.props;
     flex-direction: column;
     align-items: center;
   }
+  @media screen and (720px <= width <= 960px) {
+    .inner-silver {
+      flex-direction: row;
+    }
+  }
 
   .description {
+    flex: 1;
+
     .label {
       display: inline-block;
       margin-bottom: 16px;
@@ -93,7 +101,14 @@ const { grade, label = null, company } = Astro.props;
         font-weight: 600;
       }
 
-      a,
+      a {
+        word-wrap: anywhere;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+        text-decoration: none;
+      }
+
       .text {
         word-wrap: anywhere;
         font-size: 16px;