feat: design pass for profile page

src/lib/ui/post/Body.svelte

@@ -128,7 +128,9 @@
         color: var(--accent);
     }
 
-    .post-text :global(a.mention) {
+    /* mention gets used in other places (bios) so it's global */
+    
+    :global(a.mention) {
         color: inherit;
         font-weight: 600;
         padding: 3px 6px;
@@ -137,7 +139,7 @@
         text-decoration: none;
     }
 
-    .post-text :global(a.mention:hover) {
+    :global(a.mention:hover) {
         text-decoration: underline;
     }
 

src/routes/[server]/[account]/+page.svelte

@@ -1 +1,140 @@
-<h1>wip</h1>
+<script>
+    import Button from '@cf/ui/Button.svelte';
+    import HomeIcon from '../../../img/icons/unlisted.svg';
+    import MoreIcon from '../../../img/icons/more.svg';
+</script>
+
+<header>
+    <div class="profile-tag">
+        <!-- svelte-ignore a11y-img-redundant-alt -->
+        <img src="https://f.mae.wtf/proxy/avatar.webp?url=https%3A%2F%2Ff.mae.wtf%2Ffiles%2F9cf9f3f1-70f6-4ecc-be2b-34ae6588bbdc&avatar=1" alt="Profile picture">
+        <div class="profile-tag-names">
+            <h1>mae</h1>
+            <p>mae@f.mae.wtf</p>
+        </div>
+    </div>
+</header>
+<div class="profile-info">
+    <div>
+        <p class="profile-bio">
+music maker and coder!
+she/they/it - 18 - 🏳️‍⚧️🇬🇧
+robotgirl in training
+
+feel free to follow req if ur cool
+
+https://mae.wtf/
+also <a href="" class="mention">@mae</a>
+
+"solid 7.5/10 motherliness rating" - <a href="" class="mention">@ellie</a>
+        </p>
+        <p class="profile-counts">
+            <span>
+                <b>Followers</b>   1225
+            </span>
+            <span>
+                <b>Following</b>   1345
+            </span>
+        </p>
+        <div class="profile-actions">
+            <Button label="Follow" class="profile-btn-follow">Follow</Button>
+            <Button>
+                <HomeIcon width="24px"/>
+            </Button>
+            <Button>
+                <MoreIcon width="24px"/>
+            </Button>
+        </div>
+    </div>
+</div>
+
+<div class="profile-post-categories">
+    <Button active>Posts</Button>
+    <Button>Posts & replies</Button>
+    <Button>Media</Button>
+</div>
+
+<style>
+    header {
+        margin-top: 1rem;
+        width: 100%;
+        height: 215px;
+        background-image: url("https://f.mae.wtf/files/42bcf2ba-4256-4d22-b22f-019dfb2c0008.webp");
+        background-position: center;
+        background-size: cover;
+        position: relative;
+    }
+
+    .profile-tag {
+        position: absolute;
+        bottom: 16px;
+        left: 16px;
+        background: #00000080;
+        backdrop-filter: blur(8px);
+        width: fit-content;
+        display: flex;
+        height: 64px;
+        border-radius: 8px;
+    }
+
+    .profile-tag img {
+        aspect-ratio: 1;
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+    }
+
+    .profile-tag-names {
+        padding: 8px 16px;
+        align-self: center;
+    }
+
+    .profile-tag-names * {
+        margin: 0;
+    }
+
+    .profile-tag-names h1 {
+        font-size: 1.15rem
+    }
+
+    .profile-info {
+        background-color: var(--bg-800);
+        padding: 16px;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+
+    .profile-bio {
+        margin: 0;
+
+        /* !! may not be required in prod */
+        white-space: pre-line;
+    }
+
+    .profile-counts > *:not(.profile-counts:first-child) {
+        margin-right: 16px;
+    }
+
+    .profile-actions {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        gap: .5rem;
+    }
+
+    .profile-actions :global(button:first-child) {
+        padding: 0 32px;
+        background-color: var(--accent);
+        color: var(--bg-900);
+    }
+
+    .profile-actions :global(button) {
+        height: 42px;
+        width: fit-content;
+    }
+
+    .profile-post-categories {
+        display: flex;
+        padding: 1rem 0;
+        gap: 1rem;
+    }
+</style>