Merge pull request #71 from cssbubble/layoutfix

Fix #65: Layout issues

.tool-versions

@@ -1 +1 @@
-nodejs 18.7.0
+nodejs 18.11.0

src/AdvancedSearch.svelte

@@ -18,7 +18,7 @@
 
 
 <form class="hidden w-full md:pl-24 md:flex justify-center" on:submit|preventDefault>
-  <div class="fixed top-2 w-full">
+  <div class="top-2 w-full">
     <div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-2/3 mx-auto">
       <sl-input 
         placeholder="Search..." size="medium" clearable

src/AppShell.svelte

@@ -48,10 +48,10 @@
       </button>
       {/if}
 
-      <div class=" py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
-        <a href="/" class="">LearnAwesome</a>
-        <div class="w-1/5 mt-0.25 h-0.5 bg-neutral-50 group-hover:w-full ease-in-out duration-300"></div>
-      </div>
+      <a href="/" class="group/logo py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold">
+        LearnAwesome
+        <div class="w-1/5 mt-0.25 h-0.5 bg-neutral-50 group-hover/logo:w-full ease-in-out duration-300"></div>
+      </a>
     </div>
     
     <AdvancedSearch/>

src/RoadmapList.svelte

@@ -1,5 +1,5 @@
 <h1 class="text-xl md:text-4xl font-extrabold mb-8">Roadmaps</h1>
-<div class=" mx-auto grid place-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4">
+<div class=" mx-auto flex flex-wrap justify-center gap-3">
 	<a href="#/roadmap/programming_in_golang" class="w-72 h-48 relative flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
 		<div class="flex-shrink-0 relative">
 		  <img class="w-72 h-48 object-cover" src="https://images.unsplash.com/photo-1642367340318-96fdbc5d30f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z29sYW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">