From 72289219eb60bb692214af06fa28496a3594501c Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Sun, 31 Dec 2023 14:29:30 -0600 Subject: [PATCH] update some styling to be more fluid --- components/Layout.js | 4 ++-- components/MDContent.tsx | 20 +++++++++++++++----- pages/notes/[id].tsx | 2 +- pages/notes/index.tsx | 2 +- styles/global.css | 24 ++++++++++++++++-------- 5 files changed, 35 insertions(+), 17 deletions(-) diff --git a/components/Layout.js b/components/Layout.js index 7e01a0b..04f519d 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,8 +1,8 @@ export const siteTitle = 'Digital Backroom - An Internet Archive' export default function Layout({ children }) { return ( -
-
+
+
{children}
diff --git a/components/MDContent.tsx b/components/MDContent.tsx index 6ee1d16..bfcedec 100644 --- a/components/MDContent.tsx +++ b/components/MDContent.tsx @@ -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 (

Link to this note

{(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 ( diff --git a/pages/notes/[id].tsx b/pages/notes/[id].tsx index d1e3765..16cbe7a 100644 --- a/pages/notes/[id].tsx +++ b/pages/notes/[id].tsx @@ -22,7 +22,7 @@ export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes {note.title && } -
+
diff --git a/pages/notes/index.tsx b/pages/notes/index.tsx index 78fcf13..c16d14d 100644 --- a/pages/notes/index.tsx +++ b/pages/notes/index.tsx @@ -14,7 +14,7 @@ interface HomeProps { export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) { return ( -
+
diff --git a/styles/global.css b/styles/global.css index 39a6061..55f4e4d 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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;