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,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