buttercat1791
2 years ago
committed by
Silberengel
15 changed files with 2662 additions and 1908 deletions
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
{ |
||||
"editor.tabSize": 2 |
||||
} |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
import tailwindcss from "tailwindcss"; |
||||
import autoprefixer from "autoprefixer"; |
||||
|
||||
export default { |
||||
plugins: [ |
||||
tailwindcss(), |
||||
autoprefixer(), |
||||
] |
||||
}; |
||||
@ -1,3 +1,95 @@
@@ -1,3 +1,95 @@
|
||||
body { |
||||
padding-top: 50px; |
||||
@tailwind base; |
||||
@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 @@
@@ -1,4 +0,0 @@
|
||||
/* Write your global styles here, in PostCSS syntax */ |
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
@ -1,38 +1,24 @@
@@ -1,38 +1,24 @@
|
||||
<script lang="ts"> |
||||
import { DarkMode, Navbar, NavLi, NavUl, NavHamburger, NavBrand } from 'flowbite-svelte'; |
||||
import { HomeSolid } from 'flowbite-svelte-icons'; |
||||
|
||||
let className: string; |
||||
export { className as class }; |
||||
</script> |
||||
|
||||
<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> |
||||
<Navbar class={`Navbar navbar-leather ${className}`}> |
||||
<div class='flex flex-grow justify-between'> |
||||
<NavBrand href='./'> |
||||
<h1 class='font-serif'>Alexandria</h1> |
||||
</NavBrand> |
||||
<!-- TODO: Restyle the dark mode icon. --> |
||||
<DarkMode btnClass='btn-leather p-4'/> |
||||
</div> |
||||
|
||||
<style> |
||||
.login { |
||||
float: right; |
||||
} |
||||
.NavBar { |
||||
overflow: hidden; |
||||
background-color: #333; |
||||
} |
||||
|
||||
.NavBar a { |
||||
float: left; |
||||
display: block; |
||||
color: #f2f2f2; |
||||
text-align: center; |
||||
padding: 14px 16px; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.NavBar a:hover { |
||||
background-color: #ddd; |
||||
color: black; |
||||
} |
||||
|
||||
.NavBar a.active { |
||||
background-color: #4caf50; |
||||
color: white; |
||||
} |
||||
</style> |
||||
<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 @@
@@ -1,15 +1,18 @@
|
||||
<script> |
||||
import "../app.css"; |
||||
// import Login from '$lib/login.svelte'; |
||||
import { tabs, userPublickey } from "$lib/state"; |
||||
// import {ndk} from '$lib/ndk'; |
||||
import { browser } from "$app/environment"; |
||||
import { NDKNip07Signer } from "@nostr-dev-kit/ndk"; |
||||
import { onMount } from "svelte"; |
||||
import NavBar from "$lib/components/Navigation.svelte"; |
||||
import Navigation from "$lib/components/Navigation.svelte"; |
||||
</script> |
||||
|
||||
<NavBar /> |
||||
<div class='leather h-full w-full flex flex-col items-center'> |
||||
<Navigation class='sticky top-0' /> |
||||
<slot /> |
||||
</div> |
||||
|
||||
<style> |
||||
</style> |
||||
|
||||
@ -1,17 +1,39 @@
@@ -1,17 +1,39 @@
|
||||
import flowbite from "flowbite/plugin"; |
||||
|
||||
/** @type {import('tailwindcss').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: { |
||||
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: [ |
||||
require("@tailwindcss/forms"), |
||||
require("@tailwindcss/typography"), |
||||
require("flowbite/plugin"), |
||||
flowbite(), |
||||
], |
||||
content: ["./node/modules/flowbite/**/*.js"], |
||||
|
||||
darkMode: 'class', |
||||
}; |
||||
|
||||
module.exports = config; |
||||
|
||||
Loading…
Reference in new issue