Improve home page layout

src/routes/_layout.svelte

@@ -10,7 +10,7 @@
 <style>
   main {
     background-color: white;
-    padding: 15px 2em;
+    /* padding: 15px 2em; */
     margin: 0 auto;
     box-sizing: border-box;
     /* max-width: 900px; */
@@ -24,7 +24,7 @@
     main {
       flex-direction: column;
       align-items: center;
-      padding: 10px;
+      /* padding: 10px; */
     }
   }
 </style>

src/routes/discussion/[id].svelte

@@ -25,11 +25,17 @@
   export let discussion;
 </script>
 
+<style>
+  .root {
+    margin-top: 15px;
+  }
+</style>
+
 <svelte:head>
   <title>{discussion.title}</title>
 </svelte:head>
 
-<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
+<div class="root lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
   <div class="flex items-start">
     <Vote value={discussion.votes} />
     <h2 class="text-3xl mb-8">{discussion.title}</h2>

src/routes/index.svelte

@@ -145,18 +145,25 @@
 	.root {
 		max-width: 600px;
 		margin: 0 auto;
+		border-left: 1px solid #eaecef;
+		border-right: 1px solid #eaecef;
+	}
+
+	.root .header {
+		border-bottom: 1px solid #eaecef;
+		padding: 15px;
 	}
 
 	.root .title {
 		font-size: 20px;
 	}
 	.discussion-box {
-		border: 1px solid #eaecef;
+		/* border: 1px solid #eaecef; */
 		display: flex;
 		align-items: flex-start;
-		padding: 16px;
+		padding: 10px 15px;
 		border-radius: 10px;
-		margin: 10px auto 20px;
+		margin: 0px auto;
 	}
 
 	h4 {
@@ -193,10 +200,10 @@
 <svelte:head>
 	<title>Unidiscuss - Help students in your university</title>
 </svelte:head>
-<div class="root md:w-3/4 mx-auto md:mb-20 md:pr-5">
+<div class="root md:w-3/4 mx-auto md:mb-20">
-	<div class="flex justify-between">
+	<div class="header flex justify-between mb-2">
-		<h4 class="title">Разговоры</h4>
+		<h4 class="title">Разговоры 😉😁</h4>
-		<div class="flex justify-evenly">
+		<div class="flex justify-evenly items-center">
 			<a
 				class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
 				href="?filter=popular">