Merge pull request #255 from jpa-perl/enable_menu

チケット販売開始準備 & メニューを有効にする

2024hiroshima/ejs.config.js

@@ -13,15 +13,20 @@ module.exports = {
     },
     information: [
       {
-        date: "2023/09/11",
-        title: "スポンサーメニューを公開しました",
-        url: "https://fortee.jp/yapc-hiroshima-2024/go/sponsor-menu",
+        date: "2023/10/11",
+        title: "チケット販売を開始しました",
+        url: "https://passmarket.yahoo.co.jp/event/show/detail/02y81p2r6ab31.html",
       },
       {
         date: "2023/09/12",
         title: "スピーカーの公募を開始しました",
         url: "https://fortee.jp/yapc-hiroshima-2024/speaker/callfor/talk/callfor",
       },
+      {
+        date: "2023/09/11",
+        title: "スポンサーメニューを公開しました",
+        url: "https://fortee.jp/yapc-hiroshima-2024/go/sponsor-menu",
+      },
     ],
     guestSpeakers: [
       {
@@ -40,6 +45,14 @@ module.exports = {
         description:
           "数々の業務システム、Webサービスなどの開発・運用を担当し、2017年に株式会社はてなでサービス監視サービス「Mackerel」のCRE（Customer Reliability Engineer）、株式会社オミカレの副社長/CTOなどを経て、合同会社 Have Fun Techを起業。 その後、LinkageのCTOとしてJOINし、HaveFunTechの経営と二足の草鞋を履きこなしている。 コミュニティでは、Microsoft MVPをはじめ、日本PostgreSQLユーザ会の理事として勉強会の開催を担当し、各地で登壇している。 builderscon 2017、YAPC::Kansaiなどのイベントでベストスピーカーを受賞し、分かりやすく実践的な内容のトークに定評がある。 他に、岡山Python勉強会を主催し、オープンラボ備後にも所属。著書に『Software Design』誌で、データベースに関する連載「RDBアンチパターン」をまとめた『失敗から学ぶRDBの正しい歩き方』を執筆",
       },
+      {
+        photo: "images/speakers/matsumoto.png",
+        name: "松本 勇気",
+        name_en: "Yuki Matsumoto",
+        title: "株式会社LayerX 代表取締役CTO",
+        description:
+            "東京大学在学時に株式会社Gunosy入社、CTOとして技術組織全体を統括。またLayerXの前身となるブロックチェーン研究開発チームを立ち上げる。2018年より合同会社DMM.com CTOに就任し技術組織改革を推進。大規模Webサービスの構築をはじめ、機械学習、Blockchain、マネジメント、人事、経営管理、事業改善、行政支援等広く歴任。2019年日本CTO協会理事に就任。2021年3月よりLayerX 代表取締役CTO就任。開発や組織づくり、及びFintechとAI・LLMの2事業の推進を担当。"
+      },
     ],
     jobboards,
     sponsors: [

2024hiroshima/src/index.css

@@ -51,3 +51,48 @@ body {
   position: relative;
   z-index: 1;
 }
+
+.global-menu {
+  background: url(./images/bg.jpg);
+  background-size: cover;
+}
+
+.global-menu ul {
+  @apply text-4xl md:text-6xl;
+  display: grid;
+  line-height: 1;
+  margin: 1em 0.5em;
+  gap: 0.8em;
+  font-weight: 900;
+  align-items: flex-start;
+  justify-items: flex-end;
+  text-align: right;
+}
+
+.global-menu li a > span {
+  @apply text-2xl md:text-3xl;
+  display: block;
+}
+
+.global-menu li a {
+  display: block;
+  position: relative;
+  padding: 0 0.7em 0 0;
+  transition: all 0.1s linear;
+}
+
+.global-menu li a:after {
+  content: ">";
+  position: absolute;
+  top: 50%;
+  right: -0.5rem;
+  transform: translateY(-50%);
+}
+
+.global-menu li a:hover {
+  @apply bg-red text-white;
+}
+
+.global-menu li a:hover:after {
+  right: 0;
+}

2024hiroshima/src/index.ejs

@@ -44,7 +44,7 @@
 			あなたのさまざまな<span class="text-red">｢お好み｣</span>を語ってみてください。</p>
 	</section>
 
-	<section class="section flex flex-col">
+	<section class="section flex flex-col" id="schedule">
 		<h2 class="en-serif-bold text-4xl sm:text-6xl text-center mb-16">SCHEDULE</h2>
 		<table class="table-fixed mx-auto en-serif text-bold sm:text-2xl md:text-3xl table">
 			<tbody>
@@ -68,8 +68,10 @@
 	</section>
 
 
-	<section class="section flex flex-col items-center gap-[50px]">
-		<h2 class="en-serif-bold text-5xl sm:text-7xl md:text-8xl text-center">GUEST SPEAKER</h2>
+	<section class="section flex flex-col items-center gap-[50px]" id="guest-speaker">
+		<h2 class="en-serif-bold text-5xl sm:text-7xl md:text-8xl text-center">
+			GUEST SPEAKER
+		</h2>
 		<div class="mx-auto px-5 grid md:grid-flow-col auto-cols-fr gap-12">
 			<% for (const speaker of locals.guestSpeakers) { %>
 				<div class="max-w-sm">
@@ -103,7 +105,7 @@
 				<div class="flex justify-center flex-wrap gap-5">
 					<% for (const company of sponsor.companies) { %>
 						<a target="_blank" href="<%= company.url %>"
-							class="block border rounded-xl p-1 border-gray-200 <%= sponsor.icon_class %>">
+							class="block border rounded-xl p-1 border-gray-200 hover:scale-105 transition-transform <%= sponsor.icon_class %>">
 							<img class="aspect-square object-contain content-center" loading="lazy"
 								src="images/sponsor/<%= company.image %>" alt="<%= company.name %>" />
 						</a>
@@ -113,4 +115,4 @@
 			<% } %>
 	</section>
 
-	<%- include('partial/footer'); -%>
+	<%- include('partial/footer'); -%>

2024hiroshima/src/partial/header.ejs

@@ -33,17 +33,16 @@
 	<div id="p5-container"></div>
 	<div x-data="{open: false}">
 		<nav id="global-nav"
-			class="fixed z-10 right-0 top-0 flex w-full border-t border-b border-black h-[38px] sm:h-[58px] content-center  bg-white">
+			class="fixed z-20 right-0 top-0 flex w-full border-t border-b border-black h-[38px] sm:h-[58px] content-center  bg-white">
 			<div class="grow pl-2 sm:pl-3 flex items-center">
 				<a href="/"><img src="./images/logo-site.svg" class="h-[26px] sm:h-[33px] w-auto object-contain" width="210"
 						height="33" alt="YAPC::Hiroshima 2024" /></a>
 			</div>
-			<!--
 			<button @click="open = !open"
-				class="text-xs sm:text-xl flex items-center justify-center border-l border-black  w-[110px] sm:w-[150px]">
+				class="text-xs sm:text-xl flex items-center justify-center border-l border-black  w-[110px] sm:w-[150px] hover:bg-red hover:text-white transition-all">
 				<svg class="mr-1 h-[9px] sm:h-[14px]" fill="none" height="14" viewBox="0 0 10 14" width="10"
 					xmlns="http://www.w3.org/2000/svg">
-					<g fill="#000">
+					<g fill="currentColor">
 						<path d="m0 0h10v2h-10z" />
 						<path d="m0 6h10v2h-10z" />
 						<path d="m0 12h10v2h-10z" />
@@ -55,9 +54,19 @@
 			</button>
 		</nav>
 		<div x-transition.opacity x-show="open"
-			class="pt-[38px] sm:pt-[58px] fixed bg-white top-0 left-0 w-full h-full bg-pattern">
-			TBD
+			class="pt-[38px] sm:pt-[58px] fixed bg-white top-0 left-0 w-full h-full overflow-y-auto bg-pattern z-10 global-menu">
+			<ul>
+				<li><a target="_blank" rel="noopener noreferrer" href="https://passmarket.yahoo.co.jp/event/show/detail/02y81p2r6ab31.html" target="_blank"
+						rel="noopener noreferrer"><span>🎫チケット</span>TICKETS</a>
+				</li>
+				<li><a @click="open=false" href="/2024hiroshima/#schedule"><span>📅日程</span>SCHEDULE</a></li>
+				<li><a @click="open=false" href="/2024hiroshima/#guest-speaker"><span>🎤ゲストスピーカー</span>GUEST SPEAKER</a></li>
+				<li><a target="_blank" rel="noopener noreferrer" href="https://blog.yapcjapan.org/"><span>📝️ブログ</span>BlOG</a>
+				</li>
+				<li><a target="_blank" rel="noopener noreferrer"
+						href="https://japan.perlassociation.org/entry/yapc/code_of_conduct"><span>⚖️行動規範</span>Code of
+						Conduct</a></li>
+			</ul>
 		</div>
-		-->
 	</div>
-	<div id="content">
+	<div id="content">