Merge pull request #250 from mitou/endorsement

add endorsements section with sponsor quotes and logos

Author: yasulab

_data/endorsements.yml

@@ -0,0 +1,12 @@
+# 推薦の声（スポンサーコメント）
+- name: "堀内 敏明"
+  title: "グループ専務執行役員<br>グループ技術者採用・技術広報担当<br>グループ研究開発本部長"
+  photo: "endorsements/horiuchi.webp"
+  quote: "GMOインターネットグループは、次世代のインターネットを創る人材を育み、日本の技術力全体の発展に貢献することを、企業として極めて重要な取り組みだと考えています。その強い想いから、独創的な発想と技術への挑戦を支える未踏ジュニアに、プラチナスポンサーとして参画しています。本プログラムを通じて若い才能が大きく花開き、将来、日本の技術力を力強く牽引する存在へと成長していくことを心から期待しています。"
+  sponsor_id: "gmo"
+
+- name: "井口 信和"
+  title: "副学長補佐・学部長代理・教授"
+  photo: "endorsements/iguchi.webp"
+  quote: "未踏ジュニアは、若い才能が自由な発想で思い切り挑戦できる貴重な環境です。同じ志を持つ仲間と出会い、切磋琢磨した経験は、一人ひとりの確かな成長へとつながります。近畿大学情報学部（KDIX）は、未来を担う若い世代の挑戦を何より大切に考え、スポンサーとして未踏ジュニアの活動を全力で応援しています。"
+  sponsor_id: "kindai"

_data/sponsors.yml

@@ -4,13 +4,15 @@
 #   link:    法人またはプロダクトへのリンク
 #   link_en: 法人またはプロダクトへのリンク (英語版。無い場合は上記 link が適用されます)
 
-- name: GMOインターネットグループ株式会社
+- id: gmo
+  name: GMOインターネットグループ株式会社
   img:  2025/gmo.webp
   type: platinum
   link:    https://www.gmo.jp/
   link_en: https://www.gmo.jp/en/
 
-- name: 近畿大学情報学部
+- id: kindai
+  name: 近畿大学情報学部
   img:  2025/kindai.webp
   type: platinum
   link:    https://www.kindai.ac.jp/informatics/

_includes/endorsements.html

@@ -0,0 +1,31 @@
+{% if site.data.endorsements.size > 0 %}
+<section id="endorsements">
+  <h2 {% if page.layout == "default" %}class="heading-line"{% endif %}>
+    <a href='#endorsements'><i class="far fa-thumbs-up green"></i></a>
+    推薦の声
+  </h2>
+  <div class="endorsements-list flex">
+    {% for endorsement in site.data.endorsements %}
+    {% assign sponsor = site.data.sponsors | where: "id", endorsement.sponsor_id | first %}
+    <div class="endorsement-card">
+      <div class="endorsement-card-head">
+        <div class="endorsement-person">
+          <img src="/assets/img/spinner.svg" data-src="/assets/img/{{ endorsement.photo }}" alt="{{ endorsement.name }}さんの写真" class="lazyload endorsement-photo" loading="lazy">
+          <div class="endorsement-meta">
+            <p class="endorsement-name">{{ endorsement.name }}</p>
+            <p class="endorsement-title">{{ endorsement.title }}</p>
+            <a href="{{ sponsor.link }}" class="endorsement-company" target="_blank" rel="noopener">{{ sponsor.name }}</a>
+          </div>
+        </div>
+        <div class="endorsement-logo">
+          <a href="{{ sponsor.link }}" target="_blank" rel="noopener">
+            <img src="/assets/img/spinner.svg" data-src="/assets/img/sponsors/{{ sponsor.img }}" alt="{{ sponsor.name }} ロゴ" class="lazyload" loading="lazy">
+          </a>
+        </div>
+      </div>
+      <p class="endorsement-quote">{{ endorsement.quote }}</p>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}

_includes/sponsor-logos.html

@@ -0,0 +1,15 @@
+<section id="sponsor-logos">
+  <div class='flex'>
+    {% for sponsor in site.data.sponsors %}
+    <a href="{{ sponsor.link }}" target="_blank">
+      {% if sponsor.type == 'platinum' %}
+      <img src="/assets/img/spinner.svg" data-src="/assets/img/sponsors/{{ sponsor.img }}" alt="{{ sponsor.name }}" class="lazyload sponsor-logo-platinum">
+      {% elsif sponsor.type == 'gold' %}
+      <img src="/assets/img/spinner.svg" data-src="/assets/img/sponsors/{{ sponsor.img }}" alt="{{ sponsor.name }}" class="lazyload sponsor-logo-gold">
+      {% endif %}
+    </a>
+    {% endfor %}
+  </div>
+
+  <p>未踏ジュニアは<a href='#sponsors'>スポンサー</a>からの支援によって運営されています。</p>
+</section>

assets/css/main.scss

@@ -7,6 +7,7 @@ $shadow-color: rgba($main-color,0.3);
 $sub-color: #ffed4d; // Yellow
 $lightgray: #eff2f6; // Light gray
 $phone-width:  760px;
