Revert "light and dark theme changed for home page"

This reverts commit 29fde15c02.
pull/68/head
Nilesh 2023-01-02 19:50:18 +00:00
rodzic dd9f4fc026
commit c0fc0c5fa4
8 zmienionych plików z 249 dodań i 262 usunięć

Wyświetl plik

@ -7,32 +7,32 @@
<script>
// function darkmode() {
// return;
// tailwind.config.theme.extend.colors.primary = '#787A91';
// tailwind.config.theme.extend.colors.primary_light = '#262626';
// tailwind.config.theme.extend.colors.neutral_light = '#737373';
// tailwind.config.theme.extend.colors.neutral_dark = '#FAFAFA';
// tailwind.config.theme.extend.colors.secondary = '#FAFAFA';
// tailwind.config.theme.extend.colors.gradOne = '#444444';
// tailwind.config.theme.extend.colors.gradTwo = '#171717';
// tailwind.config.theme.extend.colors.primary_medium = '#141E61';
// }
function darkmode() {
return;
tailwind.config.theme.extend.colors.primary = '#787A91';
tailwind.config.theme.extend.colors.primary_light = '#262626';
tailwind.config.theme.extend.colors.neutral_light = '#737373';
tailwind.config.theme.extend.colors.neutral_dark = '#FAFAFA';
tailwind.config.theme.extend.colors.secondary = '#FAFAFA';
tailwind.config.theme.extend.colors.gradOne = '#444444';
tailwind.config.theme.extend.colors.gradTwo = '#171717';
tailwind.config.theme.extend.colors.primary_medium = '#141E61';
}
// function lightmode() {
// tailwind.config.theme.extend.colors.primary = '#1E3A8A';
// tailwind.config.theme.extend.colors.primary_light = '#FAFAFA';
// tailwind.config.theme.extend.colors.neutral_light = '#e5e5e5';
// tailwind.config.theme.extend.colors.neutral_dark = '#262626';
// tailwind.config.theme.extend.colors.secondary = '#6B21A8';
// tailwind.config.theme.extend.colors.gradOne = '#DBEAFE';
// tailwind.config.theme.extend.colors.gradTwo = '#F3E8FF';
// tailwind.config.theme.extend.colors.primary_medium = '#60A5FA';
// }
function lightmode() {
tailwind.config.theme.extend.colors.primary = '#1E3A8A';
tailwind.config.theme.extend.colors.primary_light = '#FAFAFA';
tailwind.config.theme.extend.colors.neutral_light = '#e5e5e5';
tailwind.config.theme.extend.colors.neutral_dark = '#262626';
tailwind.config.theme.extend.colors.secondary = '#6B21A8';
tailwind.config.theme.extend.colors.gradOne = '#DBEAFE';
tailwind.config.theme.extend.colors.gradTwo = '#F3E8FF';
tailwind.config.theme.extend.colors.primary_medium = '#60A5FA';
}
// window.matchMedia("(prefers-color-scheme: dark)").matches ? darkmode() : lightmode();
window.matchMedia("(prefers-color-scheme: dark)").matches ? darkmode() : lightmode();
// window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => e.matches ? darkmode() : lightmode());
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => e.matches ? darkmode() : lightmode());
</script>
<script type="module" src='/src/main.js'></script>
@ -56,11 +56,7 @@
rel="stylesheet">
</head>
<!-- <body class="max-w-none mx-auto h-full bg-gradient-to-r from-gradOne to-gradTwo text-nutral_dark font-serif">
<div class="h-full" id="app"></div>
</body> -->
<body class="max-w-none mx-auto h-full bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 font-serif">
<body class="max-w-none mx-auto h-full bg-gradient-to-r from-gradOne to-gradTwo text-nutral_dark font-serif">
<div class="h-full" id="app"></div>
</body>

391
package-lock.json wygenerowano

Plik diff jest za duży Load Diff

