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

feat(web): accueil et profil — allègement du hero (textes descriptifs retirés), grilles de livres pleine largeur à 5 colonnes (auto-fit sans max-width), liste des bibliothèques scrollable (3 lignes visibles, partagée avec .continue-grid), et écran de profil clarifié (avatar, bloc identité, actions Modifier/Sortir — évolution #48)

Browse Source
This commit is contained in:
Git Agent
2026-08-28 23:53:11 +02:00
parent 8d5d1bc2ff
commit 1bbf03d875
5 changed files with 117 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -164,10 +164,9 @@ h2 {
--book-grid-column-min: 240px;
--book-grid-gap: 16px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--book-grid-column-min), 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--book-grid-column-min), calc((100% - (var(--book-grid-gap) * 4)) / 5))), 1fr));
gap: var(--book-grid-gap);
width: 100%;
max-width: calc((var(--book-grid-column-min) * 5) + (var(--book-grid-gap) * 4));
}
.book-card {
@ -394,9 +393,11 @@ h2 {
gap: 10px;
}
.continue-grid {
.continue-grid,
.library-list {
--continue-visible-rows: 3;
--continue-tile-block-size: 112px;
height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)));
max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)));
overflow-y: auto;
padding-right: 4px;
@ -451,14 +452,18 @@ h2 {
overflow: hidden;
}
.library-list button {
block-size: var(--continue-tile-block-size);
overflow: hidden;
}
.home-book-grid {
--book-grid-column-min: 190px;
--book-grid-gap: 14px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--book-grid-column-min), 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--book-grid-column-min), calc((100% - (var(--book-grid-gap) * 4)) / 5))), 1fr));
gap: var(--book-grid-gap);
width: 100%;
max-width: calc((var(--book-grid-column-min) * 5) + (var(--book-grid-gap) * 4));
}
.home-book-card {
@ -980,8 +985,54 @@ select {
.profile-panel {
display: grid;
gap: 10px;
align-content: start;
gap: 18px;
}
.profile-identity {
display: grid;
justify-items: start;
gap: 8px;
}
.profile-avatar {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(247, 240, 223, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
color: var(--brass);
}
.profile-identity h1 {
margin-bottom: 0;
font-size: 1.8rem;
line-height: 1.05;
}
.profile-identity p {
margin-bottom: 0;
color: var(--ink-muted);
overflow-wrap: anywhere;
}
.profile-identity span:not(.profile-avatar) {
width: max-content;
max-width: 100%;
padding: 4px 7px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-muted);
font-size: 0.76rem;
font-weight: 900;
}
.profile-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.reader-page {