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

View File

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

View File

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

View File

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