Skip to content

Commit a60e935

Browse files
supersu-mansupersu-man
committed
UI refactoring
1 parent 46b4037 commit a60e935

File tree

6 files changed

+100
-193
lines changed

6 files changed

+100
-193
lines changed

‎index.html‎

Lines changed: 72 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>GitHub Community Gitam</title>
88
<link rel="icon" type="image/x-icon" href="/assets/logo.svg">
99
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -12,11 +12,11 @@
1212
<link rel="stylesheet" href="src/styles.css">
1313
</head>
1414

15-
<body class="light-theme" id="body" data-scroll="0">
15+
<body class="light-theme" id="body">
1616

17-
<nav class="navbar navbar-expand-md fixed-top material-navbar">
17+
<nav class="navbar navbar-expand-md fixed-top material-navbar m-2">
1818
<div class="container-fluid m-1">
19-
<img height=40px src="assets/logo.svg">
19+
<img height="40" src="assets/logo.svg">
2020
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
2121
<span class="navbar-toggler-icon"></span>
2222
</button>
@@ -39,12 +39,16 @@
3939
</nav>
4040

4141
<!-- HOME SECTION -->
42-
<section id="home" class="p-4" style="height: 100vh">
43-
<div class="h-100" style="padding-top: 80px;">
44-
<div class="material-card h-100 center-vh">
45-
<div class="row justify-content-center">
46-
<div class="col-auto">
47-
<div id="mytext" class="typed-out">GitHub Community Gitam</div>
42+
<section id="home" style="height: 100%;">
43+
<div class="container pb-2 h-100">
44+
<div class="row h-100">
45+
<div class="col">
46+
<div class="material-card center-vh h-100">
47+
<div class="row justify-content-center">
48+
<div class="col-auto">
49+
<div id="mytext" class="typed-out">GitHub Community Gitam</div>
50+
</div>
51+
</div>
4852
</div>
4953
</div>
5054
</div>
@@ -54,11 +58,11 @@
5458

5559

5660
<!-- ABOUT SECTION -->
57-
<section id="about" class="p-4" style="height: 100vh;">
58-
<div class="h-100" style="padding-top: 50px;">
59-
<label class="text-primary font-48px">About</label>
60-
<div class="row g-0">
61-
<div class="col-md font-20px">
61+
<section id="about">
62+
<div class="container">
63+
<div class="row">
64+
<label class="display-medium text-primary mb-2">About</label>
65+
<div class="col-md title-large">
6266
GitHub Community Gitam is one of the most active tech clubs at gitam.
6367
The club is not a part of just one Campus but all 3 campuses of gitam (Visakhapatnam, Hyderabad,
6468
Bengaluru).
@@ -67,80 +71,85 @@
6771
The club is open to any gitamite and can join/follow our various socials to get updates regarding
6872
upcoming or on-going events.
6973
</div>
70-
<div class="col-md text-center">
71-
<img class="img-fluid" src="./assets/logo.svg" height="200px" width="200px">
74+
<div class="col-md">
75+
<img src="./assets/logo.svg" class="img-fluid" height="200px" width="200px">
7276
</div>
7377
</div>
7478
</div>
7579
</section>
7680
<!-- ****About Section**** -->
7781

7882
<!-- team section -->
79-
<section id="team" class="p-4">
80-
<div style="padding-top: 50px;">
81-
<label class="text-primary font-48px">Team</label>
82-
<div id="teamContainer" class="row justify-content-center m-1"></div>
83+
<section id="team">
84+
<div class="container">
85+
<div class="row">
86+
<label class="display-medium text-primary mb-2">Team</label>
87+
<div id="teamContainer" class="row justify-content-center m-1"></div>
88+
</div>
8389
</div>
8490
</section>
8591
<!-- team section Ending -->
8692

8793
<!-- EVENTS SECTION -->
88-
<section id="events" class="p-4">
89-
<div class="h-100" style="padding-top: 50px;">
90-
<label class="text-primary font-48px">Events</label>
91-
<div class="row justify-content-center">
94+
<section id="events">
95+
<div class="container">
96+
<div class="row">
97+
<label class="display-medium text-primary mb-2">Events</label>
98+
<div class="row justify-content-center">
9299

