Skip to content

Commit 6408042

Browse files
iRenanMatthewiRenanMatthew
committed
feat: polish the website responsiveness from desktop to mobile for homepage and internal pages
1 parent 4de86bb commit 6408042

12 files changed

Lines changed: 178 additions & 60 deletions

File tree

‎app/home/templates/home/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
}
1717

1818
#conference-at-a-glance {
19-
background: url(/static/img/bg-conference-at-glance.png) no-repeat;
19+
background: url('{% static 'img/bg-conference-at-glance.png' %}'), #FFF9F2;
20+
background-size: contain;
21+
background-position: center;
22+
background-repeat: no-repeat;
2023
}
2124
</style>
2225
{% endblock %}

‎app/home/templates/home/sections/about-us.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h3 class="text-2xl md:text-3xl font-bold mb-6 uppercase font-bantayog">
4040
</div>
4141
<!-- 3 Days Section -->
4242
<div class="mb-12 w-full max-w-[1160px] mx-auto">
43-
<h3 class="text-5xl font-bold mb-8 font-td_pinoy text-center sm:text-left xl:text-left">3 Days, Endless
43+
<h3 class="text-4xl md:text-5xl font-bold mb-8 font-td_pinoy text-center md:text-left whitespace-wrap md:whitespace-nowrap">3 Days, Endless
4444
Possibilities</h3>
4545
<p class="text-lg leading-relaxed font-nunito text-center sm:text-left xl:text-left">
4646
Dive into three days of learning, building, and connecting with the Python community. From inspiring

‎app/home/templates/home/sections/call-for-x.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{% load static %}
2-
<section id="call-for-x" class="py-36 px-[4%] bg_call-for-links relative">
2+
<section id="call-for-x" class="py-20 md:py-36 px-[4%] bg_call-for-links relative">
33
<div class="container mx-auto px-[4%]">
4-
<img src="{% static 'img/vectors/section-divider-03.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block">
4+
<img src="{% static 'img/vectors/section-divider-03.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block divider-03">
55
<!-- Header -->
6-
<div class="text-center mb-16">
6+
<div class="text-center md:mb-16 mb-8">
77
<h2 class="text-5xl md:text-6xl font-bold mb-4 font-td_pinoy text-white">Get Involved</h2>
88
<p class="text-[28px] font-bantayog uppercase text-white">Magic happens when people come together to achieve
99
common goals.</p>
@@ -35,6 +35,6 @@ <h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3">LINK:</h4>
3535
</div>
3636
</div>
3737
</div>
38-
<img src="{% static 'img/vectors/section-divider-04.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block">
38+
<img src="{% static 'img/vectors/section-divider-04.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block divider-04">
3939
</div>
4040
</section>

‎app/home/templates/home/sections/conference-at-a-glance.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% load static %}
22
<section id="conference-at-a-glance"
3-
class="pt-48 bg-contain bg-center relative px-[4%]">
3+
class="pt-20 md:pt-48 bg-contain bg-center relative px-[4%] bg-conference-at-glance">
44

5-
<img src="{% static 'img/vectors/section-divider-02.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block">
5+
<img src="{% static 'img/vectors/section-divider-02.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block divider-02">
66

77
<div class="container mx-auto">
88
<!-- Header -->

‎app/home/templates/home/sections/footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343

4444
<div class="relative w-full h-[800px] lg:h-[950px] lg:mt-[-20px] z-0">
4545
<img src="{% static 'img/footer/pytonio.svg' %}" alt="Left Snake"
46-
class="absolute left-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block" width="670"
46+
class="absolute left-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block footer-snake-left" width="670"
4747
height="400">
4848
<img src="{% static 'img/footer/pytria.svg' %}" alt="Right Snake"
49-
class="absolute right-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block" width="670"
49+
class="absolute right-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block footer-snake-right" width="670"
5050
height="400">
5151
<img src="{% static 'img/footer/pot.svg' %}" alt="Pot"
5252
class="absolute bottom-80 left-1/2 lg:ml-[-70px] -translate-x-1/2 w-[500px] lg:w-[574.49px] z-10"

‎app/home/templates/home/sections/hero-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,6 @@ <h2 class="font-bantayog text-[28px] text-white text-center">Co-organized By</h2
3939
</div>
4040

4141

42-
<img src="{% static 'img/vectors/section-divider-01.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block">
42+
<img src="{% static 'img/vectors/section-divider-01.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block divider-01">
4343

4444
</section>

