Skip to content

Commit 20cc9d3

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1619 from shaina123786/main
Enhance Text Readability in Light and Dark Modes
2 parents 16dfad5 + 2330efb commit 20cc9d3

File tree

5 files changed

+285
-14
lines changed

5 files changed

+285
-14
lines changed

‎Website/css/Org.css

Lines changed: 251 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/*
2+
3+
.icon img{
4+
5+
6+
}
17
.dark-mode .intro-section {
28
color: rgb(0, 0, 0);
39
padding: 40px;
@@ -67,11 +73,11 @@
6773
.repos-container {
6874
display: grid;
6975
grid-template-columns: repeat(3, 1fr); /* 3 columns layout */
70-
gap: 43px;
76+
/* gap: 43px;
7177
padding: 20px;
72-
}
78+
} */
7379

74-
.dark-mode .repo-card {
80+
/* .dark-mode .repo-card {
7581
background-color: #ffffff;
7682
color: rgb(3, 0, 0);
7783
padding: 20px;
@@ -120,17 +126,17 @@
120126
@media (max-width: 1024px) {
121127
.repos-container {
122128
grid-template-columns: repeat(2, 1fr); /* 2 columns layout for medium screens */
123-
}
124-
}
129+
125130

126-
@media (max-width: 768px) {
131+
132+
/* @media (max-width: 768px) {
127133
.repos-container {
128-
grid-template-columns: 1fr; /* 1 column layout for small screens */
134+
grid-template-columns: 1fr;
129135
}
130136
}
131137
132138
133-
/* Get Involved Section */
139+
134140
.get-involved-section {
135141
display: flex;
136142
align-items: center;
@@ -172,7 +178,7 @@
172178
max-width: 35%;
173179
display: inline-block;
174180
perspective: 1000px;
175-
position: relative;
181+
position: relative;
176182
}
177183
178184
.get-involved-section .svg-container svg {
@@ -199,7 +205,7 @@
199205
}
200206
201207
/* Responsive Adjustments */
202-
@media (max-width: 768px) {
208+
/* @media (max-width: 768px) {
203209
.get-involved-section {
204210
flex-direction: column;
205211
text-align: center;
@@ -213,6 +219,241 @@
213219
max-width: 100%;
214220
margin-top: 20px;
215221
}
222+
} */
223+
224+
/* Icon styling */
225+
/* Default light mode styles */
226+
/* Default light mode styles */
227+
body {
228+
background-color: #ffffff;
229+
color: #000000;
230+
}
231+
nav {
232+
background-color:rgb(45, 62, 159); /* Dark navigation background for light mode */
233+
color: grey; /* Light text in nav */
234+
padding: 10px;
235+
}
236+
nav a {
237+
color: #ffffff; /* Light nav links */
238+
text-decoration: none;
239+
margin: 0 10px;
240+
}
241+
242+
nav a:hover {
243+
text-decoration: underline;
244+
}
245+
246+
247+
/* Icon Styling */
248+
.icon img {
249+
cursor: pointer;
250+
width: 28px;
251+
transition: transform 0.3s;
252+
}
253+
.icon{
254+
margin-bottom: 26px;
255+
margin-right: 28px;
256+
}
257+
258+
.icon img:hover {
259+
transform: scale(1.1);
260+
}
261+
262+
/* Intro Section */
263+
.intro-section {
264+
color: #333333;
265+
padding: 40px;
266+
text-align: center;
267+
margin-bottom: -57px;
268+
margin-top: -65px;
216269
}
217270

271+
.intro-section h1 {
272+
font-size: 2.5em;
273+
margin-bottom: 20px;
274+
}
275+
276+
.intro-section p {
277+
font-size: 1.2em;
278+
line-height: 1.6;
279+
color: black;
280+
margin-bottom: 20px;
281+
}
282+
283+
.intro-section a {
284+
color: #007bff;
285+
text-decoration: none;
286+
font-weight: bold;
287+
}
288+
289+
.intro-section a:hover {
290+
text-decoration: underline;
291+
}
292+
293+
/* Description Section */
294+
.desp h2 {
295+
color: #007bff;
296+
text-align: center;
297+
}
298+
.desp p{
299+
color: #000000;
300+
text-align: center;
301+
}
302+
303+
/* Repository Container */
304+
.repos-container {
305+
display: grid;
306+
grid-template-columns: repeat(3, 1fr);
307+
gap: 43px;
308+
padding: 20px;
309+
}
310+
311+
/* Repository Card */
312+
.repo-card {
313+
background-color: #1e15d1;
314+
315+
color: #007bff;
316+
padding: 20px;
317+
border-radius: 8px;
318+
font-size: 14px;
319+
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.1);
320+
height: 300px;
321+
transition: transform 0.3s ease;
322+
}
323+
324+
.repo-card:hover {
325+
transform: scale(1.05);
326+
}
327+
328+
.repo-card h3 {
329+
margin-top: 0;
330+
font-size: 1.5em;
331+
}
332+
333+
.repo-card p {
334+
margin: 10px 0;
335+
color: #ffffff;
336+
color: #000000;
337+
}
338+
339+
.repo-card a {
340+
color: #ffa500;
341+
text-decoration: none;
342+
}
218343

