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 default function Layout({ children }) {
return (
<div>
<main className="theme-light">
<div >
<main >
{children}
</main>
</div>

20
components/MDContent.tsx
View File

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

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

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

2
pages/notes/index.tsx
View File

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

24
styles/global.css
View File

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