Skip to content

Commit f0e8e5e

Browse files
author
TechStack Global
committed
style: fix Guides layout and reorder Amazon Stack recent items
1 parent 73405fe commit f0e8e5e

2 files changed

Lines changed: 114 additions & 103 deletions

File tree

amazon-stack.html

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,77 @@ <h1>The Amazon Stack</h1>
9696
Hardware chosen for performance, reliability, and practical daily use.
9797
</p>
9898
<div class="blog-grid" style="grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));">
99+
<!-- Bose QuietComfort Ultra -->
100+
<div class="product-item glass-card">
101+
<div class="product-thumbnail-wrapper">
102+
<img alt="Bose QuietComfort Ultra wireless headphones thumbnail" class="product-thumbnail"
103+
loading="lazy" src="posts/images/bose-qc-ultra-front.jpg" />
104+
</div>
105+
<div class="product-info">
106+
<div class="product-meta">Spatial Audio & Comfort</div>
107+
<h3><a aria-label="Open review: Bose QuietComfort Ultra"
108+
href="posts/bose-qc-ultra-review.html">Bose QC Ultra</a></h3>
109+
<a class="view-review-cta" href="posts/bose-qc-ultra-review.html">View Review <i
110+
class="fa-solid fa-arrow-right"></i></a>
111+
</div>
112+
</div>
113+
<!-- Sony WH-1000XM5 -->
114+
<div class="product-item glass-card">
115+
<div class="product-thumbnail-wrapper">
116+
<img alt="Sony WH-1000XM5 wireless noise cancelling headphones thumbnail"
117+
class="product-thumbnail" loading="lazy" src="posts/images/sony-wh-1000xm5-front.jpg" />
118+
</div>
119+
<div class="product-info">
120+
<div class="product-meta">Noise Canceling Audio</div>
121+
<h3><a aria-label="Open review: Sony WH-1000XM5" href="posts/sony-wh-1000xm5-review.html">Sony
122+
WH-1000XM5</a></h3>
123+
<a class="view-review-cta" href="posts/sony-wh-1000xm5-review.html">View Review <i
124+
class="fa-solid fa-arrow-right"></i></a>
125+
</div>
126+
</div>
127+
<!-- Samsung Odyssey G8 -->
128+
<div class="product-item glass-card">
129+
<div class="product-thumbnail-wrapper">
130+
<img alt="Samsung Odyssey G8 OLED monitor front view thumbnail" class="product-thumbnail"
131+
loading="lazy" src="posts/images/odyssey-g8-front.jpg" />
132+
</div>
133+
<div class="product-info">
134+
<div class="product-meta">OLED Ultrawide</div>
135+
<h3><a aria-label="Open review: Samsung Odyssey G8 OLED"
136+
href="posts/samsung-odyssey-g8-review.html">Samsung Odyssey G8</a></h3>
137+
<a class="view-review-cta" href="posts/samsung-odyssey-g8-review.html">View Review <i
138+
class="fa-solid fa-arrow-right"></i></a>
139+
</div>
140+
</div>
141+
<!-- Alienware AW3423DWF -->
142+
<div class="product-item glass-card">
143+
<div class="product-thumbnail-wrapper">
144+
<img alt="Dell Alienware AW3423DWF QD-OLED monitor front view thumbnail"
145+
class="product-thumbnail" loading="lazy" src="posts/images/alienware-aw3423dwf-front.jpg" />
146+
</div>
147+
<div class="product-info">
148+
<div class="product-meta">QD-OLED Ultrawide</div>
149+
<h3><a aria-label="Open review: Dell Alienware AW3423DWF"
150+
href="posts/alienware-aw3423dwf-review.html">Alienware AW3423DWF</a></h3>
151+
<a class="view-review-cta" href="posts/alienware-aw3423dwf-review.html">View Review <i
152+
class="fa-solid fa-arrow-right"></i></a>
153+
</div>
154+
</div>
155+
<!-- Shure SM7dB-->
156+
<div class="product-item glass-card">
157+
<div class="product-thumbnail-wrapper">
158+
<img alt="Shure SM7dB dynamic vocal microphone product thumbnail" class="product-thumbnail"
159+
loading="lazy" src="posts/images/shure-sm7db-primary.jpg" />
160+
</div>
161+
<div class="product-info">
162+
<div class="product-meta">Podcast Microphone</div>
163+
<h3><a aria-label="Open review: Shure SM7dB Dynamic Microphone"
164+
href="posts/shure-sm7db-review.html">Shure
165+
SM7dB Microphone</a></h3>
166+
<a class="view-review-cta" href="posts/shure-sm7db-review.html">View
167+
Review <i class="fa-solid fa-arrow-right"></i></a>
168+
</div>
169+
</div>
99170
<!-- MacBook Pro-->
100171
<div class="product-item glass-card">
101172
<div class="product-thumbnail-wrapper">
@@ -198,77 +269,6 @@ <h3><a aria-label="Open review: Shure SM7B" href="posts/shure-sm7b-review.html">
198269
class="fa-solid fa-arrow-right"></i></a>
199270
</div>
200271
</div>
201-
<!-- Shure SM7dB-->
202-
<div class="product-item glass-card">
203-
<div class="product-thumbnail-wrapper">
204-
<img alt="Shure SM7dB dynamic vocal microphone product thumbnail" class="product-thumbnail"
205-
loading="lazy" src="posts/images/shure-sm7db-primary.jpg" />
206-
</div>
207-
<div class="product-info">
208-
<div class="product-meta">Podcast Microphone</div>
209-
<h3><a aria-label="Open review: Shure SM7dB Dynamic Microphone"
210-
href="posts/shure-sm7db-review.html">Shure
211-
SM7dB Microphone</a></h3>
212-
<a class="view-review-cta" href="posts/shure-sm7db-review.html">View
213-
Review <i class="fa-solid fa-arrow-right"></i></a>
214-
</div>
215-
</div>
216-
<!-- Alienware AW3423DWF -->
217-
<div class="product-item glass-card">
218-
<div class="product-thumbnail-wrapper">
219-
<img alt="Dell Alienware AW3423DWF QD-OLED monitor front view thumbnail"
220-
class="product-thumbnail" loading="lazy" src="posts/images/alienware-aw3423dwf-front.jpg" />
221-
</div>
222-
<div class="product-info">
223-
<div class="product-meta">QD-OLED Ultrawide</div>
224-
<h3><a aria-label="Open review: Dell Alienware AW3423DWF"
225-
href="posts/alienware-aw3423dwf-review.html">Alienware AW3423DWF</a></h3>
226-
<a class="view-review-cta" href="posts/alienware-aw3423dwf-review.html">View Review <i
227-
class="fa-solid fa-arrow-right"></i></a>
228-
</div>
229-
</div>
230-
<!-- Samsung Odyssey G8 -->
231-
<div class="product-item glass-card">
232-
<div class="product-thumbnail-wrapper">
233-
<img alt="Samsung Odyssey G8 OLED monitor front view thumbnail" class="product-thumbnail"
234-
loading="lazy" src="posts/images/odyssey-g8-front.jpg" />
235-
</div>
236-
<div class="product-info">
237-
<div class="product-meta">OLED Ultrawide</div>
238-
<h3><a aria-label="Open review: Samsung Odyssey G8 OLED"
239-
href="posts/samsung-odyssey-g8-review.html">Samsung Odyssey G8</a></h3>
240-
<a class="view-review-cta" href="posts/samsung-odyssey-g8-review.html">View Review <i
241-
class="fa-solid fa-arrow-right"></i></a>
242-
</div>
243-
</div>
244-
<!-- Sony WH-1000XM5 -->
245-
<div class="product-item glass-card">
246-
<div class="product-thumbnail-wrapper">
247-
<img alt="Sony WH-1000XM5 wireless noise cancelling headphones thumbnail"
248-
class="product-thumbnail" loading="lazy" src="posts/images/sony-wh-1000xm5-front.jpg" />
249-
</div>
250-
<div class="product-info">
251-
<div class="product-meta">Noise Canceling Audio</div>
252-
<h3><a aria-label="Open review: Sony WH-1000XM5" href="posts/sony-wh-1000xm5-review.html">Sony
253-
WH-1000XM5</a></h3>
254-
<a class="view-review-cta" href="posts/sony-wh-1000xm5-review.html">View Review <i
255-
class="fa-solid fa-arrow-right"></i></a>
256-
</div>
257-
</div>
258-
<!-- Bose QuietComfort Ultra -->
259-
<div class="product-item glass-card">
260-
<div class="product-thumbnail-wrapper">
261-
<img alt="Bose QuietComfort Ultra wireless headphones thumbnail" class="product-thumbnail"
262-
loading="lazy" src="posts/images/bose-qc-ultra-front.jpg" />
263-
</div>
264-
<div class="product-info">
265-
<div class="product-meta">Spatial Audio & Comfort</div>
266-
<h3><a aria-label="Open review: Bose QuietComfort Ultra"
267-
href="posts/bose-qc-ultra-review.html">Bose QC Ultra</a></h3>
268-
<a class="view-review-cta" href="posts/bose-qc-ultra-review.html">View Review <i
269-
class="fa-solid fa-arrow-right"></i></a>
270-
</div>
271-
</div>
272272
</div>
273273
</section>
274274
</main>

