Merge pull request #25 from tokyorubykaigi12/terfno/english

英語化
tokyorubykaigi12 · Dec 1, 2024 · b103a4c · b103a4c
2 parents 1d1ff13 + 5580566
commit b103a4c
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 42 deletions.
diff --git a/src/components/top/Hero.astro b/src/components/top/Hero.astro
@@ -5,7 +5,7 @@ import TicketButtonBefore from "./TicketButtonBefore.astro";
 import TicketButtonSelling from "./TicketButtonSelling.astro";
 
 function isTicketOpen(): boolean {
-  return true
+  return true;
 }
 ---
 
@@ -24,6 +24,11 @@ function isTicketOpen(): boolean {
     color: #fff;
     text-align: center;
   }
+  @media screen and (480px < width <= 700px) {
+    .hero .hero-inner {
+      padding: 32px 48px;
+    }
+  }
   @media screen and (width <= 480px) {
     .hero .hero-inner {
       padding: 32px 20px;
@@ -41,40 +46,90 @@ function isTicketOpen(): boolean {
     }
   }
 
-  .hero .hero-inner .datetime {
-    font-family: "Futura", "Jost", sans-serif;
-    font-weight: 500;
-    font-size: 36px;
-    line-height: 48px;
-  }
-  @media screen and (width <= 480px) {
-    .hero .hero-inner .datetime {
-      font-size: 20px;
-      line-height: 26px;
+  .hero .hero-inner .info {
+    margin-bottom: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+
+    .datetime {
+      font-family: "Futura", "Jost", sans-serif;
+      font-weight: 500;
+
+      font-size: 36px;
+      line-height: 48px;
+      font-weight: 500;
+    }
+    @media screen and (width <= 480px) {
+      .datetime {
+        font-size: 20px;
+        line-height: 26px;
+      }
     }
-  }
 
-  .hero .hero-inner .location {
-    font-family: "Futura", "Jost", sans-serif;
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 36px;
-  }
-  @media screen and (width <= 480px) {
-    .hero .hero-inner .location {
-      font-size: 16px;
-      line-height: 24px;
+    .location {
+      a,
+      p {
+        color: #fff;
+        text-decoration: none;
+      }
+
+      .inner {
+        .en {
+          display: flex;
+          justify-content: center;
+          flex-wrap: wrap;
+          gap: 4px;
+
+          p {
+            font-family: "Futura", "Jost", sans-serif;
+            font-weight: 500;
+            font-size: 26px;
+            line-height: 36px;
+          }
+          @media screen and (width <= 480px) {
+            p {
+              font-size: 16px;
+              line-height: 24px;
+            }
+          }
+        }
+
+        .ja {
+          display: flex;
+          justify-content: center;
+          flex-wrap: wrap;
+          gap: 2px;
+
+          p {
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 24px;
+          }
+          @media screen and (width <= 480px) {
+            p {
+              font-size: 12px;
+              line-height: 18px;
+            }
+          }
+        }
+      }
     }
-  }
 
-  .hero .hero-inner .organizing-team {
-    font-size: 16px;
-    line-height: 24px;
-  }
-  @media screen and (width <= 480px) {
-    .hero .hero-inner .organizing-team {
-      font-size: 12px;
-      line-height: 18px;
+    .organizing-team {
+      a {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 300;
+        color: #fff;
+        text-decoration: none;
+      }
+      @media screen and (width <= 480px) {
+        a {
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
     }
   }
 </style>
@@ -88,15 +143,30 @@ function isTicketOpen(): boolean {
         class="primary-logo"
       />
     </h1>
-
-    <div style="margin-bottom: 16px;">
-      <div class="datetime">2025.1.18 (Sat)</div>
-      <div class="location">横浜市鶴見区民文化センター サルビアホール</div>
-      <div class="organizing-team">主催：東京Ruby会議12実行委員会</div>
+    <div class="info">
+      <div class="datetime">2025/1/18</div>
+      <div class="location">
+        <a
+          href="https://salvia.hall-info.jp/about/#access"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inner"
+        >
+          <div class="ja">
+            <p>横浜市鶴見区民文化センター</p><p>サルビアホール</p>
+          </div>
+          <div class="en">
+            <p>Tsurumi Cultural Center</p><p>"Salvia Hall"</p>
+          </div>
+        </a>
+      </div>
+      <div class="organizing-team">
+        <a href={`${import.meta.env.BASE_URL}/staff/`}>
+          Organized by the Tokyo RubyKaigi 12 Team
+        </a>
+      </div>
     </div>
-
     {isTicketOpen() ? <TicketButtonSelling /> : <TicketButtonBefore />}
-
     <div>
       <img src={TriImage.src} alt="" />
     </div>

diff --git a/src/components/top/TicketButtonSelling.astro b/src/components/top/TicketButtonSelling.astro
@@ -7,16 +7,20 @@ const TitoLink = "https://ti.to/tokyorubykaigi12/conference";
     display: inline-block;
     border-radius: 4px;
     padding: 16px 32px;
-    text-decoration: none;
     cursor: pointer;
 
+    font-family: "Futura", "Jost", sans-serif;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-decoration: none;
+
     border: 0px;
     background: #fff;
     color: #dd451d;
-    font-weight: 600;
   }
 </style>
 
-<div class="actions" style="margin-bottom: 28px;">
-  <a class="buy-a-ticket" href={TitoLink}>チケット購入 はこちら</a>
+<div class="actions" style="margin-bottom: 32px;">
+  <a class="buy-a-ticket" href={TitoLink}>Get your ticket</a>
 </div>