color names modified

pull/27/head
cssbubble 2022-06-07 23:20:24 +01:00
rodzic 60f6d33047
commit 71439dcab6
11 zmienionych plików z 49 dodań i 79 usunięć

Wyświetl plik

@ -108,29 +108,29 @@
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Topic</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
<div class={(currentView === "/randomtopic" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</a>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Item</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
<div class={(currentView === "/randomitem" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</a>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<div class="flex flex-col items-start">
<h3 class="text-center"> Search</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
<div class={(currentView === "/search" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</button>

Wyświetl plik

@ -23,24 +23,24 @@
<div >
<div class="md:pl-64 flex flex-col flex-1">
<div class=" sticky top-0 z-10 flex-shrink-0 flex bg-lightPrimary text-lightPrimCont shadow">
<div class=" sticky top-0 z-10 flex-shrink-0 flex text-primary shadow">
{#if isNavDrawerOpen == false}
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<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">
<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-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<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">
<span class="sr-only">Close sidebar</span>
<Icon kind="close"/>
</button>
{/if}
<div class="md:hidden py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightPrimCont group">
<div class="md:hidden 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-light group-hover:w-full ease-in-out duration-300"></div>
<div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
</div>
<div class="flex-1 flex justify-between">
@ -71,10 +71,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-lightSecondary bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
<div class="fixed inset-0 bg-nutral_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-lightPrimary text-lightBg dark:bg-darkSecondary dark:text-darkBg">
<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="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">
@ -109,11 +109,12 @@
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col flex-grow pt-5 border-r overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
<div class="flex flex-col flex-grow pt-5 border-r-8 overflow-y-auto">
<div class="flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-primary">
<a href="/" class="">LearnAwesome</a>
<div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
</div>
<div class="mt-5 flex-1 flex flex-col bg-lightPrimary text-lightBg">
<div class="mt-5 flex-1 flex flex-col bg-primary_light text-primary">
<nav class="flex-1 pb-4 space-y-1">
<slot name="nav"></slot>
</nav>

Wyświetl plik

@ -22,8 +22,8 @@
relative inline-flex flex-nowrap items-center px-4 py-2
{i == 0 && 'rounded-l-md'}
{i == tabs.length-1 && 'rounded-r-md'}
border border-gray-800 text-sm font-medium hover:scale-x-105 focus:z-10 focus:outline-none
{currentlySelected === i? 'bg-lightTertiary text-lightBg dark:bg-darkTertiary dark:text-darkBg' : 'bg-lightPrimCont text-lightPrimary'}
border text-sm font-medium hover:scale-x-110 focus:z-10 focus:outline-none
{currentlySelected === i? 'bg-secondary text-primary_light' : 'bg-primary text-primary_light'}
"
>
{tab}

Wyświetl plik

@ -5,11 +5,11 @@
<div class=" mx-auto flex flex-wrap gap-5 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-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
<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 ">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src={format.image} alt="">
</div>
<h1 class="text-lg font-semibold p-2 tracking-wider ">{format.name}</h1>
<h1 class="text-lg font-semibold p-2 tracking-wider text-primary">{format.name}</h1>
</a>
{/each}
</div>

Wyświetl plik

@ -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-lg break-inside-avoid sm:w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" 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-nutral_dark dark:text-primary_light hover:rounded-3xl border-2 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>

Wyświetl plik

@ -2,42 +2,20 @@
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1>
<span class="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base"></span>
<span class="block text-sm font-semibold uppercase tracking-wide sm:text-base lg:text-sm xl:text-base"></span>
<span class="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
<span class="block text-gray-900">LearnAwesome</span>
<span class="block text-indigo-600 text-3xl mt-2">Humanity's learning map</span>
<span class="block">LearnAwesome</span>
<span class="block text-secondary text-3xl mt-2">Humanity's learning map</span>
</span>
</h1>
<p class="mt-3 text-base text-gray-500 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">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-gray-500 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">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-gray-500 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">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-gray-500 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 class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<svg class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden" width="640" height="784" fill="none" viewBox="0 0 640 784" aria-hidden="true">
<defs>
<pattern id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e" x="118" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect y="72" width="640" height="640" class="text-gray-50" fill="currentColor" />
<rect x="118" width="404" height="784" fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)" />
</svg>
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<!-- <button type="button" class="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Watch our video to learn more</span>
<img class="w-full" src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="">
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<svg class="h-20 w-20 text-indigo-500" fill="currentColor" viewBox="0 0 84 84">
<circle opacity="0.9" cx="42" cy="42" r="42" fill="white" />
<path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
</svg>
</div>
</button> -->
</div>
<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>
</div>
</div>
</main>

Wyświetl plik

@ -15,7 +15,7 @@
</svg>
{:else if kind === "close"}
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
{:else if kind === "bell"}

Wyświetl plik

@ -7,13 +7,13 @@
</script>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'bg-light text-lightPrimary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
<div class="flex justify-start gap-3 items-center">
<slot></slot>
<div class="flex flex-col items-start">
<h3 class="text-center"> {label}</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-white group-hover:w-full ease-in-out duration-300"></div>
<div class={(isActive ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</div>
</a>

Wyświetl plik

@ -5,6 +5,6 @@
</script>
<div class="hidden lg:flex lg:justify-end">
<a href="#/map" class="font-semibold bg-lightTertiary text-lightBg rounded-lg hover:scale-110 px-3 py-2 hover:ease-in-out transition duration-200">Explore Map</a>
<a href="#/map" class="font-semibold bg-secondary text-primary_light rounded-lg hover:scale-110 px-3 py-2 hover:ease-in-out transition duration-200">Explore Map</a>
</div>
<TopicMasonryGrid {alltopics}/>

Wyświetl plik

@ -88,16 +88,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-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
<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 ">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-semibold text-lg">{ parent[0] }</span>
<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-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
<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>
{/if}
<div class="mt-2 flex flex-wrap">
{#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
<a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>
@ -105,16 +105,16 @@
{/if}
{#if parent[0] == 'Misc'}
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-primary dark:border-primary_light bg-primary_light hover:bg-white ">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-semibold text-lg">{ parent[0] }</span>
<span class="mt-1 p-1 font-semibold text-lg text-primary">{ parent[0] }</span>
{:else}
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary text-lg ">{ format_topic_name(parent[0]) }</span></a>
{/if}
<div class="mt-2 flex flex-wrap">
{#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
<a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-primary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>

Wyświetl plik

@ -9,21 +9,12 @@
theme: {
extend: {
colors: {
lightPrimary: 'rgb(30 64 175)', //blue-800
lightSecondary: 'rgb(75 85 99)', //gray-600
lightTertiary: 'rgb(168 85 247)', //purple-500
lightBg: '#fafafa', //zinc-50
lightPrimCont: '#dbeafe', // blue-200
lightButtonBg: 'rgb(20 83 45)', //green-900
light: '#ffffff', //white
dark: '#0F172A', //slate-900
darkPrimary: 'rgb(147 197 253)', //blue-300
darkSecondary: 'rgb(203 213 225)', //slate-300
darkTertiary: 'rgb(216 180 254)', //purple-300
darkBg: 'rgb(23 23 23)', //nutral-900
darkPrimCont: 'rgb(3 105 161)', //sky-700
darkButtonBg: 'rgb(34 197 94)'//green-500
primary: '#1E3A8A', //blue-900
primary_light: '#FAFAFA', //nutral-50
nutral_Light: '#737373', // nutral-400
nutral_dark: '#262626', // nutral-800
secondary: '#6B21A8', // purple-800
white: '#ffffff',
},
},
fontFamily: {
@ -50,7 +41,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-light dark:bg-dark text-lightPrimary dark:text-darkPrimary font-serif">
<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">
<div class="h-full" id="app"></div>
</body>
</html>