kopia lustrzana https://github.com/cheeaun/phanpy
Embrace non-circle avatars
rodzic
f65c8a9bfc
commit
cd6c14c1d9
|
@ -58,8 +58,10 @@
|
|||
8px 0 24px var(--header-color-4, --bg-color);
|
||||
}
|
||||
.account-container header .avatar {
|
||||
box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
|
||||
8px 0 24px var(--header-color-4, --bg-color);
|
||||
/* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
|
||||
8px 0 24px var(--header-color-4, --bg-color); */
|
||||
filter: drop-shadow(-8px 0 24px var(--header-color-3, --bg-color))
|
||||
drop-shadow(8px 0 24px var(--header-color-4, --bg-color));
|
||||
}
|
||||
|
||||
.account-container .note {
|
||||
|
@ -222,7 +224,7 @@
|
|||
font-size: 175%;
|
||||
margin-bottom: -8px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -1px;
|
||||
letter-spacing: -0.5px;
|
||||
mix-blend-mode: multiply;
|
||||
gap: 12px;
|
||||
}
|
||||
|
|
|
@ -164,7 +164,8 @@ function AccountInfo({
|
|||
).data,
|
||||
];
|
||||
const rgbColors = colors.map((color) => {
|
||||
return `rgb(${color[0]}, ${color[1]}, ${color[2]}, 0.3)`;
|
||||
const [r, g, b, a] = lightenRGB(color);
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||
});
|
||||
setHeaderCornerColors(rgbColors);
|
||||
console.log({ colors, rgbColors });
|
||||
|
@ -482,4 +483,15 @@ function RelatedActions({ info, instance, authenticated }) {
|
|||
);
|
||||
}
|
||||
|
||||
// Apply more alpha if high luminence
|
||||
function lightenRGB([r, g, b]) {
|
||||
const luminence = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
console.log('luminence', luminence);
|
||||
// Follow this range
|
||||
// luminence = 0, alpha = 0.05
|
||||
// luminence = 220, alpha = 1
|
||||
const alpha = Math.min(1, (luminence / 220) * 0.95 + 0.05);
|
||||
return [r, g, b, alpha];
|
||||
}
|
||||
|
||||
export default AccountInfo;
|
||||
|
|
|
@ -16,3 +16,9 @@
|
|||
object-fit: cover;
|
||||
background-color: var(--img-bg-color);
|
||||
}
|
||||
|
||||
.avatar.loaded,
|
||||
.avatar.loaded img {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import './avatar.css';
|
||||
|
||||
import { useRef } from 'preact/hooks';
|
||||
|
||||
const SIZES = {
|
||||
s: 16,
|
||||
m: 20,
|
||||
|
@ -11,8 +13,10 @@ const SIZES = {
|
|||
|
||||
function Avatar({ url, size, alt = '', ...props }) {
|
||||
size = SIZES[size] || size || SIZES.m;
|
||||
const avatarRef = useRef();
|
||||
return (
|
||||
<span
|
||||
ref={avatarRef}
|
||||
class="avatar"
|
||||
style={{
|
||||
width: size,
|
||||
|
@ -22,7 +26,16 @@ function Avatar({ url, size, alt = '', ...props }) {
|
|||
{...props}
|
||||
>
|
||||
{!!url && (
|
||||
<img src={url} width={size} height={size} alt={alt} loading="lazy" />
|
||||
<img
|
||||
src={url}
|
||||
width={size}
|
||||
height={size}
|
||||
alt={alt}
|
||||
loading="lazy"
|
||||
onLoad={(e) => {
|
||||
avatarRef.current.classList.add('loaded');
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
|
Ładowanie…
Reference in New Issue