aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-02-16 04:24:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: use multi-column layout for explore writings

Browse Source
This commit is contained in:
Gigi
2025-11-26 23:35:44 +01:00
parent d50276adca
commit bf81cd51b7
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Explore.tsx
View File

@@ -595,7 +595,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
case 'highlights':
if (showSkeletons) {
return (
<div className="explore-grid">
<div className="explore-grid single-column">
{Array.from({ length: 8 }).map((_, i) => (
<HighlightSkeleton key={i} />
))}
@@ -607,7 +607,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
<span>No highlights to show for the selected scope.</span>
</div>
) : (
<div className="explore-grid">
<div className="explore-grid single-column">
{classifiedHighlights.map((highlight) => (
<HighlightItem
key={highlight.id}

10
src/styles/components/cards.css
View File

@@ -277,7 +277,15 @@
.explore-loading { min-height: 0; padding: 0.25rem 0; }
.explore-error { color: rgb(239 68 68); /* red-500 */ }
.explore-empty { color: var(--color-text-secondary); }
.explore-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
.explore-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.explore-grid.single-column {
grid-template-columns: 1fr;
}
.blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
.blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
.blog-post-card.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #fde047) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #fde047) 25%, transparent); }