Skip to content

Commit f1520e7

Browse files
anistarkanistark
committed
fix css responsiveness for footer and body
1 parent 1d07918 commit f1520e7

File tree

5 files changed

+72
-98
lines changed

5 files changed

+72
-98
lines changed

‎src/_includes/footer.njk‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
1-
{# <footer class="w-full flex flex-col sm:flex-row sm:justify-center text-lg tracking-wide px-4 sm:px-0 py-16">
1+
<footer class="relative w-full flex flex-col sm:flex-row sm:justify-center text-lg tracking-wide px-4 sm:px-0 py-8 bg-gray-100
2+
bottom-0">
23
<div class="text-center pr-0 sm:pr-8 py-4">
34
Get in touch:
45
<ul class="flex justify-center space-x-4">
5-
6-
<br>
6+
<br/>
77
{% for item in site.social %}
88
<li>
9-
<a class="no-underline" href="{{ item.url }}" target="_blank">
10-
11-
<i class="fa-brands fa-lg {{ item.icon }}"></i>
12-
</a>
13-
</li>
14-
{% endfor %}
15-
<li>
16-
<a href="https://pyconindia.zulipchat.com/" title="Zulip" target="_blank" display="inline-block">
17-
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.5em" viewBox="0 0 48 48">
18-
<path fill="#205D7A" stroke="blue" stroke-linecap="round" stroke-linejoin="round" d="M41.54 10.22a6.27 6.27 0 0 1-2.2 4.78L26.21 26.76c-.21.2-.61-.1-.41-.4l4.82-9.63c.1-.3 0-.6-.3-.6H11.67c-2.91 0-5.21-2.6-5.21-5.81s2.3-5.82 5.21-5.82h24.56c2.91-.1 5.31 2.51 5.31 5.72M11.67 43.5h24.66c2.91 0 5.21-2.61 5.21-5.81s-2.3-5.82-5.21-5.82H17.68a.37.37 0 0 1-.3-.6l4.82-9.62a.29.29 0 0 0-.41-.41L8.66 32.87a6.3 6.3 0 0 0-2.2 4.82c0 3.2 2.4 5.81 5.21 5.81"/>
19-
</svg>
9+
<a class="no-underline" href="{{ item.url }}" target="_blank">
10+
<i class="fa-brands fa-lg {{ item.icon }}"></i>
2011
</a>
2112
</li>
22-
23-
</ul></svg>
24-
13+
{% endfor %}
14+
<li>
15+
<a href="https://pyconindia.zulipchat.com/" title="Zulip" target="_blank" display="inline-block">
16+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.5em" viewBox="0 0 48 48">
17+
<path
18+
fill="#205D7A"
19+
stroke="blue"
20+
stroke-linecap="round"
21+
stroke-linejoin="round"
22+
d="M41.54 10.22a6.27 6.27 0 0 1-2.2 4.78L26.21 26.76c-.21.2-.61-.1-.41-.4l4.82-9.63c.1-.3 0-.6-.3-.6H11.67c-2.91
23+
0-5.21-2.6-5.21-5.81s2.3-5.82 5.21-5.82h24.56c2.91-.1 5.31 2.51 5.31 5.72M11.67 43.5h24.66c2.91 0 5.21-2.61
24+
5.21-5.81s-2.3-5.82-5.21-5.82H17.68a.37.37 0 0 1-.3-.6l4.82-9.62a.29.29 0 0 0-.41-.41L8.66 32.87a6.3 6.3 0 0 0-2.2 4.82c0
25+
3.2 2.4 5.81 5.21 5.81"/>
26+
</svg>
27+
</a>
28+
</li>
29+
</ul>
2530
</div>
26-
</footer> #}
31+
</footer>

‎src/_includes/navbar.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66
<div
77
class="w-full sm:w-auto self-start sm:self-center flex flex-row sm:flex-none flex-no-wrap justify-between items-center">
8-
<a href="{{ env.baseUrl }}" class="no-underline text-gray-800 font-bold hover:text-purple-600 text-lg text-center py-2 mx-2">~/</a>
8+
<a href="{{ env.baseUrl }}" class="no-underline text-gray-800 font-bold hover:text-purple-600 text-lg text-center py-2 mx-2">PyCon India 2025</a>
99
<button id="menuBtn" class="hamburger block sm:hidden focus:outline-none" type="button" onclick="navToggle();" aria-label="Show Menu"><span
1010
class="hamburger__top-bun"></span><span class="hamburger__bottom-bun"></span></button>
1111
</div>

‎src/_includes/section.header.njk‎

Lines changed: 43 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,53 @@
1-
<div class="self-center items-center md:w-full">
1+
<div>
2+
<div class="self-center items-center md:w-full">
23
<div class="w-4/5 text-center mx-auto">
3-
<img class="w-3/5 drop-shadow-md rounded-md m-auto" src="{{ env.baseUrl }}img/pycon_2025.svg">
4-
<br>
5-
<br>
4+
<img class="w-3/5 mt-4 drop-shadow-md rounded-md mx-auto" src="{{ env.baseUrl }}img/pycon_2025.svg"/>
5+
<br/> <br/>
66
<div class="justify-center items-center text-2xl md:text-3xl">
7-
PyCon India is the premier conference for Python enthusiasts and professionals, offering an unparalleled opportunity to dive deep into the world of Python and explore its limitless potential. Stay tuned for updates!
7+
PyCon India is the premier conference for Python enthusiasts and professionals, offering an unparalleled opportunity to
8+
dive deep into the world of Python and explore its limitless potential. Stay tuned for updates!
89
</div>
9-
<br>
10-
<br>
11-
<br>
12-
<br>
13-
<div class="grid grid-cols-3 justify-center items-center space-x-4 text-xl md:text-xl">
14-
<div class="col-md-4 text-center pt-md-5 border-solid">
15-
<p class="h4 sub-tit pt-3 md:text-h4 font-semibold">12 September</p>
16-
<p class="h4 sub-tit pt-3 md:text-h4">Workshops</p>
17-
<p class="h4 sub-tit pt-3 md:text-h4 font-extralight italic">To Be Announced</p>
10+
<br/> <br/> <br/> <br/>
11+
<div class="flex flex-col md:flex-row justify-center items-center gap-4 md:space-x-8 space-y-8 md:space-y-0 text-xl
12+
xl:text-2xl">
13+
<div class="col-md-4 text-center">
14+
<p class="h4 sub-tit md:text-h4 font-semibold">12 September</p>
15+
<p class="h4 sub-tit md:text-h4">Workshops</p>
16+
<p class="h4 sub-tit md:text-h4 font-extralight italic">To Be Announced</p>
1817
</div>
19-
<div class="col-md-4 text-center pt-md-5">
20-
<p class="h4 sub-tit pt-3 md:text-h4 font-semibold">13 September - 14 September</p>
21-
<p class="h4 sub-tit pt-3 md:text-h4">Conference</p>
22-
<p class="h4 sub-tit pt-3 md:text-h4">NIMHANS Convention Centre, Bengaluru</p>
18+
<div class="col-md-4 text-center">
19+
<p class="h4 sub-tit md:text-h4 font-semibold">13 September - 14 September</p>
20+
<p class="h4 sub-tit md:text-h4">Conference</p>
21+
<p class="h4 sub-tit md:text-h4">NIMHANS Convention Centre, Bengaluru</p>
2322
</div>
24-
<div class="col-md-4 text-center pt-md-5">
25-
<p class="h4 sub-tit pt-3 md:text-h4 font-semibold">15 September</p>
26-
<p class="h4 sub-tit pt-3 md:text-h4">Developer Sprints</p>
27-
<p class="h4 sub-tit pt-3 md:text-h4 font-extralight italic">To Be Announced</p>
23+
<div class="col-md-4 text-center">
24+
<p class="h4 sub-tit md:text-h4 font-semibold">15 September</p>
25+
<p class="h4 sub-tit md:text-h4">Developer Sprints</p>
26+
<p class="h4 sub-tit md:text-h4 font-extralight italic">To Be Announced</p>
2827
</div>
2928
</div>
3029
</div>
3130
</div>
32-
33-
<div class="flex justify-center items-center space-x-4">
34-
<!-- Submit CFP Button Link
35-
<a href="/submit-cfp" class="inline-block">
36-
<button class="bg-orange-500 text-white py-2 px-4 rounded transition-transform transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500">
37-
Submit CFP
38-
</button>
39-
</a>
40-
-->
41-
42-
<!-- Volunteer Button Link -->
43-
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdX2LEom11BbWDiLUiQp1rmeNX9l7J8bfszGidsRDoExy0D5A/viewform" class="inline-block">
44-
<button class="bg-orange-500 text-white font-semibold py-3 px-6 rounded transition-transform transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500">
45-
Volunteer
46-
</button>
47-
</a>
48-
49-
<!-- Sponsor Button Link
50-
<a href="/sponsor" class="inline-block">
51-
<button class="bg-orange-500 text-white py-2 px-4 rounded transition-transform transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500">
52-
Sponsor
53-
</button>
54-
</a>
55-
-->
56-
</div>
57-
58-
59-
<div class="flex flex-col justify-center"></div>
60-
<div class="flex flex-col justify-center"></div>
61-
62-
<footer>
63-
<div class="text-center pr-0 sm:pr-8 py-4">
64-
<div class="text-l">Get in touch with us!</div>
65-
<ul class="flex justify-center space-x-4">
66-
{% for item in site.social %}
67-
<li>
68-
<a class="no-underline" href="{{ item.url }}" target="_blank">
69-
70-
<i class="fa-brands fa-lg {{ item.icon }}"></i>
71-
</a>
72-
</li>
73-
{% endfor %}
74-
<li>
75-
<a href="https://pyconindia.zulipchat.com/" title="Zulip" target="_blank" display="inline-block">
76-
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.5em" viewBox="0 0 48 48">
77-
<path fill="#205D7A" stroke="blue" stroke-linecap="round" stroke-linejoin="round" d="M41.54 10.22a6.27 6.27 0 0 1-2.2 4.78L26.21 26.76c-.21.2-.61-.1-.41-.4l4.82-9.63c.1-.3 0-.6-.3-.6H11.67c-2.91 0-5.21-2.6-5.21-5.81s2.3-5.82 5.21-5.82h24.56c2.91-.1 5.31 2.51 5.31 5.72M11.67 43.5h24.66c2.91 0 5.21-2.61 5.21-5.81s-2.3-5.82-5.21-5.82H17.68a.37.37 0 0 1-.3-.6l4.82-9.62a.29.29 0 0 0-.41-.41L8.66 32.87a6.3 6.3 0 0 0-2.2 4.82c0 3.2 2.4 5.81 5.21 5.81"/>
78-
</svg>
79-
</a>
80-
</li>
81-
82-
</ul></svg>
31+
<div class="flex justify-center items-center my-4">
32+
<!-- Submit CFP Button Link <a href="/submit-cfp" class="inline-block"> <button class="bg-orange-500 text-white py-2
33+
px-4 rounded transition-transform transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2
34+
focus:ring-blue-500">
35+
Submit CFP
36+
</button> </a> -->
37+
<!-- Volunteer Button Link -->
38+
<a
39+
href="https://docs.google.com/forms/d/e/1FAIpQLSdX2LEom11BbWDiLUiQp1rmeNX9l7J8bfszGidsRDoExy0D5A/viewform"
40+
class="inline-block"> <button class="bg-orange-500 text-white font-semibold py-3 px-6 rounded transition-transform transform hover:scale-105
41+
active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500">
42+
Volunteer
43+
</button>
44+
</a>
45+
<!-- Sponsor Button Link <a href="/sponsor" class="inline-block"> <button class="bg-orange-500 text-white py-2 px-4
46+
rounded transition-transform transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2
47+
focus:ring-yellow-500">
48+
Sponsor
49+
</button> </a> -->
8350
</div>
84-
</footer>
51+
<div class="flex flex-col justify-center"></div>
52+
<div class="flex flex-col justify-center"></div>
53+
</div>

‎src/_layouts/base.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
{% include "head.njk" %}
55
</head>
6-
<body id="top" class="font-sans text-gray-800 bg-gray-100">
6+
<body id="top" class="font-sans text-gray-800 min-h-screen flex flex-col">
77
{{ content | safe }}
88
{% include "footer.njk" %}
99
{% include "js.njk" %}

‎src/index.njk‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
layout: base.njk
33
isFront: true
44
---
5-
<header class="header w-full min-h-screen flex flex-col justify-between">
5+
6+
<header class="header w-full flex flex-col justify-between">
67
{% include "navbar.njk" %}
7-
{% include "section.header.njk" %}
88
</header>
9-
<main>
10-
9+
<main class="my-8 flex-grow">
10+
{% include "section.header.njk" %}
1111
</main>

0 commit comments

Comments
 (0)