From 1201b5f37ad731f1f5d4d7833d2e4d9fb7d6806c Mon Sep 17 00:00:00 2001 From: masakurapa Date: Sun, 26 Apr 2026 21:51:30 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B5?= =?UTF-8?q?=E3=83=BC=E3=83=AA=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/top/Sponsors.astro | 75 +++++++++++++ src/components/top/sponsor/GopherList.astro | 76 ++++++++++++++ src/components/top/sponsor/SponsorList.astro | 104 +++++++++++++++++++ src/components/top/sponsors.ts | 27 +++++ src/pages/index.astro | 2 + 5 files changed, 284 insertions(+) create mode 100644 src/components/top/Sponsors.astro create mode 100644 src/components/top/sponsor/GopherList.astro create mode 100644 src/components/top/sponsor/SponsorList.astro create mode 100644 src/components/top/sponsors.ts diff --git a/src/components/top/Sponsors.astro b/src/components/top/Sponsors.astro new file mode 100644 index 0000000..53fa7cf --- /dev/null +++ b/src/components/top/Sponsors.astro @@ -0,0 +1,75 @@ +--- +import SectionTitle from "../ui/SectionTitle.astro"; +import SponsorList from "./sponsor/SponsorList.astro"; +import GopherList from "./sponsor/GopherList.astro"; +import { + goldSponsors, + silverSponsors, + drinkSponsors, + lunchSponsors, + bronzeSponsors, + gopherSponsors, + toolSponsors, +} from "./sponsors"; + +if ( + goldSponsors.length === 0 && + silverSponsors.length === 0 && + drinkSponsors.length === 0 && + lunchSponsors.length === 0 && + bronzeSponsors.length === 0 && + gopherSponsors.length === 0 && + toolSponsors.length === 0 +) { + return null; +} +--- + +
+ + + スポンサー + + + + + Goルド + + シルバー + ドリンク + ランチ + ブロンズ + Gopher + ツールスポンサー +
+ + diff --git a/src/components/top/sponsor/GopherList.astro b/src/components/top/sponsor/GopherList.astro new file mode 100644 index 0000000..b48a38a --- /dev/null +++ b/src/components/top/sponsor/GopherList.astro @@ -0,0 +1,76 @@ +--- +import { Image } from "astro:assets"; +import type { Sponsor } from "../sponsors"; + +interface Props { + sponsors: Sponsor[]; +} + +const { sponsors } = Astro.props; + +if (sponsors.length === 0) { + return null; +} +--- + + + + diff --git a/src/components/top/sponsor/SponsorList.astro b/src/components/top/sponsor/SponsorList.astro new file mode 100644 index 0000000..caab01a --- /dev/null +++ b/src/components/top/sponsor/SponsorList.astro @@ -0,0 +1,104 @@ +--- +import { Image } from "astro:assets"; +import type { Sponsor } from "../sponsors"; + +interface Props { + size: "learge" | "medium" | "small"; + sponsors: Sponsor[]; +} + +const { size, sponsors } = Astro.props; + +const sizeMap = { + learge: { width: 532, height: 280 }, + medium: { width: 354, height: 164 }, + small: { width: 208, height: 100 }, +}; + +const { width, height } = sizeMap[size]; + +if (sponsors.length === 0) { + return null; +} +--- + + + + diff --git a/src/components/top/sponsors.ts b/src/components/top/sponsors.ts new file mode 100644 index 0000000..2932264 --- /dev/null +++ b/src/components/top/sponsors.ts @@ -0,0 +1,27 @@ +import type { ImageMetadata } from "astro"; + +export type Sponsor = { + name: string; + imageSrc: ImageMetadata; +}; + +export const goldSponsors: Sponsor[] = [ +]; + +export const silverSponsors: Sponsor[] = [ +]; + +export const lunchSponsors: Sponsor[] = [ +]; + +export const drinkSponsors: Sponsor[] = [ +]; + +export const bronzeSponsors: Sponsor[] = [ +]; + +export const gopherSponsors: Sponsor[] = [ +]; + +export const toolSponsors: Sponsor[] = [ +]; diff --git a/src/pages/index.astro b/src/pages/index.astro index abd914e..caa7429 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,7 @@ import About from "../components/top/About.astro"; import MainVisual from "../components/top/MainVisual.astro"; import SponsorRecruitment from "../components/top/SponsorRecruitment.astro"; import News from "../components/top/News.astro"; +import Sponsors from "../components/top/Sponsors.astro"; import Layout from "../layouts/Layout.astro"; --- @@ -12,5 +13,6 @@ import Layout from "../layouts/Layout.astro"; + From ee480f96f972b24b8b2159055d0ca8204be63fd7 Mon Sep 17 00:00:00 2001 From: masakurapa Date: Tue, 5 May 2026 02:13:13 +0900 Subject: [PATCH 2/7] fix style --- src/components/top/sponsor/GopherList.astro | 22 +++++++-- src/components/top/sponsor/SponsorList.astro | 47 ++++++++++++++++++-- 2 files changed, 61 insertions(+), 8 deletions(-) diff --git a/src/components/top/sponsor/GopherList.astro b/src/components/top/sponsor/GopherList.astro index b48a38a..81ed663 100644 --- a/src/components/top/sponsor/GopherList.astro +++ b/src/components/top/sponsor/GopherList.astro @@ -42,14 +42,15 @@ if (sponsors.length === 0) { } ul { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + display: grid; + grid-template-columns: repeat(5, auto); list-style: none; text-align: center; padding: 0; gap: 40px; + width: fit-content; + max-width: 100%; + margin: 0 auto; } li { @@ -68,8 +69,21 @@ if (sponsors.length === 0) { margin: 0 auto; } + @media screen and (max-width: 1150px) { + ul { + grid-template-columns: repeat(4, auto); + } + } + + @media screen and (max-width: 920px) { + ul { + grid-template-columns: repeat(3, auto); + } + } + @media screen and (max-width: 768px) { ul { + grid-template-columns: repeat(2, auto); gap: 8px; } } diff --git a/src/components/top/sponsor/SponsorList.astro b/src/components/top/sponsor/SponsorList.astro index caab01a..b7b89c5 100644 --- a/src/components/top/sponsor/SponsorList.astro +++ b/src/components/top/sponsor/SponsorList.astro @@ -50,20 +50,29 @@ if (sponsors.length === 0) { } ul { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + display: grid; list-style: none; text-align: center; padding: 0; gap: 20px; + margin: 0 auto; + width: fit-content; + max-width: 100%; } ul[data-size="learge"] { + grid-template-columns: repeat(2, auto); gap: 40px; } + ul[data-size="medium"] { + grid-template-columns: repeat(3, auto); + } + + ul[data-size="small"] { + grid-template-columns: repeat(5, auto); + } + ul[data-size="learge"] img { cursor: pointer; } @@ -72,22 +81,52 @@ if (sponsors.length === 0) { max-width: 100%; } + @media screen and (max-width: 1150px) { + ul[data-size="learge"] { + grid-template-columns: repeat(1, auto); + } + + ul[data-size="medium"] { + grid-template-columns: repeat(2, auto); + } + + ul[data-size="small"] { + grid-template-columns: repeat(4, auto); + } + } + + @media screen and (max-width: 920px) { + ul[data-size="small"] { + grid-template-columns: repeat(3, auto); + } + } + @media screen and (max-width: 768px) { ul { gap: 24px; } + ul[data-size="learge"] { + grid-template-columns: repeat(1, auto); + gap: 24px; + } + ul[data-size="learge"] img { width: 342px; height: 160px; } + ul[data-size="medium"] { + grid-template-columns: repeat(1, auto); + } + ul[data-size="medium"] img { width: 262px; height: 64px; } ul[data-size="small"] { + grid-template-columns: repeat(2, auto); column-gap: 16px; row-gap: 8px; } From 1f8f1fcb2cc0a7b3e35d8e22ae874cda92f66844 Mon Sep 17 00:00:00 2001 From: masakurapa Date: Thu, 7 May 2026 21:59:33 +0900 Subject: [PATCH 3/7] add Dialog --- src/components/top/Sponsors.astro | 24 ++- src/components/top/sponsor/Dialog.astro | 155 +++++++++++++++++++ src/components/top/sponsor/SponsorList.astro | 23 ++- src/components/ui/Tag.astro | 23 +++ 4 files changed, 216 insertions(+), 9 deletions(-) create mode 100644 src/components/top/sponsor/Dialog.astro create mode 100644 src/components/ui/Tag.astro diff --git a/src/components/top/Sponsors.astro b/src/components/top/Sponsors.astro index 53fa7cf..715cebe 100644 --- a/src/components/top/Sponsors.astro +++ b/src/components/top/Sponsors.astro @@ -32,12 +32,28 @@ if ( - + Goルド - シルバー - ドリンク - ランチ + シルバー + ドリンク + ランチ ブロンズ Gopher + .sponsor-dialog { + padding: 0; + border-radius: 32px; + border: none; + min-height: 480px; + } + + .sponsor-dialog-close { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--surface-secondary-dark); + color: var(--text-on-fill); + border-radius: 50%; + font-weight: 700; + position: absolute; + right: 36px; + top: 36px; + cursor: pointer; + } + + h4 { + margin: 0; + } + + .sponsor-dialog-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 600px; + } + + .sponsor-dialog-header { + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + gap: var(--space-xxs); + padding: var(--space-m); + } + + .sponsor-dialog-body { + text-align: center; + padding: var(--space-m); + background-color: var(--surface-secondary); + } + + @media (max-width: 1024px) { + .sponsor-dialog { + width: 100%; + } + + .sponsor-dialog-content { + width: 100%; + } + + .sponsor-dialog-header { + width: 100%; + padding: 0 20px; + } + + .sponsor-dialog-close { + right: 24px; + top: 24px; + } + } + + @media (max-width: 600px) { + .sponsor-dialog { + width: 100%; + } + + .sponsor-dialog-content { + width: 100%; + } + + .sponsor-dialog-header { + width: 100%; + padding: 0 10px; + } + + .sponsor-dialog-close { + right: 24px; + top: 24px; + } + + .sponsor-dialog-body { + max-width: 100%; + } + } + + .close-icon { + display: inline; + fill: var(--text-on-fill); + width: 32px; + height: 32px; + } + + + diff --git a/src/components/top/sponsor/SponsorList.astro b/src/components/top/sponsor/SponsorList.astro index b7b89c5..4cb9827 100644 --- a/src/components/top/sponsor/SponsorList.astro +++ b/src/components/top/sponsor/SponsorList.astro @@ -1,13 +1,15 @@ --- import { Image } from "astro:assets"; import type { Sponsor } from "../sponsors"; +import Dialog from "./Dialog.astro"; interface Props { size: "learge" | "medium" | "small"; sponsors: Sponsor[]; + dialogSectionTitle?: string; } -const { size, sponsors } = Astro.props; +const { size, sponsors, dialogSectionTitle } = Astro.props; const sizeMap = { learge: { width: 532, height: 280 }, @@ -37,7 +39,22 @@ if (sponsors.length === 0) { height={height} loading="lazy" priority + style={sponsor.dialog ? "cursor:pointer" : null} + onclick={ + sponsor.dialog + ? `document.getElementById('${sponsor.dialog.openId}')?.showModal()` + : null + } /> + {sponsor.dialog ? ( + <> + + + ) : null} )) } @@ -73,10 +90,6 @@ if (sponsors.length === 0) { grid-template-columns: repeat(5, auto); } - ul[data-size="learge"] img { - cursor: pointer; - } - li { max-width: 100%; } diff --git a/src/components/ui/Tag.astro b/src/components/ui/Tag.astro new file mode 100644 index 0000000..2819055 --- /dev/null +++ b/src/components/ui/Tag.astro @@ -0,0 +1,23 @@ +--- +type Props = { + text: string; +}; + +const { text } = Astro.props as Props; +--- + +
+ {text} +
+ + From 41205d96efe89d46745365e8c9e360cc910f6f9a Mon Sep 17 00:00:00 2001 From: masakurapa Date: Thu, 7 May 2026 22:00:26 +0900 Subject: [PATCH 4/7] fix Sponsor type --- src/components/top/sponsors.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/top/sponsors.ts b/src/components/top/sponsors.ts index 2932264..bfb9e48 100644 --- a/src/components/top/sponsors.ts +++ b/src/components/top/sponsors.ts @@ -3,6 +3,11 @@ import type { ImageMetadata } from "astro"; export type Sponsor = { name: string; imageSrc: ImageMetadata; + dialog?: { + openId: string; + link: string; + description: string; + }; }; export const goldSponsors: Sponsor[] = [ From 4eaabb0156f0070f8b75d73585c3bf1156ec78e7 Mon Sep 17 00:00:00 2001 From: masakurapa Date: Thu, 7 May 2026 23:19:05 +0900 Subject: [PATCH 5/7] fix Dialog layout --- src/components/top/sponsor/Dialog.astro | 60 ++++++++----------------- 1 file changed, 18 insertions(+), 42 deletions(-) diff --git a/src/components/top/sponsor/Dialog.astro b/src/components/top/sponsor/Dialog.astro index 5121254..fd67002 100644 --- a/src/components/top/sponsor/Dialog.astro +++ b/src/components/top/sponsor/Dialog.astro @@ -20,7 +20,6 @@ const { openId, sponsorSectionTitle, sponsor } = Astro.props; padding: 0; border-radius: 32px; border: none; - min-height: 480px; } .sponsor-dialog-close { @@ -34,11 +33,18 @@ const { openId, sponsorSectionTitle, sponsor } = Astro.props; border-radius: 50%; font-weight: 700; position: absolute; - right: 36px; - top: 36px; + right: 32px; + top: 32px; cursor: pointer; } + .close-icon { + display: inline; + fill: var(--text-on-fill); + width: 32px; + height: 32px; + } + h4 { margin: 0; } @@ -66,56 +72,25 @@ const { openId, sponsorSectionTitle, sponsor } = Astro.props; background-color: var(--surface-secondary); } - @media (max-width: 1024px) { - .sponsor-dialog { - width: 100%; - } - - .sponsor-dialog-content { - width: 100%; - } - + @media screen and (max-width: 768px) { .sponsor-dialog-header { - width: 100%; - padding: 0 20px; - } - - .sponsor-dialog-close { - right: 24px; - top: 24px; - } - } - - @media (max-width: 600px) { - .sponsor-dialog { - width: 100%; + padding: var(--space-m) var(--space-xs); } .sponsor-dialog-content { - width: 100%; + width: 358px; } - .sponsor-dialog-header { - width: 100%; - padding: 0 10px; + .sponsor-logo { + width: 326px; + height: 120px; } .sponsor-dialog-close { - right: 24px; - top: 24px; - } - - .sponsor-dialog-body { - max-width: 100%; + right: 16px; + top: 16px; } } - - .close-icon { - display: inline; - fill: var(--text-on-fill); - width: 32px; - height: 32px; - }