Improved CSS

src/lib/components/Area.svelte

@@ -1,6 +1,7 @@
 <style>
     #content {
-        background: var(--dark-1);
+        background: var(--light-1);
+        box-shadow: 0px 3px 5px 3px var(--dark-2);
 
         width: min(700px, 90vw);
         padding: 20px;
@@ -23,6 +24,10 @@
         padding: 0;
     }
 
+    #header {
+        border-bottom: var(--dark-2) solid 2px;
+    }
+
     #main {
         min-height: 250px;
         max-height: 500px;

src/lib/components/Button.svelte

@@ -6,13 +6,14 @@
 
         font-family: 'Open Sans';
         
-        border-radius: 0.5rem;
+        border-radius: 2rem;
 
         margin: 0.2rem;
     }
 
     .button a {
         color: var(--light-1);
+        font-weight: bold;
     }
 
 </style>

src/lib/components/PostButton.svelte

@@ -1,7 +1,7 @@
 <style>
     .votes {
         font-weight: bold;
-        font-size: 1.5rem;
+        font-size: 0.9rem;
     }
     .vote-area {
         margin-right: 30px;
@@ -9,7 +9,7 @@
 
     .button {
         width: auto;
-        height: 35px;
+        height: 20px;
     }
 
 </style>

src/routes/+layout.svelte

@@ -1,14 +1,14 @@
 <style>
     :global(:root) {
-        --dark-1: #1a1b1d;
-        --dark-2: #22242b;
-        --dark-3: #5d606b;
+        --dark-1: #2b2f36;
+        --dark-2: #d8d8d8;
+        --dark-3: rgb(73, 138, 236);
 
         --light-1: #ffffff;
+        --light-2: #f8f8f8;
         
-        --hyperlink: #97b9eb;
+        --hyperlink: rgb(139, 171, 219);
 
-        color: var(--light-1);
         font-family: 'Open Sans';
     }
 
@@ -20,14 +20,16 @@
     :global(input, textarea) {
         border: 0;
         border-radius: 0.2rem;
+        box-shadow: 0px 2px 2.5px 0px var(--dark-2);
     }
 
     #content {
-        background: var(--dark-2);
+        background: var(--light-2);
 
         height: 100vh;
         width: calc(100vw - 50px);
         padding: 25px;
+        padding-top: 0px;
 
         display: flex;
         flex-direction: column;
@@ -37,11 +39,12 @@
     }
 
     #logo {
+
+        width: calc(100vw - 20px);
+
         background: var(--dark-1);
 
-        padding: 10px;
-
-        border-radius: 50px;
+        padding: 5px;
 
         display: flex;
         flex-direction: row;
@@ -54,11 +57,13 @@
 
     #logo a {
         padding: 10px;
+        color: var(--light-1);
+        font-weight: bold;
     }
 
     #logo img {
-        height: auto;
-        width: 125px;
+        height: 30px;
+        width: auto;
 
         display: block;
     }
@@ -72,7 +77,7 @@
 <div id='content'>
     <div id='logo'>
         <a href='/'>
-            <img src='/logo_sanifae.svg' alt='Sanifae Logo'>
+            <img src='/icon_sanifae.svg' alt='Sanifae Logo'>
         </a>
         {#if data.username && data.username != 'false'}
             <a href='/user/{data.username}'>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
     import Post from '$lib/components/Post.svelte';
+    import Button from '$lib/components/Button.svelte'
 
     /** @type {import('./$types').PageData} */
     export let data;
@@ -17,6 +18,6 @@
 {/each}
 
 <p>
-    <a data-sveltekit-reload href='?page={data.id+1}'>Next page</a>
-</p>
-<p></p>
+    <Button clickFunc={() => { window.location.search = 'page=' + ((data.id)-1) }}>Previous page</Button>
+    <Button clickFunc={() => { window.location.search = 'page=' + ((data.id)+1) }}>Next page</Button>
+</p>