style: make bookmark cards significantly more compact

- Reduce card content gap from 0.5rem to 0.25rem (50% reduction)
- Reduce bookmark title margin-bottom from 0.5rem to 0.25rem (50% reduction)
- Reduce bookmark footer padding-top from 0.5rem to 0.25rem (50% reduction)
- Reduce reading progress separator margin from 0.5rem to 0.25rem (50% reduction)
- Update ReadingProgressBar component margins to 0.25rem
- Update responsive breakpoints for consistent compact spacing
- Achieve much tighter vertical layout with minimal wasted space
This commit is contained in:
Gigi
2025-10-25 01:50:46 +02:00
parent 5254697fe2
commit c8cd1e6e66
2 changed files with 9 additions and 9 deletions

View File

@@ -150,8 +150,8 @@ export const CardView: React.FC<CardViewProps> = ({
<ReadingProgressBar
readingProgress={readingProgress}
height={1}
marginTop="0.5rem"
marginBottom="0.5rem"
marginTop="0.25rem"
marginBottom="0.25rem"
/>
<div className="bookmark-footer">

View File

@@ -160,7 +160,7 @@
.card-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: 0.25rem;
flex: 1;
}
@@ -172,7 +172,7 @@
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 0.5rem 0;
margin: 0 0 0.25rem 0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
@@ -200,7 +200,7 @@
.card-content .bookmark-footer {
margin-top: auto;
padding-top: 0.5rem;
padding-top: 0.25rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -238,7 +238,7 @@
background: var(--color-border);
border-radius: 0.5px;
overflow: hidden;
margin: 0.5rem 0;
margin: 0.25rem 0;
position: relative;
}
@@ -314,7 +314,7 @@
.card-content .bookmark-title {
font-size: 1rem;
margin-bottom: 0.375rem;
margin-bottom: 0.25rem;
}
.card-content .bookmark-content {
@@ -323,7 +323,7 @@
}
.card-content .bookmark-footer {
padding-top: 0.375rem;
padding-top: 0.25rem;
}
}
@@ -348,7 +348,7 @@
.card-content .bookmark-title {
font-size: 0.9rem;
margin-bottom: 0.375rem;
margin-bottom: 0.25rem;
}
.card-content .bookmark-content {