Skip to content

Commit b8e8861

Browse files
fezcodefezcode
committed
style: consistent css vars
1 parent c32de12 commit b8e8861

File tree

6 files changed

+25
-28
lines changed

6 files changed

+25
-28
lines changed

‎public/timeline/timeline.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
[
2+
{
3+
"date": "2025-11-27",
4+
"title": "New Blogpost Page",
5+
"description": "A new overhauled version of the blogposts page.",
6+
"type": "refactor",
7+
"icon": "RocketLaunchIcon",
8+
"link": "/#/blog/"
9+
},
210
{
311
"date": "2025-11-27",
412
"title": "Visual Modes",

‎src/components/PostItem.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const PostItem = ({
4848
? 'var(--color-gist-badge)'
4949
: category === 'feat'
5050
? 'var(--color-feat-badge)'
51-
: 'var(--color-takes-badge)',
51+
: 'var(--color-rant-badge)',
5252
};
5353

5454
const postBackgroundColorClass =
@@ -62,7 +62,7 @@ const PostItem = ({
6262
? 'bg-gist-card-bg'
6363
: category === 'feat'
6464
? 'bg-feat-card-bg'
65-
: 'bg-takes-card-bg';
65+
: 'bg-rant-card-bg';
6666

6767
const postHoverBackgroundColorClass =
6868
category === 'dev'
@@ -75,7 +75,7 @@ const PostItem = ({
7575
? 'hover:bg-gist-card-bg-hover'
7676
: category === 'feat'
7777
? 'hover:bg-feat-card-bg-hover'
78-
: 'hover:bg-takes-card-bg-hover';
78+
: 'hover:bg-rant-card-bg-hover';
7979

8080
const postTitleHoverColorClass =
8181
category === 'dev'
@@ -88,7 +88,7 @@ const PostItem = ({
8888
? 'group-hover:text-[var(--title-hover-gist)]'
8989
: category === 'feat'
9090
? 'group-hover:text-[var(--title-hover-feat)]'
91-
: 'group-hover:text-[var(--title-hover-takes)]';
91+
: 'group-hover:text-[var(--title-hover-rant)]';
9292

9393
const categoryBadgeFontColorStyle =
9494
category === 'gist' || category === 'gist' ? 'text-black' : 'text-white'

‎src/components/metadata-cards/PostMetadata.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const PostMetadata = ({
3333
? 'var(--color-gist-badge)'
3434
: metadata.category === 'feat'
3535
? 'var(--color-feat-badge)'
36-
: 'var(--color-takes-badge)',
36+
: 'var(--color-rant-badge)',
3737
};
3838

3939
const categoryBadgeFontColorStyle =

‎src/config/colors.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ module.exports = {
4040
'markdown-hx-color': '#ffedd5', // orange-100
4141
'dev-card-bg': 'var(--bg-dev-card)',
4242
'dev-card-bg-hover': 'var(--bg-dev-card-hover)',
43-
'takes-card-bg': 'var(--bg-takes-card)',
44-
'takes-card-bg-hover': 'var(--bg-takes-card-hover)',
43+
'rant-card-bg': 'var(--bg-rant-card)',
44+
'rant-card-bg-hover': 'var(--bg-rant-card-hover)',
4545
'series-card-bg': 'var(--bg-series-card)',
4646
'series-card-bg-hover': 'var(--bg-series-card-hover)',
4747
'dnd-card-bg': 'var(--bg-dnd-card)',

‎src/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,10 @@ code {
9292
--title-hover-dev: #81aff4;
9393

9494
/*rant card*/
95-
--color-takes-badge: #065f46; /* emerald-800 */
96-
--bg-takes-card: rgba(6, 95, 70, 0.175);
97-
--bg-takes-card-hover: rgba(16, 185, 129, 0.275);
98-
--title-hover-takes: #3cb371;
95+
--color-rant-badge: #065f46; /* emerald-800 */
96+
--bg-rant-card: rgba(6, 95, 70, 0.175);
97+
--bg-rant-card-hover: rgba(16, 185, 129, 0.275);
98+
--title-hover-rant: #3cb371;
9999

100100
/*series card*/
101101
--color-series-badge: #b5163a; /* rose-600 */

‎src/pages/BlogPage.js‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, {useState, useEffect} from 'react';
22
import {Link} from 'react-router-dom';
33
import PostItem from '../components/PostItem';
44
import useSeo from '../hooks/useSeo';
5-
import {ArrowLeftIcon, ArticleIcon, MagnifyingGlassIcon, FunnelIcon, XCircle, X} from '@phosphor-icons/react';
6-
import colors from '../config/colors';
5+
import {ArrowLeftIcon, ArticleMediumIcon, MagnifyingGlassIcon, FunnelIcon, XCircle, X} from '@phosphor-icons/react';
76

87
const iconColors = [
98
"text-red-500",
@@ -198,7 +197,7 @@ const BlogPage = () => {
198197
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
199198
<div>
200199
<h1 className="text-4xl font-bold font-mono tracking-tight sm:text-6xl mb-4 flex items-center text-white">
201-
<ArticleIcon
200+
<ArticleMediumIcon
202201
size={48}
203202
weight="fill"
204203
className={`mr-4 mt-2 ${iconColor}`}
@@ -212,7 +211,8 @@ const BlogPage = () => {
212211
<span className="text-gray-500">]</span>
213212
</h1>
214213
<p className="text-gray-400 text-lg max-w-2xl font-mono">
215-
Catch up on the latest news and insights.
214+
From the <span style={{color: 'var(--fzcdx-spanner)'}}>Blog</span>: Catch up on the latest news and
215+
insights.
216216
</p>
217217
</div>
218218

@@ -265,27 +265,16 @@ const BlogPage = () => {
265265
{id: 'd&d', label: 'D&D'},
266266
].map((filter) => {
267267
const isSelected = activeFilter === filter.id;
268-
269-
// Determine color key for mapping
270-
let colorKey = filter.id;
271-
if (filter.id === 'rant') colorKey = 'takes'; // 'rant' maps to 'takes' color vars
272-
273268
// Resolve specific color using colors.js logic approximation or CSS vars
274269
// Since we are using style prop with vars in the previous version, let's stick to that pattern or use colors.js if available
275270
// Note: colors.js has keys like 'feat', 'series', etc.
276271
// Let's try to use the hex codes from colors.js if possible, or fallback to a default.
277272

278-
let categoryColor = colors.primary[400]; // Default
279-
if (filter.id === 'all') categoryColor = '#9ca3af'; // gray-400
280-
else if (filter.id === 'rant') categoryColor = '#065f46'; // hardcoded matching index.css roughly or use colors.js
281-
// Actually, let's use the CSS variables for consistency with badges
282-
283273
// Construct style object
284274
const activeColor = filter.id === 'all' ? '#4b5563' :
285-
filter.id === 'rant' ? 'var(--color-takes-badge)' :
275+
filter.id === 'rant' ? 'var(--color-rant-badge)' :
286276
filter.id === 'd&d' ? 'var(--color-dnd-badge)' :
287277
`var(--color-${filter.id}-badge)`;
288-
289278
const style = isSelected ? {
290279
backgroundColor: activeColor,
291280
borderColor: activeColor,
@@ -316,7 +305,7 @@ const BlogPage = () => {
316305
</div>
317306

318307
{/*mt-12 max-w-3xl mx-auto space-y-8*/}
319-
<div className="mt-12 mx-auto space-y-8">
308+
<div className="mt-12 mx-auto space-y-6">
320309
{filteredItems.map((item) =>
321310
item.isSeries ? (
322311
<PostItem

0 commit comments

Comments
 (0)