blog.html

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -83,42 +83,53 @@ <h1>Guides</h1>
8383
cost
8484
to you.
8585
</div>
86-
<div class="blog-grid" id="blog-posts-container">
86+
<div class="pillar-guides-hero" style="margin-bottom: 4rem;">
87+
<h2
88+
style="margin-bottom: 2rem; color: var(--accent); border-bottom: 2px solid var(--border-glass); padding-bottom: 10px;">
89+
Consumer Tech Pillars (2026)</h2>
90+
<div style="display: flex; flex-direction: column; gap: 2rem;">
91+
<!-- PILLAR: Headphones -->
92+
<div class="blog-card glass-card" style="border-left: 5px solid #ff4b2b;">
93+
<div class="blog-category">Primary Pillar</div>
94+
<h2 style="font-size: 1.8rem; margin: 0.5rem 0;"><a
95+
href="posts/best-noise-cancelling-headphones-2026.html">The Best Noise Cancelling Headphones
96+
(2026)</a></h2>
97+
<p>The definitive guide to Active Noise Cancellation for deep work and travel. We compare the Sony
98+
WH-1000XM5, Bose QuietComfort Ultra, and Sennheiser Momentum 4 based on real-world attenuation
99+
and
100+
comfort.</p>
101+
<div class="card-meta"><span>Buyer Guide</span> <a class="read-more"
102+
href="posts/best-noise-cancelling-headphones-2026.html">View Pillar Guide →</a></div>
103+
</div>
87104