‎app/home/templates/home/sections/speakers-section.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speaker
1212
<div class="keynote-speakers-wrapper grid gap-[30px] grid-cols-1 lg:grid-cols-2 gap-[30px]">
1313
{% for speaker in featured_speakers %}
1414
<div
15-
class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[100%] grow items-stretch h-full"
15+
class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[100%] grow md:items-stretch items-center h-full"
1616
style="padding: 30px">
1717
<div class="overflow-hidden flex-shrink-0 w-[230px] flex items-center justify-center">
1818
{% if speaker.photo_url %}
@@ -24,14 +24,14 @@ <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speaker
2424
{% endif %}
2525
</div>
2626
<div class="flex flex-col gap-2 justify-center">
27-
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">{{ speaker.full_name }}</h3>
27+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase md:text-left text-center">{{ speaker.full_name }}</h3>
2828
{% if speaker.title %}
29-
<p class="font-nunito text-brown-2 font-semibold text-sm">{{ speaker.title }}</p>
29+
<p class="font-nunito text-brown-2 font-semibold text-sm md:text-left text-center">{{ speaker.title }}</p>
3030
{% endif %}
3131
{% if speaker.introduction %}
32-
<p class="font-nunito text-brown-2 text-[13px]">{{ speaker.introduction }}</p>
32+
<p class="font-nunito text-brown-2 text-[13px] md:text-left text-center">{{ speaker.introduction }}</p>
3333
{% elif speaker.bio %}
34-
<p class="font-nunito text-brown-2 text-[13px]">{{ speaker.bio }}</p>
34+
<p class="font-nunito text-brown-2 text-[13px] md:text-left text-center">{{ speaker.bio }}</p>
3535
{% endif %}
3636
</div>
3737
</div>
@@ -77,6 +77,6 @@ <h3 class="font-bantayog text-brown-1 text-2xl uppercase">{{ speaker.full_name }
7777
</div>
7878
</div>
7979
{% endif %}
80-
<img src="{% static 'img/vectors/section-divider-04.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block" style="transform: rotate(180deg); bottom: -110px">
80+
<img src="{% static 'img/vectors/section-divider-04.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block divider-05">
8181
</section>
8282
{% endif %}

‎app/home/templates/home/sections/sponsor-section.html‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -469,36 +469,36 @@ <h3 class="text-2xl font-bold mb-8 uppercase font-bantayog font-bantayog text-br
469469
style="color: #7c5e3b">Education Summit Sponsor</h3>
470470
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-center">
471471
{% for sponsor in sponsors %}
472-
<div class="{% if sponsor.info %}sponsor-card-container group{% endif %} relative flex h-48 items-center justify-center overflow-hidden rounded-lg bg-white p-8 {% if sponsor.info %}cursor-pointer{% endif %}">
473-
{% if sponsor.is_pao_connected %}
474-
<img
475-
src="/static/img/vectors/pao-ribbon.svg"
476-
alt="PAO Ribbon"
477-
class="sponsor-pao-ribbon absolute top-0 right-[20px] w-[50px] z-20"
478-
>
479-
{% endif %}
480-
{% if sponsor.website_url %}
481-
<a href="{{ sponsor.website_url }}"
482-
target="_blank"
483-
rel="noopener noreferrer"
484-
class="w-full h-full flex items-center justify-center">
485-
<img src="{{ sponsor.logo_url }}"
486-
alt="{{ sponsor.name }}"
487-
class="sponsor-logo-blur max-w-full max-h-32 object-contain"
488-
width="256" height="128" />
489-
</a>
490-
{% else %}
491-
<img src="{{ sponsor.logo_url }}"
492-
alt="{{ sponsor.name }}"
493-
class="sponsor-logo-blur max-w-full max-h-32 object-contain"
494-
width="256" height="128" />
495-
{% endif %}
496-
{% if sponsor.info %}
497-
<div class="sponsor-card-overlay absolute inset-0 flex items-center justify-center p-4 bg-white/85 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-lg">
498-
<p class="text-sm text-center font-nunito" style="color: #7c5e3b">{{ sponsor.info }}</p>
499-
</div>
500-
{% endif %}
472+
<div class="{% if sponsor.info %}sponsor-card-container group{% endif %} relative flex h-48 items-center justify-center overflow-hidden rounded-lg bg-offwhite-3 p-8 {% if sponsor.info %}cursor-pointer{% endif %}">
473+
{% if sponsor.is_pao_connected %}
474+
<img
475+
src="/static/img/vectors/pao-ribbon.svg"
476+
alt="PAO Ribbon"
477+
class="sponsor-pao-ribbon absolute top-0 right-[20px] w-[50px] z-20"
478+
>
479+
{% endif %}
480+
{% if sponsor.website_url %}
481+
<a href="{{ sponsor.website_url }}"
482+
target="_blank"
483+
rel="noopener noreferrer"
484+
class="w-full h-full flex items-center justify-center">
485+
<img src="{{ sponsor.logo_url }}"
486+
alt="{{ sponsor.name }}"
487+
class="sponsor-logo-blur max-w-full max-h-32 object-contain"
488+
width="256" height="128" />
489+
</a>
490+
{% else %}
491+
<img src="{{ sponsor.logo_url }}"
492+
alt="{{ sponsor.name }}"
493+
class="sponsor-logo-blur max-w-full max-h-32 object-contain"
494+
width="256" height="128" />
495+
{% endif %}
496+
{% if sponsor.info %}
497+
<div class="sponsor-card-overlay absolute inset-0 flex items-center justify-center p-4 bg-offwhite-3/85 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-lg">
498+
<p class="text-sm text-center font-nunito" style="color: #7c5e3b">{{ sponsor.info }}</p>
501499
</div>
500+
{% endif %}
501+
</div>
502502
{% endfor %}
503503
</div>
504504
</div>

‎app/home/templates/home/sections/tickets-section.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ <h2 class="text-5xl font-bold mb-6 font-td_pinoy text-brown-1">Tickets Available
77
<br />
88
make friends, and geek out!
99
</p>
10-
<div class="flex justify-between items-center relative max-w-[900px] gap-8 mx-auto" style="margin-top: -30px;">
10+
<div class="flex justify-between items-center relative max-w-[900px] gap-4 md:gap-8 mx-auto mb-0 md:mb-[-30px]">
1111
<!-- Left Python Logo -->
1212
<div>
13-
<img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-full max-w-56 h-80" style="margin-bottom: -50px;">
13+
<img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-full max-w-56 max-h-80 mb-[-20px] md:mb-[-50px]">
1414
</div>
1515
<!-- Get Tickets Button -->
1616
<div class="inline-block">
@@ -20,7 +20,7 @@ <h2 class="text-5xl font-bold mb-6 font-td_pinoy text-brown-1">Tickets Available
2020
</div>
2121
<!-- Right Python Logo -->
2222
<div>
23-
<img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-full max-w-56 h-80" style="margin-bottom: -50px;">
23+
<img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-full max-w-56 max-h-80 mb-[-20px] md:mb-[-50px]">
2424
</div>
2525
</div>
2626
</div>

‎app/home/templates/home/sections/why-python.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,57 +33,57 @@ <h2 class="text-5xl lg:text-6xl font-bold text-orange-2 mb-6 font-td_pinoy text-
3333
</div>
3434

3535
<!-- Right Column - Icon Grid -->
36-
<div class="grid grid-cols-3 gap-2">
36+
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
3737
<!-- Data Analysis -->
38-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
38+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
3939
<img src="{% static 'img/vectors/big-data.svg' %}" alt="Data Analysis Icon">
4040
<p class="text-brown-2 text-sm font-medium">Data Analysis</p>
4141
</div>
4242

4343
<!-- AI/Machine Learning -->
44-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
44+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
4545
<img src="{% static 'img/vectors/ai-learning.svg' %}" alt="AI/Machine Learning Icon">
4646
<p class="text-brown-2 text-sm font-medium">AI/Machine Learning</p>
4747
</div>
4848

4949
<!-- Automation -->
50-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
50+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
5151
<img src="{% static 'img/vectors/automation.svg' %}" alt="Automation Icon">
5252
<p class="text-brown-2 text-sm font-medium">Automation</p>
5353
</div>
5454

5555
<!-- Cloud Computing -->
56-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
56+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
5757
<img src="{% static 'img/vectors/cloud-computing.svg' %}" alt="Cloud Computing Icon">
5858
<p class="text-brown-2 text-sm font-medium">Cloud Computing</p>
5959
</div>
6060

6161
<!-- Web Apps -->
62-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
62+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
6363
<img src="{% static 'img/vectors/web-app.svg' %}" alt="Web Apps Icon">
6464
<p class="text-brown-2 text-sm font-medium">Web Apps</p>
6565
</div>
6666

6767
<!-- Mobile Apps -->
68-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
68+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
6969
<img src="{% static 'img/vectors/mobile-app.svg' %}" alt="Mobile Apps Icon">
7070
<p class="text-brown-2 text-sm font-medium">Mobile Apps</p>
7171
</div>
7272

7373
<!-- Desktop Apps -->
74-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
74+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
7575
<img src="{% static 'img/vectors/workstation.svg' %}" alt="Desktop Apps Icon">
7676
<p class="text-brown-2 text-sm font-medium">Desktop Apps</p>
7777
</div>
7878

7979
<!-- Software Testing -->
80-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
80+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
8181
<img src="{% static 'img/vectors/software-testing.svg' %}" alt="Software Testing Icon">
8282
<p class="text-brown-2 text-sm font-medium">Software Testing</p>
8383
</div>
8484

8585
<!-- Cyber Security -->
86-
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] py-10 px-3 gap-3">
86+
<div class="flex flex-col justify-center items-center text-center rounded-2xl bg-[#FAEEE0] md:py-10 py-5 px-3 gap-3">
8787
<img src="{% static 'img/vectors/cybersecurity.svg' %}" alt="Cyber Security Icon">
8888
<p class="text-brown-2 text-sm font-medium">Cyber Security</p>
8989
</div>

0 commit comments

Comments
 (0)