Skip to content

Commit cf9f43e

Browse files
D4mianWayneD4mianWayne
committed
UI improvements
1 parent c376695 commit cf9f43e

File tree

5 files changed

+186
-59
lines changed

5 files changed

+186
-59
lines changed

‎astro.config.mjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,10 @@ import { defineConfig } from 'astro/config';
44
// https://astro.build/config
55
export default defineConfig({
66
site: 'https://pwnfuzz.github.io',
7+
markdown: {
8+
shikiConfig: {
9+
theme: 'github-light', // Use GitHub's light theme for syntax highlighting
10+
wrap: true,
11+
},
12+
},
713
});

‎src/layouts/BlogPost.astro‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
1717
</head>
1818

1919
<body>
20+
<div class="reading-progress" id="readingProgress"></div>
2021
<Header />
2122
<main class="container">
2223
<article class="post-article">
@@ -100,7 +101,34 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
100101
}
101102
</script>
102103

104+
<script>
105+
// Reading Progress Indicator
106+
const progressBar = document.getElementById('readingProgress');
107+
108+
window.addEventListener('scroll', () => {
109+
const windowHeight = window.innerHeight;
110+
const documentHeight = document.documentElement.scrollHeight;
111+
const scrollTop = window.scrollY;
112+
const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
113+
114+
if (progressBar) {
115+
progressBar.style.width = `${Math.min(scrollPercent, 100)}%`;
116+
}
117+
});
118+
</script>
119+
103120
<style>
121+
.reading-progress {
122+
position: fixed;
123+
top: 0;
124+
left: 0;
125+
height: 3px;
126+
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
127+
z-index: 1001;
128+
transition: width 0.1s ease;
129+
width: 0;
130+
}
131+
104132
.post-article {
105133
padding: 4rem 0;
106134
}

‎src/pages/breakdowns/index.astro‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,28 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
115115
display: flex;
116116
flex-direction: column;
117117
gap: 0.5rem;
118-
transition: transform 0.2s ease;
119-
width: 100%; /* Ensure full width */
118+
padding: 2rem 0;
119+
border-bottom: 1px solid var(--border-subtle);
120+
transition: all 0.3s ease;
121+
width: 100%;
122+
position: relative;
123+
}
124+
125+
.post-item:last-child {
126+
border-bottom: none;
127+
}
128+
129+
.post-item::before {
130+
content: '';
131+
position: absolute;
132+
left: -1rem;
133+
top: 50%;
134+
transform: translateY(-50%);
135+
width: 3px;
136+
height: 0;
137+
background: var(--accent-primary);
138+
transition: height 0.3s ease;
139+
border-radius: 2px;
120140
}
121141

122142
.post-meta-top {
@@ -146,14 +166,20 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
146166
}
147167

148168
.post-item:hover {
149-
transform: translateY(-2px);
169+
transform: translateX(8px);
170+
box-shadow: var(--shadow-sm);
171+
}
172+
173+
.post-item:hover::before {
174+
height: 60%;
150175
}
151176

152177
.post-summary {
153178
font-size: 1rem;
154179
color: var(--fg-secondary);
155-
line-height: 1.6;
180+
line-height: 1.7;
156181
margin: 0.2rem 0 0.8rem 0;
182+
letter-spacing: 0.01em;
157183
max-width: 100%; /* Allow full width */
158184
overflow-wrap: break-word;
159185
}
@@ -179,16 +205,22 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
179205
}
180206

181207
.tag {
182-
background: rgba(255, 255, 255, 0.5); /* Glassy */
208+
background: rgba(255, 255, 255, 0.5);
183209
backdrop-filter: blur(4px);
184-
padding: 0.1rem 0.4rem;
185-
border-radius: 4px;
210+
padding: 0.25rem 0.6rem;
211+
border-radius: 12px;
186212
color: var(--fg-secondary);
187213
font-size: 0.8rem;
188214
font-weight: 500;
215+
transition: all 0.2s ease;
189216
border: 1px solid var(--border-subtle);
190217
}
191218

219+
.tag:hover {
220+
transform: scale(1.05);
221+
background: rgba(0, 0, 0, 0.05);
222+
}
223+
192224
.pagination {
193225
display: flex;
194226
justify-content: center;

‎src/pages/index.astro‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,28 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
117117
display: flex;
118118
flex-direction: column;
119119
gap: 0.5rem;
120-
transition: transform 0.2s ease;
121-
width: 100%; /* Ensure full width within container */
120+
padding: 2rem 0;
121+
border-bottom: 1px solid var(--border-subtle);
122+
transition: all 0.3s ease;
123+
width: 100%;
124+
position: relative;
125+
}
126+
127+
.post-item:last-child {
128+
border-bottom: none;
129+
}
130+
131+
.post-item::before {
132+
content: '';
133+
position: absolute;
134+
left: -1rem;
135+
top: 50%;
136+
transform: translateY(-50%);
137+
width: 3px;
138+
height: 0;
139+
background: var(--accent-primary);
140+
transition: height 0.3s ease;
141+
border-radius: 2px;
122142
}
123143

124144
.post-meta-top {
@@ -144,18 +164,24 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
144164

145165
.post-link:hover .post-title {
146166
color: var(--accent-link);
147-
text-decoration: none; /* Remove underline */
167+
text-decoration: none;
148168
}
149169

150170
.post-item:hover {
151-
transform: translateY(-2px); /* Subtle lift */
171+
transform: translateX(8px);
172+
box-shadow: var(--shadow-sm);
173+
}
174+
175+
.post-item:hover::before {
176+
height: 60%;
152177
}
153178

154179
.post-summary {
155180
font-size: 1rem;
156181
color: var(--fg-secondary);
157-
line-height: 1.6;
182+
line-height: 1.7;
158183
margin: 0.2rem 0 0.8rem 0;
184+
letter-spacing: 0.01em;
159185
max-width: 100%; /* Allow full width */
160186
overflow-wrap: break-word; /* Prevent overflow */
161187
}
@@ -181,16 +207,22 @@ const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
181207
}
182208

183209
.tag {
184-
background: rgba(255, 255, 255, 0.5); /* Glassy */
210+
background: rgba(255, 255, 255, 0.5);
185211
backdrop-filter: blur(4px);
186-
padding: 0.1rem 0.4rem;
187-
border-radius: 4px;
212+
padding: 0.25rem 0.6rem;
213+
border-radius: 12px;
188214
color: var(--fg-secondary);
189215
font-size: 0.8rem;
190216
font-weight: 500;
217+
transition: all 0.2s ease;
191218
border: 1px solid var(--border-subtle);
192219
}
193220

221+
.tag:hover {
222+
transform: scale(1.05);
223+
background: rgba(0, 0, 0, 0.05);
224+
}
225+
194226
.pagination {
195227
display: flex;
196228
justify-content: center;

0 commit comments

Comments
 (0)