88-
<!-- PILLAR: Headphones -->
89-
<div class="blog-card glass-card" style="border-top: 4px solid var(--accent); grid-column: span 1 / -1;">
90-
<div class="blog-category">2026 Pillar Guide</div>
91-
<h2 style="font-size: 1.8rem; margin: 1rem 0;"><a
92-
href="posts/best-noise-cancelling-headphones-2026.html">The Best Noise Cancelling Headphones
93-
(2026)</a></h2>
94-
<p>The definitive guide to Active Noise Cancellation for deep work and travel. We compare the Sony
95-
WH-1000XM5, Bose QuietComfort Ultra, and Sennheiser Momentum 4 based on real-world attenuation and
96-
comfort.</p>
97-
<div class="card-meta"><span>Buyer Guide</span> <a class="read-more"
98-
href="posts/best-noise-cancelling-headphones-2026.html">View Pillar Guide →</a></div>
99-
</div>
105+
<!-- PILLAR: Microphones -->
106+
<div class="blog-card glass-card" style="border-left: 5px solid var(--accent);">
107+
<div class="blog-category">Primary Pillar</div>
108+
<h2 style="font-size: 1.8rem; margin: 0.5rem 0;"><a
109+
href="posts/best-podcast-microphones-2026.html">The
110+
Best Podcast Microphones (2026)</a></h2>
111+
<p>Master your signal chain. We break down the absolute best dynamic and condenser microphones for
112+
high-end podcasting, including the Shure SM7dB and standard studio gear.</p>
113+
<div class="card-meta"><span>Buyer Guide</span> <a class="read-more"
114+
href="posts/best-podcast-microphones-2026.html">View Pillar Guide →</a></div>
115+
</div>
100116

