Skip to content

Commit 0868890

Browse files
SomeshdiwanSomeshdiwan
committed
Final
1 parent dc5a5ca commit 0868890

File tree

2 files changed

+62
-76
lines changed

2 files changed

+62
-76
lines changed

‎site/_layouts/default.html‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>{{ page.title }}</title>
77
<link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
8-
9-
<!-- Dark mode script -->
108
<script>
9+
// Sidebar Toggle Function
10+
function toggleSidebar() {
11+
const sidebar = document.getElementById("sidebar");
12+
sidebar.classList.toggle("hidden");
13+
}
14+
15+
// Dark Mode Toggle
1116
const toggleDarkMode = () => {
1217
document.body.classList.toggle('dark-mode');
1318
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
@@ -19,31 +24,24 @@
1924
}
2025
};
2126
</script>
22-
23-
<!-- Sidebar toggle script -->
24-
<script>
25-
function toggleSidebar() {
26-
const sidebar = document.getElementById("sidebar");
27-
const content = document.querySelector(".content");
28-
29-
sidebar.classList.toggle("hidden");
30-
content.classList.toggle("expanded");
31-
}
32-
</script>
3327
</head>
34-
3528
<body>
36-
<!-- Dark mode button -->
37-
<button class="dark-toggle-btn" onclick="toggleDarkMode()">🌓</button>
29+
<!-- Dark Mode Toggle Button -->
30+
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
3831

3932
<div class="wrapper">
33+
<!-- Sidebar Navigation -->
4034
<div id="sidebar" class="sidebar">
4135
{% include nav.html %}
4236
</div>
43-
<div class="content fade-in">
44-
<!-- Sidebar toggle button -->
37+
38+
<!-- Content Area -->
39+
<div class="content">
40+
<!-- Sidebar Toggle Button -->
4541
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
46-
{{ content }}
42+
<div class="fade-in">
43+
{{ content }}
44+
</div>
4745
</div>
4846
</div>
4947
</body>

‎site/assets/style.css‎

Lines changed: 45 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ body {
6060
6161
6262
*/
63-
6463
:root {
6564
--bg-color: #ffffff;
6665
--text-color: #000000;
@@ -79,106 +78,78 @@ body {
7978
background-color: var(--bg-color);
8079
color: var(--text-color);
8180
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;
81+
font-family: sans-serif;
9882
}
9983

84+
/* Sidebar Styles */
10085
.sidebar {
86+
background-color: var(--sidebar-bg);
10187
width: 260px;
10288
padding: 1rem;
103-
background-color: var(--sidebar-bg);
104-
border-right: 1px solid #ccc;
89+
position: fixed;
90+
height: 100vh;
10591
overflow-y: auto;
106-
transition: transform 0.3s ease-in-out;
92+
border-right: 1px solid #ccc;
93+
transition: transform 0.3s ease;
94+
z-index: 999;
10795
}
10896

10997
.sidebar.hidden {
11098
transform: translateX(-100%);
11199
}
112100

101+
/* Sidebar Links */
113102
.sidebar a {
114103
display: block;
115104
padding: 0.5rem;
116105
margin-bottom: 0.5rem;
117106
border-radius: 0.5rem;
107+
text-decoration: none;
108+
color: var(--link-color);
118109
}
119110

120111
.sidebar a:hover {
121112
background-color: rgba(0, 0, 0, 0.05);
122113
}
123114

115+
/* Content Area */
124116
.content {
125-
flex: 1;
126-
padding: 2rem;
127-
transition: margin-left 0.3s ease-in-out;
128117
margin-left: 260px;
118+
padding: 1rem;
119+
transition: margin-left 0.3s ease;
129120
}
130121

131-
.sidebar.hidden + .content,
132-
.content.expanded {
122+
.sidebar.hidden + .content {
133123
margin-left: 0;
134124
}
135125

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-
126+
/* Toggle Button */
156127
.toggle-btn {
157-
background: transparent;
158-
border: none;
159-
font-size: 1.5rem;
160128
position: fixed;
161129
top: 1rem;
162130
left: 1rem;
163-
z-index: 1000;
131+
z-index: 1001;
132+
background: #eee;
133+
border: none;
134+
padding: 0.5rem 1rem;
135+
border-radius: 5px;
164136
cursor: pointer;
165-
color: var(--text-color);
166137
}
167138

168-
/* Dark mode toggle button */
169-
.dark-toggle-btn {
139+
/* Dark Mode Toggle Button */
140+
.dark-toggle {
170141
position: fixed;
171142
top: 1rem;
172143
right: 1rem;
173-
z-index: 1000;
174-
font-size: 1.5rem;
175-
background: transparent;
144+
z-index: 1001;
145+
background: #eee;
176146
border: none;
147+
padding: 0.5rem 1rem;
148+
border-radius: 5px;
177149
cursor: pointer;
178-
color: var(--text-color);
179150
}
180151

181-
/* Fade-in animation for content */
152+
/* Animation */
182153
.fade-in {
183154
animation: fadeIn 0.4s ease-in;
184155
}
@@ -187,3 +158,20 @@ a:hover {
187158
from { opacity: 0; transform: translateY(10px); }
188159
to { opacity: 1; transform: translateY(0); }
189160
}
161+
162+
/* Responsive Fix for Small Screens */
163+
@media (max-width: 768px) {
164+
.sidebar {
165+
transform: translateX(-100%);
166+
position: fixed;
167+
left: 0;
168+
}
169+
170+
.sidebar:not(.hidden) {
171+
transform: translateX(0);
172+
}
173+
174+
.content {
175+
margin-left: 0;
176+
}
177+
}

0 commit comments

Comments
 (0)