Skip to content

Commit e156980

Browse files
zorexsalvozorexsalvo
authored
Merge pull request #58 from zorexsalvo/fix/merch-page-responsiveness
Fix/merch page responsiveness
2 parents 858e0a9 + fad0c6a commit e156980

File tree

2 files changed

+715
-46
lines changed

2 files changed

+715
-46
lines changed

‎app/home/templates/internal/pages/merchandise.html‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{% load static %}
22

33
<div class="max-w-6xl mx-auto px-[4%] pt-40 pb-18">
4-
<h2 class="text-5xl my-10 font-bold font-td_pinoy text-orange-2">
4+
<h2 class="text-3xl sm:text-5xl my-10 font-bold font-td_pinoy text-orange-2">
55
Merchandise
66
</h2>
77

8-
<div class="font-nunito text-brown-2 text-lg mb-12 space-y-4">
8+
<div class="font-nunito text-brown-2 text-base sm:text-lg mb-12 space-y-4">
99
<p>
1010
Thank you for your interest in PythonAsia 2026 merchandise! Browse our exclusive collection
1111
below — from apparel and accessories to Filipino-inspired keepsakes.
@@ -35,7 +35,7 @@ <h2 class="text-5xl my-10 font-bold font-td_pinoy text-orange-2">
3535
</div>
3636
</div>
3737

38-
<div class="grid grid-cols-3 sm:grid-cols-4 gap-4">
38+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
3939

4040
<div class="bg-offwhite-2 rounded-2xl overflow-hidden shadow-sm flex flex-col">
4141
<div class="aspect-square bg-cream-1 flex items-center justify-center p-4">
@@ -46,10 +46,10 @@ <h2 class="text-5xl my-10 font-bold font-td_pinoy text-orange-2">
4646
loading="lazy"
4747
>
4848
</div>
49-
<div class="p-4 flex flex-col flex-1">
50-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Kalinga T-Shirt</h3>
49+
<div class="p-3 sm:p-4 flex flex-col flex-1">
50+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Kalinga T-Shirt</h3>
5151
<p class="font-nunito text-brown-2 text-sm mt-1">Maroon · XS–2XL</p>
52-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 500.00</p>
52+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱500.00</p>
5353
</div>
5454
</div>
5555

@@ -62,10 +62,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Kalinga T-
6262
loading="lazy"
6363
>
6464
</div>
65-
<div class="p-4 flex flex-col flex-1">
66-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">PythonAsia 2026 T-Shirt</h3>
65+
<div class="p-3 sm:p-4 flex flex-col flex-1">
66+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">PythonAsia 2026 T-Shirt</h3>
6767
<p class="font-nunito text-brown-2 text-sm mt-1">Conference Type · White · XS–2XL</p>
68-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 500.00</p>
68+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱500.00</p>
6969
</div>
7070
</div>
7171

@@ -78,9 +78,9 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">PythonAsia
7878
loading="lazy"
7979
>
8080
</div>
81-
<div class="p-4 flex flex-col flex-1">
82-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Leather Tray</h3>
83-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 450.00</p>
81+
<div class="p-3 sm:p-4 flex flex-col flex-1">
82+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Leather Tray</h3>
83+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱450.00</p>
8484
</div>
8585
</div>
8686

@@ -93,10 +93,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Leather Tr
9393
loading="lazy"
9494
>
9595
</div>
96-
<div class="p-4 flex flex-col flex-1">
97-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Notepad</h3>
96+
<div class="p-3 sm:p-4 flex flex-col flex-1">
97+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Notepad</h3>
9898
<p class="font-nunito text-brown-2 text-sm mt-1">80 Sheets · 4×4</p>
99-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 100.00</p>
99+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱100.00</p>
100100
</div>
101101
</div>
102102

@@ -109,10 +109,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Notepad</h
109109
loading="lazy"
110110
>
111111
</div>
112-
<div class="p-4 flex flex-col flex-1">
113-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Notepad Design 1</h3>
112+
<div class="p-3 sm:p-4 flex flex-col flex-1">
113+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Notepad Design 1</h3>
114114
<p class="font-nunito text-brown-2 text-sm mt-1">40 Sheets · 3×3</p>
115-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 80.00</p>
115+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱80.00</p>
116116
</div>
117117
</div>
118118

@@ -125,10 +125,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Notepad De
125125
loading="lazy"
126126
>
127127
</div>
128-
<div class="p-4 flex flex-col flex-1">
129-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Notepad Design 2</h3>
128+
<div class="p-3 sm:p-4 flex flex-col flex-1">
129+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Notepad Design 2</h3>
130130
<p class="font-nunito text-brown-2 text-sm mt-1">40 Sheets · 3×3</p>
131-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 80.00</p>
131+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱80.00</p>
132132
</div>
133133
</div>
134134

