Style still WIP but much better now

config.ts

@@ -6,11 +6,17 @@ export class Config {
      * The base URL of the PDS (Personal Data Server)
      * @default "https://pds.witchcraft.systems"
      */
-    static readonly PDS_URL: string = "https://pds.witchcraft.systems";
+    static readonly PDS_URL: string = "https://ap.brid.gy";
 
     /**
      * The base URL of the frontend service for linking to replies
      * @default "https://deer.social"
      */
     static readonly FRONTEND_URL: string = "https://deer.social";
+
+    /**
+     * Maximum number of posts to fetch from the PDS per user
+     * @default 10
+     */
+    static readonly MAX_POSTS_PER_USER: number = 1;
 }

src/App.svelte

@@ -14,10 +14,12 @@
     <div id="Account">
       <h1 id="Header">ATProto PDS</h1>
       <p>Home to {accountsData.length} accounts</p>
+      <div id="accountsList">
       {#each accountsData as accountObject}
         <AccountComponent account={accountObject} />
       {/each}
       </div>
+    </div>
   {:catch error}
     <p>Error: {error.message}</p>    
   {/await}
@@ -26,9 +28,11 @@
     <p>Loading...</p>
   {:then postsData}
     <div id="Feed">
+      <div id="spacer"></div>
       {#each postsData as postObject}
         <PostComponent post={postObject as Post} />
       {/each}
+      <div id="spacer"></div>
     </div>
   {/await}
   </div>
@@ -48,19 +52,39 @@
   }
   #Feed {
     width: 65%;
-    height: 80vh;
+    height: 100vh;
     overflow-y: scroll;
     padding: 20px;
+    padding-bottom: 0;
+    padding-top: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  #spacer {
+    padding: 0;
+    margin: 0;
+    height: 10vh;
+    width: 100%;
   }
   #Account {
     width: 35%;
+    display: flex;
+    flex-direction: column; 
+    border: 1px solid #8054f0;
+    background-color: #0d0620;
     height: 80vh;
-    overflow-y: scroll;
     padding: 20px;
-    background-color: #070311;
-
-    border-radius: 10px;
   }
+  #accountsList {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    height: 100%;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+  }
+
   #Header {
     text-align: center;
     font-size: 2em;

src/app.css

@@ -6,10 +6,27 @@
 ::-webkit-scrollbar {
   width: 0px;
   background: transparent;
+  padding: 0;
+  margin: 0;
+}
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-button {
+  background: transparent;
+  border-radius: 0;
 }
-
 * {
-  scrollbar-width: thin;
+  scrollbar-width: none;
   scrollbar-color: transparent transparent;
   -ms-overflow-style: none; /* IE and Edge */
   -webkit-overflow-scrolling: touch;
@@ -45,8 +62,10 @@ h1 {
 
 #app {
   max-width: 1400px;
-  margin: 0 auto;
+  margin: 0;
-  padding: 2rem;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
 }
 

src/lib/AccountComponent.svelte

@@ -24,12 +24,10 @@
     display: flex;
     text-align: start;
     align-items: center;
-        background-color: #0d0620;
+    background-color: #12082b;
-        padding: 4%;
+    padding: 0px;
-        margin: 10px;
+    margin-bottom: 15px;
-
+    border: 1px solid #8054f0;
-        /* round corners */
-        border-radius: 10px;
   }
   #accountName {
     margin-left: 10px;
@@ -44,6 +42,7 @@
   #avatar {
     width: 50px;
     height: 50px;
-        border-radius: 50%;
+    margin: 0px;
+    border-right: #8054f0 1px solid;
   }
 </style>

src/lib/PostComponent.svelte

@@ -27,16 +27,15 @@
     {#if post.replyingUri}
     <a
       id="replyingText"
-        href="https://deer.social/profile/{post.replyingUri.repo}/post/{post
+      href="{Config.FRONTEND_URL}/profile/{post.replyingUri.repo}/post/{post
         .replyingUri.rkey}">replying to {post.replyingUri.repo}</a
     >
     {/if}
-    <p>{post.text}</p>
+    <div id="postText">{post.text}</div>
-
     {#if post.quotingUri}
       <a
         id="quotingText"
-        href="https://deer.social/profile/{post.quotingUri.repo}/post/{post
+        href="{Config.FRONTEND_URL}/profile/{post.quotingUri.repo}/post/{post
           .quotingUri.rkey}">quoting {post.quotingUri.repo}</a
       >
     {/if}
@@ -66,7 +65,8 @@
     flex-direction: column;
     border: 1px solid #8054f0;
     background-color: black;
-    margin-bottom: -1px;
+    margin-bottom: 15px;
+    overflow-wrap: break-word;
   }
   #postHeader {
     display: flex;
@@ -78,6 +78,7 @@
     height: fit-content;
     border-bottom: 1px solid #8054f0;
     font-weight: bold;
+    overflow-wrap: break-word;
   }
   #postContent {
     display: flex;
@@ -86,22 +87,25 @@
     padding: 10px;
     background-color: #0d0620;
     color: white;
+    overflow-wrap: break-word;
   }
   #replyingText {
     font-size: 0.7em;
-    color: white;
     margin: 0;
-    margin-bottom: 10px;
     padding: 0;
+    padding-bottom: 5px;
   }
   #postText {
     margin: 0;
+    margin-bottom: 5px;
     padding: 0;
   }
   #headerText {
     margin-left: 10px;
     font-size: 0.9em;
     text-align: start;
+    overflow-wrap: break-word;
+    overflow: hidden;
   }
   #avatar {
     width: 50px;

src/lib/pdsfetch.ts

@@ -164,7 +164,7 @@ const fetchPosts = async (did: string) => {
       params: {
         repo: did as At.Identifier,
         collection: "app.bsky.feed.post",
-        limit: 5,
+        limit: Config.MAX_POSTS_PER_USER,
       },
     });
     return {