101-
<!-- PILLAR: Microphones -->
102-
<div class="blog-card glass-card" style="border-top: 4px solid var(--accent); grid-column: span 1 / -1;">
103-
<div class="blog-category">2026 Pillar Guide</div>
104-
<h2 style="font-size: 1.8rem; margin: 1rem 0;"><a href="posts/best-podcast-microphones-2026.html">The
105-
Best Podcast Microphones (2026)</a></h2>
106-
<p>Master your signal chain. We break down the absolute best dynamic and condenser microphones for
107-
high-end podcasting, including the Shure SM7dB and standard studio gear.</p>
108-
<div class="card-meta"><span>Buyer Guide</span> <a class="read-more"
109-
href="posts/best-podcast-microphones-2026.html">View Pillar Guide →</a></div>
117+
<!-- PILLAR: Monitors -->
118+
<div class="blog-card glass-card" style="border-left: 5px solid #ff00ea;">
119+
<div class="blog-category">Primary Pillar</div>
120+
<h2 style="font-size: 1.8rem; margin: 0.5rem 0;"><a
121+
href="posts/best-ultrawide-monitors-2026.html">The
122+
Best Ultrawide Monitors (2026)</a></h2>
123+
<p>Ditch the dual-monitor bezel. We evaluate the top QD-OLED and IPS ultrawide displays for
124+
productivity, creative work, and high-intensity gaming performance.</p>
125+
<div class="card-meta"><span>Buyer Guide</span> <a class="read-more"
126+
href="posts/best-ultrawide-monitors-2026.html">View Pillar Guide →</a></div>
127+
</div>
110128
</div>
129+
</div>
111130

112-
<!-- PILLAR: Monitors -->
113-
<div class="blog-card glass-card" style="border-top: 4px solid var(--accent); grid-column: span 1 / -1;">
114-
<div class="blog-category">2026 Pillar Guide</div>
115-
<h2 style="font-size: 1.8rem; margin: 1rem 0;"><a href="posts/best-ultrawide-monitors-2026.html">The
116-
Best Ultrawide Monitors (2026)</a></h2>
117-
<p>Ditch the dual-monitor bezel. We evaluate the top QD-OLED and IPS ultrawide displays for
118-
productivity, creative work, and high-intensity gaming performance.</p>
119-
<div class="card-meta"><span>Buyer Guide</span> <a class="read-more"
120-
href="posts/best-ultrawide-monitors-2026.html">View Pillar Guide →</a></div>
121-
</div>
131+
<h2 style="margin-bottom: 2rem; color: var(--text-secondary);">Market Analysis & Comparison Guides</h2>
132+
<div class="blog-grid" id="blog-posts-container">
122133

123134
<!-- Monitor Comparison-->
124135
<div class="blog-card glass-card" style="border-top: 3px solid #ff00ea;">

0 commit comments

Comments
 (0)