niri 2.0 → 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.
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
- --text-color: rgb(26, 23, 23);
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: rgb(138, 138, 138);
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
- .title, .subtitle, .content, h1, h2, h3, h4, h5, h6, ul, li, hr {
29
- color: var(--text-color);
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
- code {
33
- color: #3b43b1;
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
- pre {
37
- color: #ff9306;
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
- html.is-dark {
41
- background-color: #2a2a2a;
42
- color: white;
84
+ /* Container fix for dark mode */
85
+ html.is-dark .container {
86
+ background-color: transparent;
43
87
  }
44
88
 
45
- html.is-dark .hero {
46
- background-color: #161616;
47
- color: white;
89
+ .navbar-item {
90
+ font-weight: 500;
91
+ transition: color 0.3s ease;
48
92
  }
49
93
 
50
- html.is-dark .navbar {
51
- background-color: #161616;
52
- color: white;
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
- html.is-dark .navbar-menu {
56
- background-color: #161616;
57
- color: white;
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
- html.is-dark .footer {
61
- background-color: #202020;
62
- color: white;
105
+ .hero {
106
+ background-color: transparent;
107
+ padding: 0;
108
+ min-height: calc(100vh - 140px);
63
109
  }
64
110
 
65
- html.is-dark .box {
66
- background-color: #202020;
67
- color: white;
111
+ .hero-body {
112
+ padding: 3rem 1.5rem;
68
113
  }
69
114
 
70
- html.is-dark .notification {
71
- background-color: #333333;
72
- color: white;
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
- html.is-dark .title,
77
- html.is-dark .subtitle {
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
- html {
85
- background-color: #2a2a2a;
86
- color: white;
155
+ .post-date {
156
+ font-size: 0.9rem;
157
+ color: var(--accent-color);
158
+ font-weight: 500;
87
159
  }
88
160
 
89
- .hero {
90
- background-color: #63615f;
91
- color: white;
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
- .navbar {
95
- background-color: #63615f;
96
- color: white;
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
- .navbar-menu {
100
- background-color: #63615f;
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: #6b6865;
106
- color: white;
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
- .box {
110
- background-color: #444343;
111
- color: white;
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
- .notification {
115
- background-color: #333333;
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 */
@@ -1,4 +1,6 @@
1
+
1
2
  document.addEventListener("DOMContentLoaded", function () {
3
+ // Theme toggle functionality
2
4
  const toggleButton = document.getElementById("toggle-button");
3
5
  const themeIcon = document.getElementById("theme-icon");
4
6
  const currentTheme = localStorage.getItem("theme");
@@ -21,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function () {
21
23
  }
22
24
  }
23
25
 
24
- // Perbarui ikon sesuai mode awal
26
+ // Update icon based on initial mode
25
27
  updateIcon();
26
28
 
27
29
  toggleButton.addEventListener("click", () => {
@@ -35,4 +37,30 @@ document.addEventListener("DOMContentLoaded", function () {
35
37
  updateIcon();
36
38
  });
37
39
  });
38
- });
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: '2.0'
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-03-01 00:00:00.000000000 Z
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/darklight-mode.js
45
- homepage: https://github.com/rokhimin/Niri
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: '0'
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>