93-
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
94-
<img class="img-fluid material-card" src="assets/2.png">
95-
</div>
100+
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
101+
<img class="img-fluid material-card" src="assets/2.png">
102+
</div>
96103

97-
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
98-
<img class="img-fluid material-card" src="assets/3.png">
99-
</div>
104+
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
105+
<img class="img-fluid material-card" src="assets/3.png">
106+
</div>
100107

101-
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
102-
<img class="img-fluid material-card" src="assets/4.png">
103-
</div>
108+
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
109+
<img class="img-fluid material-card" src="assets/4.png">
110+
</div>
104111

105-
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
106-
<img class="img-fluid material-card" src="assets/5.png">
107-
</div>
112+
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
113+
<img class="img-fluid material-card" src="assets/5.png">
114+
</div>
108115

109-
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
110-
<img class="img-fluid material-card" src="assets/6.png">
111-
</div>
116+
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
117+
<img class="img-fluid material-card" src="assets/6.png">
118+
</div>
112119

113-
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
114-
<img class="img-fluid material-card" src="assets/7.png">
120+
<div class="center-vh flex-column text-center m-2" style="width: 250px;">
121+
<img class="img-fluid material-card" src="assets/7.png">
122+
</div>
115123
</div>
116124
</div>
117125
</div>
118126
</section>
119127
<!--**** EVENTS SECTION ****-->
120128

121129
<!-- CONTACT SECTION -->
122-
<section id="contact" class="p-4" style="height:100vh">
123-
<div class="h-100" style="padding-top: 50px;">
124-
<label class="text-primary font-48px">Socials</label>
125-
<div class="h-100 center-vh flex-column">
126-
<div class="material-card m-4">
127-
<a href="https://discord.gg/M7uFE99w7F" class="m-5">
128-
<img src="./assets/Discord.svg">
129-
</a>
130-
<a href="https://github.com/github-community-gitam" class="m-5">
131-
<img src="./assets/Github.svg">
132-
</a>
133-
<a href="https://www.instagram.com/github.gitam" class="m-5">
134-
<img src="./assets/Instagram.svg">
135-
</a>
136-
<a href="https://www.linkedin.com/company/github-gitam" class="m-5">
137-
<img src="./assets/LinkedIn.svg">
138-
</a>
130+
<section id="contact">
131+
<div class="container">
132+
<div class="row">
133+
<label class="display-medium text-primary mb-2">Socials</label>
134+
<div class="d-flex align-items-center flex-column">
135+
<div class="material-card my-4">
136+
<a href="https://discord.gg/M7uFE99w7F" class="m-5">
137+
<img src="./assets/Discord.svg">
138+
</a>
139+
<a href="https://github.com/github-community-gitam" class="m-5">
140+
<img src="./assets/Github.svg">
141+
</a>
142+
<a href="https://www.instagram.com/github.gitam" class="m-5">
143+
<img src="./assets/Instagram.svg">
144+
</a>
145+
<a href="https://www.linkedin.com/company/github-gitam" class="m-5">
146+
<img src="./assets/LinkedIn.svg">
147+
</a>
148+
</div>
149+
<label class="m-4">
150+
Follow us on socials to stay updated with upcoming events and informational posts.
151+
</label>
139152
</div>
140-
141-
<label class="font-20px m-4">
142-
Follow us on socials to stay updated with upcoming events and informational posts.
143-
</label>
144153
</div>
145154
</div>
146155
</section>

‎src/colors.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components.css‎

Lines changed: 17 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,26 @@
11
@import url(./theme.css);
2-
.light-theme {
3-
--md-sys-color-primary: var(--md-sys-color-primary-light);
4-
--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
5-
--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
6-
--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
7-
--md-sys-color-secondary: var(--md-sys-color-secondary-light);
8-
--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
9-
--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
10-
--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
11-
--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
12-
--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
13-
--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
14-
--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
15-
--md-sys-color-error: var(--md-sys-color-error-light);
16-
--md-sys-color-on-error: var(--md-sys-color-on-error-light);
17-
--md-sys-color-error-container: var(--md-sys-color-error-container-light);
18-
--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
19-
--md-sys-color-outline: var(--md-sys-color-outline-light);
20-
--md-sys-color-background: var(--md-sys-color-background-light);
21-
--md-sys-color-on-background: var(--md-sys-color-on-background-light);
22-
--md-sys-color-surface: var(--md-sys-color-surface-light);
23-
--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
24-
--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
25-
--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
26-
--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
27-
--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
28-
29-
--surface1: linear-gradient(0deg, rgba(0, 108, 77, 0.05), rgba(0, 108, 77, 0.05)), var(--surface);
30-
--surface2: linear-gradient(0deg, rgba(0, 108, 77, 0.08), rgba(0, 108, 77, 0.08)), var(--surface);
31-
}
322

