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

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

@ -32,7 +32,10 @@
} }
</script> </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"> <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 text-callout h-5"><CalloutIcon {icon} /></span>
<span class="font-bold text-md">{title}</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> <span>
Built with love by <a class="underline" href="https://mcndt.dev" alt="blog">mcndt</a> Built with love by <a class="underline" href="https://mcndt.dev" alt="blog">mcndt</a>
</span> </span>

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

@ -24,7 +24,7 @@
<div <div
id="md-box" 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-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic
prose-blockquote:first:before:content-['']" prose-blockquote:first:before:content-['']"
> >

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

@ -1,16 +1,13 @@
<script> <div id="navbar" class="h-14 border-b border-zinc-200 dark:border-neutral-700">
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 <div
id="navbar-content" 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 " 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"> <div id="navbar-left" class="flex gap-8 flex">
<a href="/"> <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> </a>
<ul class="flex gap-5 content-center"> <ul class="flex gap-5 content-center">
<slot name="left" /> <slot name="left" />

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

@ -2,7 +2,7 @@
export let href: string = '/'; export let href: string = '/';
</script> </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"> <div class="h-full flex flex-col justify-center">
<slot /> <slot />
</div> </div>

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

@ -11,7 +11,7 @@
<slot /> <slot />
</Callout> </Callout>
{:else} {: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 /> <slot />
</p> </p>
{/if} {/if}

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

@ -8,15 +8,15 @@
<div> <div>
<dfn class="not-italic" title="Interal embeds are not shared currently."> <dfn class="not-italic" title="Interal embeds are not shared currently.">
<div <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 /> ><EmbedIcon />
<span>Internal embed</span> <span>Internal embed</span>
</span> </span>
<span class="underline cursor-not-allowed inline-flex items-center"> <span class="underline cursor-not-allowed inline-flex items-center">
<span class="text-[#705dcf] opacity-50">{text}</span> <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> </span>
</div> </div>
</dfn> </dfn>

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

@ -7,6 +7,6 @@
<dfn class="not-italic" title="Internal link"> <dfn class="not-italic" title="Internal link">
<span class="underline cursor-not-allowed inline-flex items-center"> <span class="underline cursor-not-allowed inline-flex items-center">
<span class="text-[#705dcf] opacity-50">{text}</span> <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> </span>
</dfn> </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"> <span class="underline cursor-not-allowed inline-flex items-center font-normal">
<a {href} {title} class="text-[#705dcf]"><slot /></a> <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> </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 /> <slot />
</span> </span>

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

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

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

@ -6,8 +6,8 @@
import '../app.css'; import '../app.css';
</script> </script>
<div class=""> <div class="bg-white dark:bg-background-dark min-h-full">
<div class="z-50 sticky top-0 w-full bg-white"> <div class="z-50 sticky top-0 w-full bg-white dark:bg-background-dark">
<div class="top-0 left-0 right-0"> <div class="top-0 left-0 right-0">
<NavBar> <NavBar>
<svelte:fragment slot="left"> <svelte:fragment slot="left">
@ -19,7 +19,7 @@
><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink ><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink
> >
<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing"> <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> </NavBarLink>
</svelte:fragment> </svelte:fragment>
></NavBar ></NavBar
@ -27,7 +27,7 @@
</div> </div>
</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 /> <slot />
<div class="mt-12"> <div class="mt-12">
<Footer /> <Footer />

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

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

3
webapp/tailwind.config.cjs
View File

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