upagge/noteshare.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark mode styling

Browse Source
This commit is contained in:
Maxime Cannoodt 2022-06-30 00:20:46 +02:00
parent 0a51c4f218
commit 16b0c6cd03
16 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
server/prisma/dev.db
View File

Binary file not shown.

6
webapp/src/app.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="h-full">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -21,7 +21,7 @@
};
</script>
</head>
<body>
<div>%sveltekit.body%</div>
<body class="dark h-full">
<div class="h-full bg-white dark:dark:bg-background-dark">%sveltekit.body%</div>
</body>
</html>

5
webapp/src/lib/components/Callout.svelte
View File

@ -32,7 +32,10 @@
}
</script>
<div style="--callout-color: var({color})" class="border-l-4 border-l-callout bg-neutral-100 my-4">
<div
style="--callout-color: var({color})"
class="border-l-4 border-l-callout bg-zinc-100 dark:bg-zinc-800 my-4"
>
<div class="p-[10px] bg-callout-bg flex items-center gap-2">
<span class="font-bold text-md text-callout h-5"><CalloutIcon {icon} /></span>
<span class="font-bold text-md">{title}</span>

6
webapp/src/lib/components/Footer.svelte
View File

@ -1,6 +1,8 @@
<hr />
<hr class="border-zinc-200 dark:border-zinc-700" />
<footer class="p-8 text-center flex flex-wrap justify-center items-center gap-x-2 text-neutral-500">
<footer
class="p-8 text-center flex flex-wrap justify-center items-center gap-x-2 text-zinc-500 dark:text-zinc-500"
>
<span>
Built with love by <a class="underline" href="https://mcndt.dev" alt="blog">mcndt</a>
</span>

2
webapp/src/lib/components/MarkdownRenderer.svelte
View File

@ -24,7 +24,7 @@
<div
id="md-box"
class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
class="prose prose-zinc dark:prose-invert max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
prose-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic
prose-blockquote:first:before:content-['']"
>

11
webapp/src/lib/components/navbar/NavBar.svelte
View File

@ -1,16 +1,13 @@
<script>
import NavBarLink from './NavBarLink.svelte';
import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
</script>
<div id="navbar" class="h-14 border-b border-neutral-200">
<div id="navbar" class="h-14 border-b border-zinc-200 dark:border-neutral-700">
<div
id="navbar-content"
class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap"
>
<div id="navbar-left" class="flex gap-8 flex">
<a href="/">
<span id="name" class="font-extrabold text-lg">[Obsidian Note Sharing]</span>
<span id="name" class="font-extrabold text-lg dark:text-white"
>[[Obsidian Note Sharing]]</span
>
</a>
<ul class="flex gap-5 content-center">
<slot name="left" />

2
webapp/src/lib/components/navbar/NavBarLink.svelte
View File

@ -2,7 +2,7 @@
export let href: string = '/';
</script>
<a {href} class="self-center w-full h-full text-neutral-600">
<a {href} class="self-center w-full h-full text-zinc-600 dark:text-zinc-400">
<div class="h-full flex flex-col justify-center">
<slot />
</div>

2
webapp/src/lib/marked/renderers/Blockquote.svelte
View File

@ -11,7 +11,7 @@
<slot />
</Callout>
{:else}
<p class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4">
<p class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4 dark:border-zinc-600">
<slot />
</p>
{/if}

6
webapp/src/lib/marked/renderers/InternalEmbed.svelte
View File

@ -8,15 +8,15 @@
<div>
<dfn class="not-italic" title="Interal embeds are not shared currently.">
<div
class="px-4 py-12 border border-neutral-300 inline-flex flex-col items-center justify-center"
class="px-4 py-12 border border-zinc-300 dark:border-zinc-600 inline-flex flex-col items-center justify-center"
>
<span class="h-8 text-neutral-400 ml-0.5 inline-flex items-center whitespace-nowrap gap-1"
<span class="h-8 text-zinc-400 ml-0.5 inline-flex items-center whitespace-nowrap gap-1"
><EmbedIcon />
<span>Internal embed</span>
</span>
<span class="underline cursor-not-allowed inline-flex items-center">
<span class="text-[#705dcf] opacity-50">{text}</span>
<span class="h-3 mb-2 text-neutral-400 ml-0.5"><FaRegQuestionCircle /></span>
<span class="h-3 mb-2 text-zinc-400 ml-0.5"><FaRegQuestionCircle /></span>
</span>
</div>
</dfn>

