Skip to content

Commit 3a45c6c

Browse files
DevLabStudyDevLabStudy
authored
Refactor styles and update blog navigation
Refactor CSS variables for better readability and maintainability. Update navigation links and improve post metadata display.
1 parent 21f8558 commit 3a45c6c

1 file changed

Lines changed: 27 additions & 47 deletions

File tree

‎blog.html‎

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,92 +13,72 @@
1313

1414
<style>
1515
:root {
16-
--bg-body: #f4f7fa;
17-
--bg-nav: #ffffff;
18-
--bg-card: #ffffff;
19-
--text-main: #1e293b;
20-
--text-muted: #64748b;
21-
--border-color: #e2e8f0;
22-
--accent-blue: #2563eb;
23-
--accent-green: #10b981;
24-
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
25-
--shadow-md: 0 10px 25px rgba(0,0,0,0.05);
16+
--bg-body: #f4f7fa; --bg-nav: #ffffff; --bg-card: #ffffff;
17+
--text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0;
18+
--accent-blue: #2563eb; --accent-purple: #4b0082; --accent-green: #10b981;
19+
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 10px 25px rgba(0,0,0,0.05);
2620
--radius: 12px;
2721
}
2822

2923
@media (prefers-color-scheme: dark) {
3024
:root {
31-
--bg-body: #0f172a;
32-
--bg-nav: #1e293b;
33-
--bg-card: #1e293b;
34-
--text-main: #f8fafc;
35-
--text-muted: #94a3b8;
36-
--border-color: #334155;
37-
--accent-blue: #3b82f6;
38-
--accent-green: #10b981;
39-
--shadow-sm: 0 4px 6px rgba(0,0,0,0.3);
40-
--shadow-md: 0 10px 25px rgba(0,0,0,0.4);
25+
--bg-body: #0f172a; --bg-nav: #1e293b; --bg-card: #1e293b;
26+
--text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155;
27+
--accent-blue: #3b82f6; --accent-green: #10b981;
28+
--shadow-sm: 0 4px 6px rgba(0,0,0,0.3); --shadow-md: 0 10px 25px rgba(0,0,0,0.4);
4129
}
42-
.btn { box-shadow: none !important; border: 1px solid var(--border-color); }
43-
.btn-gh { background: #111827 !important; }
44-
.btn-x { background: #000000 !important; }
45-
.btn-tiktok { background: #111827 !important; }
46-
.focus-box { background: rgba(59, 130, 246, 0.1) !important; }
4730
}
4831

4932
body {
5033
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
51-
background: var(--bg-body);
52-
color: var(--text-main);
34+
background: var(--bg-body); color: var(--text-main);
5335
margin: 0; padding: 0; line-height: 1.6; -webkit-font-smoothing: antialiased;
5436
}
5537

5638
.navbar { background: var(--bg-nav); border-bottom: 1px solid var(--border-color); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
57-
.nav-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text-main); text-decoration: none; }
58-
.nav-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
59-
60-
.btn { display: inline-block; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.85rem; color: white !important; transition: all 0.2s ease; box-shadow: var(--shadow-sm); text-align: center; box-sizing: border-box; white-space: nowrap; padding: 8px 16px; }
61-
.nav-links .btn { width: 140px !important; min-width: 140px !important; max-width: 140px !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; }
62-
.btn:hover { transform: translateY(-2px); opacity: 0.9; }
63-
.btn-gh { background: #24292e; } .btn-reddit { background: #FF4500; } .btn-yt { background: #FF0000; } .btn-x { background: #000000; } .btn-tiktok { background: #010101; }
39+
.nav-brand { font-size: 1.5rem; font-weight: 800; color: var(--text-main); text-decoration: none; }
40+
.nav-links { display: flex; gap: 20px; align-items: center; }
41+
.nav-links a { text-decoration: none; color: var(--text-muted); font-weight: 600; transition: color 0.2s; }
42+
.nav-links a:hover, .nav-links a.active { color: var(--accent-blue); }
6443

65-
.container { max-width: 900px; margin: 40px auto; padding: 0 20px; }
44+
.container { max-width: 900px; margin: 40px auto; padding: 0 20px; min-height: 60vh; }
6645
.section-title { font-size: 1.8rem; font-weight: 700; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 25px; color: var(--text-main); }
6746

6847
.post-list { list-style: none; padding: 0; margin: 0; }
69-
.post-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); transition: all 0.2s ease; }
70-
.post-item:hover { border-color: var(--accent-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
71-
.post-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 10px 0; }
48+
.post-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 25px; margin-bottom: 20px; box-shadow: var(--shadow-sm); transition: all 0.2s ease; }
49+
.post-item:hover { border-color: var(--accent-blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
50+
.post-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px 0; }
7251
.post-title a { color: var(--text-main); text-decoration: none; }
7352
.post-title a:hover { color: var(--accent-blue); }
74-
.post-meta { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 10px; }
75-
.post-excerpt { color: var(--text-main); opacity: 0.8; font-size: 0.95rem; margin: 0; }
53+
.post-meta { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; font-weight: 600; }
54+
.post-excerpt { color: var(--text-main); opacity: 0.85; font-size: 1rem; margin: 0; }
7655

7756
footer { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 50px 0 30px 0; padding-top: 20px; border-top: 1px solid var(--border-color); }
7857

79-
@media (max-width: 768px) { .navbar { flex-direction: column; gap: 15px; padding: 15px; } .nav-links { justify-content: center; } }
58+
@media (max-width: 768px) { .navbar { flex-direction: column; gap: 15px; padding: 15px; } .nav-links { justify-content: center; flex-wrap: wrap; } }
8059
</style>
8160
</head>
8261
<body>
8362

8463
<nav class="navbar">
8564
<a href="/" class="nav-brand">DevLabStudy©</a>
8665
<div class="nav-links">
87-
<a href="https://github.com/DevLabStudy" class="btn btn-gh">GitHub</a>
88-
<a href="https://www.youtube.com/channel/UCisFPSU_Y8hznpqrcewcJAg?app=desktop" class="btn btn-yt">YouTube</a>
89-
<a href="https://x.com/DevLabStudy" class="btn btn-x">X / Twitter</a>
66+
<a href="/">Hub</a>
67+
<a href="/blog.html" class="active" style="color: var(--accent-blue);">Blog</a>
68+
<a href="/homelab.html">HomeLab</a>
69+
<a href="/orbit.html">Orbit™</a>
9070
</div>
9171
</nav>
9272

9373
<main class="container">
94-
<h1 class="section-title">DevLab Notes & Blog</h1>
74+
<h1 class="section-title">DevLab Notes & Articles</h1>
9575

9676
<ul class="post-list">
9777
{% for post in site.posts %}
9878
<li class="post-item">
99-
<div class="post-meta">{{ post.date | date: "%Y-%m-%d" }}</div>
79+
<div class="post-meta">{{ post.date | date: "%B %d, %Y" }}</div>
10080
<h2 class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
101-
<p class="post-excerpt">{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
81+
<p class="post-excerpt">{{ post.excerpt | strip_html | truncatewords: 35 }}</p>
10282
</li>
10383
{% endfor %}
10484
</ul>

0 commit comments

Comments
 (0)