From 48bfb65c62005a433fbce7a5e5d15942ac6905be Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Wed, 8 Jun 2022 13:41:55 +0100
Subject: [PATCH] fixed #29

---
 src/AppShell.svelte         | 12 ++++++------
 src/FormatList.svelte       | 12 ++++++++----
 src/GenericCard.svelte      |  2 +-
 src/Home.svelte             |  8 ++++----
 src/ItemDetail.svelte       | 19 ++++++++++++++-----
 src/ItemList.svelte         |  3 ++-
 src/SearchForm.svelte       | 19 ++++++++-----------
 src/TopicDetail.svelte      |  8 ++++++--
 src/TopicMasonryGrid.svelte | 22 ++++++++++++++++++----
 templates/index.html        | 10 ++++++----
 10 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/src/AppShell.svelte b/src/AppShell.svelte
index b66b440..a0e8b13 100644
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@@ -35,16 +35,16 @@
 
 <div >
   <div class="md:pl-64 flex flex-col flex-1">
-    <div class=" sticky top-0 z-10 flex-shrink-0 flex text-primary shadow">
+    <div class="sticky top-0 z-10 flex-shrink-0 flex text-primary_light bg-primary shadow">
       {#if isNavDrawerOpen == false}
-      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
         <span class="sr-only">Open sidebar</span>
         <Icon kind="menu"/>
       </button>
       {/if}
 
       {#if isNavDrawerOpen}
-      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-primary text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
         <span class="sr-only">Close sidebar</span>
         <Icon kind="close"/>
       </button>
@@ -83,10 +83,10 @@
   <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
   {#if isNavDrawerOpen}
   <div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-nutral_Light bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
+    <div class="fixed inset-0 bg-neutral_Light bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
 
     <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
-      <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-primary_light text-primary dark:bg-nutral_dark dark:text-primary_light">
+      <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-primary_light text-primary dark:bg-neutral_dark dark:text-primary_light">
         <!-- <div class="absolute top-0 right-0 -mr-12 pt-2"> -->
           
           <!-- <button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
@@ -101,7 +101,7 @@
         <!-- <div class="flex-shrink-0 flex items-center tracking-wider font-bold text-lightPrimCont">
           <a href="#/" class="">LearnAwesome</a>
         </div> -->
-        <div class="ml-6 flex-1 h-0 overflow-y-auto">
+        <div class="md:ml-6 flex-1 h-0 overflow-y-auto">
           <nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
             <slot name="nav"></slot>
             {#if window.location.href.startsWith('http://127.0.0.1')}
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index 29ca380..5d6f815 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -3,13 +3,17 @@
   
 </script>
 
-<div class=" mx-auto flex flex-wrap gap-5 justify-center items-center">
+<div class=" mx-auto flex flex-wrap gap-3 justify-center items-center">
   {#each formats as format}
-  <a href="#/format/{format.id}" class="w-52 sm:w-64 flex flex-col rounded-lg shadow overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
+  <a href="#/format/{format.id}" class="w-32 h-28 relativesm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
       <div class="flex-shrink-0">
-        <img class="h-48 w-full object-cover" src={format.image} alt="">
+        <img class="w-32 h-28 object-cover" src={format.image} alt="">
+        <div class="absolute inset-0 bg-neutral_Light mix-blend-multiply"></div>
       </div>
-      <h1 class="text-lg font-semibold p-2 tracking-wider text-primary">{format.name}</h1>
+      <div class="absolute flex justify-center items-center inset-0">
+        <h1 class="text-sm text-center md:text-lg font-semibold p-2 tracking-wider text-lightGradOne">{format.name}</h1>
+      </div>
+      
   </a>
   {/each}
 </div>
\ No newline at end of file
diff --git a/src/GenericCard.svelte b/src/GenericCard.svelte
index 2bebfd2..e9c5a4c 100644
--- a/src/GenericCard.svelte
+++ b/src/GenericCard.svelte
@@ -2,7 +2,7 @@
   export let item: {name: string, creators: string, rowid: number};
 </script>
 
-<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-nutral_dark dark:text-primary_light hover:rounded-3xl border-2 border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
+<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-neutral_dark dark:text-primary_light hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
   <div class="flex flex-col justify-between">
     <div class="flex flex-col">
       <strong class="font-extrabold text-sm sm:text-lg">{item.name}</strong>
diff --git a/src/Home.svelte b/src/Home.svelte
index b65d401..4efbd51 100644
--- a/src/Home.svelte
+++ b/src/Home.svelte
@@ -8,13 +8,13 @@
             <span class="block text-secondary text-3xl mt-2">Humanity's learning map</span>
           </span>
         </h1>
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is a collection of learning resources organized by topics, formats, difficulty levels, and quality tags like visual / interactive / challenging etc. It also includes reviews from experts and metadata like paywall/loginwall to help you find the best resource for your learning goals.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is a collection of learning resources organized by topics, formats, difficulty levels, and quality tags like visual / interactive / challenging etc. It also includes reviews from experts and metadata like paywall/loginwall to help you find the best resource for your learning goals.</p>
 
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">For certain resources like research paper or books, there will be direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub etc.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">For certain resources like research paper or books, there will be direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub etc.</p>
 
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This requires us to build a giant taxonomy of all human knowledge. Arranging topics in a hierarchy is not sufficient. Instead we are creating a graph of topics and levels with multiple types of edges: "is-a-subtopic-of", "is-a-prerequisite-of" etc. If you are an expert or educator in some domain, you can contribute to this project via our GitHub repository.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This requires us to build a giant taxonomy of all human knowledge. Arranging topics in a hierarchy is not sufficient. Instead we are creating a graph of topics and levels with multiple types of edges: "is-a-subtopic-of", "is-a-prerequisite-of" etc. If you are an expert or educator in some domain, you can contribute to this project via our GitHub repository.</p>
 
-        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">In conjunction with this, we're also building an online game where this is presented as a skill-tree for life and allows you to chase ambitious life goals and keep track of your progress while inspiring and being inspired by your friends. More on this will be revealed soon.</p>
+        <p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">In conjunction with this, we're also building an online game where this is presented as a skill-tree for life and allows you to chase ambitious life goals and keep track of your progress while inspiring and being inspired by your friends. More on this will be revealed soon.</p>
       </div>
       
     </div>
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 7093c51..73ac89a 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -88,16 +88,25 @@
   .scroll::-webkit-scrollbar-thumb {
     background-color: rgb(31 41 55);
 }
+  .linkButton::part(base){
+    max-width: fit-content;
+    min-height: fit-content;
+  }
 </style>
 
 {#if item}
   
-  <div class="max-w-4xl mx-auto border shadow-2xl px-20 py-8 rounded-xl mt-20 bg-white font-sans">
+  <div class="w-full px-6 py-4 mt-10 md:max-w-4xl mx-auto border shadow-2xl md:px-20 md:py-8 rounded-xl md:mt-20 bg-white font-sans">
     <h3 class="my-2">
       {#each item.topics.split(";") as topicname}
-      <a href={"#/topic/" + topicname} class="mr-2 font-bold">{topicname.toUpperCase()}</a>
+      <div class="group inline-flex">
+        <a href={"#/topic/" + topicname} class="mr-2 font-bold">{topicname.toUpperCase()}
+          <div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
+        </a>
+      </div>
       {/each}
     </h3>
+
     <div class="mt-10">
       <div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
         <div class="flex-nowrap">
@@ -137,7 +146,7 @@
         <div class="flex w-full flex-col justify-between">
           <!-- title, sub title, author  -->
           <section>
-            <h1 class="text-4xl font-extrabold">{item.name}</h1>
+            <h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1>
             <span class="text-sm mt-5">{item.creators}</span>
             <div class="mt-5">
               <sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
@@ -145,10 +154,10 @@
           </section>
           <!-- ratings and upload buttons -->
           <div class="mt-2 mb-6 flex flex-col justify-between">
-            <div class="flex items-center justify-start gap-3 mt-5">
+            <div class="flex flex-wrap items-center justify-start gap-3 mt-5">
               {#each item.links.split(";") as type}
               <sl-button-group>
-                <sl-button size="small" href={type.split("|")[1]} target="_blank">{type.split("|")[0]} at {get_tld(type.split("|")[1])} <sl-icon name="link-45deg"></sl-icon></sl-button>
+                <sl-button size="small" href={type.split("|")[1]} target="_blank" class="linkButton">{type.split("|")[0]} at {get_tld(type.split("|")[1])} <sl-icon name="link-45deg"></sl-icon></sl-button>
                 {#if type.split("|")[2] || type.split("|")[0] === 'book'}
                   <sl-dropdown placement="bottom-end" on:sl-select="{e => window.open(e.detail.item.value, '_blank')}">
                     <sl-button slot="trigger" size="small" caret>
diff --git a/src/ItemList.svelte b/src/ItemList.svelte
index 720629e..5f4838c 100644
--- a/src/ItemList.svelte
+++ b/src/ItemList.svelte
@@ -18,7 +18,8 @@
     <div class="">
         <sl-tab-group placement="start">
             {#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format, i}
-                    <sl-tab slot="nav" panel={format.id} active={i == 0}>{getFormatDisplayName(format.name)} </sl-tab>
+                
+            <sl-tab slot="nav" panel={format.id} active={i == 0} class="sticky left-0">{getFormatDisplayName(format.name)} </sl-tab>
         
                 {#if format.id == 'book'}
                 <sl-tab-panel name={format.id} active={i == 0}>
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index ba12bd3..166428c 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -18,21 +18,11 @@
 
 </script>
 
-<form class="w-full p-2 gap-3 mt-12 flex flex-col xl:flex-row" on:submit|preventDefault>
-  <div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
+<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row sticky top-14 z-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo" on:submit|preventDefault>
     <sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
 
-    <sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
-      <sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
-      <sl-menu-item value="rating">Sort by Rating</sl-menu-item>
-      <sl-menu-item value="year">Sort by Year</sl-menu-item>
-      <sl-menu-item value="name">Sort by Name</sl-menu-item>
-    </sl-select>
-  </div>
-    
-
     {#if !hideTopic}
       <fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
         {#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
@@ -62,5 +52,12 @@
       <sl-menu-item value="research">Research</sl-menu-item>
     </sl-select>
   </div>
+
+  <sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
+    <sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
+    <sl-menu-item value="rating">Sort by Rating</sl-menu-item>
+    <sl-menu-item value="year">Sort by Year</sl-menu-item>
+    <sl-menu-item value="name">Sort by Name</sl-menu-item>
+  </sl-select>
 </form>
 
diff --git a/src/TopicDetail.svelte b/src/TopicDetail.svelte
index f26d7f3..249f6b2 100644
--- a/src/TopicDetail.svelte
+++ b/src/TopicDetail.svelte
@@ -46,6 +46,10 @@
 
 <TopicMasonryGrid {topicname} {alltopics}/>
 
-<SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideTopic={true} hideFormat={true}/>
+<div>
+    <SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideTopic={true} hideFormat={true}/>
+
+    <ItemList items={filteredItems}/>
+</div>
+
 
-<ItemList items={filteredItems}/>
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 009734d..47d0a83 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -66,9 +66,18 @@
 
 </script>
 
-<div class="my-2 text-lightButton2">
+<style>
+    .title::part(base) {
+        font-size: 1rem;
+        font-weight: bold;
+        color: #1E3A8A;
+}
+</style>
+<div class="my-2">
     <sl-breadcrumb>
-        <sl-breadcrumb-item href="#/topics" class="text-lg">All Topics</sl-breadcrumb-item>
+        
+        <sl-breadcrumb-item href="#/topics" class="title">All Topics</sl-breadcrumb-item>
+        
         {#if topic}
             {#if topic.parent_id}
                 <sl-breadcrumb-item href={"#/topic/"  + topic.parent_id}>
@@ -88,11 +97,16 @@
   {#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
   {#if parent[0] !== 'Misc'}
     <a href={"#/topic/" + parent[0].name}>
-        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-primary dark:border-primary_light bg-white ease-in-out duration-300 hover:rounded-3xl dark:bg-nutral_light ">
+        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-white ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
             {#if typeof(parent[0]) == "string"}
             <span class="mt-1 p-1  font-extrabold text-lg text-primary underline">{ parent[0] }</span>
             {:else}
-            <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold underline underline-offset-4 text-lg ">{ format_topic_name(parent[0]) }</span></a>
+            <div class="group inline-flex">
+                <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span>
+                    <div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
+                </a>
+            </div>
+            
             {/if}
         
             <div class="mt-2 flex flex-wrap">
diff --git a/templates/index.html b/templates/index.html
index 5cbe799..e9c962b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,11 +10,13 @@
 					extend: {
 						colors: {
 							primary: '#1E3A8A', //blue-900
-							primary_light: '#FAFAFA', //nutral-50
-							nutral_Light: '#737373', // nutral-400
-							nutral_dark: '#262626', // nutral-800
+							primary_light: '#FAFAFA', //neutral-50
+							neutral_Light: '#737373', // neutral-400
+							neutral_dark: '#262626', // neutral-800
 							secondary: '#6B21A8', // purple-800
 							white: '#ffffff',
+							lightGradOne: '#DBEAFE', //blue-100
+							lightGradTwo: '#F3E8FF', //purple-100
 						},
 					},
 					fontFamily: {
@@ -41,7 +43,7 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
 	</head>
-	<body class="max-w-none mx-auto h-full bg-primary_light text-nutral_dark dark:bg-nutral_dark dark:text-nutral_light font-serif">
+	<body class="max-w-none mx-auto h-full bg-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-nutral_dark dark:text-nutral_light font-serif">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>