mirror
/
learndb
kopia lustrzana https://github.com/learn-awesome/learndb
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

color scheme added in topiclist page

pull/4/head
cssbubble 2022-05-20 10:47:51 +01:00
rodzic e0ba673604
commit 80decdb3f1
3 zmienionych plików z 29 dodań i 11 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

18
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -72,7 +72,7 @@
</script>
<h1 class="text-2xl font-bold mb-4">
<h1 class="text-2xl font-bold mb-4 title-color">
{#if topic}
{capitalize(topic.display_name)}
{:else}
@ -83,12 +83,12 @@
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
{#each [...map.entries()] as parent}
<div class="bg-white rounded-lg shadow-lg p-4 break-inside-avoid mb-4 gradient">
<a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
<div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 gradient">
<a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-white font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
<div class="mt-2 flex flex-wrap text-sm text-gray-900">
{#each parent[1] as child}
<a href={"#/topic/" + child.name} class="text-purple-600 no-underline hover:underline hover:text-purple-900 px-2">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="link-color no-underline hover:underline hover:text-white hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>
@ -97,8 +97,14 @@
<style>
.gradient{
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
background-color: #224161;
/* background-image: linear-gradient(135deg, #224161 0%, #7084ac 100%); */
}
.link-color{
color: #a7b7d4;
}
.title-color{
color: #84a1cd;
}
</style>

13
src/tailwindui/AppShell.svelte
Wyświetl plik

@ -7,6 +7,13 @@
</script>
<style>
.aside-colors{
background-color: #224161;
color: #a7b7d4;
}
</style>
<div>
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
{#if isNavDrawerOpen}
@ -34,7 +41,7 @@
From: "translate-x-0"
To: "-translate-x-full"
-->
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-indigo-700">
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 aside-colors">
<!--
Close button, show/hide based on off-canvas menu state.
@ -83,8 +90,8 @@
<!-- 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 bg-indigo-700 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 bg-white">
<div class="flex flex-col flex-grow pt-5 aside-colors overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 text-white tracking-wide">
<a href="/" class="">LearnAwesome</a>
</div>
<div class="mt-5 flex-1 flex flex-col">

9
templates/index.html
Wyświetl plik

@ -9,8 +9,13 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>
<title>LearnAwesome</title>
<style>
.bg{
background-color: #232a34 ;
}
</style>
</head>
<body class="h-full">
<body class="h-full bg">
<div class="h-full" id="app"></div>
</body>
</html>
</html>