+$tablet-width: 1366px;
 $header-phone: 940px;
 * {
   box-sizing: border-box;
@@ -480,7 +481,7 @@ footer{
     border-top: solid 2px $main-color;
     border-bottom: solid 2px $main-color;
     background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba($main-color, 0.1) 4px, rgba($main-color, 0.1) 10px );
-    margin: 4em 0 1em;
+    margin: 2.8em 0 0.9em;
     &::before{
       content: '';
       clear: both;
@@ -490,7 +491,7 @@ footer{
   h3{
     border-left: solid 6px $main-color;
     background-color: rgba($main-color, 0.05);
-    margin-top: 2.4em;
+    margin-top: 1.8em;
     padding: 8px;
   }
   ul{
@@ -1085,6 +1086,31 @@ footer{
   margin: auto; // Center horizontally
   height: auto; // Maintain aspect ratio
 }
+/* Tighten spacing between sponsor logos and endorsements */
+#sponsor-logos {
+  padding-bottom: 8px;
+}
+#endorsements {
+  padding-top: 8px;
+}
+/* Match post content width */
+.post #sponsor-logos,
+.post #endorsements {
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+/* Use full width cards inside post layout */
+.post #endorsements .endorsements-list {
+  flex-direction: column;
+}
+.post #endorsements .endorsement-card {
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
 
 /* Ensure the parent container of the logos centers them vertically and horizontally */
 #sponsor-logos .flex {
@@ -1109,6 +1135,110 @@ footer{
   width: 120px;
 }
 
+/* Endorsements */
+#endorsements .endorsements-list {
+  justify-content: center;
+  gap: 16px;
+}
+.endorsement-card {
+  background-color: #fff;
+  box-shadow: 0 0 6px 1px $shadow-color;
+  border-radius: 8px;
+  margin: 8px;
+  padding: 20px;
+  text-align: left;
+  width: calc(50% - 16px);
+  display: flex;
+  flex-direction: column;
+}
+.endorsement-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.endorsement-person {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  margin-right: auto;
+}
+.endorsement-photo {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  object-fit: cover;
+  background-color: $lightgray;
+}
+.endorsement-meta p {
+  margin: 0;
+  line-height: 1.4em;
+}
+.endorsement-name {
+  font-weight: 700;
+}
+.endorsement-title {
+  font-size: 0.85em;
+  color: #666;
+  white-space: pre-line;
+}
+.endorsement-company {
+  display: inline-block;
+  font-size: 0.85em;
+  margin-top: 2px;
+}
+.endorsement-logo img {
+  width: 200px;
+  height: auto;
+  object-fit: contain;
+}
+.endorsement-quote {
+  margin-top: 16px;
+  color: #555;
+  position: relative;
+}
+.endorsement-quote::before {
+  content: "“";
+  color: $main-color;
+  margin-right: 4px;
+  font-weight: 700;
+}
+.endorsement-quote::after {
+  content: "”";
+  color: $main-color;
+  margin-left: 4px;
+  font-weight: 700;
+}
+@media screen and (max-width:$tablet-width) and (min-width: ($phone-width + 1)) {
+  #endorsements .endorsement-card {
+    width: calc(90% - 16px);
+  }
+}
+@media screen and (max-width: $phone-width) {
+  .endorsement-card {
+    width: calc(100% - 16px);
+    padding: 16px;
+  }
+  .endorsement-card-head {
+    justify-content: flex-start;
+  }
+  .endorsement-photo {
+    width: 64px;
+    height: 64px;
+  }
+  .endorsement-logo {
+    flex-basis: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .endorsement-logo img {
+    width: 200px;
+  }
+}
+
 .sv{
   overflow: hidden;
   @media screen and (max-width: $phone-width) {

assets/img/endorsements/horiuchi.webp

@@ -13,6 +13,8 @@ description: 未踏ジュニアへの応募から採択までの流れをまと
 
 {% include agenda.html %}
 
+{% include endorsements.html %}
+
 
 ## [<i class="fa-light fa-mailbox"></i>](#apply) 応募から採択までの流れ {#apply}
 

assets/img/endorsements/iguchi.webp

@@ -63,21 +63,9 @@ this_year: 2025
   </div>
 </section>
 
-<section id="sponsor-logos">
-  <div class='flex'>
-    {% for sponsor in site.data.sponsors %}
-    <a href="{{ sponsor.link }}" target="_blank">
-      {% if sponsor.type == 'platinum' %}
-      <img src="/assets/img/spinner.svg" data-src="/assets/img/sponsors/{{ sponsor.img }}" alt="{{ sponsor.name }}" class="lazyload sponsor-logo-platinum">
-      {% elsif sponsor.type == 'gold' %}
-      <img src="/assets/img/spinner.svg" data-src="/assets/img/sponsors/{{ sponsor.img }}" alt="{{ sponsor.name }}" class="lazyload sponsor-logo-gold">
-      {% endif %}
-    </a>
-    {% endfor %}
-  </div>
+{% include sponsor-logos.html %}
 
-  <p>未踏ジュニアは<a href='#sponsors'>スポンサー</a>からの支援によって運営されています。</p>
-</section>
+{% include endorsements.html %}
 
 
 <div id='media'><!-- ID for outdated links from outeside: media -> news --></div>