Merge pull request #38 from coderdojo-japan/add-sponsor-section

TOPにスポンサーロゴを追加

Author: Fukusan64

_data/sponsors.yml

@@ -1,62 +1,83 @@
 # - id:   ID（スポンサーページのアンカータグになります）
 #   name: スポンサー名
+#   tool: スポンサー提供ツール名（inkindの場合使用）
 #   logo: ロゴ画像ファイルのパス
 #   link: ロゴ画像をクリックした際のリンク先
 #   type: スポンサー種別（platinum, gold, silver, bronze, inkind, individual）
 #   message:  スポンサー紹介文
+#   logo_scale: ロゴ画像の拡大率（1が等倍、0.5が半分のサイズ）
 
 - id: cygames
   name: 株式会社<wbr>Cygames
-  logo:
+  logo: /img/sponsors/Cygames.jpg
   link:
   type: gold
   message:
+  logo_scale: 1
 
 - id: sakura_internet
   name: さくら<wbr>インターネット<wbr>株式会社
-  logo:
+  logo: /img/sponsors/sakura_internet.png
   link:
   type: silver
   message:
+  logo_scale: 1
 
 - id: sunnyside_systems
   name: サニーサイド<wbr>システムズ<wbr>合同会社
-  logo:
+  logo: /img/sponsors/Sunnyside_systems.png
   link:
   type: bronze
   message:
+  logo_scale: 1
 
 - id: dojoletter
   name: DojoLetter<wbr>編集部
-  logo:
+  logo: /img/sponsors/DojoLetter.png
   link:
   type: bronze
   message:
+  logo_scale: 0.8
 
 - id: unique_i_net
   name: ユニーク･<wbr>アイネット<wbr>株式会社
-  logo:
+  logo: /img/sponsors/Unique_i_net.png
   link:
   type: bronze
   message:
+  logo_scale: 1
+
+- id: tcs
+  name: 株式会社<wbr>テクノ・<wbr>カルチャー・<wbr>システム
+  logo: /img/sponsors/TechnoCultureSystem.png
+  link:
+  type: bronze
+  message:
+  logo_scale: 0.8
 
 - id: ma
-  name: 一般社団法人<wbr>MA<wbr>（ProtoPedia）
-  logo:
+  name: 一般社団法人<wbr>MA
+  tool: ProtoPedia
+  logo: /img/sponsors/ProtoPedia.png
   link:
   type: inkind
   message:
+  logo_scale: 1
 
 - id: nulab
-  name: 株式会社<wbr>ヌーラボ<wbr>（Backlog）
-  logo:
+  name: 株式会社<wbr>ヌーラボ
+  tool: Backlog
+  logo: /img/sponsors/Nulab.png
   link:
   type: inkind
   message:
+  logo_scale: 0.8
 
 - id: yasslab
-  name: YassLab <wbr>株式会社<wbr>（Doorkeeper）
-  logo:
+  name: YassLab <wbr>株式会社
+  tool: Doorkeeper
+  logo: /img/sponsors/YassLab.png
   link:
   type: inkind
   message:
+  logo_scale: 0.9

_includes/top/sections/sponsor.html

@@ -9,54 +9,59 @@ <h2 class="text-4xl text-center">
   <span class="block mt-5 text-2xl">SPONSOR</span>
 </h2>
 
-<h3 class="text-2xl mt-10 mx-8 text-center mb-4">ゴールドスポンサー
+<h3 class="text-2xl mt-20 mx-8 text-center mb-4">ゴールドスポンサー
   <span class="block text-base mt-1">GOLD SPONSOR</span>
 </h3>
-
 <div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl w-full mx-auto">
   {% for sponsor in gold_sponsors %}
-  <div class="w-full mb-5">
-    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
-    <p class="w-full text-center break-keep text-3xl">{{ sponsor.name }}</p>
-  </div>
+    <div class="w-full flex flex-col mb-5">
+      <div class="flex-grow w-full flex items-center justify-center">
+        <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
+      </div>
+    </div>
   {% endfor %}
 </div>
 
-<h3 class="text-2xl mt-10 mx-8 text-center mb-4">シルバースポンサー
+<h3 class="text-2xl mt-20 mx-8 text-center mb-4">シルバースポンサー
   <span class="block text-base mt-1">SILVER SPONSOR</span>
 </h3>
 
 <div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
   {% for sponsor in silver_sponsors %}
-  <div class="_max-w-[500px] w-full mb-5">
-    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
-    <p class="w-full text-center break-keep text-3xl">{{ sponsor.name }}</p>
+  <div class="max-w-[{{500 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5">
+    <div class="flex-grow w-full flex items-center justify-center">
+      <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
+    </div>
   </div>
   {% endfor %}
 </div>
 
-<h3 class="text-2xl mt-10 mx-8 text-center mb-4">ブロンズスポンサー
+<h3 class="text-2xl mt-20 mx-8 text-center mb-4">ブロンズスポンサー
   <span class="block text-base mt-1">BRONZE SPONSOR</span>
 </h3>
 
 <div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
   {% for sponsor in bronze_sponsors %}
-  <div class="_max-w-[300px] w-full mb-5">
-    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
-    <p class="text-center break-keep text-3xl">{{ sponsor.name }}</p>
+  <div class="max-w-[{{300 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5">
+    <div class="flex-grow w-full flex items-center justify-center">
+      <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
+    </div>
   </div>
   {% endfor %}
 </div>
 
-<h3 class="text-2xl mt-10 mx-8 text-center mb-4">インカインドスポンサー
+<h3 class="text-2xl mt-20 mx-8 text-center mb-4">インカインドスポンサー
   <span class="block text-base mt-1">IN-KIND SPONSOR</span>
 </h3>
 
-<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
+<div class="flex justify-center flex-wrap gap-x-8 gap-y-10 px-8 max-w-3xl mx-auto">
   {% for sponsor in inkind_sponsors %}
-  <div class="_max-w-[270px] w-full mb-5">
-    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
-    <p class="w-full text-center break-keep text-3xl">{{ sponsor.name }}</p>
+  <div class="max-w-[{{270 | times:sponsor.logo_scale | round}}px] w-full flex flex-col">
+    <div class="flex-grow w-full flex items-center justify-center">
+      <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name + "("+ sponsor.tool +")" | strip_html }}のロゴ">
+    </div>
+    <p class="w-full text-center break-keep">{{ sponsor.tool }}<wbr>のご提供</p>
   </div>
   {% endfor %}
 </div>
+