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
|
---
// import scheduleJson from '../../public/jsonData/schedule.json';
// interface ScheduleItem{
// heading : string;
// events : string[];
// }
// const scheduleData : ScheduleItem[] = scheduleJson;
var scheduleContent = await Astro.glob('../content/scheduleEvent/*.md');
---
<!-- Schedule -->
<div class="schedule-main">
<div class="schedule-heading">
<h1>National Level Open Hardware-IoT Geospatial Hackathon</h1>
</div>
<hr>
<div class="schedule-content">{
scheduleContent.map((item)=>{
const Content = item.Content;
return (
<h2 class="md:w-[80vw]">{item.frontmatter.heading}</h2>
<div class="weeks">
<Content />
</div>
)})
}
</div>
</div>
<style>
.schedule-heading h1{
color: rgb(2, 2, 110);
font-size: 7.5vh;
/* font-family: 'Roboto Slab', serif !important; */
padding: 3vh 6vw;
font-weight: 700;
text-align: center;
}
.schedule-heading:hover{
color: blue;
}
.schedule-content{
padding: 0 0 0 25%;
width: 75vw;
}
.schedule-content h2{
font-size: 3.3vh;
width:50vw;
background-color: rgb(252, 230, 188);
padding: 1vh;
margin-bottom: 2vh;
color:rgb(2, 2, 110);
}
@media screen and (max-width: 983px) {
.schedule-content{
padding: 0 0 0 12%;
}
.schedule-content h2{
width: 80vw;
}
.schedule-heading h1{
font-size: 5vh;
margin-top: 10vh;
}
.weeks p{
border-left: 2px solid blue;
}
}
</style>
<script>
//styling the schedule Content
var weeks = Array.from(document.getElementsByClassName("weeks"));
weeks.forEach(answer => {
const paras = answer.querySelectorAll("ul li");
paras.forEach(para => {
para.classList.add("text-xl", "py-1", "px-4", "border-s-[3px]", "border-blue-800", "border-solid", "my-1", "md:border-s-[4px]");
});
});
</script>
|
