tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update some styling to be more fluid

Browse Source
This commit is contained in:
Triston Armstrong 2023-12-31 14:29:30 -06:00
parent 25889669f2
commit 72289219eb
5 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Layout.js
View File

@ -1,8 +1,8 @@
export const siteTitle = 'Digital Backroom - An Internet Archive' export const siteTitle = 'Digital Backroom - An Internet Archive'
export default function Layout({ children }) { export default function Layout({ children }) {
return ( return (
<div> <div >
<main className="theme-light"> <main >
{children} {children}
</main> </main>
</div> </div>

20
components/MDContent.tsx
View File

@ -1,11 +1,17 @@
import React from 'react'; import React from 'react';
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
interface BackLinksProps { interface LinkType {
linkList: unknown[] slug: string
title: string
shortSummary: string
} }
function BackLinks({ linkList }) { interface BackLinksProps {
linkList: LinkType[]
}
function BackLinks({ linkList }: BackLinksProps) {
return (<div className="note-footer"> return (<div className="note-footer">
<h3 className="backlink-heading">Link to this note</h3> <h3 className="backlink-heading">Link to this note</h3>
{(linkList != null && linkList.length > 0) {(linkList != null && linkList.length > 0)
@ -31,7 +37,7 @@ function BackLinks({ linkList }) {
interface MDContentProps { interface MDContentProps {
content: string content: string
backLinks: unknown[] backLinks: LinkType[]
} }
function MDContent({ content, backLinks }: MDContentProps) { function MDContent({ content, backLinks }: MDContentProps) {
@ -50,7 +56,11 @@ function MDContent({ content, backLinks }: MDContentProps) {
); );
} }
function BackLinksGroup({ links }) { interface BackLinksGroupProps {
links: LinkType[]
}
function BackLinksGroup({ links }: BackLinksGroupProps) {
if (!links?.length) { if (!links?.length) {
return ( return (

2
pages/notes/[id].tsx
View File

@ -22,7 +22,7 @@ export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes
<Head> <Head>
{note.title && <meta name="title" content={note.title} />} {note.title && <meta name="title" content={note.title} />}
</Head> </Head>
<div className='notes-container'> <div className='notes-container '>
<nav className="nav-bar"> <nav className="nav-bar">
<FolderTree tree={tree} flattenNodes={flattenNodes} /> <FolderTree tree={tree} flattenNodes={flattenNodes} />
</nav> </nav>

2
pages/notes/index.tsx
View File

@ -14,7 +14,7 @@ interface HomeProps {
export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) { export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
return ( return (
<Layout> <Layout>
<div className='notes-container'> <div className='notes-container '>
<nav className="nav-bar"> <nav className="nav-bar">
<FolderTree tree={tree} flattenNodes={flattenNodes} /> <FolderTree tree={tree} flattenNodes={flattenNodes} />
</nav> </nav>

24
styles/global.css
View File

@ -12,27 +12,35 @@
@layer components { @layer components {
:root {
/* LOGO Theme colors */
--rich-black: #071425ff;
--air-force-blue: #6f8fa5ff;
--light-blue: #a5c6cdff;
--white: #ffffffff;
}
.nav-bar { .nav-bar {
@apply text-black bg-blue-100 p-5; @apply px-5 py-2 bg-slate-500 bg-opacity-20;
} }
.notes-container { .notes-container {
@apply flex; @apply flex min-h-screen;
} }
.markdown-rendered { .markdown-rendered {
@apply container mx-auto p-10; @apply container mx-auto p-10 max-w-3xl;
} }
} }
@layer base { @layer base {
:root { :root {
--background-body: #202b38; --background-body: #071425ff;
--background: #161f27; --background: #6f8fa5ff;
--background-alt: #1a242f; --background-alt: #6f8fa5ff;
--selection: #1c76c5; --selection: #1c76c5;
--text-main: #dbdbdb; --text-main: #a5c6cdff;
--text-bright: #fff; --text-bright: #ffffffff;
--text-muted: #a9b1ba; --text-muted: #a9b1ba;
--links: #41adff; --links: #41adff;
--focus: #0096bfab; --focus: #0096bfab;