Skip to content

Commit dc5a5ca

Browse files
SomeshdiwanSomeshdiwan
committed
Final
1 parent a6facf1 commit dc5a5ca

2 files changed

Lines changed: 100 additions & 30 deletions

File tree

‎site/_layouts/default.html‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,7 @@
66
<title>{{ page.title }}</title>
77
<link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
88

9-
<!-- Dark Mode Toggle Button -->
10-
<style>
11-
.dark-toggle {
12-
position: fixed;
13-
top: 1rem;
14-
right: 1rem;
15-
z-index: 1000;
16-
background: var(--sidebar-bg);
17-
color: var(--text-color);
18-
border: none;
19-
padding: 0.5rem 0.75rem;
20-
border-radius: 8px;
21-
cursor: pointer;
22-
font-size: 1.2rem;
23-
box-shadow: 0 0 10px rgba(0,0,0,0.1);
24-
transition: background 0.3s ease;
25-
}
26-
</style>
27-
9+
<!-- Dark mode script -->
2810
<script>
2911
const toggleDarkMode = () => {
3012
document.body.classList.toggle('dark-mode');
@@ -36,26 +18,33 @@
3618
document.body.classList.add('dark-mode');
3719
}
3820
};
21+
</script>
3922

23+
<!-- Sidebar toggle script -->
24+
<script>
4025
function toggleSidebar() {
4126
const sidebar = document.getElementById("sidebar");
27+
const content = document.querySelector(".content");
28+
4229
sidebar.classList.toggle("hidden");
30+
content.classList.toggle("expanded");
4331
}
4432
</script>
4533
</head>
4634

4735
<body>
48-
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
36+
<!-- Dark mode button -->
37+
<button class="dark-toggle-btn" onclick="toggleDarkMode()">🌓</button>
4938

5039
<div class="wrapper">
5140
<div id="sidebar" class="sidebar">
5241
{% include nav.html %}
5342
</div>
54-
5543
<div class="content fade-in">
44+
<!-- Sidebar toggle button -->
5645
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
5746
{{ content }}
5847
</div>
5948
</div>
6049
</body>
61-
</html>
50+
</html>

‎site/assets/style.css‎

Lines changed: 89 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ body {
6060
6161
6262
*/
63+
6364
:root {
6465
--bg-color: #ffffff;
6566
--text-color: #000000;
@@ -77,32 +78,112 @@ body {
7778
body {
7879
background-color: var(--bg-color);
7980
color: var(--text-color);
81+
margin: 0;
82+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
83+
}
84+
85+
a {
86+
color: var(--link-color);
87+
text-decoration: none;
88+
}
89+
90+
a:hover {
91+
text-decoration: underline;
92+
}
93+
94+
.wrapper {
95+
display: flex;
96+
height: 100vh;
97+
overflow: hidden;
8098
}
8199

82100
.sidebar {
83101
width: 260px;
84102
padding: 1rem;
85-
position: fixed;
86-
height: 100vh;
87-
overflow-y: auto;
88-
border-right: 1px solid #ccc;
89103
background-color: var(--sidebar-bg);
90-
transition: all 0.3s ease;
104+
border-right: 1px solid #ccc;
105+
overflow-y: auto;
106+
transition: transform 0.3s ease-in-out;
107+
}
108+
109+
.sidebar.hidden {
110+
transform: translateX(-100%);
91111
}
92112

93113
.sidebar a {
94114
display: block;
95115
padding: 0.5rem;
96116
margin-bottom: 0.5rem;
97117
border-radius: 0.5rem;
98-
text-decoration: none;
99-
color: var(--link-color);
100118
}
101119

102120
.sidebar a:hover {
103121
background-color: rgba(0, 0, 0, 0.05);
104122
}
105123

124+
.content {
125+
flex: 1;
126+
padding: 2rem;
127+
transition: margin-left 0.3s ease-in-out;
128+
margin-left: 260px;
129+
}
130+
131+
.sidebar.hidden + .content,
132+
.content.expanded {
133+
margin-left: 0;
134+
}
135+
136+
/* Mobile adjustments */
137+
@media (max-width: 768px) {
138+
.sidebar {
139+
position: fixed;
140+
top: 0;
141+
left: 0;
142+
height: 100%;
143+
z-index: 999;
144+
transform: translateX(-100%);
145+
}
146+
147+
.sidebar.show {
148+
transform: translateX(0);
149+
}
150+
151+
.content {
152+
margin-left: 0;
153+
}
154+
}
155+
156+
.toggle-btn {
157+
background: transparent;
158+
border: none;
159+
font-size: 1.5rem;
160+
position: fixed;
161+
top: 1rem;
162+
left: 1rem;
163+
z-index: 1000;
164+
cursor: pointer;
165+
color: var(--text-color);
166+
}
167+
168+
/* Dark mode toggle button */
169+
.dark-toggle-btn {
170+
position: fixed;
171+
top: 1rem;
172+
right: 1rem;
173+
z-index: 1000;
174+
font-size: 1.5rem;
175+
background: transparent;
176+
border: none;
177+
cursor: pointer;
178+
color: var(--text-color);
179+
}
180+
181+
/* Fade-in animation for content */
106182
.fade-in {
107183
animation: fadeIn 0.4s ease-in;
108-
}
184+
}
185+
186+
@keyframes fadeIn {
187+
from { opacity: 0; transform: translateY(10px); }
188+
to { opacity: 1; transform: translateY(0); }
189+
}

0 commit comments

Comments
 (0)