344+
/* Get Involved Section */
345+
.get-involved-section {
346+
display: flex;
347+
align-items: center;
348+
justify-content: space-between;
349+
padding: 40px 20px;
350+
border-radius: 8px;
351+
margin-top: 40px;
352+
background-color: #1e15d1;
353+
color: #ffffff;
354+
}
355+
356+
.get-involved-section .content {
357+
max-width: 60%;
358+
}
359+
360+
.get-involved-section .content h2 {
361+
font-size: 2em;
362+
margin-bottom: 20px;
363+
color: #ff4800;
364+
}
365+
366+
.get-involved-section .content p {
367+
368+
color: #000000;
369+
}
370+
371+
.get-involved-section .btn {
372+
background-color: #ffa500;
373+
color: #ffffff;
374+
padding: 10px 20px;
375+
border-radius: 5px;
376+
text-decoration: none;
377+
transition: background-color 0.3s ease;
378+
}
379+
380+
.get-involved-section .btn:hover {
381+
background-color: #e68a00;
382+
}
383+
384+
.get-involved-section .svg-container {
385+
max-width: 35%;
386+
display: inline-block;
387+
perspective: 1000px;
388+
position: relative;
389+
}
390+
391+
.get-involved-section .svg-container svg {
392+
width: 100%;
393+
height: auto;
394+
transition: transform 0.1s ease;
395+
}
396+
397+
/* Dark mode styles */
398+
.dark-mode body {
399+
background-color: #121212;
400+
color: #ffffff;
401+
}
402+
403+
.dark-mode .intro-section,
404+
.dark-mode .intro-section p,
405+
.dark-mode .desp h2,
406+
.dark-mode .desp p {
407+
color:white;
408+
}
409+
410+
.dark-mode .repo-card {
411+
background-color: #4084ea;
412+
color: #ffffff;
413+
}
414+
415+
.dark-mode .repo-card p,
416+
.dark-mode .get-involved-section .content p {
417+
color: #ffffff;
418+
}
419+
420+
.dark-mode .get-involved-section {
421+
background-color: #4084ea;
422+
color: #ffffff;
423+
}
424+
425+
.dark-mode .get-involved-section .btn {
426+
background-color: #007bff;
427+
color: #ffffff;
428+
}
429+
430+
.dark-mode .get-involved-section .btn:hover {
431+
background-color: #0056b3;
432+
}
433+
434+
/* Responsive Adjustments */
435+
@media (max-width: 1024px) {
436+
.repos-container {
437+
grid-template-columns: repeat(2, 1fr);
438+
}
439+
}
440+
441+
@media (max-width: 768px) {
442+
.repos-container {
443+
grid-template-columns: 1fr;
444+
}
445+
446+
.get-involved-section {
447+
flex-direction: column;
448+
text-align: center;
449+
}
450+
451+
.get-involved-section .content {
452+
max-width: 100%;
453+
}
454+
455+
.get-involved-section .svg-container {
456+
max-width: 100%;
457+
margin-top: 20px;
458+
}
459+
}

‎Website/css/moon1img.png

1.28 KB
Loading

‎Website/css/sun1img.png

1.34 KB
Loading

‎Website/js/script.js

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
1-
document.addEventListener('DOMContentLoaded', function() {
1+
const icon = document.getElementById("icon");
2+
3+
icon.onclick = function() {
4+
document.body.classList.toggle("dark-mode");
5+
if (document.body.classList.contains("dark-mode")) {
6+
icon.querySelector("img").src = "./css/sun1img.png";
7+
} else {
8+
icon.querySelector("img").src = "./css/moon1img.png";
9+
}
10+
}
11+
12+
13+
14+
15+
16+
// var icon=document.getElementById("icon");
17+
// icon.onclick=function(){
18+
// document.body.classList.toggle("dark-theme");
19+
// if(document.body.classList.contains("dark-theme")){
20+
// icon.src="./css/sun1img.png" ;
21+
// }
22+
// else{
23+
// icon.src="./css/moon1img.png";
24+
// }
25+
// }
26+
document.addEventListener('DOMContentLoaded', function () {
227
// Function to fetch and display directories
328
async function fetchDirectories() {
429
const directoriesList = document.getElementById('directories');

‎Website/organization.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,14 @@
3232
</a>
3333
</li>
3434
<li>
35-
<button id="toggle-dark-mode">
35+
<div class="icon" id="icon">
36+
<img src="./css/moon1img.png">
37+
38+
39+
</div>
40+
<!-- <button id="toggle-dark-mode">
3641
<i class="fas fa-moon"></i>
37-
</button>
42+
</button> -->
3843
</li>
3944
</ul>
4045
</nav>
@@ -54,7 +59,7 @@ <h1>Welcome to Recode Hive!</h1>
5459
explore additional projects.</p>
5560
</section>
5661
<div class="desp">
57-
<h2><b>Recode Hive Repositories</b></h1>
62+
<h2><b>Recode Hive Repositories</b></h2>
5863
<p>Explore our repositories below to find valuable resources, code examples, and tools that can help you
5964
in your projects. <br> Whether you're a seasoned developer or just starting out, Recode Hive has
6065
something for everyone.</p>

0 commit comments

Comments
 (0)