Merge pull request #22 from tokyorubykaigi12/terfno/add-font

WIP/ font adjustment
tokyorubykaigi12 · Nov 26, 2024 · c4bd749 · c4bd749
2 parents cc80329 + 39aa219
commit c4bd749
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 37 deletions.
diff --git a/src/components/Layouts/Footer.astro b/src/components/Layouts/Footer.astro
@@ -12,6 +12,7 @@ import ArrowUpRightFromSquareIcon from "../icons/arrow-up-right-from-square-whit
   }
 
   footer nav {
+    font-family: "Futura", "Jost", sans-serif;
     margin-left: auto;
   }
 
@@ -39,6 +40,7 @@ import ArrowUpRightFromSquareIcon from "../icons/arrow-up-right-from-square-whit
 
   footer nav ul a {
     color: #fff;
+    text-decoration: none;
   }
 
   footer .copyright {

diff --git a/src/components/Layouts/Header/Nav.astro b/src/components/Layouts/Header/Nav.astro
@@ -6,6 +6,7 @@ import ArrowUpRightFromSquareIcon from "../../icons/arrow-up-right-from-square.s
 <style>
   nav {
     height: 24px;
+    font-family: "Futura", "Jost", sans-serif;
   }
   @media screen and (width <= 700px) {
     nav {
@@ -34,6 +35,7 @@ import ArrowUpRightFromSquareIcon from "../../icons/arrow-up-right-from-square.s
     text-decoration: underline;
   }
 </style>
+
 <nav>
   <ul>
     <li>

diff --git a/src/components/Layouts/Layout.astro b/src/components/Layouts/Layout.astro
@@ -7,6 +7,8 @@ const { title, twitter_card } = Astro.props;
 ---
 
 <style is:global>
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
+
   * {
     box-sizing: border-box;
     margin: 0;
@@ -19,8 +21,8 @@ const { title, twitter_card } = Astro.props;
 
   body {
     width: 100%;
-    font-family: "Futura", "Jost", sans-serif;
-    font-weight: 300;
+    font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
+    font-weight: 400;
   }
 </style>
 

diff --git a/src/components/Layouts/PanelHeader.astro b/src/components/Layouts/PanelHeader.astro
@@ -5,23 +5,29 @@ const { title, subtitle } = Astro.props;
 <style>
   .header {
     display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 20px;
     margin-bottom: 48px;
   }
 
   .header h2 {
+    font-family: "Futura", "Jost", sans-serif;
     font-size: 40px;
     font-weight: 500;
     line-height: 53px;
     vertical-align: middle;
   }
 
-  .header h2 .subtitle {
+  .header .subtitle {
     display: inline-block;
     font-size: 24px;
+    font-weight: 600;
     line-height: 36px;
   }
 </style>
 
 <div class="header">
-  <h2>{title} <span class="subtitle">{subtitle}</span></h2>
+  <h2 lang="en">{title}</h2>
+  <p class="subtitle">{subtitle}</p>
 </div>
diff --git a/src/components/news/List.astro b/src/components/news/List.astro
@@ -11,8 +11,10 @@ import NewsTemplate from './Template.astro';
   </NewsTemplate>
   <NewsTemplate date="2024.10.17">
     チケットの販売を開始しました！ 詳しくは販売ページをご確認ください。懇親会の参加には本編チケットとは別に懇親会チケットのご購入が必要になります。<br />
-    <a href="https://ti.to/tokyorubykaigi12/conference">本編チケット販売ページ</a><br />
-    <a href="https://ti.to/tokyorubykaigi12/party">懇親会チケット販売ページ</a>
+    <ul>
+      <li><a href="https://ti.to/tokyorubykaigi12/conference">本編チケット販売ページ</a></li>
+      <li><a href="https://ti.to/tokyorubykaigi12/party">懇親会チケット販売ページ</a></li>
+    </ul>
   </NewsTemplate>
   <NewsTemplate date="2024.10.1">
     スポンサーシップの募集を開始しました。申込みの締め切りは 10/22

diff --git a/src/components/news/Template.astro b/src/components/news/Template.astro
@@ -7,11 +7,27 @@ const { date } = Astro.props;
   .news {
     margin-bottom: 16px;
   }
+
+  .date {
+    font-family: "Futura", "Jost", sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 21.25px;
+  }
+
+  .body {
+    font-size: 16px;
+    line-height: 30px;
+
+    overflow-wrap: break-word;
+
+    list-style-position: inside;
+  }
 </style>
 
 <div class="news">
   <MiniPanel>
-    <div>{date}</div>
-    <slot />
+    <div class="date">{date}</div>
+    <div class="body"><slot /></div>
   </MiniPanel>
 </div>
diff --git a/src/components/sponsors/CallForSponsors.astro b/src/components/sponsors/CallForSponsors.astro
@@ -1,8 +1,16 @@
 ---
 import MiniPanel from "../Layouts/MiniPanel.astro";
+import ArrowUpRightFromSquareIcon from "../icons/arrow-up-right-from-square.svg";
 ---
 
 <style>
+  .call-for-sponsors {
+    font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
   .call-for-sponsors .title {
     display: flex;
     gap: 16px;
@@ -11,19 +19,35 @@ import MiniPanel from "../Layouts/MiniPanel.astro";
 
   .call-for-sponsors .title h3 {
     font-size: 24px;
+    font-weight: 600;
     line-height: 36px;
   }
 
   .call-for-sponsors .title .pill {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+
     height: fit-content;
     border-radius: 4px;
     padding: 4px 16px;
     background-color: #dd451d;
     color: #fff;
-    font-size: 16px;
     vertical-align: middle;
   }
 
+  .call-for-sponsors .text {
+    font-size: 17px;
+    line-height: 32px;
+
+    .prospectus {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: nowrap;
+    }
+  }
+
   .trk12-button {
     display: inline-block;
     border: solid 2px #000;
@@ -33,6 +57,16 @@ import MiniPanel from "../Layouts/MiniPanel.astro";
     color: #000;
     text-decoration: none;
     cursor: pointer;
+
+    .button-inner {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 30px;
+
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
   }
 </style>
 
@@ -42,21 +76,29 @@ import MiniPanel from "../Layouts/MiniPanel.astro";
       <h3>スポンサーシップ募集について</h3>
       <span class="pill">募集中</span>
     </div>
-    <div style="margin-bottom: 16px;">
+    <div class="text">
       <p>東京Ruby会議12ではスポンサー企業さまを募集しています。</p>
-      <p>
+      <div class="prospectus">
         <a
           href="https://tokyorubykaigi12.s3.ap-northeast-1.amazonaws.com/tokyorubykaigi12-sponsorship-prospectus.pdf"
-          target="_blank">募集要項 (PDF)</a
+          target="_blank"
         >
-      </p>
+          募集要項 (PDF)
+        </a><img src={ArrowUpRightFromSquareIcon.src} height="20" />
+    </div>
     </div>
+
     <div>
       <a
         href="https://sponsorships.tokyorubykaigi12.org/conferences/tokyorubykaigi12/sponsorship/new"
         target="_blank"
-        class="trk12-button">スポンサーシップを申込む</a
+        class="trk12-button"
       >
+        <div class="button-inner">
+          <p>スポンサーシップを申込む</p>
+          <img src={ArrowUpRightFromSquareIcon.src} height="20" />
+        </div>
+      </a>
     </div>
   </div>
 </MiniPanel>
diff --git a/src/components/sponsors/Sponsor.astro b/src/components/sponsors/Sponsor.astro
@@ -89,8 +89,8 @@ const { grade, label, company } = Astro.props;
 
       color: #dd451d;
       font-size: 16px;
-      line-height: 24px;
       font-weight: 600;
+      line-height: 24px;
     }
 
     .company {
@@ -106,17 +106,16 @@ const { grade, label, company } = Astro.props;
 
       a {
         word-wrap: anywhere;
+        font-family: "Futura", "Jost", sans-serif;
         font-size: 16px;
         line-height: 24px;
-        font-weight: 500;
         text-decoration: none;
       }
 
       .text {
         word-wrap: anywhere;
         font-size: 16px;
         line-height: 24px;
-        font-weight: 600;
       }
     }
   }

diff --git a/src/components/sponsors/Sponsors.astro b/src/components/sponsors/Sponsors.astro
@@ -247,6 +247,7 @@ import GifteeLogoImage from "./logos/giftee.png";
       </div>
       <div class="row">
         <Sponsor
+          label="Tools Sponsor"
           grade="Silver"
           company={{
             name: "合同会社esa",
@@ -311,6 +312,7 @@ import GifteeLogoImage from "./logos/giftee.png";
     }
 
     h3 {
+      font-family: "Futura", "Jost", sans-serif;
       font-size: 32px;
       font-weight: 500;
       line-height: 43px;

diff --git a/src/components/staff/Member.astro b/src/components/staff/Member.astro
@@ -76,6 +76,7 @@ const iconSize = 400;
   }
 
   h3 {
+    font-family: "Futura", "Jost", sans-serif;
     margin-bottom: 10px;
     font-size: 20px;
     font-weight: 500;
@@ -109,8 +110,9 @@ const iconSize = 400;
   }
 
   .social a {
-    text-decoration: none;
     font-size: 20px;
+    line-height: 32px;
+    text-decoration: none;
     vertical-align: top;
   }
   @media screen and (width <= 480px) {

diff --git a/src/components/top/About.astro b/src/components/top/About.astro
@@ -3,11 +3,20 @@ import Panel from "../Layouts/Panel.astro";
 ---
 
 <Panel title="About" subtitle="東京Ruby会議12について">
-  <p>
-    東京Ruby会議12は、プログラミング言語Rubyを使ったソフトウェア開発について議論する地域Ruby会議です。東京圏の方を中心にRubyistで一堂に会し、Rubyでのソフトウェア開発・運用などの発表を中心に、知的好奇心が刺激されるカンファレンスとなればと思います。
-  </p>
-  <p>
-    Rubyist同士、そして東京圏に多数息づく "地域.rb"
-    をはじめとしたRubyコミュニティ同士の交流の場となることを目指して、東京Ruby会議を開催します。楽しい一日をともに作りましょう！
-  </p>
+  <div class="about">
+    <p>
+      東京Ruby会議12は、プログラミング言語Rubyを使ったソフトウェア開発について議論する地域Ruby会議です。東京圏の方を中心にRubyistで一堂に会し、Rubyでのソフトウェア開発・運用などの発表を中心に、知的好奇心が刺激されるカンファレンスとなればと思います。
+    </p>
+    <p>
+      Rubyist同士、そして東京圏に多数息づく "地域.rb"
+      をはじめとしたRubyコミュニティ同士の交流の場となることを目指して、東京Ruby会議を開催します。楽しい一日をともに作りましょう！
+    </p>
+  </div>
 </Panel>
+
+<style>
+  .about {
+    font-size: 16px;
+    line-height: 32px;
+  }
+</style>
diff --git a/src/components/top/Hero.astro b/src/components/top/Hero.astro
@@ -5,14 +5,7 @@ import TicketButtonBefore from "./TicketButtonBefore.astro";
 import TicketButtonSelling from "./TicketButtonSelling.astro";
 
 function isTicketOpen(): boolean {
-  const ticketOpenDate = new Date("2024-10-17T14:00:00+09:00");
-
-  const date = new Date();
-  let gmtDate = new Date(date.toUTCString().replace("GMT", ""));
-  const hours = gmtDate.getHours();
-  gmtDate.setHours(hours + 9); // GMT+9
-
-  return gmtDate >= ticketOpenDate;
+  return true
 }
 ---
 
@@ -49,6 +42,8 @@ function isTicketOpen(): boolean {
   }
 
   .hero .hero-inner .datetime {
+    font-family: "Futura", "Jost", sans-serif;
+    font-weight: 500;
     font-size: 36px;
     line-height: 48px;
   }
@@ -60,6 +55,8 @@ function isTicketOpen(): boolean {
   }
 
   .hero .hero-inner .location {
+    font-family: "Futura", "Jost", sans-serif;
+    font-weight: 600;
     font-size: 24px;
     line-height: 36px;
   }