Skip to content

Commit 5967bc8

Browse files
mucho613mucho613
committed
スポンサーセクションの余白を調整
1 parent 58ad24f commit 5967bc8

File tree

1 file changed

+110
-108
lines changed

1 file changed

+110
-108
lines changed

‎_includes/top/sections/sponsor.html

Lines changed: 110 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -4,123 +4,125 @@
44
{% assign inkind_sponsors = site.data.sponsors | where: "type", "inkind" %}
55
{% assign individual_sponsors = site.data.sponsors | where: "type", "individual" %}
66

7-
<h2 class="text-4xl text-center">
8-
スポンサー
9-
<span class="block mt-5 text-2xl">SPONSOR</span>
10-
</h2>
7+
<section class="max-w-5xl mx-auto px-4 sm:px-8">
8+
<h2 class="text-4xl text-center">
9+
スポンサー
10+
<span class="block mt-5 text-2xl">SPONSOR</span>
11+
</h2>
1112

12-
<h3 class="text-2xl mt-20 mx-8 text-center mb-4">ゴールドスポンサー
13-
<span class="block text-base mt-1">GOLD SPONSOR</span>
14-
</h3>
15-
<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl w-full mx-auto">
16-
{% for sponsor in gold_sponsors %}
17-
{% if sponsor.link %}
18-
<a
19-
class="w-full flex flex-col mb-5 transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
20-
style="transform-style: preserve-3d;"
21-
href="{{ sponsor.link }}"
22-
target="_blank"
23-
rel="noopener noreferrer"
24-
>
25-
<div class="flex-grow w-full flex items-center justify-center">
26-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
13+
<h3 class="text-2xl mt-20 text-center mb-4">ゴールドスポンサー
14+
<span class="block text-base mt-1">GOLD SPONSOR</span>
15+
</h3>
16+
<div class="flex justify-center flex-wrap gap-x-8 max-w-3xl w-full mx-auto">
17+
{% for sponsor in gold_sponsors %}
18+
{% if sponsor.link %}
19+
<a
20+
class="w-full flex flex-col mb-5 transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
21+
style="transform-style: preserve-3d;"
22+
href="{{ sponsor.link }}"
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
>
26+
<div class="flex-grow w-full flex items-center justify-center">
27+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
28+
</div>
29+
</a>
30+
{% else %}
31+
<div class="w-full flex flex-col mb-5">
32+
<div class="flex-grow w-full flex items-center justify-center">
33+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
34+
</div>
2735
</div>
28-
</a>
29-
{% else %}
30-
<div class="w-full flex flex-col mb-5">
31-
<div class="flex-grow w-full flex items-center justify-center">
32-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
33-
</div>
34-
</div>
35-
{% endif %}
36-
{% endfor %}
37-
</div>
36+
{% endif %}
37+
{% endfor %}
38+
</div>
3839

39-
<h3 class="text-2xl mt-20 mx-8 text-center mb-4">シルバースポンサー
40-
<span class="block text-base mt-1">SILVER SPONSOR</span>
41-
</h3>
40+
<h3 class="text-2xl mt-20 text-center mb-4">シルバースポンサー
41+
<span class="block text-base mt-1">SILVER SPONSOR</span>
42+
</h3>
4243

43-
<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
44-
{% for sponsor in silver_sponsors %}
45-
{% if sponsor.link %}
46-
<a
47-
class="max-w-[{{500 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5 transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
48-
style="transform-style: preserve-3d;"
49-
href="{{ sponsor.link }}"
50-
target="_blank"
51-
rel="noopener noreferrer"
52-
>
53-
<div class="flex-grow w-full flex items-center justify-center">
54-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
55-
</div>
56-
</a>
57-
{% else %}
58-
<div class="max-w-[{{500 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5">
59-
<div class="flex-grow w-full flex items-center justify-center">
60-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
44+
<div class="flex justify-center flex-wrap gap-x-8 max-w-3xl mx-auto">
45+
{% for sponsor in silver_sponsors %}
46+
{% if sponsor.link %}
47+
<a
48+
class="max-w-[{{500 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5 transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
49+
style="transform-style: preserve-3d;"
50+
href="{{ sponsor.link }}"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
>
54+
<div class="flex-grow w-full flex items-center justify-center">
55+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
56+
</div>
57+
</a>
58+
{% else %}
59+
<div class="max-w-[{{500 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5">
60+
<div class="flex-grow w-full flex items-center justify-center">
61+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
62+
</div>
6163
</div>
62-
</div>
63-
{% endif %}
64-
{% endfor %}
65-
</div>
64+
{% endif %}
65+
{% endfor %}
66+
</div>
6667

67-
<h3 class="text-2xl mt-20 mx-8 text-center mb-4">ブロンズスポンサー
68-
<span class="block text-base mt-1">BRONZE SPONSOR</span>
69-
</h3>
68+
<h3 class="text-2xl mt-20 text-center mb-4">ブロンズスポンサー
69+
<span class="block text-base mt-1">BRONZE SPONSOR</span>
70+
</h3>
7071

