From bbd553d32c1818979d89f7173a7441bb8be154ac Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 27 Apr 2022 05:10:49 -0400 Subject: [PATCH] UI updates --- components/layout.tsx | 4 ++- pages/index.tsx | 8 +++-- pages/posts/[page].tsx | 5 +-- pages/recommended.tsx | 14 ++++----- pages/resources.tsx | 16 +++++----- public/recommended.yaml | 1 - styles/global.css | 69 ++++++++++++++++++++++++++++++++++++++--- styles/home.module.css | 22 +++++-------- styles/post.module.css | 4 ++- styles/title.module.css | 7 +++-- util/resrec.tsx | 4 +-- 11 files changed, 107 insertions(+), 47 deletions(-) diff --git a/components/layout.tsx b/components/layout.tsx index 0ad5f90..e478d05 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -15,7 +15,9 @@ function Layout(props: layoutProps) { <FuzzyBar /> - {props.children} + <div className='container'> + {props.children} + </div> </> ); } diff --git a/pages/index.tsx b/pages/index.tsx index afb3fd1..30bef70 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,7 +6,7 @@ import style from '../styles/home.module.css'; import prettyDatePrint from '../util/pretty-date'; import { getPostsMeta, PostMeta } from '../util/slug'; -function HomePage(props: {postsMeta: PostMeta[]}) { +function HomePage(props: { postsMeta: PostMeta[] }) { props.postsMeta.sort((x, y) => { return (x.title).localeCompare(y.title) }); return ( <Layout name='' title='PaulW.XYZ'> @@ -16,7 +16,11 @@ function HomePage(props: {postsMeta: PostMeta[]}) { Pages.map(obj => { return <span key={obj.link}> <Link href={obj.link}> - <a className={style.button}>{obj.title}</a> + { + obj.link.match(/^http/) + ? <a className={`button blue ${style.button} ${style.blueButton}`}>{obj.title}</a> + : <a className={`${style.button} button`}>{obj.title}</a> + } </Link> </span> }) diff --git a/pages/posts/[page].tsx b/pages/posts/[page].tsx index 1eb62d6..bf59393 100644 --- a/pages/posts/[page].tsx +++ b/pages/posts/[page].tsx @@ -6,14 +6,15 @@ import style from '../../styles/post.module.css'; function Post({ post }: any) { // eh return (<> <Layout name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}> - <div className={style.imageBlock} style={{ backgroundImage: post.cover ? `url(/assets/images/${post.cover})` : '' }}> + <div className={style.imageBlock} style={{ backgroundImage: post.cover ? `url(/assets/images/${post.cover})` : '' }}></div> + <div className={style.spacer}></div> <section className={`${style.block} block`}> <ReactMarkdown>{post.content}</ReactMarkdown> </section> <div className={style.spacer}></div> - </div> </Layout> + </> ); } diff --git a/pages/recommended.tsx b/pages/recommended.tsx index ac35e62..6ddd050 100644 --- a/pages/recommended.tsx +++ b/pages/recommended.tsx @@ -8,14 +8,14 @@ function Recommended() { <section className='block'> <p>This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions.</p> <p>If the one you are looking for is not on this list, it is most likely I have not had the chance to read/listen to/watch it yet.</p> - { - rec.map((item: Record<string, any>) => { - const lItem = toListItem(item) - if (lItem) - return mapChild(lItem, 0) - }) - } </section> + { + rec.map((item: Record<string, any>) => { + const lItem = toListItem(item) + if (lItem) + return mapChild(lItem, 0) + }) + } </Layout> ); } diff --git a/pages/resources.tsx b/pages/resources.tsx index e880019..f568ab1 100644 --- a/pages/resources.tsx +++ b/pages/resources.tsx @@ -5,15 +5,13 @@ import { toListItem, mapChild } from '../util/resrec'; function Resources() { return ( <Layout name='Resources' title='Some Useful Resources'> - <section className='block'> - { - res.map((item: Record<string, any>) => { - const lItem = toListItem(item) - if (lItem) - return mapChild(lItem, 0) - }) - } - </section> + { + res.map((item: Record<string, any>) => { + const lItem = toListItem(item) + if (lItem) + return mapChild(lItem, 0) + }) + } </Layout>); } diff --git a/public/recommended.yaml b/public/recommended.yaml index 465de1f..4d137e0 100644 --- a/public/recommended.yaml +++ b/public/recommended.yaml @@ -1,5 +1,4 @@ - title: Books - hey: sdf children: - title: Technology children: diff --git a/styles/global.css b/styles/global.css index 9c5d535..d23589d 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,3 +1,7 @@ +:root { + --main-border-color: #555555; +} + @font-face { font-family: 'Cantarell'; src: url('/assets/fonts/Cantarell-Regular.otf') format('opentype'); @@ -149,11 +153,17 @@ section { z-index: -1; } -.block { +.container { max-width: 1018px; margin: 0 auto; - padding: 2rem; - border: 1px solid #ffffff; + position: relative; +} + +.block { + padding: 1.5rem; + max-width: 100%; + margin: 0 0.25rem; + border: 1px solid var(--main-border-color); border-bottom: none; } @@ -164,12 +174,30 @@ section { } .block:last-of-type { - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid var(--main-border-color); border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; margin-bottom: 2rem; } +.block .block { + margin: 0 ; + border-radius: 0; + border-right: none; + border-bottom: none; + border-top: 1px dashed var(--main-border-color); + border-left: 1px dashed var(--main-border-color); +} + +.block .block:first-of-type { + border-top: none; +} + +.block .block:last-of-type { + border-bottom-left-radius: 1rem; + border-bottom: 1px dashed var(--main-border-color); +} + code { overflow-x: scroll; max-width: 100%; @@ -178,4 +206,37 @@ code { font-size: 1rem; padding: 0.1rem 0.5rem; vertical-align: bottom; +} + +.button { + padding: 0.2rem 1rem; + margin: 0.3rem 0.3rem; + background:#1a3a15; + color: rgba(255, 255, 255); + display: inline-block; + text-decoration: none; + transition: 100ms ease-in-out all; + border: 1px solid #ffffff; + border-radius: 0.5rem; +} + +.button:hover { + text-decoration: none; + background:#099945; + border-color: #099945; +} + +.button:active { + text-decoration: none; + box-shadow: none; + transform: translate(1px, 1px); +} + +.button.blue { + background: #05455f; +} + +.button.blue:hover { + background:rgb(10, 130, 177); + border-color: rgb(10, 130, 177); } \ No newline at end of file diff --git a/styles/home.module.css b/styles/home.module.css index a561ac9..8144b1f 100644 --- a/styles/home.module.css +++ b/styles/home.module.css @@ -1,22 +1,14 @@ -.button { - padding: 0.2rem 1rem; - margin: 0.3rem 0.3rem; - background:#1a3a15; - color: rgba(255, 255, 255); +.button::after { + content: ' \2192'; + margin-left: 0.5rem; display: inline-block; - text-decoration: none; transition: 100ms ease-in-out all; - border: 1px solid #ffffff; - border-radius: 0.5rem; } -.button:hover { - text-decoration: none; - background:#099945; +.button:hover::after { + transform: translateX(0.2rem) scale(1.1); } -.button:active { - text-decoration: none; - box-shadow: none; - transform: translate(1px, 1px); +.blueButton:hover::after { + transform: rotateZ(-45deg) scale(1.5); } \ No newline at end of file diff --git a/styles/post.module.css b/styles/post.module.css index 1babb7f..ef20088 100644 --- a/styles/post.module.css +++ b/styles/post.module.css @@ -1,8 +1,10 @@ .imageBlock { - position: absolute; + position: fixed; + z-index: -1; right: 0; left: 0; background-size: cover; + background-position: center; min-height: 100%; background-attachment: fixed; } diff --git a/styles/title.module.css b/styles/title.module.css index d8497d7..983a69b 100644 --- a/styles/title.module.css +++ b/styles/title.module.css @@ -1,14 +1,15 @@ .container { text-align: center; - margin: auto 1rem; + margin: auto; + max-width: 95%; border-bottom: 1px solid #FFFFFF; } .nav { white-space: pre-wrap; - padding: 0.25rem 0.5rem; + padding: 0.25rem 0.75rem; font-size: 1.5rem; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); position: fixed; bottom: 0; z-index: 1000; diff --git a/util/resrec.tsx b/util/resrec.tsx index 7535cfa..68bedfd 100644 --- a/util/resrec.tsx +++ b/util/resrec.tsx @@ -69,12 +69,12 @@ export function mapChild(obj: listItem | string, level: number) { title = React.createElement('strong', {}, obj.title); return ( - <> + <section className={level < 5 ? 'block' : ''}> {title} {obj.description ? <p>{obj.description}</p> : <></>} <div> {obj.children.map(l => mapChild(l, level + 1))} </div> - </> + </section> ); } \ No newline at end of file