diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue index 82f4e30a45..bc63d7159a 100644 --- a/packages/frontend/src/pages/about-misskey.vue +++ b/packages/frontend/src/pages/about-misskey.vue @@ -40,11 +40,31 @@ </FormSection> <FormSection> <template #label>{{ i18n.ts._aboutMisskey.contributors }}</template> - <div class="_formLinksGrid"> - <FormLink to="https://github.com/syuilo" external>@syuilo</FormLink> - <FormLink to="https://github.com/tamaina" external>@tamaina</FormLink> - <FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink> - <FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink> + <div :class="$style.contributors"> + <a href="https://github.com/syuilo" target="_blank" :class="$style.contributor"> + <img src="https://avatars.githubusercontent.com/u/4439005?v=4" :class="$style.contributorAvatar"> + <span :class="$style.contributorUsername">@syuilo</span> + </a> + <a href="https://github.com/tamaina" target="_blank" :class="$style.contributor"> + <img src="https://avatars.githubusercontent.com/u/7973572?v=4" :class="$style.contributorAvatar"> + <span :class="$style.contributorUsername">@tamaina</span> + </a> + <a href="https://github.com/acid-chicken" target="_blank" :class="$style.contributor"> + <img src="https://avatars.githubusercontent.com/u/20679825?v=4" :class="$style.contributorAvatar"> + <span :class="$style.contributorUsername">@acid-chicken</span> + </a> + <a href="https://github.com/rinsuki" target="_blank" :class="$style.contributor"> + <img src="https://avatars.githubusercontent.com/u/6533808?v=4" :class="$style.contributorAvatar"> + <span :class="$style.contributorUsername">@rinsuki</span> + </a> + <a href="https://github.com/mei23" target="_blank" :class="$style.contributor"> + <img src="https://avatars.githubusercontent.com/u/30769358?v=4" :class="$style.contributorAvatar"> + <span :class="$style.contributorUsername">@mei23</span> + </a> + <a href="https://github.com/robflop" target="_blank" :class="$style.contributor"> + <img src="https://avatars.githubusercontent.com/u/8159402?v=4" :class="$style.contributorAvatar"> + <span :class="$style.contributorUsername">@robflop</span> + </a> </div> <template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template> </FormSection> @@ -295,3 +315,38 @@ definePageMetadata({ } } </style> + +<style lang="scss" module> +.contributors { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 12px; +} + +.contributor { + display: flex; + align-items: center; + padding: 12px; + background: var(--buttonBg); + border-radius: 6px; + + &:hover { + text-decoration: none; + background: var(--buttonHoverBg); + } + + &.active { + color: var(--accent); + background: var(--buttonHoverBg); + } +} + +.contributorAvatar { + width: 30px; + border-radius: 100%; +} + +.contributorUsername { + margin-left: 12px; +} +</style>