Fix /@username page styles

TODO: Supply profile data with releases data.

src/routes/(site)/%40[username]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
   import { MetaTags } from 'svelte-meta-tags';
-  // import Select from '$lib/components/select/select.svelte';
   import Spacing from '$lib/public/legacy/spacing.svelte';
   import { makeCertificatePageUrl } from '$lib/public/certificates';
 
@@ -28,23 +27,25 @@
 
 <Spacing --min="175px" --med="200px" --max="200px" />
 
-<section>
+<article>
   <Spacing --min="16px" --med="16px" --max="16px" />
 
   <img src={data.certificate.user.picture} alt={`${data.certificate.user.name}'s picture`} />
 
   <Spacing --min="16px" --med="16px" --max="16px" />
 
-  <h1 class="size-xl">
-    Congratulations to
+  <h1 class="size-l">
     {data.certificate.user.name}
     (<a
       href={`https://github.com/${data.certificate.user.login}`}
       target="_blank"
       rel="noopener noreferrer">@{data.certificate.user.login}</a
-    >) for contributing to the acmcsuf.com
-    {data.certificate.to.tagName}
-    release!
+    >) made {data.certificate.merged.length} contributions in the
+    <a
+      href={`https://github.com/EthanThatOneKid/acmcsuf.com/releases/tag/${data.certificate.to.tagName}`}
+      target="_blank"
+      rel="noopener noreferrer">{data.certificate.to.tagName}</a
+    > release!
   </h1>
 
   <Spacing --min="40px" --med="40px" --max="40px" />
@@ -55,30 +56,7 @@
 
   <Spacing --min="40px" --med="40px" --max="40px" />
 
-  <h2 class="size-l">Select a different release</h2>
-
-  <ul>
-    {#each data.releases as release}
-      <li>
-        {#if release.tagName === data.certificate.to.tagName}
-          <b>{release.tagName}</b> (current)
-        {:else}
-          <a
-            href={makeCertificatePageUrl(data.certificate.user.login, release.tagName)}
-            data-sveltekit-preload-data="hover">{release.tagName}</a
-          >
-        {/if}
-      </li>
-    {/each}
-  </ul>
-
-  <Spacing --min="40px" --med="40px" --max="40px" />
-
   <div class="container">
-    <h1 class="size-xl">
-      Your {data.certificate.merged.length} contributions in {data.certificate.to.tagName}
-    </h1>
-
     <ol>
       {#each data.certificate.merged as pr}
         <li>
@@ -89,10 +67,12 @@
           <details>
             <summary>
               {pr.commits.length} commit{pr.commits.length > 1 ? 's' : ''}
-              {#if pr.commits.length >= 30}
+              {#if pr.commits.length >= 100}
                 (showing first 100... <a href={pr.url} target="_blank" rel="noopener noreferrer"
                   >view all</a
                 >)
+              {:else}
+                (expand)
               {/if}
             </summary>
 
@@ -111,17 +91,36 @@
     </ol>
   </div>
 
-  <Spacing />
-</section>
+  <Spacing --min="40px" --med="40px" --max="40px" />
+
+  <h2 class="size-l">Select a different release:</h2>
+
+  <ul class="releases">
+    {#each data.releases as release}
+      <li>
+        {#if release.tagName === data.certificate.to.tagName}
+          <b>{release.tagName}</b> (current)
+        {:else}
+          <a
+            href={makeCertificatePageUrl(data.certificate.user.login, release.tagName)}
+            data-sveltekit-preload-data="hover">{release.tagName}</a
+          >
+        {/if}
+      </li>
+    {/each}
+  </ul>
+
+  <Spacing --min="40px" --med="40px" --max="40px" />
+</article>
 
 <style lang="scss">
-  section {
+  article {
     display: flex;
     flex-direction: column;
-    text-align: center;
     justify-content: center;
     align-items: center;
     padding: 0 24px;
+    width: 100%;
 
     a {
       text-decoration: none;
@@ -134,17 +133,101 @@
     }
   }
 
+  .releases {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      margin: 0 8px;
+    }
+  }
+
   .container {
     text-align: left;
     padding: 4em 4em 3em;
     margin: 0;
     border-radius: 3em;
     width: min(1000px, 70vw);
+
+    ol {
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      margin: 0 0 1em;
+      padding: 0;
+
+      details {
+        margin: 0;
+        padding: 0;
+        border: none;
+        outline: none;
+        color: #eaeaea;
+        cursor: pointer;
+
+        summary {
+          margin: 0;
+          padding: 0;
+          border: none;
+          outline: none;
+          list-style: none;
+          font-size: 0.9em;
+          font-weight: 400;
+          line-height: 1.5em;
+          cursor: pointer;
+          transition: 0.25s ease-in-out;
+
+          &:hover {
+            color: var(--acm-blue);
+          }
+
+          &:focus {
+            color: var(--acm-blue);
+          }
+
+          &[open] {
+            color: var(--acm-blue);
+          }
+        }
+
+        ol {
+          padding: 0;
+          margin: 0 0 0 1em;
+          font-size: var(--size-xs);
+        }
+
+        li {
+          margin: 0 0 1em;
+          padding: 0;
+        }
+      }
+    }
   }
 
   img {
     height: 100%;
     width: 12em;
     border-radius: 50%;
   }
+
+  @media (min-width: 768px) {
+    article {
+      width: 500px;
+    }
+  }
+
+  :global(main) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
 </style>