Wyświetl plik

@ -14,18 +14,15 @@
"@rgossiaux/svelte-heroicons": "^0.1.2",
"@sveltejs/pancake": "^0.0.18",
"@sveltejs/vite-plugin-svelte": "^2.0.2",
"autoprefixer": "^10.4.7",
"d3-hierarchy": "^3.1.2",
"marked": "^4.2.4",
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"svelte": "^3.55.0",
"svelte-bricks": "^0.1.7",
"vite": "^4.0.3",
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.5",
"vite": "^4.0.3"
},
"dependencies": {
"daisyui": "^2.46.0"
"autoprefixer": "^10.4.7",
"tailwindcss": "^3.1.5"
}
}

Wyświetl plik

@ -116,20 +116,20 @@
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-cyan-500' : '') + " 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' : '') + " 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={(currentView === "/randomtopic" ? "text-cyan-500" : "text-slate-900 dark:text-slate-100") + " text-center text-xl"}>Random Topic</h3>
<div class={(currentView === "/randomtopic" ? "bg-cyan-500 w-full" : "w-5 bg-slate-900 dark:bg-slate-100") + " mt-0.25 h-0.5 group-hover:w-full ease-in-out duration-300"}></div>
<h3 class="text-center">Random Topic</h3>
<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" ? 'text-cyan-500' : '') + " 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' : '') + " 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={(currentView === "/randomitem" ? "text-cyan-500" : "text-slate-900 dark:text-slate-100") + " text-center text-xl"}>Random Item</h3>
<div class={(currentView === "/randomitem" ? "bg-cyan-500 w-full" : "w-5 bg-slate-900 dark:bg-slate-100") + " mt-0.25 h-0.5 group-hover:w-full ease-in-out duration-300"}></div>
<h3 class="text-center">Random Item</h3>
<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>

Wyświetl plik

