Skip to content

Commit 9a5eae7

Browse files
SomeshdiwanSomeshdiwan
committed
Fix
Signed-off-by: Someshdiwan <[email protected]>
1 parent ca3aaaa commit 9a5eae7

File tree

2 files changed

+67
-63
lines changed

2 files changed

+67
-63
lines changed

‎site/_layouts/default.html‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}" />
1212
<meta name="apple-mobile-web-app-title" content="Java" />
1313

14-
<!-- Manifest: Use only one link, adjust for GitHub Pages project path -->
14+
<!-- Manifest (use only one, with correct GitHub Pages path) -->
1515
<link rel="manifest" href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest">
1616
<meta name="theme-color" content="#ffffff">
1717

@@ -25,7 +25,7 @@
2525
sidebar.classList.toggle("hidden");
2626
}
2727

28-
// Function to hide sidebar if clicked outside
28+
// Hide sidebar when clicking outside
2929
function hideSidebarIfClickedOutside(event) {
3030
const sidebar = document.getElementById("sidebar");
3131
const toggleBtn = document.querySelector(".toggle-btn");
@@ -36,13 +36,13 @@
3636
}
3737
}
3838

39-
// Dark Mode Toggle Function
39+
// Dark Mode Toggle Function (now used inside time container)
4040
const toggleDarkMode = () => {
4141
document.body.classList.toggle('dark-mode');
4242
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
4343
};
4444

45-
// Live Time Update Function (includes GMT offset)
45+
// Live Time Update Function with GMT Offset
4646
function updateLiveTime() {
4747
const now = new Date();
4848
let hours = now.getHours();
@@ -52,7 +52,7 @@
5252
hours = hours % 12 || 12;
5353
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
5454

55-
// Compute offset (JS returns minutes behind UTC; here we negate to get GMT+ for IST)
55+
// Calculate GMT offset (JS returns minutes behind UTC; we negate to show positive for IST)
5656
const offset = -now.getTimezoneOffset();
5757
const offsetHours = Math.floor(Math.abs(offset) / 60);
5858
const offsetMinutes = Math.abs(offset) % 60;
@@ -62,7 +62,7 @@
6262
document.getElementById('live-time').textContent = `Time: ${timeString} ${offsetString}`;
6363
}
6464

