Skip to content

Commit c722c88

Browse files
D4mianWayneD4mianWayne
committed
Update styles across components to use a new accent color for improved visual consistency. Adjusted background styles for various pages and enhanced text elements for better readability. Refactored layout in posts and breakdowns pages to include hash indicators in titles.
1 parent 9c1e599 commit c722c88

File tree

12 files changed

+157
-70
lines changed

12 files changed

+157
-70
lines changed

‎public/img/cve-2025-21333/img.png‎

18.6 KB
Loading

‎public/img/cve-2025-21333/img1.png‎

205 KB
Loading

‎public/img/cve-2025-21333/img2.png‎

10.4 KB
Loading

‎src/components/Footer.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ const today = new Date();
4040
}
4141
.social-links a {
4242
text-decoration: none;
43-
color: var(--drac-cyan);
43+
color: var(--accent);
4444
}
4545
.social-links a:hover {
46-
color: var(--drac-green);
46+
color: var(--accent);
4747
}
4848
</style>

‎src/components/Header.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const navLinks = [
5252
}
5353
.logo-prompt {
5454
font-family: 'JetBrains Mono', monospace;
55-
color: var(--drac-green);
55+
color: var(--accent);
5656
font-size: 1.3rem;
5757
font-weight: 700;
5858
margin-right: 0.1em;
@@ -86,8 +86,8 @@ const navLinks = [
8686
transition: border 0.2s, color 0.2s;
8787
}
8888
.main-nav a.active {
89-
color: var(--drac-green);
90-
border-bottom: 2px solid var(--drac-green);
89+
color: var(--accent);
90+
border-bottom: 2px solid var(--accent);
9191
}
9292
@media (max-width: 700px) {
9393
.header-inner {

‎src/layouts/BlogPost.astro‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
1616
<BaseHead title={title} description={description} />
1717
<style>
1818
body {
19-
background: var(--drac-bg);
19+
background: #f8fafc;
20+
background-image: url("data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='32' x2='32' y2='0' stroke='rgba(0,0,0,0.04)' stroke-width='1'/%3e%3c/svg%3e");
21+
background-repeat: repeat;
22+
background-size: 32px 32px;
2023
color: var(--drac-fg);
2124
}
2225
main {
@@ -39,22 +42,22 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
3942
color: var(--drac-fg);
4043
font-size: 1.04rem;
4144
line-height: 1.7;
42-
background: var(--drac-bg-alt);
45+
background: #fff;
4346
border-radius: 10px;
4447
}
4548
.toc-block {
46-
background: var(--drac-selection);
47-
border: 1px dashed var(--drac-comment);
49+
background: #fafdff;
50+
border: 1px dashed #e0e7ef;
4851
border-radius: 7px;
4952
padding: 0.7rem 0.8rem;
5053
font-size: 0.93rem;
5154
margin-bottom: 1.2rem;
52-
color: var(--drac-comment);
55+
color: #6b7280;
5356
}
5457
.toc-title {
5558
font-weight: 500;
5659
font-size: 0.99rem;
57-
color: var(--drac-purple);
60+
color: #8b5cf6;
5861
margin-bottom: 0.4rem;
5962
letter-spacing: 0.01em;
6063
}
@@ -67,26 +70,24 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
6770
margin-bottom: 0.32em;
6871
}
6972
.toc-link {
70-
color: var(--drac-cyan);
73+
color: #7c3aed;
7174
text-decoration: none;
7275
font-weight: 400;
7376
transition: color 0.2s;
7477
}
7578
.toc-link:hover {
76-
color: var(--drac-green);
79+
color: #5b21b6;
7780
text-decoration: underline;
7881
}
7982
.prose h1, .title h1 {
80-
color: var(--drac-pink);
83+
color: var(--accent);
8184
font-size: 2.1rem;
8285
}
83-
.prose h2 {
84-
color: var(--drac-purple);
86+
.prose h2, .prose h3 {
87+
color: #111;
8588
font-size: 1.4rem;
86-
}
87-
.prose h3 {
88-
color: var(--drac-cyan);
89-
font-size: 1.18rem;
89+
text-decoration: underline;
90+
font-weight: 700;
9091
}
9192
.title {
9293
margin-bottom: 1em;
@@ -105,15 +106,25 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
105106
font-style: italic;
106107
color: var(--drac-yellow);
107108
}
108-
code, pre {
109-
background: var(--drac-bg-alt);
110-
color: var(--drac-yellow);
111-
border-radius: 6px;
112-
padding: 0.2em 0.4em;
113-
font-family: 'Fira Mono', 'Consolas', 'Monaco', monospace;
109+
code {
110+
background: #23263a;
111+
color: #f7f8fa;
112+
border-radius: 4px;
113+
padding: 0.18em 0.5em 0.15em 0.5em;
114+
font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Monaco', monospace;
115+
font-size: 0.97em;
116+
box-shadow: 0 1px 2px rgba(44,41,78,0.04);
117+
border: 1px solid #23263a;
114118
}
115119
pre {
116-
padding: 1.2em;
120+
background: #23263a;
121+
color: #f7f8fa;
122+
border-radius: 8px;
123+
padding: 1.2em 1.1em 1.1em 1.1em;
124+
font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Monaco', monospace;
125+
font-size: 0.99em;
126+
box-shadow: 0 2px 8px rgba(44,41,78,0.08);
127+
border: 1.5px solid #23263a;
117128
overflow-x: auto;
118129
}
119130
hr {

‎src/pages/about.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
text-align: center;
3434
}
3535
.about-dracula a {
36-
color: var(--drac-cyan);
36+
color: var(--accent);
3737
text-decoration: underline;
3838
transition: color 0.2s;
3939
word-break: break-all;
4040
}
4141
.about-dracula a:hover {
42-
color: var(--drac-green);
42+
color: var(--accent);
4343
}
4444
@media (max-width: 600px) {
4545
.about-dracula {

‎src/pages/breakdowns/index.astro‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,12 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
3131
<BaseHead title={`1Day Breakdowns | ${SITE_TITLE}`} description="Quick technical breakdowns and analyses of recent 1Day vulnerabilities and exploits." />
3232
<style>
3333
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;600;700&display=swap');
34-
body { font-family: 'Google Sans', 'Inter', Arial, sans-serif; background: var(--bg); color: var(--fg); }
34+
body { font-family: 'Google Sans', 'Inter', Arial, sans-serif; background: #f8fafc; color: #1e293b; }
35+
body {
36+
background-image: url("data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='32' x2='32' y2='0' stroke='rgba(0,0,0,0.04)' stroke-width='1'/%3e%3c/svg%3e");
37+
background-repeat: repeat;
38+
background-size: 32px 32px;
39+
}
3540
main {
3641
max-width: 1300px;
3742
margin: 0 auto;
@@ -64,7 +69,7 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
6469
.section-title {
6570
font-size: 1.3rem;
6671
font-weight: 600;
67-
color: var(--fg);
72+
color: var(--accent);
6873
margin-bottom: 1.2rem;
6974
letter-spacing: 0.5px;
7075
}
@@ -83,10 +88,18 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
8388
.post-title {
8489
font-size: 1.35rem;
8590
font-weight: 700;
86-
color: #000;
91+
color: #111;
8792
text-decoration: underline;
8893
transition: color 0.2s;
89-
display: inline;
94+
display: inline-flex;
95+
align-items: center;
96+
gap: 0.5em;
97+
}
98+
.post-title .hash {
99+
color: var(--accent);
100+
text-decoration: underline;
101+
font-weight: 900;
102+
margin-right: 0.18em;
90103
}
91104
.post-meta {
92105
color: #555;
@@ -125,7 +138,7 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
125138
}
126139
.sidebar-section h3 {
127140
font-size: 1.08rem;
128-
color: var(--text-secondary);
141+
color: var(--accent);
129142
font-weight: 600;
130143
margin-bottom: 0.7rem;
131144
letter-spacing: 0.01em;
@@ -142,19 +155,23 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
142155
.sidebar-item a {
143156
font-size: 1.05rem;
144157
font-weight: 600;
145-
color: var(--fg);
158+
color: #111;
146159
text-decoration: underline;
147160
transition: color 0.2s;
148161
letter-spacing: 0.01em;
149-
display: inline-block;
162+
display: inline-flex;
163+
align-items: center;
164+
gap: 0.4em;
150165
margin-bottom: 0.1em;
151166
}
152-
.sidebar-item a:hover {
153-
color: var(--text-secondary);
167+
.sidebar-item a .hash {
168+
color: var(--accent);
154169
text-decoration: underline;
170+
font-weight: 900;
171+
margin-right: 0.18em;
155172
}
156173
.sidebar-delim {
157-
border-bottom: 1px solid var(--border);
174+
border-bottom: 2px solid var(--accent);
158175
margin: 0.7em 0 0.2em 0;
159176
}
160177
.sidebar-item-desc {
@@ -225,7 +242,7 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
225242
) : (
226243
paginatedBreakdowns.map((breakdown) => (
227244
<li class="post-row">
228-
<a href={`/breakdowns/${breakdown.id}/`} class="post-title">{breakdown.data.title}</a>
245+
<a href={`/breakdowns/${breakdown.id}/`} class="post-title"><span class="hash">#</span>{breakdown.data.title}</a>
229246
<div class="post-meta">
230247
<FormattedDate date={breakdown.data.pubDate} />
231248
{breakdown.data.author && <span class="author">{breakdown.data.author}</span>}
@@ -249,7 +266,7 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
249266
<div class="sidebar-list">
250267
{breakdowns.slice(0, 3).map((breakdown, idx) => (
251268
<div class="sidebar-item" style="margin-bottom:0.7em;">
252-
<a href={`/breakdowns/${breakdown.id}/`}>{breakdown.data.title}</a>
269+
<a href={`/breakdowns/${breakdown.id}/`}><span class="hash">#</span>{breakdown.data.title}</a>
253270
<div class="sidebar-item-desc">
254271
{breakdown.data.summary ? breakdown.data.summary.split(' ').slice(0,15).join(' ') + (breakdown.data.summary.split(' ').length > 15 ? '...' : '') :
255272
breakdown.data.description ? breakdown.data.description.split(' ').slice(0,15).join(' ') + (breakdown.data.description.split(' ').length > 15 ? '...' : '') :

‎src/pages/index.astro‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,12 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
3535
<BaseHead title={`Blog | ${SITE_TITLE}`} description="All technical writeups and deep dives." />
3636
<style>
3737
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;600;700&display=swap');
38-
body { font-family: 'Google Sans', 'Inter', Arial, sans-serif; background: var(--bg); color: var(--fg); }
38+
body {
39+
font-family: 'Google Sans', 'Inter', Arial, sans-serif; background: #f8fafc; color: #222226;
40+
background-image: url("data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='32' x2='32' y2='0' stroke='rgba(0,0,0,0.04)' stroke-width='1'/%3e%3c/svg%3e");
41+
background-repeat: repeat;
42+
background-size: 32px 32px;
43+
}
3944
main {
4045
max-width: 1300px;
4146
margin: 0 auto;
@@ -68,7 +73,7 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
6873
.section-title {
6974
font-size: 1.3rem;
7075
font-weight: 600;
71-
color: var(--fg);
76+
color: var(--accent);
7277
margin-bottom: 1.2rem;
7378
letter-spacing: 0.5px;
7479
}
@@ -87,10 +92,18 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
8792
.post-title {
8893
font-size: 1.35rem;
8994
font-weight: 700;
90-
color: #000;
95+
color: #111;
9196
text-decoration: underline;
9297
transition: color 0.2s;
93-
display: inline;
98+
display: inline-flex;
99+
align-items: center;
100+
gap: 0.5em;
101+
}
102+
.post-title .hash {
103+
color: var(--accent);
104+
text-decoration: underline;
105+
font-weight: 900;
106+
margin-right: 0.18em;
94107
}
95108
.post-meta {
96109
color: #555;
@@ -129,7 +142,7 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
129142
}
130143
.sidebar-section h3 {
131144
font-size: 1.08rem;
132-
color: var(--text-secondary);
145+
color: var(--accent);
133146
font-weight: 600;
134147
margin-bottom: 0.7rem;
135148
letter-spacing: 0.01em;
@@ -169,19 +182,27 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
169182
.sidebar-item a {
170183
font-size: 1.05rem;
171184
font-weight: 600;
172-
color: var(--fg);
185+
color: #111;
173186
text-decoration: underline;
174187
transition: color 0.2s;
175188
letter-spacing: 0.01em;
176-
display: inline-block;
189+
display: inline-flex;
190+
align-items: center;
191+
gap: 0.4em;
177192
margin-bottom: 0.1em;
178193
}
194+
.sidebar-item a .hash {
195+
color: var(--accent);
196+
text-decoration: underline;
197+
font-weight: 900;
198+
margin-right: 0.18em;
199+
}
179200
.sidebar-item a:hover {
180-
color: var(--text-secondary);
201+
color: var(--accent);
181202
text-decoration: underline;
182203
}
183204
.sidebar-delim {
184-
border-bottom: 1px solid var(--border);
205+
border-bottom: 2px solid var(--accent);
185206
margin: 0.7em 0 0.2em 0;
186207
}
187208
.sidebar-item-desc {
@@ -241,7 +262,7 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
241262
) : (
242263
paginatedPosts.map((post) => (
243264
<li class="post-row">
244-
<a href={`/posts/${post.id}/`} class="post-title">{post.data.title}</a>
265+
<a href={`/posts/${post.id}/`} class="post-title"><span class="hash">#</span>{post.data.title}</a>
245266
<div class="post-meta">
246267
<FormattedDate date={post.data.pubDate} />
247268
{post.data.author && <span class="author">{post.data.author}</span>}
@@ -265,7 +286,7 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
265286
<div class="sidebar-list">
266287
{posts.slice(0, 3).map((post, idx) => (
267288
<div class="sidebar-item" style="margin-bottom:0.7em;">
268-
<a href={`/posts/${post.id}/`}>{post.data.title}</a>
289+
<a href={`/posts/${post.id}/`}><span class="hash">#</span>{post.data.title}</a>
269290
<div class="sidebar-item-desc">
270291
{post.data.summary ? post.data.summary.split(' ').slice(0,15).join(' ') + (post.data.summary.split(' ').length > 15 ? '...' : '') :
271292
post.data.description ? post.data.description.split(' ').slice(0,15).join(' ') + (post.data.description.split(' ').length > 15 ? '...' : '') :

0 commit comments

Comments
 (0)