Skip to content

Fix circular profile photo with pastel trans pride flag border #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ZulTheDev merged 1 commit into from
Oct 8, 2026
Merged

Fix circular profile photo with pastel trans pride flag border #38

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions client/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1614,19 +1614,18 @@ footer{

border:10px solid transparent;

/* Five equal repeating bands, matching the trans pride flag:
pastel cyan → pastel pink → white → pastel pink → pastel cyan.
The clipped image and frame remain perfectly circular. */
background:
linear-gradient(#12101a,#12101a) padding-box,
conic-gradient(
from -25deg,
#5BCEFA 0deg 60deg,
#FFFFFF 60deg 84deg,
#F5A9B8 84deg 144deg,
#FFFFFF 144deg 168deg,
#5BCEFA 168deg 228deg,
#FFFFFF 228deg 252deg,
#F5A9B8 252deg 312deg,
#FFFFFF 312deg 336deg,
#5BCEFA 336deg 360deg
linear-gradient(
180deg,
#5BCEFA 0% 20%,
Comment on lines +1622 to +1624

@chatgpt-codex-connector chatgpt-codex-connector Bot Oct 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Apply the flag stripes to the active cozy border

When the profile is rendered inside .cozy-hero-art, the later, more-specific .cozy-hero-art .hero-photo-cutout { background: #201a2d; } replaces this entire layered background. The only visible colored frame is therefore the separate diagonal, uneven gradient on .hero-photo-frame, so users never see the five equal horizontal cyan/pink/white/pink/cyan bands introduced here. The stripes need to be applied through the active cozy-specific frame/cutout rule.

Useful? React with 👍 / 👎.

#F5A9B8 20% 40%,
#FFFFFF 40% 60%,
#F5A9B8 60% 80%,
#5BCEFA 80% 100%
) border-box;

box-shadow:
Expand Down Expand Up @@ -6363,3 +6362,16 @@ samp{
padding-right:18px!important;
}
}


/* Keep the entire profile frame circular at all viewport sizes. */
.hero-photo-frame,
.hero-photo-cutout,
.hero-photo,
.hero-photo-scan{
aspect-ratio:1 / 1;
border-radius:50%;
Comment on lines +6372 to +6373

@chatgpt-codex-connector chatgpt-codex-connector Bot Oct 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Override the cozy profile radii

In the rendered portfolio hero, the container always has cozy-hero-art, whose earlier .cozy-hero-art .hero-photo-frame and .cozy-hero-art .hero-photo-cutout rules set border-radius: 28px!important and 24px!important. Those declarations win over this non-important 50%, so the visible frame and clipping mask remain rounded rectangles at every viewport rather than becoming circular. Remove or override the cozy-specific important radii.

Useful? React with 👍 / 👎.

}
.hero-photo-frame{
max-width:100%;
}
Loading