11---
2- import type { Contributor } from ' ../libs/getContributors' ;
2+ import type { Contributor } from " ../libs/getContributors" ;
33
44export interface Props {
5- contributors: Contributor [];
5+ contributors: Contributor [];
66}
77
88const { contributors } = Astro .props as Props ;
99---
1010
1111<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
1212<div >
13- <ul class =" avatar-list" >
14- {
15- contributors .map ((item ) => (
16- <li >
17- <a href = { ` https://github.com/${item .login } ` } >
18- <img
19- alt = { item .login }
20- title = { item .login }
21- width = " 3rem"
22- height = " 3rem"
23- src = { ` https://avatars.githubusercontent.com/u/${item .id }?s=64 ` }
24- loading = " lazy"
25- />
26- </a >
27- </li >
28- ))
29- }
30- </ul >
13+ <ul class =" avatar-list" >
14+ {
15+ contributors .map ((item ) => (
16+ <li >
17+ <a href = { ` https://github.com/${item .login } ` } >
18+ <img
19+ alt = { item .login }
20+ title = { item .login }
21+ width = " 3rem"
22+ height = " 3rem"
23+ src = { ` https://avatars.githubusercontent.com/u/${item .id }?s=64 ` }
24+ loading = " lazy"
25+ />
26+ </a >
27+ </li >
28+ ))
29+ }
30+ </ul >
3131</div >
3232
3333<style >
34- .avatar-list {
35- --avatar-size: 3rem;
36- --avatar-overlap: -0.125em;
37- --avatar-row-spacing: 0.125em;
38- --avatar-outline-width: 1px;
39- --avatar-outline-offset: 0.08em;
34+ .avatar-list {
35+ --avatar-size: 3rem;
36+ --avatar-overlap: -0.125em;
37+ --avatar-row-spacing: 0.125em;
38+ --avatar-outline-width: 1px;
39+ --avatar-outline-offset: 0.08em;
4040
41- display: flex;
42- flex-wrap: wrap;
43- list-style: none;
44- padding: var(--avatar-border);
45- font-size: var(--avatar-size);
46- }
41+ display: flex;
42+ flex-wrap: wrap;
43+ list-style: none;
44+ padding: var(--avatar-border);
45+ font-size: var(--avatar-size);
46+ }
4747
48- .avatar-list li {
49- --avatar-row-margin: calc(
50- var(--avatar-outline-offset) + var(--avatar-outline-width) + var(--avatar-row-spacing) / 2
51- );
52- margin: var(--avatar-row-margin) var(--avatar-overlap) var(--avatar-row-margin) 0;
53- }
48+ .avatar-list li {
49+ --avatar-row-margin: calc(
50+ var(--avatar-outline-offset) + var(--avatar-outline-width) +
51+ var(--avatar-row-spacing) / 2
52+ );
53+ margin: var(--avatar-row-margin) var(--avatar-overlap)
54+ var(--avatar-row-margin) 0;
55+ }
5456
55- .avatar-list img,
56- .avatar-list a {
57- display: block;
58- border-radius: 50%;
59- width: var(--avatar-size);
60- height: var(--avatar-size);
61- /* Hide alt/title if Avatar image fails to load. */
62- text-decoration: none;
63- color: transparent;
64- }
57+ .avatar-list img,
58+ .avatar-list a {
59+ display: block;
60+ border-radius: 50%;
61+ width: var(--avatar-size);
62+ height: var(--avatar-size);
63+ /* Hide alt/title if Avatar image fails to load. */
64+ text-decoration: none;
65+ color: transparent;
66+ }
6567
66- .avatar-list img {
67- width: 100%;
68- height: 100%;
69- object-fit: cover;
70- background-color: var(--theme-bg);
71- box-shadow: 0 0 0 var(--avatar-outline-width) var(--theme-divider),
72- 0 0 0 var(--avatar-outline-offset) var(--theme-bg),
73- 0 0 0 calc(var(--avatar-outline-offset) + var(--avatar-outline-width)) var(--theme-divider),
74- 0 0 calc(var(--theme-glow-blur) + var(--avatar-outline-offset)) var(--theme-glow-diffuse);
75- /* Indicates the contributor image boundaries for forced colors users, transparent is changed to a solid color */
76- outline: 1px solid transparent;
77- }
68+ .avatar-list img {
69+ width: 100%;
70+ height: 100%;
71+ object-fit: cover;
72+ background-color: var(--theme-bg);
73+ box-shadow:
74+ 0 0 0 var(--avatar-outline-width) var(--theme-divider),
75+ 0 0 0 var(--avatar-outline-offset) var(--theme-bg),
76+ 0 0 0 calc(var(--avatar-outline-offset) + var(--avatar-outline-width))
77+ var(--theme-divider),
78+ 0 0 calc(var(--theme-glow-blur) + var(--avatar-outline-offset))
79+ var(--theme-glow-diffuse);
80+ /* Indicates the contributor image boundaries for forced colors users, transparent is changed to a solid color */
81+ outline: 1px solid transparent;
82+ }
7883
79- .avatar-list a:focus {
80- outline: 2px solid var(--theme-accent);
81- outline-offset: var(--avatar-outline-offset);
82- }
83- </style >
84+ .avatar-list a:focus {
85+ outline: 2px solid var(--theme-accent);
86+ outline-offset: var(--avatar-outline-offset);
87+ }
88+ </style >
0 commit comments