Skip to content

Commit 2ef1140

Browse files
zorexsalvozorexsalvo
committed
feat: improve footer, add co-organizers
1 parent e884d69 commit 2ef1140

File tree

9 files changed

+410
-11
lines changed

9 files changed

+410
-11
lines changed

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@
3838
This site is built using Django.
3939
</p>
4040

41-
<!-- Decorative Footer Image -->
42-
<img src="{% static 'img/vectors/footer.png' %}" alt="Footer decoration" class="w-full block -mt-30">
41+
<div class="relative w-full h-[800px] lg:h-[950px] lg:mt-[-20px] z-0">
42+
<img src="{% static 'img/footer/pytonio.svg' %}" alt="Left Snake" class="absolute left-0 bottom-80 w-[670px] hidden lg:block">
43+
<img src="{% static 'img/footer/pytria.svg' %}" alt="Right Snake" class="absolute right-0 bottom-80 w-[670px] hidden lg:block">
44+
<img src="{% static 'img/footer/pot.svg' %}" alt="Pot" class="absolute bottom-80 left-1/2 lg:ml-[-70px] -translate-x-1/2 w-[500px] lg:w-[574.49px] z-10">
45+
<img src="{% static 'img/footer/base.svg' %}" alt="Bottom Base" class="absolute bottom-0 left-0 right-0 lg:w-full z-0 hidden lg:block">
46+
47+
<div class="absolute bottom-0 lg:bottom-20 w-full text-center flex flex-col items-center justify-center z-30 py-6 bg-[#F26D1D] lg:bg-[unset]">
48+
<h3 class="text-white font-bold mb-2 text-2xl">CO-ORGANIZED BY</h3>
49+
<div class="flex flex-col md:flex-row items-center justify-center md:space-x-8 space-y-4 md:space-y-0 mt-2">
50+
<img src="{% static 'img/footer/pythonph.svg' %}" alt="PythonPH" class="h-12 md:h-[60px]">
51+
<img src="{% static 'img/footer/pythonasia.svg' %}" alt="Python Asia Organization" class="h-12 md:h-[60px]">
52+
<img src="{% static 'img/footer/dlsu.svg' %}" alt="DLSU" class="h-12 md:h-[60px]">
53+
</div>
54+
</div>
55+
56+
</div>
57+
4358
</footer>

‎static/css/app.css‎

