fix: i am not the only contributor, jumping scrollbar fixed

This commit is contained in:
Nikita Krupin 2022-08-15 21:05:48 -04:00
parent 9d367ff31f
commit d1f19bf1a8
4 changed files with 24 additions and 14 deletions

View File

@ -1,8 +1,8 @@
<script>
export const username = "afnzmn"
export const href = `https://github.com/${username}`
export const src = `https://github.com/${username}.png`
export const alt = `${username}'s contributor profile picture`
<script lang="ts">
export let username: String;
let href = `https://github.com/${username}`
let src = `https://github.com/${username}.png`
let alt = `${username}'s contributor profile picture`
</script>
<a {href}>
@ -30,13 +30,13 @@
max-width: 86px;
cursor: pointer;
background-color: var(--grey-four);
font-size: 1.5rem;
transition: transform 0.4s var(--bezier-one);
margin-bottom: 1rem;
user-select: none;
}
button:hover {
transform: translate(0%, -5%);
a:hover > button {
transform: translateY(-5%);
}
img {

View File

@ -1,17 +1,20 @@
<script>
<script lang="ts">
import ContributorButton from "../atoms/ContributorButton.svelte";
export let peoples: Array<String>;
</script>
<div class="social-host">
<ContributorButton></ContributorButton>
{#each peoples as person}
<ContributorButton username={person}></ContributorButton>
{/each}
</div>
<style>
.social-host {
width: 100;
gap: 2rem;
align-items: center;
width: 100;
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
</style>

View File

@ -45,6 +45,7 @@
padding: 0;
font-size: 100%;
box-sizing: border-box;
overflow-y: scroll;
}
:global(body) {

View File

@ -1,7 +1,13 @@
<script>
import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
let peoples = [
"Ushie",
"afnzmn",
"baiorett",
"PickleNik",
]
</script>
<div class="wrapper">
<ContributorHost></ContributorHost>
<ContributorHost {peoples}></ContributorHost>
</div>