diff --git a/src/components/ContributorPopup.svelte b/src/components/ContributorPopup.svelte index 1be2f68..e0feefb 100644 --- a/src/components/ContributorPopup.svelte +++ b/src/components/ContributorPopup.svelte @@ -33,9 +33,12 @@

{name}

-
- {message} -
+ {#if message && message !== ""} +
+ Message: + {message} +
+ {/if}
@@ -48,35 +51,37 @@ alt="{name} GitHub image" />
- {#if githubUsername} + {#if githubUsername && githubUsername !== ""}
-

GitHub

+

GitHub Username

{githubUsername}

{/if} - {#if about} + {#if about && about !== ""}

About

{about}

{/if} - {#if programmingInterests} + {#if programmingInterests && programmingInterests !== ""}

Programming Interests

{programmingInterests}

{/if} - {#if hobbies} + {#if hobbies && hobbies !== ""}

Hobbies

{hobbies}

@@ -105,7 +110,8 @@ z-index: 20; display: none; width: min(40rem, 90vw); - max-height: 400px; + max-height: 500px; + overflow-y: scroll; transform: translate(-50%, -50%); border-radius: 0.5rem; background-color: rgb(var(--color-primary)); @@ -151,7 +157,6 @@ } .message { - position: absolute; padding: 0.5rem; border-radius: 0.5rem; top: -42%; @@ -162,6 +167,7 @@ .bubble-2, .bubble-3, .bubble-4 { + display: none; background-color: rgb(var(--color-secondary)); position: absolute; border-radius: 50%; @@ -197,7 +203,7 @@ padding-inline: 1rem; margin-top: 1rem; display: flex; - flex-direction: row; + flex-direction: column; gap: 2rem; } @@ -215,14 +221,15 @@ } .card-layout img { + margin-inline: auto; border-radius: 50%; - width: 10rem; + width: 7rem; } .card-layout > .right { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.5rem; } .card-layout > .right > div { @@ -234,4 +241,30 @@ flex-direction: column; gap: 0.25rem; } + + @media screen and (min-width: 640px) { + .custom-modal { + max-width: none; + overflow-y: visible; + } + + .message { + position: absolute; + } + + .card-layout { + flex-direction: row; + } + + .bubble-1, + .bubble-2, + .bubble-3, + .bubble-4 { + display: block; + } + + .card-layout img { + width: 10rem; + } + } diff --git a/src/pages/fa24.astro b/src/pages/fa24.astro index 71edbee..b2c7a69 100644 --- a/src/pages/fa24.astro +++ b/src/pages/fa24.astro @@ -12,34 +12,39 @@ const contributors: Fa2024MarkdownEntry[] = Object.values( const boxStyles = [ { - bottom: "8%", - left: "5%", + bottom: "4rem", + left: "4rem", backgroundColor: "#333333", opacity: 0.4, + zIndex: -10, }, { - bottom: "8%", - left: "8%", + bottom: "4rem", + left: "6.25rem", backgroundColor: "#035a4f", opacity: 0.7, + zIndex: -10, }, { - bottom: "14%", - left: "5%", + bottom: "6.25rem", + left: "4rem", backgroundColor: "#11d4b1", opacity: 0.9, + zIndex: -10, }, { - bottom: "10%", - right: "5%", + bottom: "4.5rem", + right: "4rem", backgroundColor: "#11d4b1", opacity: 0.8, + zIndex: -10, }, { - bottom: "8%", - right: "8%", + bottom: "4rem", + right: "7rem", backgroundColor: "#035a4f", opacity: 0.8, + zIndex: -10, }, ]; ---