UI updates

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>
                     })

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>
+
     </>
     );
 }

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>
     );
 }

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>);
 }