333
body {
344
background-color: var(--md-sys-color-surface);
355
color: var(--md-sys-color-on-surface);
366
}
377

38-
/* Components */
39-
40-
.text-primary {
41-
color: var(--md-sys-color-primary) !important;
42-
}
43-
44-
.text-onsurface{
45-
color: var(--md-sys-color-on-surface);
46-
}
47-
48-
.text-secondary {
49-
color: var(--md-sys-color-secondary) !important;
8+
.material-navbar {
9+
background: var(--surface1);
10+
border-radius: 12px;
11+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
5012
}
5113

52-
.text-on-surface-variant {
53-
color: var(--md-sys-color-on-surface-variant);
14+
.form-switch .form-check-input,
15+
.form-switch .form-check-input:focus,
16+
.form-switch .form-check-input:checked {
17+
outline: 0;
18+
box-shadow: none;
19+
height: 24px;
20+
width: 48px;
21+
border: 4px solid var(--md-sys-color-primary);
22+
background-color: var(--md-sys-color-primary);
23+
background-image: url(../assets/circle.svg);
5424
}
5525

5626
.material-button-filled {
@@ -90,29 +60,15 @@ body {
9060
background: var(--surface1);
9161
}
9262

93-
.material-navbar {
94-
background: var(--surface1);
95-
border-radius: 12px;
96-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
97-
}
98-
9963
.material-card {
10064
padding: 20px;
10165
color: var(--md-sys-color-on-surface);
102-
font-size: 18px;
66+
font-size: 18px !important;
10367
border-radius: 12px;
10468
background: var(--surface1);
10569
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
10670
}
10771

108-
.form-switch .form-check-input,
109-
.form-switch .form-check-input:focus,
110-
.form-switch .form-check-input:checked {
111-
outline: 0;
112-
box-shadow: none;
113-
height: 24px;
114-
width: 48px;
115-
border: 4px solid var(--md-sys-color-primary);
116-
background-color: var(--md-sys-color-primary);
117-
background-image: url(../assets/circle.svg);
72+
.text-primary {
73+
color: var(--md-sys-color-primary) !important;
11874
}

‎src/error.html‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +0,0 @@
1-
<section id="home" class="p-4" style="height: 100vh">
2-
<div class="h-100" style="padding-top: 80px;">
3-
<div class="material-card h-100 center-vh">
4-
<div id="mytext" class="typed-out ">GitHub Community Gitam</div>
5-
</div>
6-
</div>
7-
</section>
8-
9-
<nav class="navbar navbar-expand-sm material-navbar fixed-top">
10-
<div class="container-fluid">
11-
<img height=40px src="assets/logo.svg">
12-
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
13-
<span class="navbar-toggler-icon"></span>
14-
</button>
15-
<div class="collapse navbar-collapse" id="navbar">
16-
<div class="navbar-nav nav-padding px-2 align-items-center ms-auto">
17-
<a class="material-button-filled material-button-sm mx-1" href="#home">Home</a>
18-
<a class="material-button-outlined material-button-sm" href="#about">About</a>
19-
<a class="material-button-outlined material-button-sm mx-1" href="#team">Team</a>
20-
<a class="material-button-outlined material-button-sm" href="#events">Events</a>
21-
<a class="material-button-outlined material-button-sm mx-1" href="#contact">Contact</a>
22-
<a class="material-button-outlined material-button-sm" href="https://forms.gle/gMZ3QdSBBrH3btAf6">
23-
Join us
24-
</a>
25-
</div>
26-
</div>
27-
</div>
28-
</nav>

‎src/script.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
document.addEventListener('scroll', () => {
2-
document.getElementById('body').setAttribute('data-scroll', window.scrollY)
3-
});
4-
51
animateText()
62
setTheme()
73
setThemeToggleListener()

0 commit comments

Comments
 (0)