niri 1.9 → 3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/LICENSE.txt +21 -21
- data/README.md +3 -0
- data/_config.yml +3 -2
- data/_includes/footer.html +22 -10
- data/_includes/head.html +3 -3
- data/_includes/navigation.html +35 -24
- data/_layouts/about.html +9 -0
- data/_layouts/default.html +9 -22
- data/_layouts/home.html +34 -22
- data/_layouts/post.html +20 -3
- data/_layouts/projects.html +8 -0
- data/assets/css/bulma-1.0.2.css +2 -2
- data/assets/css/main.css +241 -62
- data/assets/js/main.js +66 -0
- metadata +15 -8
- data/_layouts/page.html +0 -30
- data/assets/js/darklight-mode.js +0 -37
data/assets/css/main.css
CHANGED
|
@@ -1,118 +1,297 @@
|
|
|
1
1
|
|
|
2
|
-
/* Chrome, Safari */
|
|
3
|
-
::-webkit-scrollbar {
|
|
4
|
-
width: 15px;
|
|
5
|
-
height: 15px;
|
|
6
|
-
}
|
|
7
|
-
::-webkit-scrollbar-track-piece {
|
|
8
|
-
background-color: #222222;
|
|
9
|
-
}
|
|
10
|
-
::-webkit-scrollbar-thumb:vertical {
|
|
11
|
-
height: 30px;
|
|
12
|
-
background-color: #535955;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
2
|
:root {
|
|
16
|
-
--
|
|
3
|
+
--primary-color: #6b48ff;
|
|
4
|
+
--secondary-color: #8075ff;
|
|
5
|
+
--accent-color: #42b883;
|
|
6
|
+
--dark-bg: #121212;
|
|
7
|
+
--dark-card: #1e1e1e;
|
|
8
|
+
--dark-navbar: #0d0d0d;
|
|
9
|
+
--dark-footer: #121212;
|
|
10
|
+
--light-bg: #f9f9f9;
|
|
11
|
+
--light-card: #ffffff;
|
|
12
|
+
--light-navbar: #ffffff;
|
|
13
|
+
--light-footer: #f5f5f5; /* Added a slightly different light footer color */
|
|
14
|
+
--dark-text: #eaeaea;
|
|
15
|
+
--light-text: #333333;
|
|
16
|
+
--shadow: rgba(0, 0, 0, 0.1);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Scrollbar Styling */
|
|
20
|
+
::-webkit-scrollbar {
|
|
21
|
+
width: 8px;
|
|
22
|
+
height: 8px;
|
|
17
23
|
}
|
|
18
24
|
|
|
25
|
+
::-webkit-scrollbar-track {
|
|
26
|
+
background-color: var(--dark-bg);
|
|
27
|
+
border-radius: 10px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
::-webkit-scrollbar-thumb {
|
|
31
|
+
background-color: var(--primary-color);
|
|
32
|
+
border-radius: 10px;
|
|
33
|
+
}
|
|
19
34
|
|
|
20
35
|
html.is-dark {
|
|
21
|
-
--text-color:
|
|
36
|
+
--text-color: var(--dark-text);
|
|
37
|
+
--bg-color: var(--dark-bg);
|
|
38
|
+
--card-color: var(--dark-card);
|
|
39
|
+
--navbar-color: var(--dark-navbar);
|
|
40
|
+
--footer-color: var(--dark-footer); /* Use the new footer color variable */
|
|
41
|
+
--code-bg: #1e1e1e;
|
|
42
|
+
--code-text: #ffcc00;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
html:not(.is-dark) {
|
|
46
|
+
--text-color: var(--light-text);
|
|
47
|
+
--bg-color: var(--light-bg);
|
|
48
|
+
--card-color: var(--light-card);
|
|
49
|
+
--navbar-color: var(--light-navbar);
|
|
50
|
+
--footer-color: var(--light-footer); /* Use the new footer color variable */
|
|
51
|
+
--code-bg: #555353;
|
|
52
|
+
--code-text: #ffffff;
|
|
22
53
|
}
|
|
23
54
|
|
|
24
55
|
body {
|
|
56
|
+
background-color: var(--bg-color);
|
|
25
57
|
color: var(--text-color);
|
|
58
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
59
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
26
60
|
}
|
|
27
61
|
|
|
28
|
-
.
|
|
29
|
-
color: var(--
|
|
62
|
+
.navbar {
|
|
63
|
+
background-color: var(--navbar-color);
|
|
64
|
+
box-shadow: 0 2px 10px var(--shadow);
|
|
65
|
+
transition: background-color 0.3s ease;
|
|
66
|
+
padding: 0.5rem 1rem;
|
|
30
67
|
}
|
|
31
68
|
|
|
32
|
-
|
|
33
|
-
|
|
69
|
+
/* Fix navbar colors for dark mode */
|
|
70
|
+
html.is-dark .navbar,
|
|
71
|
+
html.is-dark .navbar-menu,
|
|
72
|
+
html.is-dark .navbar-item,
|
|
73
|
+
html.is-dark .navbar-link,
|
|
74
|
+
html.is-dark .navbar-burger {
|
|
75
|
+
background-color: var(--dark-navbar);
|
|
76
|
+
color: var(--dark-text);
|
|
34
77
|
}
|
|
35
78
|
|
|
36
|
-
|
|
37
|
-
|
|
79
|
+
/* Make sure mobile dropdown menu follows dark mode */
|
|
80
|
+
html.is-dark .navbar-menu.is-active {
|
|
81
|
+
background-color: var(--dark-navbar);
|
|
38
82
|
}
|
|
39
83
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
color:
|
|
84
|
+
/* Container fix for dark mode */
|
|
85
|
+
html.is-dark .container {
|
|
86
|
+
background-color: transparent;
|
|
43
87
|
}
|
|
44
88
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
89
|
+
.navbar-item {
|
|
90
|
+
font-weight: 500;
|
|
91
|
+
transition: color 0.3s ease;
|
|
48
92
|
}
|
|
49
93
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
color:
|
|
94
|
+
.navbar-item.is-active,
|
|
95
|
+
.navbar-item:hover {
|
|
96
|
+
background-color: transparent !important;
|
|
97
|
+
color: var(--primary-color) !important;
|
|
53
98
|
}
|
|
54
99
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
color:
|
|
100
|
+
/* Fix for hamburger menu in dark mode */
|
|
101
|
+
html.is-dark .navbar-burger span {
|
|
102
|
+
background-color: var(--dark-text);
|
|
58
103
|
}
|
|
59
104
|
|
|
60
|
-
|
|
61
|
-
background-color:
|
|
62
|
-
|
|
105
|
+
.hero {
|
|
106
|
+
background-color: transparent;
|
|
107
|
+
padding: 0;
|
|
108
|
+
min-height: calc(100vh - 140px);
|
|
63
109
|
}
|
|
64
110
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
color: white;
|
|
111
|
+
.hero-body {
|
|
112
|
+
padding: 3rem 1.5rem;
|
|
68
113
|
}
|
|
69
114
|
|
|
70
|
-
|
|
71
|
-
background-color:
|
|
72
|
-
|
|
115
|
+
.post-card {
|
|
116
|
+
background-color: var(--card-color);
|
|
117
|
+
border-radius: 12px;
|
|
118
|
+
box-shadow: 0 5px 15px var(--shadow);
|
|
119
|
+
transition: all 0.3s ease;
|
|
120
|
+
margin-bottom: 1.5rem;
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
height: 100%;
|
|
123
|
+
display: flex;
|
|
124
|
+
flex-direction: column;
|
|
73
125
|
}
|
|
74
126
|
|
|
127
|
+
.post-card:hover {
|
|
128
|
+
transform: translateY(-5px);
|
|
129
|
+
box-shadow: 0 10px 20px var(--shadow);
|
|
130
|
+
}
|
|
75
131
|
|
|
76
|
-
|
|
77
|
-
|
|
132
|
+
.post-card-header {
|
|
133
|
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
134
|
+
padding: 1.5rem;
|
|
78
135
|
color: white;
|
|
79
136
|
}
|
|
80
137
|
|
|
138
|
+
.post-card-header h4 {
|
|
139
|
+
color: white !important;
|
|
140
|
+
font-size: 1.4rem;
|
|
141
|
+
font-weight: 600;
|
|
142
|
+
margin-bottom: 0.5rem;
|
|
143
|
+
}
|
|
81
144
|
|
|
145
|
+
.post-card-header a {
|
|
146
|
+
color: white;
|
|
147
|
+
text-decoration: none;
|
|
148
|
+
}
|
|
82
149
|
|
|
150
|
+
.post-card-content {
|
|
151
|
+
padding: 1.5rem;
|
|
152
|
+
flex-grow: 1;
|
|
153
|
+
}
|
|
83
154
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
color:
|
|
155
|
+
.post-date {
|
|
156
|
+
font-size: 0.9rem;
|
|
157
|
+
color: var(--accent-color);
|
|
158
|
+
font-weight: 500;
|
|
87
159
|
}
|
|
88
160
|
|
|
89
|
-
.
|
|
90
|
-
|
|
91
|
-
|
|
161
|
+
.year-divider {
|
|
162
|
+
position: relative;
|
|
163
|
+
padding-left: 1rem;
|
|
164
|
+
margin: 3rem 0 2rem;
|
|
165
|
+
font-size: 1.8rem;
|
|
166
|
+
font-weight: 700;
|
|
167
|
+
color: var(--primary-color);
|
|
168
|
+
border-bottom: 2px solid var(--primary-color);
|
|
169
|
+
padding-bottom: 0.5rem;
|
|
92
170
|
}
|
|
93
171
|
|
|
94
|
-
.
|
|
95
|
-
background-color:
|
|
96
|
-
|
|
172
|
+
.toggle-button {
|
|
173
|
+
background-color: transparent;
|
|
174
|
+
border: 2px solid var(--secondary-color);
|
|
175
|
+
color: var(--secondary-color);
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
width: 40px;
|
|
178
|
+
height: 40px;
|
|
179
|
+
display: flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
transition: all 0.3s ease;
|
|
97
183
|
}
|
|
98
184
|
|
|
99
|
-
.
|
|
100
|
-
background-color:
|
|
185
|
+
.toggle-button:hover {
|
|
186
|
+
background-color: var(--secondary-color);
|
|
101
187
|
color: white;
|
|
102
188
|
}
|
|
103
189
|
|
|
190
|
+
/* Updated footer styling */
|
|
104
191
|
.footer {
|
|
105
|
-
background-color:
|
|
106
|
-
|
|
192
|
+
background-color: var(--footer-color); /* Use the footer color variable */
|
|
193
|
+
padding: 3rem 1.5rem;
|
|
194
|
+
transition: background-color 0.3s ease;
|
|
107
195
|
}
|
|
108
196
|
|
|
109
|
-
.
|
|
110
|
-
|
|
111
|
-
|
|
197
|
+
.footer a {
|
|
198
|
+
color: var(--primary-color);
|
|
199
|
+
font-weight: 500;
|
|
200
|
+
transition: color 0.3s ease;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.footer a:hover {
|
|
204
|
+
color: var(--secondary-color);
|
|
205
|
+
text-decoration: underline;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.content-container {
|
|
209
|
+
max-width: 1200px;
|
|
210
|
+
margin: 0 auto;
|
|
211
|
+
padding: 2rem 1.5rem;
|
|
112
212
|
}
|
|
113
213
|
|
|
114
|
-
.
|
|
115
|
-
background-color:
|
|
214
|
+
.category-tag {
|
|
215
|
+
background-color: var(--accent-color);
|
|
116
216
|
color: white;
|
|
217
|
+
border-radius: 20px;
|
|
218
|
+
padding: 0.3rem 0.8rem;
|
|
219
|
+
font-size: 0.8rem;
|
|
220
|
+
font-weight: 500;
|
|
221
|
+
margin-right: 0.5rem;
|
|
222
|
+
display: inline-block;
|
|
223
|
+
margin-bottom: 0.5rem;
|
|
117
224
|
}
|
|
118
225
|
|
|
226
|
+
@media screen and (max-width: 768px) {
|
|
227
|
+
.post-card-header h4 {
|
|
228
|
+
font-size: 1.2rem;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.year-divider {
|
|
232
|
+
font-size: 1.5rem;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* Target mobile navbar components */
|
|
236
|
+
html.is-dark .navbar,
|
|
237
|
+
html.is-dark .navbar-brand,
|
|
238
|
+
html.is-dark .navbar-menu,
|
|
239
|
+
html.is-dark .navbar-item,
|
|
240
|
+
html.is-dark .container,
|
|
241
|
+
html.is-dark div[class^="navbar"] {
|
|
242
|
+
background-color: var(--dark-navbar) !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* Target footer in dark mode */
|
|
246
|
+
html.is-dark .footer {
|
|
247
|
+
background-color: var(--dark-footer) !important;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* Stylish code block styling */
|
|
252
|
+
code {
|
|
253
|
+
font-family: 'Fira Code', 'Courier New', monospace;
|
|
254
|
+
font-size: 14px;
|
|
255
|
+
background-color: var(--code-bg);
|
|
256
|
+
color: var(--code-text);
|
|
257
|
+
padding: 2px 6px;
|
|
258
|
+
border-radius: 4px;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
pre {
|
|
262
|
+
background-color: var(--code-bg);
|
|
263
|
+
color: var(--code-text);
|
|
264
|
+
padding: 16px;
|
|
265
|
+
border-radius: 8px;
|
|
266
|
+
overflow-x: auto;
|
|
267
|
+
font-family: 'Fira Code', 'Courier New', monospace;
|
|
268
|
+
font-size: 14px;
|
|
269
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
pre code {
|
|
273
|
+
background: none;
|
|
274
|
+
color: inherit;
|
|
275
|
+
padding: 0;
|
|
276
|
+
}
|
|
277
|
+
/* Rouge Syntax Highlighting for Jekyll */
|
|
278
|
+
pre.highlight { background-color: #1e1e1e; color: #ffffff; padding: 16px; border-radius: 8px; overflow-x: auto; }
|
|
279
|
+
pre.highlight code { background: none; color: inherit; padding: 0; }
|
|
280
|
+
|
|
281
|
+
/* Token Styles for Rouge */
|
|
282
|
+
.highlight .k { color: #c792ea; } /* Keyword */
|
|
283
|
+
.highlight .s { color: #a5e844; } /* String */
|
|
284
|
+
.highlight .nf { color: #82aaff; } /* Function */
|
|
285
|
+
.highlight .c { color: #697098; font-style: italic; } /* Comment */
|
|
286
|
+
.highlight .o { color: #89ddff; } /* Operator */
|
|
287
|
+
.highlight .p { color: #ffffff; } /* Punctuation */
|
|
288
|
+
|
|
289
|
+
/* Ruby-specific */
|
|
290
|
+
.highlight .nc { color: #ffcb6b; } /* Class */
|
|
291
|
+
.highlight .nf { color: #82aaff; } /* Method */
|
|
292
|
+
.highlight .ss { color: #f78c6c; } /* Symbol */
|
|
293
|
+
.highlight .no { color: #ff5370; } /* Constant */
|
|
294
|
+
.highlight .nv { color: #c3e88d; } /* Variable */
|
|
295
|
+
.highlight .mi { color: #f78c6c; } /* Number */
|
|
296
|
+
.highlight .kc { color: #ff5370; } /* Boolean */
|
|
297
|
+
.highlight .kp { color: #ff5370; } /* Nil */
|
data/assets/js/main.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
|
|
2
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
3
|
+
// Theme toggle functionality
|
|
4
|
+
const toggleButton = document.getElementById("toggle-button");
|
|
5
|
+
const themeIcon = document.getElementById("theme-icon");
|
|
6
|
+
const currentTheme = localStorage.getItem("theme");
|
|
7
|
+
|
|
8
|
+
// Set default theme to Dark Mode
|
|
9
|
+
if (!currentTheme) {
|
|
10
|
+
document.documentElement.classList.add("is-dark");
|
|
11
|
+
localStorage.setItem("theme", "dark");
|
|
12
|
+
} else if (currentTheme === "dark") {
|
|
13
|
+
document.documentElement.classList.add("is-dark");
|
|
14
|
+
} else {
|
|
15
|
+
document.documentElement.classList.remove("is-dark");
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function updateIcon() {
|
|
19
|
+
if (document.documentElement.classList.contains("is-dark")) {
|
|
20
|
+
themeIcon.classList.replace("fa-moon", "fa-sun");
|
|
21
|
+
} else {
|
|
22
|
+
themeIcon.classList.replace("fa-sun", "fa-moon");
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Update icon based on initial mode
|
|
27
|
+
updateIcon();
|
|
28
|
+
|
|
29
|
+
toggleButton.addEventListener("click", () => {
|
|
30
|
+
requestAnimationFrame(() => {
|
|
31
|
+
document.documentElement.classList.toggle("is-dark");
|
|
32
|
+
if (document.documentElement.classList.contains("is-dark")) {
|
|
33
|
+
localStorage.setItem("theme", "dark");
|
|
34
|
+
} else {
|
|
35
|
+
localStorage.setItem("theme", "light");
|
|
36
|
+
}
|
|
37
|
+
updateIcon();
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// Mobile navbar toggle
|
|
42
|
+
const navbarBurger = document.querySelector('.navbar-burger');
|
|
43
|
+
if (navbarBurger) {
|
|
44
|
+
navbarBurger.addEventListener('click', () => {
|
|
45
|
+
const target = document.getElementById(navbarBurger.dataset.target);
|
|
46
|
+
navbarBurger.classList.toggle('is-active');
|
|
47
|
+
target.classList.toggle('is-active');
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Add animation to cards on scroll
|
|
52
|
+
const animateOnScroll = () => {
|
|
53
|
+
const cards = document.querySelectorAll('.post-card');
|
|
54
|
+
cards.forEach(card => {
|
|
55
|
+
const cardTop = card.getBoundingClientRect().top;
|
|
56
|
+
const windowHeight = window.innerHeight;
|
|
57
|
+
if (cardTop < windowHeight * 0.9) {
|
|
58
|
+
card.classList.add('animate__fadeIn');
|
|
59
|
+
card.style.opacity = 1;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
window.addEventListener('scroll', animateOnScroll);
|
|
65
|
+
animateOnScroll(); // Run on initial load
|
|
66
|
+
});
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: niri
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: '
|
|
4
|
+
version: '3.0'
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- rokhimin Wahid
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2025-
|
|
10
|
+
date: 2025-03-09 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
12
|
- !ruby/object:Gem::Dependency
|
|
13
13
|
name: jekyll
|
|
@@ -23,6 +23,8 @@ dependencies:
|
|
|
23
23
|
- - "~>"
|
|
24
24
|
- !ruby/object:Gem::Version
|
|
25
25
|
version: '4.4'
|
|
26
|
+
description: Niri is a clean and modern Jekyll theme built with Bulma. It provides
|
|
27
|
+
a lightweight, responsive layout for personal blogs and portfolio websites.
|
|
26
28
|
email:
|
|
27
29
|
- rokhim.whd@gmail.com
|
|
28
30
|
executables: []
|
|
@@ -35,17 +37,22 @@ files:
|
|
|
35
37
|
- _includes/footer.html
|
|
36
38
|
- _includes/head.html
|
|
37
39
|
- _includes/navigation.html
|
|
40
|
+
- _layouts/about.html
|
|
38
41
|
- _layouts/default.html
|
|
39
42
|
- _layouts/home.html
|
|
40
|
-
- _layouts/page.html
|
|
41
43
|
- _layouts/post.html
|
|
44
|
+
- _layouts/projects.html
|
|
42
45
|
- assets/css/bulma-1.0.2.css
|
|
43
46
|
- assets/css/main.css
|
|
44
|
-
- assets/js/
|
|
45
|
-
homepage: https://github.com/rokhimin/
|
|
47
|
+
- assets/js/main.js
|
|
48
|
+
homepage: https://github.com/rokhimin/jekyll-niri
|
|
46
49
|
licenses:
|
|
47
50
|
- MIT
|
|
48
|
-
metadata:
|
|
51
|
+
metadata:
|
|
52
|
+
homepage_uri: https://github.com/rokhimin/jekyll-niri
|
|
53
|
+
source_code_uri: https://github.com/rokhimin/jekyll-niri
|
|
54
|
+
changelog_uri: https://github.com/rokhimin/jekyll-niri/blob/main/CHANGELOG.md
|
|
55
|
+
documentation_uri: https://github.com/rokhimin/jekyll-niri/wiki
|
|
49
56
|
rdoc_options: []
|
|
50
57
|
require_paths:
|
|
51
58
|
- lib
|
|
@@ -53,7 +60,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
53
60
|
requirements:
|
|
54
61
|
- - ">="
|
|
55
62
|
- !ruby/object:Gem::Version
|
|
56
|
-
version: '
|
|
63
|
+
version: '2.7'
|
|
57
64
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
58
65
|
requirements:
|
|
59
66
|
- - ">="
|
|
@@ -62,5 +69,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
62
69
|
requirements: []
|
|
63
70
|
rubygems_version: 3.6.3
|
|
64
71
|
specification_version: 4
|
|
65
|
-
summary: jekyll Theme Blog using Bulma
|
|
72
|
+
summary: jekyll Theme Blog using Bulma css
|
|
66
73
|
test_files: []
|
data/_layouts/page.html
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
{% include head.html %}
|
|
4
|
-
<body>
|
|
5
|
-
{% include navigation.html %}
|
|
6
|
-
|
|
7
|
-
<div class="hero is-fullheight">
|
|
8
|
-
<div class="hero-body">
|
|
9
|
-
<div class="container">
|
|
10
|
-
<div class="columns is-centered">
|
|
11
|
-
<div class="column is-one-two">
|
|
12
|
-
<div action="" class="box">
|
|
13
|
-
|
|
14
|
-
<div class="field">
|
|
15
|
-
<div class="content">
|
|
16
|
-
{{ content }}
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
{% include footer.html %}
|
|
29
|
-
</body>
|
|
30
|
-
</html>
|
data/assets/js/darklight-mode.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
document.addEventListener("DOMContentLoaded", function () {
|
|
2
|
-
const toggleButton = document.getElementById("toggle-button");
|
|
3
|
-
const themeIcon = document.getElementById("theme-icon");
|
|
4
|
-
const currentTheme = localStorage.getItem("theme");
|
|
5
|
-
|
|
6
|
-
// Set default theme to Dark Mode
|
|
7
|
-
if (!currentTheme) {
|
|
8
|
-
document.documentElement.classList.add("is-dark");
|
|
9
|
-
localStorage.setItem("theme", "dark");
|
|
10
|
-
} else if (currentTheme === "dark") {
|
|
11
|
-
document.documentElement.classList.add("is-dark");
|
|
12
|
-
} else {
|
|
13
|
-
document.documentElement.classList.remove("is-dark");
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function updateIcon() {
|
|
17
|
-
if (document.documentElement.classList.contains("is-dark")) {
|
|
18
|
-
themeIcon.classList.replace("fa-moon", "fa-sun");
|
|
19
|
-
} else {
|
|
20
|
-
themeIcon.classList.replace("fa-sun", "fa-moon");
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Perbarui ikon sesuai mode awal
|
|
25
|
-
updateIcon();
|
|
26
|
-
|
|
27
|
-
toggleButton.addEventListener("click", () => {
|
|
28
|
-
document.documentElement.classList.toggle("is-dark");
|
|
29
|
-
if (document.documentElement.classList.contains("is-dark")) {
|
|
30
|
-
localStorage.setItem("theme", "dark");
|
|
31
|
-
} else {
|
|
32
|
-
localStorage.setItem("theme", "light");
|
|
33
|
-
}
|
|
34
|
-
updateIcon();
|
|
35
|
-
});
|
|
36
|
-
});
|
|
37
|
-
|