bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak the layout

Browse Source 
... left aligning
This commit is contained in:
Adrien Maston
2026-03-11 13:19:48 +01:00
parent 801da17cfa
commit 99e5af6f95
1 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-perma.css
+60 -17
View File
@@ -156,37 +156,74 @@
@media (max-width: 639px) {
--meta-spacer-block: 0.75ch;
inline-size: 100%;
grid-template-areas:
"avatars-author text-added"
"avatars-author text-author"
"text-updated text-updated"
"text-assignees text-assignees"
"avatars-assignees avatars-assignees";
grid-template-columns: auto 1fr;
min-inline-size: 0;
gap: calc(var(--meta-spacer-block) / 2);
display: flex;
flex-wrap: wrap;
.card__meta-text {
border: 0;
padding: 0;
}
.card__meta-text + .card__meta-text {
.card__meta-avatars--author {
--btn-size: 1.5em;
display: initial;
margin-inline-end: unset;
order: 3;
}
.card__meta-text--added {
inline-size: 100%;
order: 1;
}
.card__meta-text--author {
order: 2;
}
.card__meta-text--updated {
border-block-start: var(--card-border);
margin-block-start: var(--meta-spacer-block);
inline-size: 100%;
margin-block-start: calc(var(--meta-spacer-block) * 0.5);
order: 4;
padding-block-start: var(--meta-spacer-block);
}
.card__meta-text--assignees {
margin-block-start: calc(var(--meta-spacer-block) * 3);
order: 6;
white-space: unset !important;
}
.card__meta-avatars--assignees {
margin-inline: 0;
margin-block-start: var(--meta-spacer-block);
margin-inline: 0 var(--meta-spacer-inline);
margin-block-start: calc(var(--meta-spacer-block) * 3);
order: 5;
.avatar {
display: grid;
}
}
.card__meta-avatars--author {
display: initial;
}
&:has(.card__meta-avatars--assignees .avatar) {
.card__meta-text--assignees {
order: 5;
}
.card__meta-avatars--assignees .avatar {
display: grid;
.card__meta-avatars--assignees {
margin-block-start: var(--meta-spacer-block);
order: 6;
}
}
}
}
&:has(.card__closed) .card__meta {
@media (max-width: 639px) {
.card__meta-avatars--assignees {
display: none;
}
}
}
@@ -252,10 +289,16 @@
@media (max-width: 639px) {
display: grid;
font-size: var(--text-x-small);
gap: 1ch 0;
grid-template-columns: 1fr auto;
grid-template-areas:
"meta bg-zoom"
"meta reactions";
&:not(:has(.reaction)),
&:has(.card__background) {
column-gap: 2ch;
}
}
}