buttercat1791
2 years ago
committed by
Silberengel
15 changed files with 2662 additions and 1908 deletions
@ -0,0 +1,9 @@ |
|||||||
|
import tailwindcss from "tailwindcss"; |
||||||
|
import autoprefixer from "autoprefixer"; |
||||||
|
|
||||||
|
export default { |
||||||
|
plugins: [ |
||||||
|
tailwindcss(), |
||||||
|
autoprefixer(), |
||||||
|
] |
||||||
|
}; |
||||||
@ -1,3 +1,95 @@ |
|||||||
body { |
@tailwind base; |
||||||
padding-top: 50px; |
@tailwind components; |
||||||
|
@tailwind utilities; |
||||||
|
|
||||||
|
@layer components { |
||||||
|
/* General */ |
||||||
|
.leather { |
||||||
|
@apply bg-primary-1000 dark:bg-primary-0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Button */ |
||||||
|
button.btn-leather.text-white { |
||||||
|
@apply text-primary-1000; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-leather span svg { |
||||||
|
@apply fill-gray-700 hover:fill-primary-400 dark:fill-gray-400 dark:hover:fill-primary-700; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-leather.text-xs { |
||||||
|
@apply w-7 h-7; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-leather.text-xs svg { |
||||||
|
@apply w-3 h-3; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-leather.text-sm { |
||||||
|
@apply w-8 h-8; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-leather.text-sm svg { |
||||||
|
@apply w-4 h-4; |
||||||
|
} |
||||||
|
|
||||||
|
/* Card */ |
||||||
|
div.card-leather { |
||||||
|
@apply bg-primary-1000 dark:bg-primary-0 border-gray-200 has-[:hover]:border-primary-400 dark:border-gray-700 dark:has-[:hover]:border-primary-700; |
||||||
|
} |
||||||
|
|
||||||
|
div.card-leather h1, |
||||||
|
div.card-leather h2, |
||||||
|
div.card-leather h3, |
||||||
|
div.card-leather h4, |
||||||
|
div.card-leather h5, |
||||||
|
div.card-leather h6 { |
||||||
|
@apply text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700; |
||||||
|
} |
||||||
|
|
||||||
|
/* Modal */ |
||||||
|
div.modal-leather > div { |
||||||
|
@apply bg-primary-1000 dark:bg-primary-0 border-b-[1px] border-gray-700 dark:border-gray-400; |
||||||
|
} |
||||||
|
|
||||||
|
div.modal-leather > div > h1, |
||||||
|
div.modal-leather > div > h2, |
||||||
|
div.modal-leather > div > h3, |
||||||
|
div.modal-leather > div > h4, |
||||||
|
div.modal-leather > div > h5, |
||||||
|
div.modal-leather > div > h6 { |
||||||
|
@apply text-gray-700 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-400; |
||||||
|
} |
||||||
|
|
||||||
|
div.modal-leather button { |
||||||
|
@apply bg-primary-1000 hover:bg-primary-1000 dark:bg-primary-0 dark:hover:bg-primary-0 text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700; |
||||||
|
} |
||||||
|
|
||||||
|
/* Navbar */ |
||||||
|
nav.navbar-leather { |
||||||
|
@apply bg-primary-1000 dark:bg-primary-0; |
||||||
|
} |
||||||
|
|
||||||
|
nav.navbar-leather svg { |
||||||
|
@apply fill-gray-700 hover:fill-primary-400 dark:fill-gray-400 dark:hover:fill-primary-700; |
||||||
|
} |
||||||
|
|
||||||
|
nav.navbar-leather h1, |
||||||
|
nav.navbar-leather h2, |
||||||
|
nav.navbar-leather h3, |
||||||
|
nav.navbar-leather h4, |
||||||
|
nav.navbar-leather h5, |
||||||
|
nav.navbar-leather h6 { |
||||||
|
@apply text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700; |
||||||
|
} |
||||||
|
|
||||||
|
/* Tooltip */ |
||||||
|
div.tooltip-leather { |
||||||
|
@apply text-gray-700 dark:text-gray-400; |
||||||
|
} |
||||||
|
|
||||||
|
/* Unordered list */ |
||||||
|
.ul-leather li a { |
||||||
|
@apply text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,4 +0,0 @@ |
|||||||
/* Write your global styles here, in PostCSS syntax */ |
|
||||||
@tailwind base; |
|
||||||
@tailwind components; |
|
||||||
@tailwind utilities; |
|
||||||
@ -1,49 +1,67 @@ |
|||||||
<script lang="ts"> |
<script lang="ts"> |
||||||
import { ndk } from '$lib/ndk'; |
import { ndk } from '$lib/ndk'; |
||||||
import Toc from '$lib/components/Toc.svelte'; |
import Toc from '$lib/components/Toc.svelte'; |
||||||
import Notes from '$lib/components/Note.svelte'; |
import Notes from '$lib/components/Note.svelte'; |
||||||
import {idList} from '$lib/stores'; |
import { idList } from '$lib/stores'; |
||||||
let events: NDKEvent[] = []; |
import type { NDKEvent } from '@nostr-dev-kit/ndk'; |
||||||
async function getEvents() { |
import { page } from '$app/stores'; |
||||||
$idList.forEach(async (id) => { |
import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte'; |
||||||
const event = await $ndk.fetchEvent(id); |
|
||||||
events = [...events, event]; |
$: activeUrl = $page.url.pathname; |
||||||
}); |
|
||||||
} |
let events: NDKEvent[] = []; |
||||||
|
|
||||||
|
async function getEvents() { |
||||||
|
$idList.forEach(async (id) => { |
||||||
|
const event = await $ndk.fetchEvent(id); |
||||||
|
events = [...events, event]; |
||||||
|
}); |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
{#await getEvents() then article} |
{#await getEvents() then article} |
||||||
<div class="article"> |
<Sidebar {activeUrl}> |
||||||
<div class="toc"> |
<SidebarWrapper> |
||||||
<Toc notes={events} /> |
<SidebarGroup> |
||||||
</div> |
{#each events as event} |
||||||
|
<SidebarItem |
||||||
<div class="article-content"> |
title={event.getMatchingTags('title')[0][1]} |
||||||
<Notes notes={events} /> |
href={nip19.noteEncode(event.id)} |
||||||
</div> |
/> |
||||||
</div> |
{/each} |
||||||
|
</SidebarGroup> |
||||||
|
</SidebarWrapper> |
||||||
|
</Sidebar> |
||||||
|
<!-- <div class="article"> |
||||||
|
<div class="toc"> |
||||||
|
<Toc notes={events} /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="article-content"> |
||||||
|
<Notes notes={events} /> |
||||||
|
</div> |
||||||
|
</div> --> |
||||||
{/await} |
{/await} |
||||||
|
|
||||||
<style> |
<style> |
||||||
.article { |
.article { |
||||||
display: flex; |
display: flex; |
||||||
padding: 1rem; |
padding: 1rem; |
||||||
} |
} |
||||||
.toc { |
.toc { |
||||||
padding: 3%; |
padding: 3%; |
||||||
min-width: 5%; |
min-width: 5%; |
||||||
padding-top: 1%; |
padding-top: 1%; |
||||||
border: 1px white solid; |
border: 1px white solid; |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
border-top-width: 5px; |
border-top-width: 5px; |
||||||
} |
} |
||||||
.article-content { |
.article-content { |
||||||
min-width: 80%; |
min-width: 80%; |
||||||
max-width: 85%; |
max-width: 85%; |
||||||
padding: 1%; |
padding: 1%; |
||||||
border: 1px white solid; |
border: 1px white solid; |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
border-top-width: 5px; |
border-top-width: 5px; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,38 +1,24 @@ |
|||||||
<script lang="ts"> |
<script lang="ts"> |
||||||
</script> |
import { DarkMode, Navbar, NavLi, NavUl, NavHamburger, NavBrand } from 'flowbite-svelte'; |
||||||
|
import { HomeSolid } from 'flowbite-svelte-icons'; |
||||||
<div class="NavBar"> |
|
||||||
<a href="./about"> About</a> |
|
||||||
<a href="./create"> New Note</a> |
|
||||||
<a href="./visualize"> Visualize</a> |
|
||||||
<a href="./login" class="login"> Login</a> |
|
||||||
</div> |
|
||||||
|
|
||||||
<style> |
|
||||||
.login { |
|
||||||
float: right; |
|
||||||
} |
|
||||||
.NavBar { |
|
||||||
overflow: hidden; |
|
||||||
background-color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
.NavBar a { |
let className: string; |
||||||
float: left; |
export { className as class }; |
||||||
display: block; |
</script> |
||||||
color: #f2f2f2; |
|
||||||
text-align: center; |
|
||||||
padding: 14px 16px; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
.NavBar a:hover { |
|
||||||
background-color: #ddd; |
|
||||||
color: black; |
|
||||||
} |
|
||||||
|
|
||||||
.NavBar a.active { |
<Navbar class={`Navbar navbar-leather ${className}`}> |
||||||
background-color: #4caf50; |
<div class='flex flex-grow justify-between'> |
||||||
color: white; |
<NavBrand href='./'> |
||||||
} |
<h1 class='font-serif'>Alexandria</h1> |
||||||
</style> |
</NavBrand> |
||||||
|
<!-- TODO: Restyle the dark mode icon. --> |
||||||
|
<DarkMode btnClass='btn-leather p-4'/> |
||||||
|
</div> |
||||||
|
<NavHamburger class='btn-leather' /> |
||||||
|
<NavUl class='ul-leather'> |
||||||
|
<NavLi href='./about'>About</NavLi> |
||||||
|
<NavLi href='./create'>New Note</NavLi> |
||||||
|
<NavLi href='./visualize'>Visualize</NavLi> |
||||||
|
<NavLi href='./login'>Login</NavLi> |
||||||
|
</NavUl> |
||||||
|
</Navbar> |
||||||
|
|||||||
@ -1,15 +1,18 @@ |
|||||||
<script> |
<script> |
||||||
|
import "../app.css"; |
||||||
// import Login from '$lib/login.svelte'; |
// import Login from '$lib/login.svelte'; |
||||||
import { tabs, userPublickey } from "$lib/state"; |
import { tabs, userPublickey } from "$lib/state"; |
||||||
// import {ndk} from '$lib/ndk'; |
// import {ndk} from '$lib/ndk'; |
||||||
import { browser } from "$app/environment"; |
import { browser } from "$app/environment"; |
||||||
import { NDKNip07Signer } from "@nostr-dev-kit/ndk"; |
import { NDKNip07Signer } from "@nostr-dev-kit/ndk"; |
||||||
import { onMount } from "svelte"; |
import { onMount } from "svelte"; |
||||||
import NavBar from "$lib/components/Navigation.svelte"; |
import Navigation from "$lib/components/Navigation.svelte"; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<NavBar /> |
<div class='leather h-full w-full flex flex-col items-center'> |
||||||
<slot /> |
<Navigation class='sticky top-0' /> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
|
||||||
<style> |
<style> |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,17 +1,39 @@ |
|||||||
|
import flowbite from "flowbite/plugin"; |
||||||
|
|
||||||
/** @type {import('tailwindcss').Config}*/ |
/** @type {import('tailwindcss').Config}*/ |
||||||
const config = { |
const config = { |
||||||
content: ["./src/**/*.{html,js,svelte,ts}"], |
content: [ |
||||||
|
"./src/**/*.{html,js,svelte,ts}", |
||||||
|
"./node_modules/flowbite/**/*.js", |
||||||
|
"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}", |
||||||
|
], |
||||||
|
|
||||||
theme: { |
theme: { |
||||||
extend: {}, |
extend: { |
||||||
|
colors: { |
||||||
|
primary: { |
||||||
|
0: '#110d08', |
||||||
|
50: '#231a10', |
||||||
|
100: '#342718', |
||||||
|
200: '#574229', |
||||||
|
300: '#795c39', |
||||||
|
400: '#9c7649', |
||||||
|
500: '#ad8351', |
||||||
|
600: '#b58f62', |
||||||
|
700: '#c6a885', |
||||||
|
800: '#d6c1a8', |
||||||
|
900: '#decdb9', |
||||||
|
1000: '#efe6dc', |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
}, |
}, |
||||||
|
|
||||||
plugins: [ |
plugins: [ |
||||||
require("@tailwindcss/forms"), |
flowbite(), |
||||||
require("@tailwindcss/typography"), |
|
||||||
require("flowbite/plugin"), |
|
||||||
], |
], |
||||||
content: ["./node/modules/flowbite/**/*.js"], |
|
||||||
|
darkMode: 'class', |
||||||
}; |
}; |
||||||
|
|
||||||
module.exports = config; |
module.exports = config; |
||||||
|
|||||||
Loading…
Reference in new issue