65-
// Service Worker Registration (ensure sw.js is at the correct path)
65+
// Service Worker Registration
6666
if ("serviceWorker" in navigator) {
6767
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
6868
.then(() => console.log("✅ Service Worker Registered"))
@@ -71,26 +71,21 @@
7171

7272
// Initialization on DOMContentLoaded
7373
window.addEventListener('DOMContentLoaded', () => {
74-
// Dark mode initialization
7574
if (localStorage.getItem('dark-mode') === 'true') {
7675
document.body.classList.add('dark-mode');
7776
}
78-
// Attach click listener for sidebar auto-hide
7977
document.addEventListener('click', hideSidebarIfClickedOutside);
80-
81-
// Start live time updates
8278
updateLiveTime();
8379
setInterval(updateLiveTime, 1000);
8480
});
8581
</script>
8682
</head>
8783
<body>
88-
<!-- Dark Mode Toggle Button -->
89-
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
90-
91-
<!-- Place the Time Container under the dark mode toggle -->
92-
<div id="time-location-container">
84+
<!-- The combined Time Container with Dark Mode Toggle -->
85+
<div id="time-container">
9386
<div id="live-time">Time: Loading...</div>
87+
<!-- Dark mode toggle button placed inside the time container -->
88+
<button onclick="toggleDarkMode()" class="dark-toggle" style="padding: 0.5rem; font-size: 1.2rem;">🌓</button>
9489
</div>
9590

9691
<div class="wrapper">
@@ -101,7 +96,7 @@
10196

10297
<!-- Content Area -->
10398
<div class="content">
104-
<!-- Sidebar Toggle Button (keep if you want manual control) -->
99+
<!-- Sidebar Toggle Button (if you want manual control; you may remove it later) -->
105100
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
106101
<div class="fade-in">
107102
{{ content }}

‎site/assets/style.css‎

Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ body {
2929
transition: background-color 0.3s ease, color 0.3s ease;
3030
}
3131

32-
/* Sidebar Styles */
32+
/* Sidebar */
3333
.sidebar {
3434
background-color: var(--sidebar-bg);
3535
width: 260px;
@@ -59,7 +59,7 @@ body {
5959
background-color: var(--hover-bg);
6060
}
6161

62-
/* Content Area */
62+
/* Content */
6363
.content {
6464
margin-left: 260px;
6565
padding: 1rem;
@@ -71,10 +71,10 @@ body {
7171
}
7272

7373
/* Toggle Buttons */
74-
.toggle-btn {
74+
.toggle-btn,
75+
.dark-toggle {
7576
position: fixed;
7677
top: 1rem;
77-
left: 1rem;
7878
z-index: 1001;
7979
background-color: var(--button-bg);
8080
color: var(--button-text);
@@ -84,20 +84,15 @@ body {
8484
cursor: pointer;
8585
}
8686

87+
.toggle-btn {
88+
left: 1rem;
89+
}
90+
8791
.dark-toggle {
88-
position: fixed;
89-
top: 1rem;
9092
right: 1rem;
91-
z-index: 1001;
92-
background-color: var(--button-bg);
93-
color: var(--button-text);
94-
border: none;
95-
padding: 0.5rem 1rem;
96-
border-radius: 5px;
97-
cursor: pointer;
9893
}
9994

100-
/* Fade-in Animation */
95+
/* Animation */
10196
.fade-in {
10297
animation: fadeIn 0.4s ease-in;
10398
}
@@ -107,22 +102,29 @@ body {
107102
to { opacity: 1; transform: translateY(0); }
108103
}
109104

110-
/* Responsive Fix for Small Screens */
111-
@media (max-width: 768px) {
112-
.sidebar {
113-
transform: translateX(-100%);
114-
position: fixed;
115-
left: 0;
116-
}
117-
.sidebar:not(.hidden) {
118-
transform: translateX(0);
119-
}
120-
.content {
121-
margin-left: 0;
122-
}
105+
/* Time Container */
106+
#time-container {
107+
background: rgba(0, 0, 0, 0.6);
108+
color: #00ffff;
109+
border: 1px solid #00ffff;
110+
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
111+
border-radius: 16px;
112+
padding: 1.2rem;
113+
margin: 1rem auto;
114+
max-width: 320px;
115+
display: flex;
116+
align-items: center;
117+
justify-content: space-between;
118+
font-weight: 600;
119+
font-size: 1.05rem;
120+
}
121+
122+
body.dark-mode #time-container {
123+
background-color: #333;
124+
color: #eee;
123125
}
124126

125-
/* Image Row and Responsive Image Styles */
127+
/* Image Row */
126128
.image-row {
127129
display: flex;
128130
flex-wrap: wrap;
@@ -149,14 +151,15 @@ body {
149151
}
150152
}
151153

154+
/* Responsive Image */
152155
.responsive-img {
153156
width: 100%;
154-
max-width: 600px; /* Adjust this value as preferred */
157+
max-width: 600px;
155158
height: auto;
156159
margin: 0 auto;
157160
display: block;
158161
border-radius: 10px;
159-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
162+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
160163
transition: transform 0.3s ease;
161164
}
162165

@@ -168,27 +171,33 @@ body {
168171
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
169172
}
170173

171-
/* Time Container Styling */
172-
#time-location-container {
173-
background: rgba(0, 0, 0, 0.6);
174-
color: #00ffff;
175-
border: 1px solid #00ffff;
176-
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
177-
border-radius: 16px;
178-
padding: 1.2rem;
179-
text-align: center;
180-
font-weight: 600;
181-
font-size: 1.05rem;
182-
margin: 1rem auto;
183-
max-width: 300px;
184-
}
174+
/* Mobile Responsive Fixes */
175+
@media (max-width: 768px) {
176+
.sidebar {
177+
transform: translateX(-100%);
178+
left: 0;
179+
}
185180

186-
body.dark-mode #time-location-container {
187-
background-color: #333;
188-
color: #eee;
181+
.sidebar:not(.hidden) {
182+
transform: translateX(0);
183+
}
184+
185+
.content {
186+
margin-left: 0;
187+
}
189188
}
190189

191190
@media (max-width: 600px) {
191+
#time-container {
192+
font-size: 0.95rem;
193+
margin: 1rem;
194+
flex-direction: column;
195+
}
196+
197+
#time-container button {
198+
margin-top: 0.5rem;
199+
}
200+
192201
#time-location-container {
193202
font-size: 0.95rem;
194203
margin: 1rem;

0 commit comments

Comments
 (0)