Lines changed: 123 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1103,9 +1103,18 @@
11031103
.right-0 {
11041104
right: calc(var(--spacing) * 0);
11051105
}
1106+
.bottom-0 {
1107+
bottom: calc(var(--spacing) * 0);
1108+
}
1109+
.bottom-80 {
1110+
bottom: calc(var(--spacing) * 80);
1111+
}
11061112
.left-0 {
11071113
left: calc(var(--spacing) * 0);
11081114
}
1115+
.left-1\/2 {
1116+
left: calc(1/2 * 100%);
1117+
}
11091118
.hero-content {
11101119
@layer daisyui.component {
11111120
isolation: isolate;
@@ -1117,6 +1126,9 @@
11171126
padding: calc(0.25rem * 4);
11181127
}
11191128
}
1129+
.z-0 {
1130+
z-index: 0;
1131+
}
11201132
.z-10 {
11211133
z-index: 10;
11221134
}
@@ -1169,6 +1181,9 @@
11691181
.-mt-30 {
11701182
margin-top: calc(var(--spacing) * -30);
11711183
}
1184+
.mt-2 {
1185+
margin-top: calc(var(--spacing) * 2);
1186+
}
11721187
.mt-3 {
11731188
margin-top: calc(var(--spacing) * 3);
11741189
}
@@ -1216,6 +1231,15 @@
12161231
justify-content: flex-start;
12171232
}
12181233
}
1234+
.mask {
1235+
@layer daisyui.component {
1236+
display: inline-block;
1237+
vertical-align: middle;
1238+
mask-size: contain;
1239+
mask-repeat: no-repeat;
1240+
mask-position: center;
1241+
}
1242+
}
12191243
.block {
12201244
display: block;
12211245
}
@@ -1247,6 +1271,9 @@
12471271
.h-8 {
12481272
height: calc(var(--spacing) * 8);
12491273
}
1274+
.h-12 {
1275+
height: calc(var(--spacing) * 12);
1276+
}
12501277
.h-20 {
12511278
height: calc(var(--spacing) * 20);
12521279
}
@@ -1256,6 +1283,9 @@
12561283
.h-\[2px\] {
12571284
height: 2px;
12581285
}
1286+
.h-\[800px\] {
1287+
height: 800px;
1288+
}
12591289
.h-auto {
12601290
height: auto;
12611291
}
@@ -1301,9 +1331,15 @@
13011331
.w-\[336\.34px\] {
13021332
width: 336.34px;
13031333
}
1334+
.w-\[500px\] {
1335+
width: 500px;
1336+
}
13041337
.w-\[635px\] {
13051338
width: 635px;
13061339
}
1340+
.w-\[670px\] {
1341+
width: 670px;
1342+
}
13071343
.w-\[960px\] {
13081344
width: 960px;
13091345
}
@@ -1352,6 +1388,10 @@
13521388
.max-w-full {
13531389
max-width: 100%;
13541390
}
1391+
.-translate-x-1\/2 {
1392+
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
1393+
translate: var(--tw-translate-x) var(--tw-translate-y);
1394+
}
13551395
.transform {
13561396
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
13571397
}
@@ -1587,6 +1627,9 @@
15871627
.py-4 {
15881628
padding-block: calc(var(--spacing) * 4);
15891629
}
1630+
.py-6 {
1631+
padding-block: calc(var(--spacing) * 6);
1632+
}
15901633
.py-12 {
15911634
padding-block: calc(var(--spacing) * 12);
15921635
}
@@ -1811,19 +1854,14 @@
18111854
}
18121855
}
18131856
}
1814-
.md\:mt-\[-10em\] {
1815-
@media (width >= 48rem) {
1816-
margin-top: -10em;
1817-
}
1818-
}
1819-
.md\:mb-\[-7em\] {
1857+
.md\:block {
18201858
@media (width >= 48rem) {
1821-
margin-bottom: -7em;
1859+
display: block;
18221860
}
18231861
}
1824-
.md\:block {
1862+
.md\:h-\[60px\] {
18251863
@media (width >= 48rem) {
1826-
display: block;
1864+
height: 60px;
18271865
}
18281866
}
18291867
.md\:grid-cols-2 {
@@ -1841,6 +1879,29 @@
18411879
grid-template-columns: repeat(4, minmax(0, 1fr));
18421880
}
18431881
}
1882+
.md\:flex-row {
1883+
@media (width >= 48rem) {
1884+
flex-direction: row;
1885+
}
1886+
}
1887+
.md\:space-y-0 {
1888+
@media (width >= 48rem) {
1889+
:where(& > :not(:last-child)) {
1890+
--tw-space-y-reverse: 0;
1891+
margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
1892+
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
1893+
}
1894+
}
1895+
}
1896+
.md\:space-x-8 {
1897+
@media (width >= 48rem) {
1898+
:where(& > :not(:last-child)) {
1899+
--tw-space-x-reverse: 0;
1900+
margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
1901+
margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
1902+
}
1903+
}
1904+
}
18441905
.md\:px-16 {
18451906
@media (width >= 48rem) {
18461907
padding-inline: calc(var(--spacing) * 16);
@@ -1858,6 +1919,21 @@
18581919
line-height: var(--tw-leading, var(--text-6xl--line-height));
18591920
}
18601921
}
1922+
.lg\:bottom-20 {
1923+
@media (width >= 64rem) {
1924+
bottom: calc(var(--spacing) * 20);
1925+
}
1926+
}
1927+
.lg\:mt-\[-20px\] {
1928+
@media (width >= 64rem) {
1929+
margin-top: -20px;
1930+
}
1931+
}
1932+
.lg\:ml-\[-70px\] {
1933+
@media (width >= 64rem) {
1934+
margin-left: -70px;
1935+
}
1936+
}
18611937
.lg\:block {
18621938
@media (width >= 64rem) {
18631939
display: block;
@@ -1878,6 +1954,11 @@
18781954
display: inline;
18791955
}
18801956
}
1957+
.lg\:h-\[950px\] {
1958+
@media (width >= 64rem) {
1959+
height: 950px;
1960+
}
1961+
}
18811962
.lg\:btn-wide {
18821963
@media (width >= 64rem) {
18831964
@layer daisyui.modifier {
@@ -1886,11 +1967,26 @@
18861967
}
18871968
}
18881969
}
1970+
.lg\:w-\[574\.49px\] {
1971+
@media (width >= 64rem) {
1972+
width: 574.49px;
1973+
}
1974+
}
1975+
.lg\:w-full {
1976+
@media (width >= 64rem) {
1977+
width: 100%;
1978+
}
1979+
}
18891980
.lg\:grid-cols-2 {
18901981
@media (width >= 64rem) {
18911982
grid-template-columns: repeat(2, minmax(0, 1fr));
18921983
}
18931984
}
1985+
.lg\:bg-\[unset\] {
1986+
@media (width >= 64rem) {
1987+
background-color: unset;
1988+
}
1989+
}
18941990
.lg\:px-24 {
18951991
@media (width >= 64rem) {
18961992
padding-inline: calc(var(--spacing) * 24);
@@ -2361,6 +2457,21 @@ body {
23612457
background-position-x: -115%;
23622458
}
23632459
}
2460+
@property --tw-translate-x {
2461+
syntax: "*";
2462+
inherits: false;
2463+
initial-value: 0;
2464+
}
2465+
@property --tw-translate-y {
2466+
syntax: "*";
2467+
inherits: false;
2468+
initial-value: 0;
2469+
}
2470+
@property --tw-translate-z {
2471+
syntax: "*";
2472+
inherits: false;
2473+
initial-value: 0;
2474+
}
23642475
@property --tw-rotate-x {
23652476
syntax: "*";
23662477
inherits: false;
@@ -2512,6 +2623,9 @@ body {
25122623
@layer properties {
25132624
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
25142625
*, ::before, ::after, ::backdrop {
2626+
--tw-translate-x: 0;
2627+
--tw-translate-y: 0;
2628+
--tw-translate-z: 0;
25152629
--tw-rotate-x: initial;
25162630
--tw-rotate-y: initial;
25172631
--tw-rotate-z: initial;

‎static/img/footer/base.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎static/img/footer/dlsu.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/img/footer/pot.svg‎

Lines changed: 136 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)