Improved styles

src/App.svelte

@@ -30,7 +30,7 @@
 			<p slot="description">
 				igni is a universal discord bot with advanced moderation, advanced configuration and unique command handling. It can replace majority of other bots and is being actively worked on.
 			</p>
-			<img class="preview" src="https://cdn.discordapp.com/avatars/739864286775738399/1da650ca04e3e4b113756258d65efe09.png?size=2048" alt="igni avatar" slot="preview">
+			<img class="preview" src="igni.png" alt="igni avatar" slot="preview">
 			<div slot="actions">
 				<Button href="https://discordbotlist.com/bots/igni">More information</Button>
 				<Button outline href="https://discord.com/oauth2/authorize?client_id=739864286775738399&scope=bot&permissions=1039199350">Add igni to your server</Button>
@@ -55,6 +55,12 @@
 	main {
 		min-height: calc(100vh - 50px);
 	}
+	main section {
+		max-width: 720px;
+		margin: auto;
+		padding: 0 20px;
+		width: calc(100vw - 55px);
+	}
 	.darkmode {
 		background: #242423;
 		color: #E8EDDF;
@@ -63,15 +69,12 @@
 		text-align: center;
 	}
 	img.preview {
-		width: 100%;
+		height: 18rem;
+		max-height: 100%;
 	}
 	img.preview.thetutorials {
 		border-radius: 50%;
 		height: 200px;
 		width: auto;
 	}
-	img.logo {
-		padding: 5px;
-		height: calc(100% - 10px);
-	}
 </style>

src/components/button.svelte

@@ -10,11 +10,11 @@
 </script>
 
 {#if href}
-    <a {href} class:darkmode on:click={click} {...$$restProps} class:outline>
+    <a {href} class:darkmode={$darkmode} on:click={click} {...$$restProps} class:outline>
         <slot />
     </a>
 {:else}
-    <button class:darkmode on:click={click} {...$$restProps} class:outline>
+    <button class:darkmode={$darkmode} on:click={click} {...$$restProps} class:outline>
         <slot />
     </button>
 {/if}
@@ -24,6 +24,8 @@
         color: #f4f4f4;
     }
     button, a {
+        margin: 2.5px 0;
+        display: inline-block;
         color: #333;
         background-color: #f4f4f4;
         border: 1px solid #ccc;

src/components/project.svelte

@@ -1,20 +1,31 @@
 <script>
     export var title;
     export var left = false;
+    
+    var screenWidth;
 </script>
 
+<svelte:window bind:innerWidth={screenWidth} />
+
 <article>
     <div class="line" class:left>
         <div class="info">
             <h3>{title}</h3>
+            {#if screenWidth < 765}
+                <div class="preview small">
+                    <slot name="preview" />
+                </div>
+            {/if}
             <p><slot name="description" /></p>
             <div class="actions">
                 <slot name="actions" />
             </div>
         </div>
-        <div class="preview">
+        {#if screenWidth > 764}
-            <slot name="preview" />
+            <div class="preview">
-        </div>
+                <slot name="preview" />
+            </div>
+        {/if}
     </div>
 </article>
 
@@ -42,4 +53,7 @@
         flex-shrink: 1;
         flex-grow: 0;
     }
+    .preview.small {
+        height: 50%;
+    }
 </style>

src/stores/darkmode.js

@@ -1,5 +1,9 @@
 import { writable } from "svelte/store";
 
-const darkmode = writable(localStorage.getItem("darkmode") || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+const darkmode = writable(JSON.parse(localStorage.getItem("darkmode")) || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+darkmode.subscribe(v => {
+    localStorage.setItem("darkmode", JSON.stringify(v));
+});
 
 export default darkmode;