UI updates

components/layout.tsx

@@ -15,7 +15,9 @@ function Layout(props: layoutProps) {
             <Meta name={props.name} ancestors={props.ancestors} />
             <Title title={props.title} name={props.name} ancestors={props.ancestors} />
             <FuzzyBar />
+            <div className='container'>
                 {props.children}
+            </div>
         </>
     );
 }

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,6 +8,7 @@ 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>
+            </section>
             {
                 rec.map((item: Record<string, any>) => {
                     const lItem = toListItem(item)
@@ -15,7 +16,6 @@ function Recommended() {
                         return mapChild(lItem, 0)
                 })
             }
-            </section>
         </Layout>
     );
 }

pages/resources.tsx

@@ -5,7 +5,6 @@ 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)
@@ -13,7 +12,6 @@ function Resources() {
                         return mapChild(lItem, 0)
                 })
             }
-            </section>
         </Layout>);
 }
 

public/recommended.yaml

@@ -1,5 +1,4 @@
 - title: Books
-  hey: sdf
   children:
   - title: Technology
     children:

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;
+    position: relative;
-    border: 1px solid #ffffff;
+}
+
+.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%;
@@ -179,3 +207,36 @@ code {
     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);
+}

styles/home.module.css

@@ -1,22 +1,14 @@
-.button {
+.button::after {
-    padding: 0.2rem 1rem;
+    content: ' \2192';
-    margin: 0.3rem 0.3rem;
+    margin-left: 0.5rem;
-    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 {
+.button:hover::after {
-    text-decoration: none;
+    transform: translateX(0.2rem) scale(1.1);
-    background:#099945;
 }
 
-.button:active {
+.blueButton:hover::after {
-    text-decoration: none;
+    transform: rotateZ(-45deg) scale(1.5);
-    box-shadow: none;
-    transform: translate(1px, 1px);
 }

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

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;

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