UI updates
This commit is contained in:
parent
f63607b010
commit
bbd553d32c
@ -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 />
|
||||
{props.children}
|
||||
<div className='container'>
|
||||
{props.children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
})
|
||||
|
||||
@ -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>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
- title: Books
|
||||
hey: sdf
|
||||
children:
|
||||
- title: Technology
|
||||
children:
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user