blomios/ReadaBook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): accueil — refonte sobre et moderne : hero resserré, cartes de livres simplifiées (renderHomeBook : couverture + titre + auteur, sans pill de métadonnées ni Meter) et liste des livres en cours limitée à 3 éléments visibles avant scroll (tuiles 112px — évolution #45)

Browse Source
This commit is contained in:
Git Agent
2026-08-28 23:07:39 +02:00
parent cf8779781f
commit 11bb529322
3 changed files with 144 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
apps/web/src/styles/app.css
View File

@ -356,6 +356,24 @@ h2 {
background: rgba(169, 72, 52, 0.12);
}
.home-page {
align-items: start;
gap: 18px;
}
.home-hero {
min-height: 176px;
border-color: rgba(247, 240, 223, 0.13);
background:
linear-gradient(180deg, rgba(247, 240, 223, 0.08), rgba(247, 240, 223, 0.025)),
rgba(23, 17, 13, 0.74);
}
.home-hero h1 {
max-width: 740px;
font-size: clamp(2.2rem, 5vw, 4.1rem);
}
.continue-grid,
.library-list,
.job-list {
@ -364,8 +382,8 @@ h2 {
}
.continue-grid {
--continue-visible-rows: 6;
--continue-tile-block-size: 118px;
--continue-visible-rows: 3;
--continue-tile-block-size: 112px;
max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)));
overflow-y: auto;
padding-right: 4px;
@ -416,12 +434,89 @@ h2 {
}
.continue-tile {
grid-template-columns: 52px minmax(0, 1fr);
align-items: start;
block-size: var(--continue-tile-block-size);
overflow: hidden;
}
.home-book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
}
.home-book-card {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-width: 0;
padding: 10px;
border: 1px solid rgba(247, 240, 223, 0.12);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.035);
color: var(--ink);
text-align: left;
}
.home-book-card:hover {
border-color: rgba(213, 168, 77, 0.42);
background: rgba(255, 255, 255, 0.055);
}
.home-book-cover {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
border: 1px solid rgba(247, 240, 223, 0.14);
border-radius: 5px;
background:
linear-gradient(135deg, rgba(213, 168, 77, 0.16), rgba(45, 111, 99, 0.16)),
var(--paper-soft);
color: var(--brass);
}
.home-book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-book-copy {
display: grid;
gap: 5px;
min-width: 0;
}
.home-book-copy strong,
.home-book-copy span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-book-copy strong {
line-height: 1.15;
}
.home-book-copy > span {
color: var(--ink-muted);
}
.home-book-volume {
width: max-content;
max-width: 100%;
padding: 3px 6px;
border: 1px solid rgba(213, 168, 77, 0.42);
border-radius: 999px;
color: #f5dfaa;
font-size: 0.72rem;
font-weight: 900;
background: rgba(213, 168, 77, 0.1);
}
.continue-cover {
display: grid;
place-items: center;