Merge branch 'design-v2' of forge:blisstown/campfire into design-v2

src/lib/app.css

@@ -18,8 +18,8 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --bg-1000: #141016;
-        --bg-900: #1B141E;
+        --bg-1000: #0b090c;
+        --bg-900: #120d14;
         --bg-800: #2A202F;
         --bg-700: #443749;
         --bg-600: #513D60;

src/lib/ui/post/Body.svelte

@@ -132,7 +132,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;
@@ -141,7 +143,7 @@
         text-decoration: none;
     }
 
-    .post-text :global(a.mention:hover) {
+    :global(a.mention:hover) {
         text-decoration: underline;
     }
 

src/lib/ui/post/Post.svelte

@@ -76,7 +76,8 @@
     .post-container {
         display: flex;
         flex-direction: column;
-        border-top: 1px solid color-mix(in srgb, transparent, var(--text) 25%);
+        border-top: 1px solid color-mix(in srgb, transparent, var(--text) 20%);
+        background: var(--bg-900);
     }
     .post-container:first-of-type {
         border-top: none;

src/routes/+page.svelte

@@ -50,10 +50,13 @@
     header {
         width: 100%;
         height: 64px;
-        margin: 16px 0 8px 0;
+        margin: 16px 0;
+        padding: 0 8px;
         display: flex;
         flex-direction: row;
         user-select: none;
+        box-sizing: border-box;
+
     }
 
     header h1 {

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

@@ -1,8 +0,0 @@
-import { error } from '@sveltejs/kit';
-
-export async function load({ params }) {
-    return error(404, 'Not Found');
-    // return {
-    //     account_name: params.account
-    // };
-}

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

@@ -0,0 +1,140 @@
+<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>

src/routes/notifications/+page.svelte

@@ -54,8 +54,10 @@
         width: 100%;
         height: 64px;
         margin: 16px 0 8px 0;
+        padding: 0 8px;
         display: flex;
         flex-direction: row;
+        box-sizing: border-box;
     }
 
     h1 {