@ -32,8 +32,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div >
<!-- sticky top bar -->
<!-- <div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-neutral-50 bg-blue-900 shadow h-16"> -->
<div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-slate-900 bg-slate-50 dark:text-slate-100 dark:bg-slate-900 shadow h-16">
<div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-neutral-50 bg-blue-900 shadow h-16">
<div class="flex items-center">
{#if isNavDrawerOpen == false}
<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">
@ -50,9 +49,8 @@
{/if}
<div class=" py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
<!-- <a href="/" class="text-primary_light">LearnAwesome</a> -->
<a href="/" class="text-cyan-600 text-2xl">LearnAwesome</a>
<div class="w-1/5 mt-0.25 h-0.5 bg-cyan-600 group-hover:w-full ease-in-out duration-300"></div>
<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>
</div>
@ -90,7 +88,7 @@
<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 pb-4">
<div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
<div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary">
<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')}
@ -104,14 +102,14 @@
{/if}
<!-- Static sidebar for desktop -->
<div class="hidden mt-10 md:flex md:w-64 md:flex-col md:fixed md:inset-y-0 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<!-- Sidebar component -->
<div class="flex flex-col flex-grow border-r-8 border-cyan-600 overflow-y-auto">
<div class="flex flex-col flex-grow border-r-8 border-lightGradOne 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-12 flex-1 flex flex-col bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
<div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary">
<nav class="flex-1 pb-4 space-y-1 pt-5">
<slot name="nav"></slot>
{#if window.location.href.startsWith('http://127.0.0.1')}

Wyświetl plik

@ -2,25 +2,22 @@
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-4xl md:mx-auto lg:col-span-12 lg:text-left">
<h1>
<!-- <span class="block text-sm font-semibold uppercase tracking-wide 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">LearnAwesome</span> -->
<span class="block text-cyan-600 tracking-wide text-3xl mt-2">We're building humanity's universal map for learning!</span>
<span class="block">LearnAwesome</span>
<span class="block text-secondary text-3xl mt-2">We're building humanity's universal map for learning!</span>
</span>
</h1>
<iframe class="my-12 w-full" height="315" src="https://www.youtube.com/embed/wKcZ8ozCah0?controls=0&modestbranding=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section class="pb-20 text-base sm:text-xl lg:text-lg xl:text-2xl tracking-wider leading-loose text-slate-900 dark:text-slate-100">
<p class="mt-3 sm:mt-5 "><i>A Young Lady's Illustrated Primer</i> (from Neal Stephenson's <i>The Diamond Age</i>) is an old dream of tech makers. LearnAwesome is a step towards building this (inspired by this 👆 talk by Danny Hillis at the Open Source Conference 2012) and making it accessible to everyone.</p>
<p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"><i>A Young Lady's Illustrated Primer</i> (from Neal Stephenson's <i>The Diamond Age</i>) is an old dream of tech makers. LearnAwesome is a step towards building this (inspired by this 👆 talk by Danny Hillis at the Open Source Conference 2012) and making it accessible to everyone.</p>
<p class="mt-3 sm:mt-5">The Internet has amazing learning resources for anything you can imagine. However, search engines, edtech platforms, and even Wikipedia/Wikiversity don't do a good job of making them discoverable. Projects like Music Genome Project or Book Genome Project have demonstrated how rich metadata can significantly improve users' lives.</p>
<p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">The Internet has amazing learning resources for anything you can imagine. However, search engines, edtech platforms, and even Wikipedia/Wikiversity don't do a good job of making them discoverable. Projects like Music Genome Project or Book Genome Project have demonstrated how rich metadata can significantly improve users' lives.</p>
<p class="mt-3 sm:mt-5">This is a collection of high-quality learning resources organized by topics &amp; formats and enriched by metadata like difficulty level, assumed prerequisites, reviews by experts and quality tags like <i>visual</i>, <i>interactive</i>, <i>challenging</i> etc. For many books or research papers, there are direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub, IPFS etc.</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 high-quality learning resources organized by topics &amp; formats and enriched by metadata like difficulty level, assumed prerequisites, reviews by experts and quality tags like <i>visual</i>, <i>interactive</i>, <i>challenging</i> etc. For many books or research papers, there are direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub, IPFS etc.</p>
<p class="mt-3 sm:mt-5">This is an <a href="https://github.com/learn-awesome/learndb" target="_blank" rel="noreferrer" class="underline text-secondary">open-source project</a>. We collaborate with OpenLibrary, OpenSyllabus and leverage projects like Wikipedia, Arxiv, InternetArchive, IPFS, SciHub for topic taxonomy, standardization of metadata formats etc. There are no user accounts and all bookmarks etc are kept in users' browsers.</p>
<p class="mt-3 text-base text-neutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is an <a href="https://github.com/learn-awesome/learndb" target="_blank" rel="noreferrer" class="underline text-secondary">open-source project</a>. We collaborate with OpenLibrary, OpenSyllabus and leverage projects like Wikipedia, Arxiv, InternetArchive, IPFS, SciHub for topic taxonomy, standardization of metadata formats etc. There are no user accounts and all bookmarks etc are kept in users' browsers.</p>
</section>
</div>
</div>

Wyświetl plik

@ -7,13 +7,13 @@
</script>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-cyan-500 ' : '') + " sw-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 ' : '') + " sw-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={(isActive ? 'text-cyan-500' : 'text-slate-900 dark:text-slate-100') + " text-center text-xl"}> {label}</h3>
<div class={(isActive ? 'bg-cyan-500 w-full ' : 'bg-slate-900 dark:bg-slate-100 w-5') + " mt-0.25 h-0.5 group-hover:w-full ease-in-out duration-300"}></div>
<h3 class="text-center"> {label}</h3>
<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

@ -23,9 +23,7 @@ const config = {
}
},
plugins: [require("daisyui")],
darkMode: 'media',
plugins: [],
};
module.exports = config;