blob: 63e4c28caf7c76d17cb4e826d4171b93e8b378ca (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
// import footerJson from '../../public/jsonData/footer.json'
// interface aboutList {
// name: string;
// frontmatter.link: string;
// }
// interface footerContent {
// about: aboutList[];
// resources: aboutList[];
// }
// const footerContent : footerContent = footerJson;
var aboutContent = await Astro.glob("../content/footer/about/*.md");
var resourcesContent = await Astro.glob("../content/footer/resources/*.md");
---
<div class="footer">
<div class="footer-content">
<!-- this is the about section -->
<ul class="about-list">
<h2>About</h2>{
aboutContent.map((item) => {
return (
<li><a class="footer-links" href={item.frontmatter.link} target="_blank">{item.frontmatter.name}</a></li>
)
})
}
</ul>
</div>
<div class="footer-content">
<!-- this is the resources section -->
<ul>
<h2>Resources</h2>{
resourcesContent.map((item) => {
return (
<li><a class="footer-links" href={item.frontmatter.link} target="_blank">{item.frontmatter.name}</a></li>
)
})
}
</ul>
</div>
<!-- this is the license section -->
<div class="license-container">
<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">
<img class ="license-img" alt="Creative Commons License" style="border-width:0" src="https://iitb-isro-aicte-mapathon.fossee.in/static/cms/uploads/images/88x31.png">
</a>
<p class="license">
<span>
This work is licensed under a
</span>
<a href="http://creativecommons.org/licenses/by-sa/4.0/">
Creative Commons Attribution-ShareAlike 4.0 International License.</p>
</a>
</divmcl>
</div>
<style>
a{
text-decoration: none;
color: white;
}
a:hover{
color: #f2f2f2;
text-decoration: underline;
}
.footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: #3374ff;
color: white;
flex-direction: row;
padding: 4vh;
}
.footer-content {
display: flex;
padding: 3vw;
justify-content: center;
align-items: center;
flex-direction: column;
}
li{
font-size: 2.3vh;
}
.footer-links{
text-decoration: none;
color: aliceblue;
font-weight: 700;
}
.license-container{
padding: 2vw;
}
.about-list a{
color: white;
}
.license span{
color: black;
}
@media screen and (max-width: 554px) {
.footer {
flex-direction: column;
}
.footer-content {
padding: 2vh;
}
li{
font-size: 2vh;
}
.license{
font-size: 2vh;
padding: 5vw;
text-align: center;
}
.license-img{
margin: auto;
}
}
</style>
|
