Skip to content

Commit 80f49e4

Browse files
DevLabStudyDevLabStudy
authored
Update blog.html
1 parent d9f7030 commit 80f49e4

1 file changed

Lines changed: 241 additions & 30 deletions

File tree

‎blog.html‎

Lines changed: 241 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,253 @@
11
---
22
layout: default
3-
title: Blog
3+
title: System Logs & Blog
44
---
5+
56
<style>
6-
.log-link {
7-
display: flex;
8-
justify-content: space-between;
7+
.dashboard {
8+
max-width: 1400px !important;
9+
padding: 50px 40px !important;
10+
}
11+
12+
/* NAGŁÓWEK SEKCJI */
13+
.blog-header {
14+
margin-bottom: 40px;
15+
border-bottom: 1px solid var(--border);
16+
padding-bottom: 30px;
17+
}
18+
.blog-title {
19+
font-size: 2.8rem;
20+
font-weight: 900;
21+
color: #fff;
22+
margin: 0 0 10px 0;
23+
font-family: 'Inter', sans-serif;
24+
}
25+
.blog-subtitle {
26+
color: var(--text-muted);
27+
font-size: 1rem;
28+
font-family: 'JetBrains Mono', monospace;
29+
}
30+
31+
/* PANEL STEROWANIA: FILTRY I WYSZUKIWARKA */
32+
.blog-controls {
33+
display: flex;
34+
justify-content: space-between;
935
align-items: center;
10-
text-decoration: none;
11-
padding: 12px 0;
12-
border-bottom: 1px solid rgba(255,255,255,0.05);
13-
color: var(--text-main);
14-
transition: 0.2s;
36+
gap: 20px;
37+
margin-bottom: 40px;
38+
flex-wrap: wrap;
39+
background: var(--card-bg);
40+
border: 1px solid var(--border);
41+
padding: 20px 25px;
42+
border-radius: 12px;
43+
backdrop-filter: blur(10px);
44+
}
45+
46+
.filter-group {
47+
display: flex;
48+
gap: 10px;
49+
flex-wrap: wrap;
50+
}
51+
52+
.filter-btn {
53+
background: rgba(255, 255, 255, 0.03);
54+
border: 1px solid rgba(255, 255, 255, 0.1);
55+
color: var(--text-muted);
56+
padding: 8px 16px;
57+
border-radius: 6px;
58+
font-family: 'JetBrains Mono', monospace;
59+
font-size: 0.78rem;
60+
font-weight: 700;
61+
cursor: pointer;
62+
transition: 0.2s;
63+
text-transform: uppercase;
64+
}
65+
.filter-btn:hover, .filter-btn.active {
66+
background: var(--accent-blue);
67+
color: #030305;
68+
border-color: var(--accent-blue);
69+
box-shadow: 0 4px 15px rgba(0, 210, 255, 0.2);
70+
}
71+
72+
.search-input {
73+
background: rgba(3, 3, 5, 0.8);
74+
border: 1px solid var(--border);
75+
color: #fff;
76+
padding: 10px 18px;
77+
border-radius: 6px;
78+
font-family: 'JetBrains Mono', monospace;
79+
font-size: 0.85rem;
80+
width: 280px;
81+
outline: none;
82+
transition: 0.2s;
83+
}
84+
.search-input:focus {
85+
border-color: var(--accent-blue);
86+
box-shadow: 0 0 15px rgba(0, 210, 255, 0.15);
87+
}
88+
89+
/* SIATKA / LISTA WPISÓW TECHNICZNYCH */
90+
.posts-container {
91+
display: flex;
92+
flex-direction: column;
93+
gap: 15px;
94+
}
95+
96+
.post-card {
97+
background: var(--card-bg);
98+
border: 1px solid var(--border);
99+
border-radius: 10px;
100+
padding: 25px 30px;
101+
display: grid;
102+
grid-template-columns: 180px 1fr auto;
103+
gap: 25px;
104+
align-items: center;
105+
text-decoration: none;
106+
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
107+
backdrop-filter: blur(10px);
108+
}
109+
110+
.post-card:hover {
111+
border-color: var(--accent-blue);
112+
transform: translateX(5px);
113+
background: rgba(10, 15, 25, 0.85);
114+
box-shadow: 0 8px 25px rgba(0, 210, 255, 0.1);
115+
}
116+
117+
.post-meta-box {
118+
display: flex;
119+
flex-direction: column;
120+
gap: 6px;
121+
}
122+
123+
.post-category {
124+
font-family: 'JetBrains Mono', monospace;
125+
font-size: 0.75rem;
126+
color: var(--accent-contrast);
127+
font-weight: 800;
128+
text-transform: uppercase;
129+
}
130+
131+
.post-date {
132+
font-family: 'JetBrains Mono', monospace;
133+
font-size: 0.75rem;
134+
color: var(--text-muted);
135+
}
136+
137+
.post-content-box {
138+
display: flex;
139+
flex-direction: column;
140+
gap: 8px;
141+
}
142+
143+
.post-title {
144+
font-size: 1.15rem;
145+
font-weight: 800;
146+
color: #fff;
147+
font-family: 'Inter', sans-serif;
15148
}
16-
.log-link:last-child { border-bottom: none; padding-bottom: 0; }
17-
.log-link:hover { padding-left: 8px; color: var(--accent-blue); }
18149

19-
.log-title {
20-
font-size: 0.95rem;
21-
font-weight: 600;
22-
padding-right: 20px;
150+
.post-excerpt {
151+
font-size: 0.88rem;
152+
color: var(--text-muted);
153+
line-height: 1.5;
154+
margin: 0;
155+
display: -webkit-box;
156+
-webkit-line-clamp: 2;
157+
-webkit-box-orient: vertical;
158+
overflow: hidden;
159+
}
160+
161+
.post-action {
162+
font-family: 'JetBrains Mono', monospace;
163+
font-size: 0.8rem;
164+
color: var(--accent-blue);
165+
font-weight: 700;
166+
white-space: nowrap;
167+
}
168+
169+
@media (max-width: 1024px) {
170+
.post-card { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
171+
.blog-controls { flex-direction: column; align-items: stretch; }
172+
.search-input { width: 100%; box-sizing: border-box; }
23173
}
24174
</style>
25175

26-
<div class="card">
27-
<h3 style="font-size: 0.85rem; color: var(--text-muted); margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace;">[ Recent_System_Logs ]</h3>
28-
29-
<div style="display: flex; flex-direction: column;">
30-
{% for post in site.posts %}
31-
<a href="{{ post.url }}" class="log-link">
32-
33-
<span class="log-title">{{ post.title }}</span>
34-
35-
<span style="color: var(--text-muted); font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;">
36-
[{{ post.date | date: "%d.%m.%Y" }}]
37-
</span>
38-
39-
</a>
40-
{% endfor %}
176+
<div class="blog-header">
177+
<span class="section-tag">ARCHIWUM SYSTEMOWE</span>
178+
<h1 class="blog-title">Dziennik Inżynieryjny / Blog</h1>
179+
<div class="blog-subtitle">// REJESTR ZMIAN, KONFIGURACJI I WDROŻEŃ W HOMELABIE</div>
180+
</div>
181+
182+
<!-- PANEL FILTRÓW I WYSZUKIWARKI -->
183+
<div class="blog-controls">
184+
<div class="filter-group" id="categoryFilters">
185+
<button class="filter-btn active" data-filter="all">Wszystkie</button>
186+
<button class="filter-btn" data-filter="homelab">Homelab</button>
187+
<button class="filter-btn" data-filter="networking">Networking</button>
188+
<button class="filter-btn" data-filter="hardware">Hardware</button>
189+
<button class="filter-btn" data-filter="code">Code & Apps</button>
41190
</div>
191+
<div>
192+
<input type="text" id="searchInput" class="search-input" placeholder="Szukaj we wpisach...">
193+
</div>
194+
</div>
195+
196+
<!-- LISTA WPISÓW Z JEYLLA -->
197+
<div class="posts-container" id="postsList">
198+
{% for post in site.posts %}
199+
<a href="{{ post.url | relative_url }}" class="post-card" data-category="{{ post.category | default: 'homelab' | downcase }}" data-title="{{ post.title | downcase }}">
200+
<div class="post-meta-box">
201+
<span class="post-category">[{{ post.category | default: "SYSTEM" | upcase }}]</span>
202+
<span class="post-date">// {{ post.date | date: "%Y.%m.%d" }}</span>
203+
</div>
204+
<div class="post-content-box">
205+
<div class="post-title">{{ post.title }}</div>
206+
<p class="post-excerpt">{{ post.excerpt | strip_html | truncate: 140 }}</p>
207+
</div>
208+
<div class="post-action">Otwórz ↗</div>
209+
</a>
210+
{% endfor %}
42211
</div>
212+
213+
<!-- SKRYPT DO FILTROWANIA I WYSZUKIWANIA W CZASIE RZECZYWISTYM -->
214+
<script>
215+
const filterBtns = document.querySelectorAll('.filter-btn');
216+
const searchInput = document.getElementById('searchInput');
217+
const postCards = document.querySelectorAll('.post-card');
218+
219+
let currentCategory = 'all';
220+
221+
// Obsługa kliknięcia filtrów kategorii
222+
filterBtns.forEach(btn => {
223+
btn.addEventListener('click', () => {
224+
filterBtns.forEach(b => b.classList.remove('active'));
225+
btn.classList.add('active');
226+
currentCategory = btn.getAttribute('data-filter');
227+
filterPosts();
228+
});
229+
});
230+
231+
// Obsługa wyszukiwarki
232+
searchInput.addEventListener('input', () => {
233+
filterPosts();
234+
});
235+
236+
function filterPosts() {
237+
const query = searchInput.value.toLowerCase();
238+
239+
postCards.forEach(card => {
240+
const category = card.getAttribute('data-category');
241+
const title = card.getAttribute('data-title');
242+
243+
const matchesCategory = (currentCategory === 'all' || category.includes(currentCategory));
244+
const matchesSearch = title.includes(query);
245+
246+
if (matchesCategory && matchesSearch) {
247+
card.style.display = 'grid';
248+
} else {
249+
card.style.display = 'none';
250+
}
251+
});
252+
}
253+
</script>

0 commit comments

Comments
 (0)