Skip to content

Commit b6fb7cc

Browse files
nikoshellnikoshell
committed
Update for mobile view.
1 parent 318e73b commit b6fb7cc

File tree

2 files changed

+100
-81
lines changed

2 files changed

+100
-81
lines changed

‎src/components/Footer.astro‎

Lines changed: 99 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -5,104 +5,123 @@ import EPSLogo from "../../public/eps-logo.svg";
55
66
const buildTimestamp = __TIMESTAMP__;
77
const gitVersion = __GIT_VERSION__;
8-
98
---
109

11-
<div
12-
class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 px-6"
13-
>
14-
<p class="mb-16 text-white/10" >
15-
version: {gitVersion} @ {buildTimestamp}
16-
</p>
17-
<div class="links flex flex-wrap gap-8 justify-between">
18-
{
19-
links.footer.map((section) => (
10+
<div class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 px-6">
11+
<div class="links grid grid-cols-2 lg:flex flex-wrap gap-8 justify-between pb-8">
12+
{
13+
links.footer.map((section) => (
2014
<div class="md:w-auto mb-8 md:mb-0 text-start">
21-
<h3 class="font-bold text-lg mb-4">{section.name}</h3>
22-
{section.items ? (
23-
<ul class="space-y-2">
24-
{section.items.map((item) => (
25-
<li>
26-
<a
27-
href={item.path}
28-
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
29-
>
30-
{item.name}
31-
{item.path.startsWith("http") && (
32-
<span class="inline-block ml-1">↗</span>
33-
)}
34-
</a>
35-
</li>
36-
))}
37-
</ul>
38-
) : (
39-
<a
40-
href={section["path"]}
41-
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
42-
>
43-
{section.name}
44-
{section["path"].startsWith("http") && (
45-
<span class="inline-block ml-1">↗</span>
46-
)}
47-
</a>
48-
)}
49-
</div>
50-
))
51-
}
52-
53-
<div class="w-full py-2 border-t border-b border-white/10">
54-
<div
55-
class="flex flex-col lg:flex-row self-center gap-8 lg:gap-12 justify-end"
56-
>
57-
<div class="flex flex-col text-white/40 w-full lg:w-2/3 p-5 items-center">
58-
<p>Excited about our mission? Want to collaborate or contribute? Let's connect!
59-
We're open to partnership opportunities and would love to hear your ideas.
60-
<a class="text-white" href="mailto:[email protected]">[email protected]</a>
61-
</p>
62-
63-
</div>
64-
<div class="flex text-white/40 w-full lg:w-1/3 text-start">
65-
<div>
66-
<EPSLogo width=90 height=90 class="w-[90px] mr-4 h-auto " />
15+
<h3 class="font-bold text-lg mb-4">{section.name}</h3>
16+
{section.items ? (
17+
<ul class="space-y-2">
18+
{section.items.map((item) => (
19+
<li>
20+
<a
21+
href={item.path}
22+
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
23+
>
24+
{item.name}
25+
{item.path.startsWith("http") && (
26+
<span class="inline-block ml-1">↗</span>
27+
)}
28+
</a>
29+
</li>
30+
))}
31+
</ul>
32+
) : (
33+
<a
34+
href={section["path"]}
35+
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
36+
>
37+
{section.name}
38+
{section["path"].startsWith("http") && (
39+
<span class="inline-block ml-1">↗</span>
40+
)}
41+
</a>
42+
)}
6743
</div>
68-
<div>
69-
<address class="not-italic ">
70-
EuroPython Society (EPS)
71-
<br />Ramnebacken 45
72-
<br />
73-
424 38 Agnesberg
74-
<br />
75-
Sweden
76-
</address>
44+
))
45+
}
46+
</div>
47+
48+
<div class="flex flex-wrap gap-8 justify-between">
49+
<div class="w-full py-2 border-t border-b border-white/10">
50+
<div
51+
class="flex flex-col lg:flex-row self-center gap-2 lg:gap-12 justify-end"
52+
>
53+
<div
54+
class="flex flex-col text-white/40 w-full lg:w-2/3 p-5 items-center text-center"
55+
>
56+
<p>
57+
Excited about our mission? Want to collaborate or contribute? Let's
58+
connect! We're open to partnership opportunities and would love to
59+
hear your ideas.
60+
<a class="text-white" href="mailto:[email protected]"
61+
>[email protected]</a
62+
>
63+
</p>
7764
</div>
65+
<div
66+
class="flex text-white/40 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
67+
>
68+
<div>
69+
<EPSLogo width="90" height="90" class="w-[90px] mr-4 h-auto" />
70+
</div>
71+
<div>
72+
<address class="not-italic">
73+
EuroPython Society (EPS)
74+
<br />Ramnebacken 45
75+
<br />
76+
424 38 Agnesberg
77+
<br />
78+
Sweden
79+
</address>
80+
</div>
7881
</div>
7982
</div>
8083
</div>
8184

82-
<div class=" terms flex flex-row justify-around w-1/3 pt-2">
83-
{links.terms.map((item) => (
84-
<a
85-
href={item.path}
86-
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
87-
>
88-
{item.name}
89-
{item.path.startsWith("http") && (
90-
<span class="inline-block ml-1">↗</span>
91-
)}
92-
</a>
93-
))}
85+
<div class="flex w-full lg:flex-row flex-col-reverse justify-between">
86+
<div class="terms py-4 text-center ">
87+
{
88+
links.terms.map((item) => (
89+
<a
90+
href={item.path}
91+
class="text-gray-700 hover:text-primary-hover transition-colors duration-200 mx-2"
92+
>
93+
{item.name}
94+
{item.path.startsWith("http") && (
95+
<span class="inline-block">↗</span>
96+
)}
97+
</a>
98+
))
99+
}
94100
</div>
95101

96-
{ links && links["socials"] &&
97-
<SocialLinks socials={links["socials"]} variant="white" class="opacity-40" />
102+
{
103+
links && links["socials"] && (
104+
<SocialLinks
105+
socials={links["socials"]}
106+
variant="white"
107+
class="opacity-40 pb-4"
108+
/>
109+
)
98110
}
111+
</div>
99112
</div>
113+
114+
<p class="mb-16 text-white/10 text-center">
115+
version: {gitVersion} @ {buildTimestamp}
116+
</p>
117+
</div>
118+
100119
<style>
101120
.links > div:first-child {
102121
font-size: 1.8rem;
103122
}
104123
.terms {
105124
font-size: 0.8rem;
106-
opacity:0.4;
125+
opacity: 0.4;
107126
}
108127
</style>

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const externalDomain = new URL(Astro.site || "").hostname;
8383

8484
@media screen and (width>1200px){
8585
main {
86-
margin-bottom:600px;
86+
margin-bottom:700px;
8787
}
8888
footer {
8989
position: fixed;

0 commit comments

Comments
 (0)