style(profile): round avatars for people
3 files changed, +11 −8
- static/style.css modified +7 −5
- templates/orgsettings.html modified +1 −1
- web.go modified +3 −2
static/style.css modified
| @@ -89,7 +89,7 @@ main{padding-bottom:3rem} | ||
| 89 | 89 | nav.tabs.small{background:var(--raised);align-self:flex-end;margin-bottom:.3rem} |
| 90 | 90 | nav.tabs.small a{padding:.1rem .8rem} |
| 91 | 91 | nav.tabs.small a.active{background:var(--bar)} |
| 92 | -.profile .avatar{display:block;width:230px;height:230px;margin-bottom:.9rem;border-radius:6px} | |
| 92 | +.profile .avatar{display:block;width:230px;height:230px;margin-bottom:.9rem;border-radius:50%} | |
| 93 | 93 | .profile p{margin:.2rem 0} |
| 94 | 94 | .profile .name{font-weight:400;font-size:1.3rem;line-height:1.25;margin:0;color:var(--fg)} |
| 95 | 95 | .profile .btn.block{display:block;text-align:center;margin-top:.45rem} |
| @@ -180,7 +180,8 @@ input[type=file]{border:0;padding:0} | ||
| 180 | 180 | .actions{display:flex;justify-content:flex-end;gap:.5rem} |
| 181 | 181 | .actions.left{justify-content:flex-start} |
| 182 | 182 | .avatarform{display:grid;grid-template-columns:160px 1fr;gap:1.2rem;margin-bottom:1.2rem;align-items:start} |
| 183 | -.avatarform .avatarbox{width:160px;height:160px;border:1px solid var(--line);background:var(--bg)} | |
| 183 | +.avatarform .avatarbox{width:160px;height:160px;border:1px solid var(--line);background:var(--bg);border-radius:50%;overflow:hidden} | |
| 184 | +.avatarform .avatarbox.org{border-radius:6px} | |
| 184 | 185 | .avatarform .avatar{width:158px;height:158px;border:0} |
| 185 | 186 | .avatarform label{display:block;margin-bottom:.3rem} |
| 186 | 187 | .avatarform small{display:block;color:var(--muted);margin-bottom:.5rem} |
| @@ -389,7 +390,8 @@ pre.rangediff,pre.body{white-space:pre-wrap;overflow-wrap:anywhere} | ||
| 389 | 390 | .hit .tags a{color:var(--muted);text-decoration:underline;margin-right:.6rem;font-size:.85rem} |
| 390 | 391 | .hit .meta{display:flex;gap:1.1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-top:.35rem} |
| 391 | 392 | .hit.user{display:grid;grid-template-columns:3rem 1fr;gap:.9rem;align-items:start} |
| 392 | -.hitavatar img{display:flex;width:3rem;height:3rem;border-radius:6px;object-fit:cover;border:1px solid var(--line)} | |
| 393 | +.hit.org .hitavatar img{border-radius:6px} | |
| 394 | +.hitavatar img{display:flex;width:3rem;height:3rem;border-radius:50%;object-fit:cover;border:1px solid var(--line)} | |
| 393 | 395 | .hit .bio{color:var(--fg);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} |
| 394 | 396 | .langbar{display:flex;height:.5rem;border-radius:4px;overflow:hidden;margin:.2rem 0 .5rem;background:var(--line)} |
| 395 | 397 | .langbar span{display:block;height:100%} |
| @@ -419,7 +421,7 @@ pre.rangediff,pre.body{white-space:pre-wrap;overflow-wrap:anywhere} | ||
| 419 | 421 | .orglist h4{font-size:.85rem;color:var(--muted);margin:0 0 .4rem;font-weight:600} |
| 420 | 422 | .orgicons{display:flex;flex-wrap:wrap;gap:.4rem} |
| 421 | 423 | .orglist a{display:flex} |
| 422 | -.orglist img{display:flex;width:2rem;height:2rem;border-radius:2px;object-fit:cover;font-size:.8rem} | |
| 424 | +.orglist img{display:flex;width:2rem;height:2rem;border-radius:4px;object-fit:cover;font-size:.8rem} | |
| 423 | 425 | .memberlist{list-style:none;margin:0 0 .8rem;padding:0;max-width:32rem} |
| 424 | 426 | .memberlist li{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--line)} |
| 425 | 427 | .memberlist form{margin:0} |
| @@ -432,7 +434,7 @@ pre.rangediff,pre.body{white-space:pre-wrap;overflow-wrap:anywhere} | ||
| 432 | 434 | .people li b{font-weight:400;font-size:.97rem;line-height:1.2} |
| 433 | 435 | .people li small{color:var(--muted);line-height:1.2} |
| 434 | 436 | .orghead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.3rem;align-items:start;margin:-.4rem 0 1.3rem;padding-bottom:1.2rem;border-bottom:1px solid var(--bar)} |
| 435 | -.orgmark img{display:flex;width:6rem;height:6rem;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:var(--soft)} | |
| 437 | +.orgmark img{display:flex;width:6rem;height:6rem;border-radius:6px;object-fit:cover;border:1px solid var(--line);background:var(--soft)} | |
| 436 | 438 | .orgident h2{font-size:1.6rem;line-height:1.2;margin:0} |
| 437 | 439 | .orgident .handle{color:var(--muted);margin:.1rem 0 .45rem} |
| 438 | 440 | .orgident .bio{margin:0 0 .45rem} |
templates/orgsettings.html modified
| @@ -4,7 +4,7 @@ | ||
| 4 | 4 | <h3 class="rule">Edit <a href="/~{{$o.Name}}">~{{$o.Name}}</a></h3> |
| 5 | 5 | <form method="post" action="/settings/avatar" enctype="multipart/form-data" class="avatarform" id="avatarform"> |
| 6 | 6 | <input type="hidden" name="org" value="{{$o.Name}}"> |
| 7 | -<div class="avatarbox"><img class="avatar" src="/~{{$o.Name}}/avatar?v={{$p.Avatar}}" alt=""></div> | |
| 7 | +<div class="avatarbox org"><img class="avatar" src="/~{{$o.Name}}/avatar?v={{$p.Avatar}}" alt=""></div> | |
| 8 | 8 | <div> |
| 9 | 9 | <label>Choose a picture <input type="file" name="avatar" accept="image/png,image/jpeg,image/gif,image/webp" required></label> |
| 10 | 10 | <small>If the image is not square you can pick the crop below. It is resized to 256×256 and stored as PNG.</small> |
web.go modified
| @@ -792,12 +792,13 @@ func (s *Server) deleteAvatar(w http.ResponseWriter, r *http.Request) { | ||
| 792 | 792 | |
| 793 | 793 | func (s *Server) serveAvatar(w http.ResponseWriter, r *http.Request, owner User) { |
| 794 | 794 | data, err := os.ReadFile(s.avatarPath(owner.ID)) |
| 795 | + age := "86400" | |
| 795 | 796 | if err != nil { |
| 796 | - data = identicon(owner.Name) | |
| 797 | + data, age = identicon(owner.Name), "3600" | |
| 797 | 798 | } |
| 798 | 799 | w.Header().Set("Content-Type", "image/png") |
| 799 | 800 | w.Header().Set("X-Content-Type-Options", "nosniff") |
| 800 | - w.Header().Set("Cache-Control", "public, max-age=86400") | |
| 801 | + w.Header().Set("Cache-Control", "public, max-age="+age) | |
| 801 | 802 | w.Write(data) |
| 802 | 803 | } |
| 803 | 804 | |