dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bump to 2.2.5; friends: emoji avatars + always-2-column grid

Browse source
This commit is contained in:
Martin Dvořák 2026-10-01 06:54:40 +00:00
commit 2fbfd6d096
9 changed files with 73 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/app/web.css
View file

@ -482,6 +482,11 @@ html[data-theme="web"] body {
.services-buttons.services-main {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Friends: always exactly 2 columns at every width, so the grid stays a clean
rectangle/square instead of ending in an orphan "L" row. */
.services-buttons.friends-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-button {
position: relative;
@ -572,25 +577,37 @@ html[data-theme="web"] body {
color: var(--fg);
}
/* Friend cards centre their text (the web theme has no icon; the desktop
Friends app shows the wizard emoji above the name). */
/* Friend cards: a big emoji beside the name + website, sized to roughly the
two text lines combined so the (wide) card doesn't look empty. */
.service-button.friend {
flex-direction: column;
text-align: center;
gap: 10px;
padding: 18px 16px;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 16px 20px;
}
/* Let the corner status dot anchor to the card, not to the emoji. */
.service-button.friend .service-icon-wrap {
position: static;
}
.service-button.friend .service-text {
align-items: center;
width: 100%;
/* Leave room for the corner status dot so names don't run under it. */
padding-inline: 10px;
align-items: flex-start;
width: auto;
min-width: 0;
}
/* Friend cards are text-only now, so let long names wrap instead of running
under the corner status dot. */
.service-button.friend .service-name {
white-space: normal;
}
.service-button.friend .service-icon {
width: auto;
height: auto;
font-size: 2.5rem;
line-height: 1;
filter: none;
}
/* Long domains must wrap on narrow cards instead of overflowing. */
.service-button.friend .service-desc {
overflow-wrap: anywhere;
}
.service-button.friend .service-status-dot {
top: 12px;
right: 12px;
@ -603,13 +620,6 @@ html[data-theme="web"] body {
transform: none;
filter: none;
}
/* The desktop Friends app shows a big wizard emoji in place of the old avatars. */
.service-button.friend .service-icon {
width: 64px;
height: 64px;
font-size: 2.6rem;
filter: none;
}
/* ============================================================
PROJECTS / HARDWARE
@ -1203,9 +1213,11 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
.services-buttons.services-main {
grid-template-columns: 1fr;
}
/* Friends are text-only cards now, so they read fine as a 2x2 grid. */
.services-buttons.friends-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Friend cards stay 2-up here, so tighten the padding to give the text room
next to the big emoji. */
.service-button.friend {
gap: 12px;
padding: 12px 14px;
}
.social-buttons {
grid-template-columns: 1fr 1fr;