Skip to content

Commit 2d1a548

Browse files
aditya-bhaumikaditya-bhaumik
authored
Update styles.css
1 parent e91f921 commit 2d1a548

File tree

1 file changed

+102
-132
lines changed

1 file changed

+102
-132
lines changed

‎Website/styles.css‎

Lines changed: 102 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,160 @@
1-
body {
2-
font-family: Arial, sans-serif;
1+
/* Ensure full height of the body and remove margin/padding */
2+
html, body {
3+
height: 100%;
34
margin: 0;
45
padding: 0;
5-
background-color: #f4f4f4;
6-
overflow-y: auto;
76
}
87

8+
body {
9+
background-color: #0a0a2e; /* Darkest blue */
10+
color: #f1f1f1;
11+
font-family: 'Arial', sans-serif;
12+
display: flex;
13+
flex-direction: column;
14+
}
915

10-
/* Header Styles */
1116
header {
12-
background-color: #333;
13-
color: white;
14-
padding: 20px 20px;
17+
background-color: #121245; /* Slightly lighter dark blue */
18+
padding: 10px 20px;
19+
}
20+
21+
.navbar {
1522
display: flex;
1623
justify-content: space-between;
1724
align-items: center;
1825
}
1926

20-
header h1 {
21-
margin: 0;
22-
text-align: left;
27+
.logo-container {
28+
display: flex;
29+
align-items: center;
30+
margin-right: 20px; /* Adds space between logo and links */
2331
}
2432

25-
nav ul {
26-
list-style: none;
27-
padding: 0;
28-
margin: 0;
29-
display: flex;
33+
.brand-name {
34+
font-size: 1.5em;
35+
color: #f1f1f1;
3036
}
3137

32-
nav ul li {
33-
margin: 0 15px;
38+
.nav-links {
39+
list-style: none;
40+
display: flex;
41+
flex-grow: 1; /* Makes the nav links take up available space */
42+
justify-content: flex-end; /* Align links to the left */
43+
gap: 50px; /* Adds space between each link */
44+
margin-left: 20px;
45+
right: 10px; /* Adjust this value for the gap between logo and links */
3446
}
3547

36-
nav ul li a {
37-
color: white;
48+
.nav-links a {
3849
text-decoration: none;
50+
color: #f1f1f1;
3951
font-weight: bold;
52+
white-space: nowrap; /* Prevents wrapping of links */
4053
}
4154

42-
/* Main Section Styles */
4355
main {
4456
padding: 20px;
45-
text-align: center;
57+
flex: 1; /* Makes main content take up the remaining space */
4658
}
4759

48-
.cta-button {
49-
display: inline-block;
50-
padding: 10px 20px;
51-
background-color: #007bff;
52-
color: white;
53-
text-decoration: none;
54-
border-radius: 5px;
55-
margin-top: 20px;
60+
.welcome-section {
61+
text-align: center;
62+
margin-bottom: 30px;
5663
}
5764

58-
/* Statistics Cards Styles */
59-
.stats-grid {
60-
display: grid;
61-
grid-template-columns: repeat(4, 1fr);
62-
gap: 1rem;
63-
margin-top: 2rem;
64-
padding: 20px;
65+
h2 {
66+
font-size: 2em;
67+
margin-bottom: 20px;
6568
}
6669

67-
.stat-card {
68-
background-color: #fff;
69-
padding: 20px;
70-
border-radius: 10px;
71-
text-align: center;
72-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
70+
p {
71+
font-size: 1.2em;
72+
line-height: 1.6;
7373
}
7474

75-
.stat-card h3 {
76-
margin-bottom: 0.5rem;
77-
color: #007bff;
75+
button#toggle-stats {
76+
display: block;
77+
margin: 0 auto 20px auto;
78+
padding: 10px 20px;
79+
font-size: 1.1em;
80+
background-color: #1a1a5e; /* Dark blue button */
81+
color: #f1f1f1;
82+
border: none;
83+
cursor: pointer;
84+
transition: background-color 0.3s ease;
7885
}
7986

80-
/* Responsive Adjustments */
81-
@media (max-width: 768px) {
82-
.stats-grid,
83-
.contributors-grid {
84-
grid-template-columns: 1fr;
85-
}
87+
button#toggle-stats:hover {
88+
background-color: #2a2a7e; /* Lighter blue on hover */
8689
}
8790

88-
/* Language List Styles */
89-
#languages ul {
90-
list-style: none;
91-
padding: 0;
92-
margin: 0;
91+
#statistics-cards {
92+
display: none;
93+
text-align: center;
9394
}
9495

95-
#languages li {
96-
margin-bottom: 0.5rem;
96+
.stats-grid {
9797
display: flex;
98-
align-items: center;
99-
}
100-
101-
.language-bar {
102-
flex-grow: 1;
103-
height: 10px;
104-
border-radius: 5px;
105-
margin-left: 0.5rem;
106-
background-color: #007bff;
98+
justify-content: center;
99+
gap: 20px;
100+
flex-wrap: wrap;
107101
}
108102

109-
/* Footer Styles */
110-
footer {
111-
background-color: #333;
112-
color: white;
103+
.stat-card {
104+
background-color: #121245; /* Dark blue for stat cards */
105+
padding: 20px;
106+
border-radius: 8px;
107+
width: 150px;
113108
text-align: center;
114-
padding: 10px 0;
115-
position: fixed;
116-
width: 100%;
117-
bottom: 0;
109+
margin-bottom: 20px;
118110
}
119111

120-
footer a {
121-
text-decoration: none;
122-
color: #f4f4f4;
112+
.stat-card h3 {
113+
font-size: 1.2em;
114+
margin-bottom: 10px;
123115
}
124116

125-
#repo-list {
126-
margin: 20px auto;
127-
max-width: 1200px;
128-
padding: 0 20px;
117+
#languages {
118+
text-align: center;
119+
margin-bottom: 30px;
129120
}
130121

131-
#directories {
132-
display: flex;
133-
flex-wrap: wrap;
134-
justify-content: center;
135-
gap: 20px;
136-
list-style-type: none;
122+
#language-list {
123+
list-style: none;
137124
padding: 0;
138-
margin-top: 50px;
139-
margin-bottom: 100px;
140-
}
141-
142-
.card {
143-
background: #fff;
144-
border: 1px solid #ddd;
145-
border-radius: 8px;
146-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
147-
flex: 1 1 calc(33.333% - 20px);
148-
max-width: calc(33.333% - 20px);
149-
padding: 20px;
150-
box-sizing: border-box;
151-
transition: transform 0.3s ease, box-shadow 0.3s ease;
125+
display: inline-block;
126+
text-align: center;
127+
column-count: 4; /* Adjust this value to increase or decrease the number of columns */
128+
column-gap: 40px; /* Space between columns */
152129
}
153130

154-
.card:hover {
155-
transform: translateY(-10px);
156-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
157-
}
158-
.card .btn-view-repo {
159-
display: inline-block;
160-
padding: 0.5rem 1rem;
161-
color: rgb(33, 16, 189);
162-
text-decoration: none;
163-
border-radius: 0.25rem;
164-
font-size: 0.875rem;
131+
#language-list li {
132+
margin: 10px 0;
133+
text-align: left; /* Align text to the left within each column */
165134
}
166135

167136

168-
@media (max-width: 768px) {
169-
.card {
170-
flex: 1 1 calc(50% - 20px);
171-
max-width: calc(50% - 20px);
172-
}
137+
/* Footer stays at the bottom */
138+
.footer {
139+
background-color: #121245; /* Dark blue for footer */
140+
color: #f1f1f1;
141+
padding: 20px;
142+
text-align: center;
143+
margin-top: auto;
173144
}
174145

175-
@media (max-width: 480px) {
176-
.card {
177-
flex: 1 1 100%;
178-
max-width: 100%;
179-
}
146+
button#toggle-languages {
147+
display: block;
148+
margin: 20px auto;
149+
padding: 10px 20px;
150+
font-size: 1.1em;
151+
background-color: #1a1a5e; /* Dark blue button */
152+
color: #f1f1f1;
153+
border: none;
154+
cursor: pointer;
155+
transition: background-color 0.3s ease;
180156
}
181-
/* Additional Styles for Responsiveness */
182-
@media (max-width: 768px) {
183-
.stats-grid {
184-
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
185-
}
186157

187-
.contributors-grid {
188-
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
189-
}
158+
button#toggle-languages:hover {
159+
background-color: #2a2a7e; /* Lighter blue on hover */
190160
}

0 commit comments

Comments
 (0)