@@ -141,9 +141,9 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Notepad De
141141
loading="lazy"
142142
>
143143
</div>
144-
<div class="p-4 flex flex-col flex-1">
145-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Acrylic Keychain PythonAsia 2026</h3>
146-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 100.00</p>
144+
<div class="p-3 sm:p-4 flex flex-col flex-1">
145+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Acrylic Keychain PythonAsia 2026</h3>
146+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱100.00</p>
147147
</div>
148148
</div>
149149

@@ -156,9 +156,9 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Acrylic Ke
156156
loading="lazy"
157157
>
158158
</div>
159-
<div class="p-4 flex flex-col flex-1">
160-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Acrylic Keychain Palayok</h3>
161-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 100.00</p>
159+
<div class="p-3 sm:p-4 flex flex-col flex-1">
160+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Acrylic Keychain Palayok</h3>
161+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱100.00</p>
162162
</div>
163163
</div>
164164

@@ -171,9 +171,9 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Acrylic Ke
171171
loading="lazy"
172172
>
173173
</div>
174-
<div class="p-4 flex flex-col flex-1">
175-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Refrigerator Magnet</h3>
176-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 150.00</p>
174+
<div class="p-3 sm:p-4 flex flex-col flex-1">
175+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">Refrigerator Magnet</h3>
176+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱150.00</p>
177177
</div>
178178
</div>
179179

@@ -186,9 +186,9 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">Refrigerat
186186
loading="lazy"
187187
>
188188
</div>
189-
<div class="p-4 flex flex-col flex-1">
190-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">3D PythonPH Clicker Fidget</h3>
191-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 250.00</p>
189+
<div class="p-3 sm:p-4 flex flex-col flex-1">
190+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">3D PythonPH Clicker Fidget</h3>
191+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱250.00</p>
192192
</div>
193193
</div>
194194

@@ -201,10 +201,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">3D PythonP
201201
loading="lazy"
202202
>
203203
</div>
204-
<div class="p-4 flex flex-col flex-1">
205-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">3D Palayok Clicker Fidget</h3>
204+
<div class="p-3 sm:p-4 flex flex-col flex-1">
205+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">3D Palayok Clicker Fidget</h3>
206206
<p class="font-nunito text-brown-2 text-sm mt-1">Large</p>
207-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 350.00</p>
207+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱350.00</p>
208208
</div>
209209
</div>
210210

@@ -217,10 +217,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">3D Palayok
217217
loading="lazy"
218218
>
219219
</div>
220-
<div class="p-4 flex flex-col flex-1">
221-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">3D Palayok Clicker Fidget</h3>
220+
<div class="p-3 sm:p-4 flex flex-col flex-1">
221+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">3D Palayok Clicker Fidget</h3>
222222
<p class="font-nunito text-brown-2 text-sm mt-1">Small</p>
223-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 300.00</p>
223+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱300.00</p>
224224
</div>
225225
</div>
226226

@@ -233,10 +233,10 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">3D Palayok
233233
loading="lazy"
234234
>
235235
</div>
236-
<div class="p-4 flex flex-col flex-1">
237-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">PythonAsia Pattern Style Customized Socks</h3>
236+
<div class="p-3 sm:p-4 flex flex-col flex-1">
237+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">PythonAsia Pattern Style Customized Socks</h3>
238238
<p class="font-nunito text-brown-2 text-sm mt-1">Beige</p>
239-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 350.00</p>
239+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱350.00</p>
240240
</div>
241241
</div>
242242

@@ -249,17 +249,17 @@ <h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">PythonAsia
249249
loading="lazy"
250250
>
251251
</div>
252-
<div class="p-4 flex flex-col flex-1">
253-
<h3 class="font-bantayog font-bold text-brown-1 text-lg leading-snug">PythonPH Logo Pattern Style Customized Socks</h3>
252+
<div class="p-3 sm:p-4 flex flex-col flex-1">
253+
<h3 class="font-bantayog font-bold text-brown-1 text-sm sm:text-base leading-snug">PythonPH Logo Pattern Style Customized Socks</h3>
254254
<p class="font-nunito text-brown-2 text-sm mt-1">Black</p>
255-
<p class="font-nunito font-bold text-orange-2 text-base mt-auto pt-3">Php 320.00</p>
255+
<p class="font-nunito font-bold text-orange-2 text-sm sm:text-base mt-auto pt-3">₱320.00</p>
256256
</div>
257257
</div>
258258

259259
</div>
260260

261261
<div class="mt-16 flex flex-col items-center">
262-
<h3 class="font-bantayog font-bold text-brown-1 text-2xl mb-6">Size Chart</h3>
262+
<h3 class="font-bantayog font-bold text-brown-1 text-2xl mb-6">T-Shirt Size Chart</h3>
263263
<img
264264
src="{% static 'img/merchandise/size-chart.png' %}"
265265
alt="Merchandise size chart"

0 commit comments

Comments
 (0)