turbopack and app router; very annoying to work with!
This commit is contained in:
43
src/app/about/page.tsx
Normal file
43
src/app/about/page.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import ReadmeMd from '../../../README.md';
|
||||
import License from '../../../LICENSE.txt';
|
||||
|
||||
function AboutPage() {
|
||||
return (
|
||||
<>
|
||||
<section className='block'>
|
||||
<p>Paul's Personal Website.</p>
|
||||
<p> You can find me on the following platforms:</p>
|
||||
<ul>
|
||||
<li>X/Twitter: <a href='https://x.com/paulw_xyz'>paulw_xyz</a></li>
|
||||
<li>GitHub: <a href='https://github.com/paulwxyz'>paulwxyz</a></li>
|
||||
{/* <li>BlueSky (unused): <a href='https://bsky.app/profile/@paulw.xyz'>@paulw.xyz</a></li> */}
|
||||
<li><a href='https://git.paulw.xyz/xyz'>git.paulw.xyz</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
The original motivation was to just play with Next.js as it pretty much did the things I wanted web pages to do. But it came at the cost of needless complexity. As I use the JavaScript/ECMAScript/Whatever-you-want-to-call-it-script more and more, I am convinced that it is not a platform worth pursuing because the more complex it gets, the less control I have over what it does and this platform and its users seems to be okay with that sort of loss. I have been instead pivoting toward things that impressed and got me interested in working with computers.</p>
|
||||
<p>Most services/products are keen on going against the <a href='https://stephango.com/file-over-app'>file over app</a> philosophy which entails prioritizing data over software and anticipate and embrace the eventual death of software. People instead want subscription services that barely support open formats and sometimes do not support exporting data to commonly used formats. The goal here is to avoid storing artifacts under locations that are easily not accessible, not under my control, and does not lock me out of using it with other software. The only reason I have not completely abandoned this is thanks to my decision to rely on Markdown files alone. Had it been reliant on any cloud software, I would have started over.</p>
|
||||
|
||||
<p>Got any questions, concerns, or issues? Contact me via email: <code>contact [at] paulw [dot] xyz</code>.</p>
|
||||
</section>
|
||||
<hr />
|
||||
<section className='block'>
|
||||
<p>Source for this site is available on GitHub: <a href='https://github.com/paulwxyz/www'>paulwxyz/www</a> and <a href='https://git.paulw.xyz/xyz/www'>git.paulw.xyz/xyz/www</a></p>
|
||||
<p>Relevant information regarding the source is available on the repo and is also provided below.</p>
|
||||
</section>
|
||||
<section className='block'>
|
||||
<h2>README</h2>
|
||||
<ReactMarkdown>
|
||||
{ReadmeMd.replace(/^#{6}\s+(.*)\s+$/gm, (s: string, a) => `**${a}**\n`).replace(/^#{1,5} /gm, (s: string) => { return `##${s}` })}
|
||||
</ReactMarkdown>
|
||||
</section>
|
||||
<section className='block'>
|
||||
<h2>LICENSE</h2>
|
||||
<pre className='license'>{License}</pre>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutPage;
|
||||
9
src/app/components/container.tsx
Normal file
9
src/app/components/container.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
export default function Container(props: { children?: React.ReactNode, ignore?: boolean }) {
|
||||
if (props.ignore)
|
||||
return <>{props.children}</>;
|
||||
return (
|
||||
<div className='container'>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
24
src/app/components/quick-links.tsx
Normal file
24
src/app/components/quick-links.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import Link from 'next/link';
|
||||
import Pages from '../../../public/external.json';
|
||||
|
||||
function QuickLinks() {
|
||||
return (
|
||||
<div className='block'>
|
||||
{
|
||||
Object.entries(Pages).map(([title, link]) => {
|
||||
const extern = link.match(/^http/) && `blue extern` || '';
|
||||
return (
|
||||
<Link
|
||||
key={link}
|
||||
href={link}
|
||||
className={`${extern} link button`}>
|
||||
{title}
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default QuickLinks;
|
||||
40
src/app/components/recent-notes.tsx
Normal file
40
src/app/components/recent-notes.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import Link from "next/link";
|
||||
import NotesInfo from '../../../public/notes.json';
|
||||
|
||||
function RecentNotes() {
|
||||
const notes = Object.entries(NotesInfo)
|
||||
.map(([slug, note]) => {
|
||||
return {
|
||||
slug,
|
||||
title: note.title,
|
||||
mtime: new Date(note.mtime)
|
||||
}
|
||||
})
|
||||
.sort(
|
||||
(a, b) => {
|
||||
return b.mtime.getTime() - a.mtime.getTime();
|
||||
}
|
||||
);
|
||||
return (
|
||||
<div className='block'>
|
||||
<h2>Recent Notes</h2>
|
||||
<ul>
|
||||
{notes?.slice(0, 5)
|
||||
.map(({slug, title, mtime}) => {
|
||||
return (
|
||||
<li key={slug} >
|
||||
<Link href={`/notes/${slug}`}>{title}</Link>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
{
|
||||
notes.length > 5 &&
|
||||
<Link href='/notes'>More...</Link>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RecentNotes;
|
||||
52
src/app/components/recent-posts.module.css
Normal file
52
src/app/components/recent-posts.module.css
Normal file
@@ -0,0 +1,52 @@
|
||||
.container {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom: 1px dashed var(--main-border-color);
|
||||
border-left: 1px dashed var(--main-border-color);
|
||||
padding-top: 1.25rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.block+.block {
|
||||
border-top: 1px dashed var(--main-border-color);
|
||||
}
|
||||
|
||||
.block:first-of-type {
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.block:nth-of-type(2n) {
|
||||
background-color: var(--table-even-color);
|
||||
}
|
||||
|
||||
.block:nth-of-type(2n+1) {
|
||||
background-color: var(--table-odd-color);
|
||||
}
|
||||
|
||||
.postTitle {
|
||||
flex: 1 1 60%;
|
||||
padding: .25rem 0.75rem;
|
||||
}
|
||||
|
||||
.postDate {
|
||||
flex: 1 1;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
font-size: 1rem;
|
||||
padding: .25rem 0.50rem;
|
||||
}
|
||||
|
||||
.more {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.more a {
|
||||
text-decoration: none;
|
||||
}
|
||||
50
src/app/components/recent-posts.tsx
Normal file
50
src/app/components/recent-posts.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import Link from "next/link";
|
||||
import { toRelativeDate } from "../lib/date";
|
||||
import style from './recent-posts.module.css';
|
||||
import PostsInfo from '../../../public/posts.json';
|
||||
|
||||
function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) {
|
||||
return (
|
||||
<div className={style.block}>
|
||||
<span className={style.postDate}>
|
||||
{toRelativeDate(new Date(otime))}
|
||||
</span>
|
||||
<div className={style.postTitle}>
|
||||
<Link href={`/posts/${slug}`}>
|
||||
{title}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RecentPosts() {
|
||||
const posts = Object.entries(PostsInfo).reverse();
|
||||
if (!posts.length)
|
||||
return <></>;
|
||||
return (
|
||||
<div className='block'>
|
||||
<h2>Recent Posts</h2>
|
||||
<div className={style.container}>
|
||||
{posts?.slice(0, 10)
|
||||
.map(([slug, post]: any, i: number) => {
|
||||
return (
|
||||
<PostBlock
|
||||
key={slug}
|
||||
slug={slug}
|
||||
title={post.title}
|
||||
otime={post.otime} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{
|
||||
posts.length > 10 &&
|
||||
<div className={style.more}>
|
||||
<Link href='/posts' >More...</Link>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RecentPosts;
|
||||
30
src/app/components/title.module.css
Normal file
30
src/app/components/title.module.css
Normal file
@@ -0,0 +1,30 @@
|
||||
.container {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
.container .title {
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
max-width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
margin: 0;
|
||||
height: 2.5rem;
|
||||
max-height: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom right, #1a3a15, #09351b) no-repeat center center fixed;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
68
src/app/components/title.tsx
Normal file
68
src/app/components/title.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Fragment } from 'react';
|
||||
|
||||
import style from './title.module.css';
|
||||
import SiteMap from '../../../public/sitemap.json';
|
||||
import { Sites } from '../lib/site';
|
||||
|
||||
function createPathElements(ancestors: Array<{ name: string, path: string }>) {
|
||||
let currentPath = '';
|
||||
return ancestors.map((ancestor, id) => {
|
||||
currentPath += `/${ancestor.path}`
|
||||
return (
|
||||
<Fragment key={currentPath} >
|
||||
<Link href={currentPath}>{ancestor.name}</Link>
|
||||
<> / </>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export default function Title() {
|
||||
const pagePath = usePathname();
|
||||
const splitPath: Array<{ name: string, path: string }> = [];
|
||||
|
||||
// TODO(Paul): clean this up
|
||||
let currRoot: Sites = SiteMap.pages;
|
||||
let title: string | null = null;
|
||||
if (pagePath && pagePath !== '/') {
|
||||
const subPaths = pagePath.split('?')[0].split('#')[0].split('/');
|
||||
for (const p of subPaths.slice(1, subPaths.length)) {
|
||||
if (!p || !currRoot[p])
|
||||
continue;
|
||||
splitPath.push({ name: currRoot[p].title, path: p });
|
||||
|
||||
if (currRoot === undefined
|
||||
|| currRoot[p] === undefined
|
||||
|| currRoot[p].pages === undefined)
|
||||
break;
|
||||
currRoot = currRoot[p].pages!;
|
||||
}
|
||||
if (splitPath !== undefined && splitPath.length > 0)
|
||||
title = splitPath.pop()!.name;
|
||||
|
||||
}
|
||||
|
||||
const pathElements = splitPath && createPathElements(splitPath) || <></>;
|
||||
return (
|
||||
<>
|
||||
{/* <head>
|
||||
<title>{title && `${title} | PaulW.XYZ` || 'PaulW.XYZ'}</title>
|
||||
</head> */}
|
||||
<div className={style.container}>
|
||||
<h1 className={style.title}>
|
||||
{title || 'PaulW.XYZ'}
|
||||
</h1>
|
||||
</div>
|
||||
<div className={`${style.nav} h1`}>
|
||||
{
|
||||
title
|
||||
? <><Link href='/'>PaulW.XYZ</Link> / {pathElements}{title}</>
|
||||
: <>PaulW.XYZ /</>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
414
src/app/global.css
Normal file
414
src/app/global.css
Normal file
@@ -0,0 +1,414 @@
|
||||
:root {
|
||||
--main-background-color: #0d1117;
|
||||
--main-border-color: #555555;
|
||||
--link-color: #009dff;
|
||||
--primary-green: #099945;
|
||||
--secondary-green: #1a3a15;
|
||||
--tertiary-green: #0f200c;
|
||||
--primary-blue: #0a82b1;
|
||||
--secondary-blue: #05455f;
|
||||
--tertiary-blue: #05232f;
|
||||
--table-odd-color: rgba(255, 255, 255, 0.05);
|
||||
--table-even-color: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cantarell';
|
||||
src: url('/assets/fonts/Cantarell/Cantarell-Regular.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cantarell';
|
||||
src: url('/assets/fonts/Cantarell/Cantarell-Thin.otf') format('opentype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cantarell';
|
||||
src: url('/assets/fonts/Cantarell/Cantarell-Light.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cantarell';
|
||||
src: url('/assets/fonts/Cantarell/Cantarell-Bold.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cantarell';
|
||||
src: url('/assets/fonts/Cantarell/Cantarell-ExtraBold.otf') format('opentype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'EB Garamond';
|
||||
src: url('/assets/fonts/EB_Garamond/static/EBGaramond-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'EB Garamond';
|
||||
src: url('/assets/fonts/EB_Garamond/static/EBGaramond-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'EB Garamond';
|
||||
src: url('/assets/fonts/EB_Garamond/static/EBGaramond-ExtraBold.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/assets/fonts/Hack/hack-regular-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-regular-subset.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/assets/fonts/Hack/hack-bold-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-bold-subset.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/assets/fonts/Hack/hack-italic-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-italic-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/assets/fonts/Hack/hack-bolditalic-subset.woff2') format('woff2'), url('/assets/fonts/Hack/hack-bolditalic-subset.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Cantarell', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
|
||||
margin: 0 0 44px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
background-color: var(--main-background-color);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.1rem 0.5rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
pre,
|
||||
kbd,
|
||||
code {
|
||||
font-family: 'Hack', 'Source Code Pro', Consolas, monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 1rem auto;
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
table thead+tbody tr {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
table thead {
|
||||
background: var(--secondary-green);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
table tbody,
|
||||
table tr:last-of-type
|
||||
{
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
|
||||
table tbody tr:nth-of-type(2n) {
|
||||
background-color: var(--table-even-color);
|
||||
}
|
||||
|
||||
table tbody tr:nth-of-type(2n+1) {
|
||||
background-color: var(--table-odd-color);
|
||||
}
|
||||
|
||||
table thead tr th,
|
||||
table tbody tr td {
|
||||
padding: .25rem 0.75rem;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.lambda-logo {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 818px) {
|
||||
.container {
|
||||
max-width: 818px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
max-width: 100%;
|
||||
margin: 1rem 0.25rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.2rem 1rem;
|
||||
margin: 0.3rem 0.3rem;
|
||||
color: #ffffff;
|
||||
background: var(--primary-green);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: 50ms ease-in-out all;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
background: var(--secondary-green);
|
||||
box-shadow: 0 0 0 1px var(--secondary-green);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0 1px var(--tertiary-green);
|
||||
transform: scale(0.98);
|
||||
color: #cccccc;
|
||||
background: var(--tertiary-green);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
box-shadow: 0 0 0 2px #ffffff;
|
||||
}
|
||||
|
||||
.button.blue {
|
||||
background: var(--primary-blue);
|
||||
}
|
||||
|
||||
.button.blue:hover {
|
||||
background: var(--secondary-blue);
|
||||
box-shadow: 0 0 0 1px var(--secondary-blue);
|
||||
}
|
||||
|
||||
.button.blue:active {
|
||||
background: var(--tertiary-blue);
|
||||
box-shadow: 0 0 0 1px var(--tertiary-green);
|
||||
}
|
||||
|
||||
.button.blue:focus {
|
||||
box-shadow: 0 0 0 2px #ffffff;
|
||||
}
|
||||
|
||||
.text.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.none.display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button.link::after {
|
||||
content: ' \2192';
|
||||
display: inline-block;
|
||||
transition: 50ms ease-in-out all;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
.button.link:hover {
|
||||
display: inline-block;
|
||||
transition: 50ms ease-in-out all;
|
||||
}
|
||||
|
||||
.button.link:hover::after {
|
||||
transform: translateX(0.25rem) scale(1.3);
|
||||
}
|
||||
|
||||
.button.link.extern:hover::after {
|
||||
transform: rotateZ(-45deg) scale(1.5);
|
||||
}
|
||||
|
||||
.button.link.back::before {
|
||||
content: ' \2190';
|
||||
display: inline-block;
|
||||
transition: 100ms ease-in-out all;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.button.link:hover::before {
|
||||
transform: translateX(-0.2rem) scale(1.3);
|
||||
}
|
||||
|
||||
.button.link.back::after {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sans.serif {
|
||||
font-family: 'Cantarell', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.serif {
|
||||
font-family: 'EB Garamond', 'Garamond', 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
.monospace {
|
||||
font-family: 'Hack', 'Source Code Pro', Consolas, monospace;
|
||||
}
|
||||
|
||||
.license {
|
||||
background-color: #222222;
|
||||
padding: 1rem;
|
||||
}
|
||||
18
src/app/layout.tsx
Normal file
18
src/app/layout.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import type {Metadata} from 'next'
|
||||
import 'normalize.css'
|
||||
import './global.css'
|
||||
import Container from './components/container'
|
||||
import Title from './components/title'
|
||||
|
||||
export default function RootLayout({children,}: Readonly<{children: React.ReactNode}>) {
|
||||
return (
|
||||
<html lang='en'>
|
||||
<body>
|
||||
<Title />
|
||||
<Container>
|
||||
{children}
|
||||
</Container>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
132
src/app/lib/date.ts
Normal file
132
src/app/lib/date.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
// getMonth() method ranges from 0-11 so no reason to account for it
|
||||
const months = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December'
|
||||
];
|
||||
|
||||
function get12HourTime(pdate: Date | string): string {
|
||||
const date = (typeof pdate === 'string') ? new Date(pdate) : pdate;
|
||||
let hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
let meridiem = 'A.M.';
|
||||
|
||||
let strhours = ''
|
||||
|
||||
if (hours > 12) {
|
||||
hours -= 12;
|
||||
meridiem = 'P.M.';
|
||||
}
|
||||
|
||||
if (hours === 0)
|
||||
hours = 12;
|
||||
|
||||
return `${hours}:${minutes < 10 ? '0' : ''}${minutes} ${meridiem}`;
|
||||
|
||||
}
|
||||
|
||||
function toHumanReadableDate(date: Date | string, disable?: { year?: boolean, month?: boolean, day?: boolean }) {
|
||||
const oDate = (typeof date === 'string') ? new Date(date) : date;
|
||||
|
||||
const year = oDate.getFullYear();
|
||||
const month = months[oDate.getMonth()];
|
||||
const day = oDate.getDate();
|
||||
const suffix = getOrdinalDaySuffix(day)
|
||||
let out = '';
|
||||
out = !disable?.month ? `${month}` : '';
|
||||
out = !disable?.day ? `${out} ${day}${suffix}` : out;
|
||||
out = !disable?.year ? `${out}, ${year}` : out;
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
|
||||
export function getOrdinalDaySuffix(day: number): string {
|
||||
switch (day) {
|
||||
case 1:
|
||||
case 21:
|
||||
case 31:
|
||||
return 'st';
|
||||
case 2:
|
||||
case 22:
|
||||
return 'nd';
|
||||
case 3:
|
||||
case 23:
|
||||
return 'rd';
|
||||
default:
|
||||
return 'th';
|
||||
}
|
||||
}
|
||||
|
||||
export function toLocaleString(pdate: Date | string): string {
|
||||
const date = (typeof pdate === 'string') ? new Date(pdate) : pdate;
|
||||
return `${toHumanReadableDate(date)} at ${get12HourTime(date)}`;
|
||||
}
|
||||
|
||||
export function toRelativeDate(date: Date | string): string {
|
||||
const oDate = (typeof date === 'string') ? new Date(date) : date;
|
||||
|
||||
|
||||
if (!isValid(oDate)) {
|
||||
return 'Invalid Date';
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - oDate.getTime();
|
||||
|
||||
let tdiff = Math.floor(diff / 1000);
|
||||
|
||||
if (tdiff < 0) {
|
||||
return toHumanReadableDate(oDate);
|
||||
}
|
||||
|
||||
if (tdiff < 60) {
|
||||
return `${tdiff} seconds ago`;
|
||||
}
|
||||
|
||||
tdiff = Math.floor(tdiff / 60);
|
||||
if (tdiff < 60) {
|
||||
return `${tdiff} minute${tdiff === 1 ? '' : 's'} ago`;
|
||||
}
|
||||
|
||||
tdiff = Math.floor(tdiff / 60);
|
||||
if (tdiff < 24) {
|
||||
return `${tdiff} hour${tdiff === 1 ? '' : 's'} ago`;
|
||||
}
|
||||
if (tdiff < 48) {
|
||||
return `Yesterday`;
|
||||
}
|
||||
|
||||
if (oDate.getFullYear() != now.getFullYear())
|
||||
return toHumanReadableDate(oDate);
|
||||
return toHumanReadableDate(oDate, { year: true });
|
||||
}
|
||||
|
||||
export function getFullMonth(month: number) {
|
||||
if (month >= 1 && month <= 12)
|
||||
return months[month];
|
||||
return 'Invalid Month';
|
||||
}
|
||||
|
||||
export function isValid(date: any) {
|
||||
return (new Date(date)).toString() !== 'Invalid Date';
|
||||
}
|
||||
|
||||
const DateTool = {
|
||||
toRelativeDate,
|
||||
getFullMonth,
|
||||
isValid,
|
||||
getOrdinalDaySuffix,
|
||||
toLocaleString,
|
||||
};
|
||||
|
||||
export default DateTool;
|
||||
9
src/app/lib/read-markdown.ts
Normal file
9
src/app/lib/read-markdown.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { readFile } from 'fs/promises';
|
||||
import path from 'path';
|
||||
|
||||
export default async function readMarkdown(directory: string, slug: string, withoutTitle: boolean = false): Promise<string> {
|
||||
const content = await readFile(path.join(process.cwd(), directory, `${slug}.md`), 'utf-8');
|
||||
if (withoutTitle)
|
||||
return content.substring(content.indexOf('\n') + 1, content.length);
|
||||
return content;
|
||||
}
|
||||
11
src/app/lib/site.ts
Normal file
11
src/app/lib/site.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
export interface Site {
|
||||
title: string;
|
||||
pages?: Sites;
|
||||
mtime?: string;
|
||||
otime?: string;
|
||||
}
|
||||
|
||||
export interface Sites {
|
||||
[slug: string]: Site;
|
||||
}
|
||||
35
src/app/not-found.tsx
Normal file
35
src/app/not-found.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import style from '../components/title.module.css';
|
||||
|
||||
function NotFoundPage() {
|
||||
// TODO: figure out a way to somehow get next to ignore layout in special cases. tried /not-found/page.tsx but it doesn't work :X
|
||||
return (
|
||||
<>
|
||||
{/* <head>
|
||||
<title>404: Not Found | PaulW.XYZ</title>
|
||||
</head>
|
||||
<div className={style.container}>
|
||||
<h1 className={style.title}>
|
||||
Page Not Found
|
||||
</h1>
|
||||
</div>
|
||||
<div className={`${style.nav} h1`}><Link href='/'>PaulW.XYZ</Link> / ... ??? / 404: Not Found</div>
|
||||
<div className='container'>*/}
|
||||
<section className='block text center'>
|
||||
<h1>Error 404</h1>
|
||||
<p>
|
||||
<strong>Uh oh! The page you are looking for does not exist...</strong><br />
|
||||
</p>
|
||||
<Link href='/' className='button green back link'>Go Home</Link>
|
||||
<a className='button blue link extern' href='https://en.wikipedia.org/wiki/List_of_HTTP_status_codes'>
|
||||
More on HTTP status codes
|
||||
</a>
|
||||
</section>
|
||||
{/*</div>*/}
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default NotFoundPage;
|
||||
7
src/app/notes/[note]/note.module.css
Normal file
7
src/app/notes/[note]/note.module.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.last-updated {
|
||||
text-align: right;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem 0.75rem;
|
||||
}
|
||||
66
src/app/notes/[note]/page.tsx
Normal file
66
src/app/notes/[note]/page.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { PluggableList } from 'unified';
|
||||
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkMath from 'remark-math';
|
||||
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
||||
import rehypeHighlight from 'rehype-highlight';
|
||||
import rehypeHighlightCodeLines, { type HighlightLinesOptions } from 'rehype-highlight-code-lines';
|
||||
|
||||
import readMarkdown from '../../lib/read-markdown';
|
||||
import { toLocaleString } from '../../lib/date';
|
||||
import NotesInfo from '../../../../public/notes.json';
|
||||
|
||||
import style from './note.module.css';
|
||||
import 'highlight.js/styles/monokai-sublime.css';
|
||||
import 'katex/dist/katex.min.css';
|
||||
|
||||
interface Note {
|
||||
title: string,
|
||||
mtime: string,
|
||||
content?: string,
|
||||
}
|
||||
|
||||
interface Notes {
|
||||
[slug: string]: Note;
|
||||
}
|
||||
|
||||
function Markdown({ content }: any) {
|
||||
const remarkPlugins: PluggableList = [
|
||||
remarkGfm,
|
||||
remarkMath,
|
||||
];
|
||||
const rehypePlugins: PluggableList = [
|
||||
rehypeSlug,
|
||||
rehypeAutolinkHeadings,
|
||||
rehypeRaw,
|
||||
rehypeHighlight,
|
||||
rehypeKatex,
|
||||
];
|
||||
return <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins}>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
}
|
||||
|
||||
export default async function Note({params}: {params: { note: string}}) {
|
||||
const note = params.note
|
||||
const n = await getNotes(note)
|
||||
return (<>
|
||||
<span className={style['last-updated']}>
|
||||
Last updated: {toLocaleString(n.mtime)}
|
||||
</span>
|
||||
<section className='block'>
|
||||
<Markdown content={n.content} />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
async function getNotes(name: string) {
|
||||
const notesInfo: Notes = NotesInfo;
|
||||
return {...notesInfo[name], content: await readMarkdown('notes', name, true)}
|
||||
}
|
||||
56
src/app/notes/page.tsx
Normal file
56
src/app/notes/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import { toRelativeDate } from '../lib/date';
|
||||
import NotesInfo from '../../../public/notes.json';
|
||||
|
||||
function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
|
||||
return (
|
||||
<tr>
|
||||
<td style={{ flex: '1 0 50%' }}>
|
||||
<Link href={`/notes/${note.slug}`}>
|
||||
{note.title}
|
||||
</Link>
|
||||
</td>
|
||||
<td style={{ fontStyle: 'italic' }}>
|
||||
{note.mtime && toRelativeDate(note.mtime)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function NotesPage() {
|
||||
const notes = Object.entries(NotesInfo)
|
||||
.map(([slug, note]) => {
|
||||
return {
|
||||
slug,
|
||||
title: note.title,
|
||||
mtime: new Date(note.mtime)
|
||||
}
|
||||
})
|
||||
.sort(
|
||||
(a, b) => {
|
||||
return b.mtime.getTime() - a.mtime.getTime();
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
!notes || notes.length === 0
|
||||
&& <>No notes found</>
|
||||
|| <table>
|
||||
<tbody>
|
||||
{notes.map(
|
||||
(note: any) => {
|
||||
return (<NoteEntry note={note} key={note.slug} />);
|
||||
}
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default NotesPage;
|
||||
33
src/app/page.tsx
Normal file
33
src/app/page.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import QuickLinks from './components/quick-links';
|
||||
import RecentNotes from './components/recent-notes';
|
||||
import RecentPosts from './components/recent-posts';
|
||||
import RootInfo from '../../public/home.json';
|
||||
|
||||
function Nav() {
|
||||
const nav = Object.entries(RootInfo);
|
||||
return (
|
||||
<div className='block'>
|
||||
<h2>Navigation</h2>
|
||||
{
|
||||
nav.map(([slug, info]) => {
|
||||
return <Link key={slug} href={slug} className='button green'>{info.title}</Link>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<QuickLinks />
|
||||
<RecentPosts />
|
||||
<RecentNotes />
|
||||
<Nav />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
85
src/app/posts/[post]/page.tsx
Normal file
85
src/app/posts/[post]/page.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import style from '../../styles/post.module.css';
|
||||
import PostsInfo from '../../../../public/posts.json';
|
||||
import readMarkdown from '../../lib/read-markdown';
|
||||
import DateTool, { toLocaleString } from '../../lib/date';
|
||||
|
||||
interface IPost {
|
||||
title: string;
|
||||
mtime: string;
|
||||
otime?: string;
|
||||
}
|
||||
|
||||
function TimeBlock({ mtime, otime }: { mtime: string, otime: string }) {
|
||||
const ampm = (h: number) => { if (h >= 12) return 'p.m.'; return 'a.m.'; };
|
||||
|
||||
const mdate = new Date(mtime);
|
||||
const odate = new Date(otime);
|
||||
|
||||
const format = (date: Date) => {
|
||||
const day = date.getDay();
|
||||
const ord = <sup>{DateTool.getOrdinalDaySuffix(date.getDay())}</sup>;
|
||||
const month = DateTool.getFullMonth(date.getMonth());
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
|
||||
const minPrefix = date.getMinutes() < 10 ? '0' : '';
|
||||
const minutes = date.getMinutes();
|
||||
const twelveSfx = ampm(date.getHours());
|
||||
return <>{day}{ord} {month} {year} at {hours}:{minPrefix}{minutes} {twelveSfx}</>
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'right', fontSize: '16px', fontFamily: 'Cantarell', fontStyle: 'italic' }}>
|
||||
{
|
||||
mtime ?
|
||||
<div className='mtime' data-text={mdate.toISOString()}>
|
||||
Last updated: {format(mdate)}
|
||||
</div>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
<div className='otime'>
|
||||
{format(odate)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// post: IPost & { content: string, cover?: string, otime: string, mtime?: string }
|
||||
export default async function Post({ params }: { params: {post: string} }) {
|
||||
const post = await getPost((await params).post);
|
||||
if (!post)
|
||||
return <></>;
|
||||
return (<>
|
||||
<div className='container'>
|
||||
{ post.otime !== post.mtime && post.mtime &&
|
||||
<span className={style.time}>
|
||||
Last updated: {toLocaleString(post.mtime)}
|
||||
</span>
|
||||
}
|
||||
<span className={style.time}>
|
||||
{toLocaleString(post.otime)}
|
||||
</span>
|
||||
</div>
|
||||
{<div className={style.imageBlock}
|
||||
style={{
|
||||
backgroundImage:
|
||||
post.cover ?
|
||||
`url(/assets/images/${post.cover})` :
|
||||
'linear-gradient(to bottom right, rgb(5, 51, 11), rgb(5, 45, 13) 15%, rgb(5, 39,15) 40%, rgb(0, 30, 16) 80%)'
|
||||
}}></div>}
|
||||
<div className={`${style.spacer} ${post.cover ? style.background : ''}`}></div>
|
||||
<section className={`${style.block} block`}>
|
||||
<div className='container'>
|
||||
<ReactMarkdown>{post.content}</ReactMarkdown>
|
||||
</div>
|
||||
</section>
|
||||
<div className={style.spacer}></div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getPost(n: string) {
|
||||
const postsInfo: Record<string, (IPost & { cover?: string, otime: string, mtime?: string })> = PostsInfo;
|
||||
return {...postsInfo[n], content: await readMarkdown('posts', n, true)};
|
||||
}
|
||||
49
src/app/posts/page.tsx
Normal file
49
src/app/posts/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import Link from 'next/link';
|
||||
import date from '../lib/date';
|
||||
import PostsInfo from '../../../public/posts.json';
|
||||
|
||||
function PostsPage() {
|
||||
return (<>
|
||||
{Object.keys(PostsInfo).length && <Posts /> || <NoPosts />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function NoPosts() {
|
||||
return (<div className='text center'>
|
||||
<div>**crickets**</div>
|
||||
<div>No posts found...</div>
|
||||
<div><Link href='/' className='link button green back'>Go Home</Link></div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
function Posts() {
|
||||
const posts = Object.entries(PostsInfo);
|
||||
return (
|
||||
<table>
|
||||
<tbody>
|
||||
{
|
||||
posts.map(([slug, post]: [string, any]) => {
|
||||
return (<tr key={slug} style={{ alignItems: 'center' }}>
|
||||
<td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
|
||||
<div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
|
||||
post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`
|
||||
}</div>
|
||||
<div>{date.toRelativeDate(new Date(post.otime))}</div>
|
||||
</td>
|
||||
<td style={{
|
||||
fontFamily: `'EB Garamond', 'Garamond', 'Times New Roman', Times, serif`
|
||||
, fontSize: '1.25rem'
|
||||
}}>
|
||||
<Link href={`/posts/${slug}`} style={{ textDecoration: 'none' }}>{post.title}</Link>
|
||||
</td>
|
||||
</tr>)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default PostsPage;
|
||||
41
src/app/sitemap/page.tsx
Normal file
41
src/app/sitemap/page.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import Link from 'next/link';
|
||||
import { Sites } from '../lib/site';
|
||||
import SiteMap from '../../../public/sitemap.json';
|
||||
|
||||
function Desc(props: any) {
|
||||
return (
|
||||
<dl style={props.style}>
|
||||
<dt>{props.term}</dt>
|
||||
<dd>{props.details}</dd>
|
||||
{props.children}
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
|
||||
function traverseMap(head?: Sites, cwd = '', depth = 0) {
|
||||
if (!head) return [];
|
||||
let elements = [];
|
||||
for (const [slug, site] of Object.entries(head)) {
|
||||
if (slug === 'sitemap')
|
||||
continue;
|
||||
|
||||
let details;
|
||||
let list;
|
||||
|
||||
const path = `${cwd}/${slug}`;
|
||||
details = <Link href={path}>paulw.xyz{path}</Link>;
|
||||
list = traverseMap(site.pages, path, depth + 1);
|
||||
|
||||
elements.push(<Desc style={{marginLeft: '3rem'}} key={site.title} term={site.title} details={details}>{list}</Desc>)
|
||||
}
|
||||
return elements;
|
||||
}
|
||||
|
||||
function SiteMapPage() {
|
||||
return <>
|
||||
{traverseMap(SiteMap.pages)}
|
||||
</>;
|
||||
}
|
||||
|
||||
export default SiteMapPage;
|
||||
|
||||
41
src/app/styles/post.module.css
Normal file
41
src/app/styles/post.module.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.imageBlock {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
min-height: 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.block {
|
||||
font-family: 'EB Garamond', 'Garamond', 'Times New Roman', Times, serif;
|
||||
background-color: rgba(13, 17, 23, 0.97);
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.5rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 6.25rem;
|
||||
}
|
||||
|
||||
.background.spacer {
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem 0.75rem;
|
||||
}
|
||||
Reference in New Issue
Block a user