2
webapp/src/lib/marked/renderers/InternalLink.svelte
View File

@ -7,6 +7,6 @@
<dfn class="not-italic" title="Internal link">
<span class="underline cursor-not-allowed inline-flex items-center">
<span class="text-[#705dcf] opacity-50">{text}</span>
<span class="h-3 mb-2 text-neutral-400 ml-0.5"><FaRegQuestionCircle /></span>
<span class="h-3 mb-2 text-zinc-400 ml-0.5"><FaRegQuestionCircle /></span>
</span>
</dfn>

2
webapp/src/lib/marked/renderers/Link.svelte
View File

@ -10,5 +10,5 @@
<span class="underline cursor-not-allowed inline-flex items-center font-normal">
<a {href} {title} class="text-[#705dcf]"><slot /></a>
<span class="h-3 mb-2 text-neutral-400 ml-0.5"><LinkIcon /></span>
<span class="h-3 mb-2 text-zinc-400 ml-0.5"><LinkIcon /></span>
</span>

2
webapp/src/lib/marked/renderers/Tag.svelte
View File

@ -1,3 +1,3 @@
<span class="underline text-neutral-500 cursor-pointer">
<span class="underline text-zinc-500 dark:text-zinc-400 cursor-pointer">
<slot />
</span>

2
webapp/src/routes/__error.svelte
View File

@ -22,7 +22,7 @@
export let explainText: string;
</script>
<div class="prose max-w-2xl">
<div class="prose max-w-2xl prose-zinc dark:prose-invert">
<h1>{title}</h1>
<p class="prose-xl">{explainText}</p>
</div>

8
webapp/src/routes/__layout.svelte
View File

@ -6,8 +6,8 @@
import '../app.css';
</script>
<div class="">
<div class="z-50 sticky top-0 w-full bg-white">
<div class="bg-white dark:bg-background-dark min-h-full">
<div class="z-50 sticky top-0 w-full bg-white dark:bg-background-dark">
<div class="top-0 left-0 right-0">
<NavBar>
<svelte:fragment slot="left">
@ -19,7 +19,7 @@
><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink
>
<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
<span class="h-7 text-black"><LogoGithub /></span>
<span class="h-7 text-black dark:text-zinc-300"><LogoGithub /></span>
</NavBarLink>
</svelte:fragment>
></NavBar
@ -27,7 +27,7 @@
</div>
</div>
<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 prose-neutral">
<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 ">
<slot />
<div class="mt-12">
<Footer />

5
webapp/src/routes/note/[id].svelte
View File

@ -9,6 +9,7 @@
if (response.ok) {
try {
const note: EncryptedNote = await response.json();
console.log(note.expire_time);
note.insert_time = new Date(note.insert_time as unknown as string);
note.expire_time = new Date(note.expire_time as unknown as string);
const maxage = Math.floor((note.expire_time.valueOf() - note.insert_time.valueOf()) / 1000);
@ -98,7 +99,7 @@
{#if plaintext}
<div class="max-w-2xl mx-auto">
<p class="mb-4 text-sm flex justify-between text-neutral-500">
<p class="mb-4 text-sm flex justify-between text-zinc-500 dark:text-zinc-400">
<span class="flex gap-1.5 items-center uppercase">
<span class="h-5"><IconEncrypted /></span>
<span>e2e encrypted | <span>Shared {timeString} ago</span></span>
@ -113,7 +114,7 @@
{/if}
{#if decryptFailed}
<div class="prose max-w-2xl">
<div class="prose max-w-2xl prose-zinc dark:prose-invert">
<h1>Error: Cannot decrypt file</h1>
<p class="prose-xl">This note could not be decrypted with this link.</p>
<p class="prose-xl">

3
webapp/tailwind.config.cjs
View File

@ -1,3 +1,5 @@
const colors = require('tailwindcss/colors');
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
@ -5,6 +7,7 @@ module.exports = {
theme: {
extend: {
colors: {
'background-dark': colors.zinc[900],
callout: 'rgb(var(--callout-color))',
'callout-bg': 'rgba(var(--callout-color), 0.1)'
}