71-
<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
72-
{% for sponsor in bronze_sponsors %}
73-
{% if sponsor.link %}
74-
<a
75-
class="max-w-[{{300 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5 transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
76-
style="transform-style: preserve-3d;"
77-
href="{{ sponsor.link }}"
78-
target="_blank"
79-
rel="noopener noreferrer"
80-
>
81-
<div class="flex-grow w-full flex items-center justify-center">
82-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
72+
<div class="flex justify-center flex-wrap gap-x-8 max-w-3xl mx-auto">
73+
{% for sponsor in bronze_sponsors %}
74+
{% if sponsor.link %}
75+
<a
76+
class="max-w-[{{300 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5 transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
77+
style="transform-style: preserve-3d;"
78+
href="{{ sponsor.link }}"
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
>
82+
<div class="flex-grow w-full flex items-center justify-center">
83+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
84+
</div>
85+
</a>
86+
{% else %}
87+
<div class="max-w-[{{300 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5">
88+
<div class="flex-grow w-full flex items-center justify-center">
89+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
90+
</div>
8391
</div>
84-
</a>
85-
{% else %}
86-
<div class="max-w-[{{300 | times:sponsor.logo_scale | round}}px] w-full flex flex-col mb-5">
87-
<div class="flex-grow w-full flex items-center justify-center">
88-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ">
89-
</div>
90-
</div>
91-
{% endif %}
92-
{% endfor %}
93-
</div>
92+
{% endif %}
93+
{% endfor %}
94+
</div>
9495

95-
<h3 class="text-2xl mt-20 mx-8 text-center mb-4">インカインドスポンサー
96-
<span class="block text-base mt-1">IN-KIND SPONSOR</span>
97-
</h3>
96+
<h3 class="text-2xl mt-20 text-center mb-4">インカインドスポンサー
97+
<span class="block text-base mt-1">IN-KIND SPONSOR</span>
98+
</h3>
9899

99-
<div class="flex justify-center flex-wrap gap-x-8 gap-y-10 px-8 max-w-3xl mx-auto">
100-
{% for sponsor in inkind_sponsors %}
101-
{% if sponsor.link %}
102-
<a
103-
class="max-w-[{{270 | times:sponsor.logo_scale | round}}px] w-full flex flex-col transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
104-
style="transform-style: preserve-3d;"
105-
href="{{ sponsor.link }}"
106-
target="_blank" rel="noopener noreferrer"
107-
>
108-
<div class="flex-grow w-full flex items-center justify-center">
109-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | append: "(" | append: sponsor.tool | append:")" | strip_html }}のロゴ">
110-
</div>
111-
<p class="w-full text-center break-keep">{{ sponsor.tool }}<wbr>のご提供</p>
112-
</a>
113-
{% else %}
114-
<div class="max-w-[{{270 | times:sponsor.logo_scale | round}}px] w-full flex flex-col">
115-
<div class="flex-grow w-full flex items-center justify-center">
116-
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | append: "(" | append: sponsor.tool | append:")" | strip_html }}のロゴ">
100+
<div class="flex justify-center flex-wrap gap-x-8 gap-y-10 max-w-3xl mx-auto">
101+
{% for sponsor in inkind_sponsors %}
102+
{% if sponsor.link %}
103+
<a
104+
class="max-w-[{{270 | times:sponsor.logo_scale | round}}px] w-full flex flex-col transition-all duration-200 hover:opacity-70 hover:scale-105 cursor-pointer"
105+
style="transform-style: preserve-3d;"
106+
href="{{ sponsor.link }}"
107+
target="_blank" rel="noopener noreferrer"
108+
>
109+
<div class="flex-grow w-full flex items-center justify-center">
110+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | append: "(" | append: sponsor.tool | append:")" | strip_html }}のロゴ">
111+
</div>
112+
<p class="w-full text-center break-keep">{{ sponsor.tool }}<wbr>のご提供</p>
113+
</a>
114+
{% else %}
115+
<div class="max-w-[{{270 | times:sponsor.logo_scale | round}}px] w-full flex flex-col">
116+
<div class="flex-grow w-full flex items-center justify-center">
117+
<img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | append: "(" | append: sponsor.tool | append:")" | strip_html }}のロゴ">
118+
</div>
119+
<p class="w-full text-center break-keep">{{ sponsor.tool }}<wbr>のご提供</p>
117120
</div>
118-
<p class="w-full text-center break-keep">{{ sponsor.tool }}<wbr>のご提供</p>
119-
</div>
120-
{% endif %}
121-
{% endfor %}
122-
</div>
121+
{% endif %}
122+
{% endfor %}
123+
</div>
123124

124-
<div class="max-w-5xl mx-auto px-8 mb-8">
125-
{% include button.html href="/sponsorship/list/" label="スポンサー一覧はこちら" %}
126-
</div>
125+
<div class="mx-auto mb-8">
126+
{% include button.html href="/sponsorship/list/" label="スポンサーの紹介を見る" %}
127+
</div>
128+
</section>

0 commit comments

Comments
 (0)