Added base content styling & definition list
This commit is contained in:
6
src/app/api/keystatic/[...params]/route.ts
Normal file
6
src/app/api/keystatic/[...params]/route.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { makeRouteHandler } from '@keystatic/next/route-handler'
|
||||
import config from '~/keystatic.config'
|
||||
|
||||
export const { POST, GET } = makeRouteHandler({
|
||||
config,
|
||||
})
|
||||
@@ -1,8 +1,17 @@
|
||||
@import url('../styles/base/variables.css');
|
||||
@import url('../styles/base/typography.css');
|
||||
@import url('../styles/base/lists.css');
|
||||
@import url('../styles/base/tables.css');
|
||||
@import url('../styles/base/inline.css');
|
||||
@import url('../styles/base/form.css');
|
||||
@import url('../styles/base/keyframes.css');
|
||||
@import url('../styles/base/helpers.css');
|
||||
@import url('../styles/settings.css');
|
||||
|
||||
html {
|
||||
font-size: var(--typo-size-base);
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px/1.5 var(--font-body);
|
||||
font-family: var(--font-body), sans-serif;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-weight: var(--typo-weight-regular);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background-color: var(--color-surface-base);
|
||||
}
|
||||
|
||||
3
src/app/keystatic/[[...params]]/page.tsx
Normal file
3
src/app/keystatic/[[...params]]/page.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function Page() {
|
||||
return null
|
||||
}
|
||||
6
src/app/keystatic/keystatic.ts
Normal file
6
src/app/keystatic/keystatic.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { makePage } from '@keystatic/next/ui/app'
|
||||
import config from '../../../keystatic.config'
|
||||
|
||||
export default makePage(config)
|
||||
18
src/app/keystatic/layout.tsx
Normal file
18
src/app/keystatic/layout.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import KeystaticApp from './keystatic'
|
||||
|
||||
export default function KeystaticLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Keystatic Admin</title>
|
||||
</head>
|
||||
<body>
|
||||
<KeystaticApp />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
30
src/app/the-metatron/[slug]/page.tsx
Normal file
30
src/app/the-metatron/[slug]/page.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import MarkdocRenderer from '@/components/Markdoc/Renderer'
|
||||
import { getArticleBySlug, getArticles } from '@/lib/content/meta/articles'
|
||||
import { notFound } from 'next/navigation'
|
||||
|
||||
interface Props {
|
||||
params: Promise<{
|
||||
slug: string
|
||||
}>
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const articles = await getArticles()
|
||||
return articles.map(({ slug }) => ({ slug }))
|
||||
}
|
||||
|
||||
export default async function MetaArticlePage({ params }: Props) {
|
||||
const { slug } = await params
|
||||
const article = await getArticleBySlug(slug)
|
||||
|
||||
if (!article) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>{article.title}</h1>
|
||||
<MarkdocRenderer content={article.content} className="meta-content" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
|
||||
--el-dd-color: var(--color-text-primary);
|
||||
--el-dd-font-family: var(--font-body);
|
||||
--el-dd-font-size: var(--typo-size-md);
|
||||
--el-dd-line-height: var(--typo-leading-normal);
|
||||
--el-dd-indent: var(--spacing-tight);
|
||||
--el-dd-vspace-base: calc(1em * var(--el-dd-line-height));
|
||||
--el-dd-vspace-top: calc(var(--el-dd-vspace-base) * var(--vspace-compressed));
|
||||
--el-dd-vspace-bottom: calc(var(--el-dd-vspace-base) * var(--vspace-tight));
|
||||
*/
|
||||
|
||||
.definitionlist {
|
||||
margin-block: var(--el-dl-vspace-top) var(--el-dl-vspace-bottom);
|
||||
font-size: var(--el-dl-font-size);
|
||||
line-height: var(--el-dl-line-height);
|
||||
}
|
||||
|
||||
.definitionterm {
|
||||
margin-block: var(--el-dt-vspace-top) var(--el-dt-vspace-bottom);
|
||||
padding: var(--el-dt-padding);
|
||||
|
||||
font-family: var(--el-dt-font-family), serif;
|
||||
font-size: var(--el-dt-font-size);
|
||||
font-weight: var(--el-dt-font-weight);
|
||||
line-height: var(--el-dt-line-height);
|
||||
color: var(--el-dt-color);
|
||||
text-transform: var(--el-dt-text-transform);
|
||||
letter-spacing: var(--el-dt-letter-spacing);
|
||||
|
||||
background: var(--el-dt-background);
|
||||
}
|
||||
|
||||
.definitiondescription {
|
||||
margin-block: var(--el-dd-vspace-top) var(--el-dd-vspace-bottom);
|
||||
padding: var(--el-dd-indent);
|
||||
|
||||
font-family: var(--el-dd-font-family), sans-serif;
|
||||
font-size: var(--el-dd-font-size);
|
||||
line-height: var(--el-dd-line-height);
|
||||
color: var(--el-dd-color);
|
||||
}
|
||||
24
src/components/Markdoc/DefinitionList/index.tsx
Normal file
24
src/components/Markdoc/DefinitionList/index.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { ReactNode } from 'react'
|
||||
import styles from './DefinitionList.module.css'
|
||||
|
||||
interface DefinitionListProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
interface DefinitionItemProps {
|
||||
term: string
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function DefinitionList({ children }: DefinitionListProps) {
|
||||
return <dl className={styles.definitionlist}>{children}</dl>
|
||||
}
|
||||
|
||||
export function DefinitionItem({ term, children }: DefinitionItemProps) {
|
||||
return (
|
||||
<>
|
||||
<dt className={styles.definitionterm}>{term}</dt>
|
||||
<dd className={styles.definitiondescription}>{children}</dd>
|
||||
</>
|
||||
)
|
||||
}
|
||||
615
src/components/Markdoc/Renderer/Renderer.module.css
Normal file
615
src/components/Markdoc/Renderer/Renderer.module.css
Normal file
@@ -0,0 +1,615 @@
|
||||
.content {
|
||||
max-width: clamp(60ch, 90vw, 90ch);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-comfortable);
|
||||
font-size: var(--font-size-responsive);
|
||||
|
||||
& h1 {
|
||||
margin-block: var(--el-h1-vspace-top) var(--el-h1-vspace-bottom);
|
||||
padding-bottom: var(--spacing-snug);
|
||||
border-bottom: var(--size-4) solid var(--el-h1-color);
|
||||
|
||||
font-family: var(--el-h1-font-family), serif;
|
||||
font-size: var(--el-h1-font-size);
|
||||
font-weight: var(--el-h1-font-weight);
|
||||
line-height: var(--el-h1-line-height);
|
||||
color: var(--el-h1-color);
|
||||
text-transform: var(--el-h1-text-transform);
|
||||
letter-spacing: var(--el-h1-letter-spacing);
|
||||
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block:
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
|
||||
& + h2 {
|
||||
margin-block:
|
||||
calc(1em * var(--el-h1-line-height) * var(--vspace-snug))
|
||||
calc(1em * var(--el-h1-line-height) * var(--vspace-normal));
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin-block: var(--el-h2-vspace-top) var(--el-h2-vspace-bottom);
|
||||
padding-left: var(--spacing-snug);
|
||||
border-left: var(--size-4) solid var(--el-h2-color);
|
||||
|
||||
font-family: var(--el-h2-font-family), serif;
|
||||
font-size: var(--el-h2-font-size);
|
||||
font-weight: var(--el-h2-font-weight);
|
||||
line-height: var(--el-h2-line-height);
|
||||
color: var(--el-h2-color);
|
||||
text-transform: var(--el-h2-text-transform);
|
||||
letter-spacing: var(--el-h2-letter-spacing);
|
||||
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block:
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
|
||||
& + h3 {
|
||||
margin-block:
|
||||
calc(1em * var(--el-h1-line-height) * var(--vspace-compressed))
|
||||
calc(1em * var(--el-h1-line-height) * var(--vspace-snug));
|
||||
}
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-block: var(--el-h3-vspace-top) var(--el-h3-vspace-bottom);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-h3-font-family), serif;
|
||||
font-size: var(--el-h3-font-size);
|
||||
font-weight: var(--el-h3-font-weight);
|
||||
line-height: var(--el-h3-line-height);
|
||||
color: var(--color-surface-base);
|
||||
text-transform: var(--el-h3-text-transform);
|
||||
letter-spacing: var(--el-h3-letter-spacing);
|
||||
|
||||
background: var(--el-h3-color);
|
||||
}
|
||||
|
||||
& h4 {
|
||||
margin-block: var(--el-h4-vspace-top) var(--el-h4-vspace-bottom);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border-top: var(--size-3 ) solid var(--el-h4-color);
|
||||
border-bottom: var(--size-3 ) solid var(--el-h4-color);
|
||||
|
||||
font-family: var(--el-h4-font-family), serif;
|
||||
font-size: var(--el-h4-font-size);
|
||||
font-weight: var(--el-h4-font-weight);
|
||||
line-height: var(--el-h4-line-height);
|
||||
text-align: center;
|
||||
text-transform: var(--el-h4-text-transform);
|
||||
letter-spacing: var(--el-h4-letter-spacing);
|
||||
}
|
||||
|
||||
& h5 {
|
||||
margin-block: var(--el-h5-vspace-top) var(--el-h5-vspace-bottom);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
|
||||
font-family: var(--el-h5-font-family), serif;
|
||||
font-size: var(--el-h5-font-size);
|
||||
font-weight: var(--el-h5-font-weight);
|
||||
line-height: var(--el-h5-line-height);
|
||||
color: var(--el-h5-color);
|
||||
text-align: center;
|
||||
text-transform: var(--el-h5-text-transform);
|
||||
letter-spacing: var(--el-h5-letter-spacing);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
padding: 0 var(--spacing-tight);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "▼";
|
||||
}
|
||||
}
|
||||
|
||||
& h6 {
|
||||
margin-block: var(--el-h6-vspace-top) var(--el-h6-vspace-bottom);
|
||||
|
||||
font-family: var(--el-h6-font-family), serif;
|
||||
font-size: var(--el-h6-font-size);
|
||||
font-weight: var(--el-h6-font-weight);
|
||||
line-height: var(--el-h6-line-height);
|
||||
color: var(--el-h6-color);
|
||||
text-align: center;
|
||||
text-transform: var(--el-h6-text-transform);
|
||||
letter-spacing: var(--el-h6-letter-spacing);
|
||||
}
|
||||
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6 {
|
||||
& + p,
|
||||
& + ul,
|
||||
& + ol,
|
||||
& + blockquote {
|
||||
margin-block:
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-compressed))
|
||||
calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
|
||||
|
||||
font-family: var(--el-p-font-family), sans-serif;
|
||||
font-size: var(--el-p-font-size);
|
||||
font-weight: var(--el-p-font-weight);
|
||||
line-height: var(--el-p-line-height);
|
||||
color: var(--el-p-color);
|
||||
text-align: var(--el-p-text-align);
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
|
||||
padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
|
||||
border-left: var(--size-4) solid var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--el-blockquote-font-family), serif;
|
||||
font-size: var(--el-blockquote-font-size);
|
||||
font-weight: var(--el-blockquote-font-weight);
|
||||
font-style: var(--el-blockquote-font-style);
|
||||
line-height: var(--el-blockquote-line-height);
|
||||
color: var(--el-blockquote-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-block: var(--el-pre-vspace-top) var(--el-pre-vspace-bottom);
|
||||
padding: var(--spacing-comfortable);
|
||||
|
||||
font-family: var(--el-pre-font-family), monospace;
|
||||
font-size: var(--el-pre-font-size);
|
||||
line-height: var(--el-pre-line-height);
|
||||
color: var(--el-pre-color);
|
||||
|
||||
background: var(--el-pre-background);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-block: var(--el-list-vspace-top) var(--el-list-vspace-bottom);
|
||||
font-size: var(--el-list-font-size);
|
||||
line-height: var(--el-list-line-height);
|
||||
color: var(--el-list-color);
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ul, ol ol {
|
||||
margin-block: var(--el-list-nested-vspace-top) var(--el-list-nested-vspace-bottom);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-block: var(--el-li-vspace-top) var(--el-li-vspace-bottom);
|
||||
|
||||
li {
|
||||
margin-block: var(--el-li-nested-vspace-top) var(--el-li-nested-vspace-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
padding-left: var(--el-ul-indent-l1);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-left: var(--el-ul-item-padding);
|
||||
|
||||
&::marker {
|
||||
content: var(--el-ul-symbol-l1);
|
||||
color: var(--el-ul-symbol-l1-color);
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: var(--el-ul-indent-l2);
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
content: var(--el-ul-symbol-l2);
|
||||
color: var(--el-ul-symbol-l2-color);
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ul, ol ol {
|
||||
padding-left: var(--el-ul-indent-l3);
|
||||
}
|
||||
|
||||
ul ul li::marker,
|
||||
ol ul li::marker {
|
||||
content: var(--el-ul-symbol-l3);
|
||||
color: var(--el-ul-symbol-l3-color);
|
||||
}
|
||||
|
||||
ul ul ul, ul ul ol, ul ol ul, ul ol ol,
|
||||
ol ul ul, ol ul ol, ol ol ul, ol ol ol {
|
||||
padding-left: var(--el-ul-indent-l4);
|
||||
}
|
||||
|
||||
ul ul ul li::marker,
|
||||
ul ol ul li::marker,
|
||||
ol ul ul li::marker,
|
||||
ol ol ul li::marker {
|
||||
content: var(--el-ul-symbol-l4);
|
||||
color: var(--el-ul-symbol-l4-color);
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-l1;
|
||||
contain: style;
|
||||
padding-left: var(--el-ol-indent-l1);
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l1;
|
||||
margin-left: var(--el-ol-item-indent-l1);
|
||||
padding-left: var(--el-ol-item-padding);
|
||||
|
||||
&::marker {
|
||||
content: var(--el-ol-prefix-l1) counter(ol-l1, var(--el-ol-style-l1)) var(--el-ol-suffix-l1);
|
||||
color: var(--el-ol-marker-color-l1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ol {
|
||||
counter-reset: ol-l2;
|
||||
padding-left: var(--el-ol-indent-l2);
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l2;
|
||||
margin-left: var(--el-ol-item-indent-l2);
|
||||
|
||||
&::marker {
|
||||
content: var(--el-ol-prefix-l2) counter(ol-l2, var(--el-ol-style-l2)) var(--el-ol-suffix-l2);
|
||||
color: var(--el-ol-marker-color-l2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ul {
|
||||
padding-left: var(--el-ol-indent-l2);
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol,
|
||||
ol > li > ul > li > ol {
|
||||
counter-reset: ol-l3;
|
||||
margin-left: var(--el-ol-item-indent-l3);
|
||||
padding-left: var(--el-ol-indent-l3);
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l3;
|
||||
|
||||
&::marker {
|
||||
content: var(--el-ol-prefix-l3) counter(ol-l3, var(--el-ol-style-l3)) var(--el-ol-suffix-l3);
|
||||
color: var(--el-ol-marker-color-l3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ol > li > ul,
|
||||
ol > li > ul > li > ul {
|
||||
padding-left: var(--el-ol-indent-l3);
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol > li > ol,
|
||||
ol > li > ol > li > ul > li > ol,
|
||||
ol > li > ul > li > ol > li > ol,
|
||||
ol > li > ul > li > ul > li > ol {
|
||||
counter-reset: ol-l4;
|
||||
margin-left: var(--el-ol-item-indent-l4);
|
||||
padding-left: var(--el-ol-indent-l4);
|
||||
|
||||
& > li {
|
||||
counter-increment: ol-l4;
|
||||
|
||||
&::marker {
|
||||
content: var(--el-ol-prefix-l4) counter(ol-l4, var(--el-ol-style-l4)) var(--el-ol-suffix-l4);
|
||||
color: var(--el-ol-marker-color-l4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol > li > ul,
|
||||
ol > li > ol > li > ul > li > ul,
|
||||
ol > li > ul > li > ol > li > ul,
|
||||
ol > li > ul > li > ul > li > ul {
|
||||
padding-left: var(--el-ol-indent-l4);
|
||||
}
|
||||
|
||||
ol li,
|
||||
ul li {
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
/* Override if you specifically need inside positioning */
|
||||
.list-inside ol li,
|
||||
.list-inside ul li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
width: 100%;
|
||||
margin-block: var(--el-table-vspace-top) var(--el-table-vspace-bottom);
|
||||
border: var(--el-table-border);
|
||||
|
||||
font-size: var(--el-table-font-size);
|
||||
line-height: var(--el-table-line-height);
|
||||
|
||||
& thead th,
|
||||
& th {
|
||||
padding: var(--el-th-padding);
|
||||
|
||||
font-family: var(--el-th-font-family), serif;
|
||||
font-size: var(--el-th-font-size);
|
||||
font-weight: var(--el-th-font-weight);
|
||||
line-height: var(--el-th-line-height);
|
||||
color: var(--el-th-color);
|
||||
text-transform: var(--el-th-text-transform);
|
||||
|
||||
background: var(--el-th-background);
|
||||
}
|
||||
|
||||
& tbody td,
|
||||
& td {
|
||||
padding: var(--el-td-padding);
|
||||
border: var(--el-td-border);
|
||||
|
||||
font-family: var(--el-td-font-family), monospace;
|
||||
font-size: var(--el-td-font-size);
|
||||
line-height: var(--el-td-line-height);
|
||||
color: var(--el-td-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& td:first-child,
|
||||
& th:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
height: var(--hr-height);
|
||||
margin-block: var(--hr-margin);
|
||||
border: none;
|
||||
|
||||
background: var(--hr-color);
|
||||
|
||||
&::after {
|
||||
content: var(--hr-symbol-content);
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
padding: var(--hr-symbol-space);
|
||||
|
||||
font-size: var(--hr-symbol-size);
|
||||
line-height: var(--hr-symbol-line-height);
|
||||
color: var(--hr-symbol-color);
|
||||
|
||||
background: var(--hr-symbol-background);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-surface-base);
|
||||
letter-spacing: var(--typo-spacing-relaxed);
|
||||
|
||||
background: var(--color-primary);
|
||||
|
||||
& * {
|
||||
color: var(--color-text-inverse) !important;
|
||||
}
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: var(--typo-weight-black);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--typo-spacing-loose);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
text-underline-offset: 2px;
|
||||
|
||||
transition: color 0.5s ease-in-out, background 0.5s ease-in-out;
|
||||
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--color-surface-base);
|
||||
text-decoration: none;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:visited,
|
||||
&:active {
|
||||
color: var(--color-primary-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.1em 0.3em;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-inverse);
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1em 0.3em;
|
||||
border: 1px solid var(--color-text-primary);
|
||||
border-radius: 2px;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-inverse);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
samp {
|
||||
padding: 0.1em 0.3em;
|
||||
border-left: var(--size-1) solid var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
var {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1em 0.2em;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 0.5625em;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
del,
|
||||
s {
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
}
|
||||
|
||||
ins {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-primary);
|
||||
text-decoration-thickness: var(--size-1);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
text-underline-offset: var(--size-1);
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-weight: var(--typo-weight-bold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
cite {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
|
||||
&::before {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "«";
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
& article {
|
||||
& > p:first-of-type {
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.022em;
|
||||
|
||||
&::first-letter {
|
||||
float: left;
|
||||
|
||||
margin: 0.1em 0.1em 0 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: 4em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: var(--color-primary);
|
||||
|
||||
@supports (initial-letter: 4) {
|
||||
float: none;
|
||||
|
||||
margin: 0;
|
||||
padding-right: var(--spacing-snug);
|
||||
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
initial-letter: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
39
src/components/Markdoc/Renderer/index.tsx
Normal file
39
src/components/Markdoc/Renderer/index.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import {
|
||||
DefinitionItem,
|
||||
DefinitionList,
|
||||
} from '@/components/Markdoc/DefinitionList'
|
||||
import { tags } from '@/lib/markdoc/tags'
|
||||
import Markdoc from '@markdoc/markdoc'
|
||||
import React from 'react'
|
||||
|
||||
import styles from './Renderer.module.css'
|
||||
|
||||
interface ContentRendererProps {
|
||||
content: () => Promise<{ node: any }>
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default async function Renderer({
|
||||
content,
|
||||
className = 'content',
|
||||
}: ContentRendererProps) {
|
||||
const components = {
|
||||
DefinitionList,
|
||||
DefinitionItem,
|
||||
}
|
||||
const { node } = await content()
|
||||
const errors = Markdoc.validate(node, { tags })
|
||||
|
||||
if (errors.length) {
|
||||
console.error(errors)
|
||||
throw new Error('Invalid content')
|
||||
}
|
||||
|
||||
const renderable = Markdoc.transform(node, { tags })
|
||||
|
||||
return (
|
||||
<div className={`${styles.content} ${className}`}>
|
||||
{Markdoc.renderers.react(renderable, React, { components })}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
5
src/content/taxonomy/authors/dave-damage.json
Normal file
5
src/content/taxonomy/authors/dave-damage.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Dave Damage",
|
||||
"avatar": "/images/authors/dave-damage/avatar.png",
|
||||
"description": "Nothing nice 2 say"
|
||||
}
|
||||
3
src/content/taxonomy/authors/dave-damage/test.mdoc
Normal file
3
src/content/taxonomy/authors/dave-damage/test.mdoc
Normal file
@@ -0,0 +1,3 @@
|
||||
A just world is a sane world, but there is nothing sane about this
|
||||
|
||||
|
||||
4
src/content/taxonomy/tags/rant-against-the-machine.json
Normal file
4
src/content/taxonomy/tags/rant-against-the-machine.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "Rant against the Machine",
|
||||
"description": "Where we yell at clouds"
|
||||
}
|
||||
4
src/content/taxonomy/tags/was-ist-was.json
Normal file
4
src/content/taxonomy/tags/was-ist-was.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "Was ist was",
|
||||
"description": "What & how as you anglos call it. Introductions and explanations..."
|
||||
}
|
||||
177
src/content/the-metatron/the-kitchensink.mdoc
Normal file
177
src/content/the-metatron/the-kitchensink.mdoc
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
title: The Kitchensink
|
||||
summary: Where we test and style output
|
||||
cover: /images/covers/the-metatron/the-kitchensink/cover.jpeg
|
||||
coverAlt: Smiling Dude taking apart a stranded whale with a chainsaw
|
||||
publishing:
|
||||
status: draft
|
||||
featured: false
|
||||
tags:
|
||||
- rant-against-the-machine
|
||||
- was-ist-was
|
||||
author: dave-damage
|
||||
seo:
|
||||
metaTitle: Dave DMG – The Kitchen Sink
|
||||
metaDescription: Where we put our stuff to the test
|
||||
keywords:
|
||||
- Nope
|
||||
noIndex: false
|
||||
---
|
||||
# Statim relictis retibus et patre
|
||||
|
||||
Ideo dico vobis, ne solliciti sitis animæ vestræ quid manducetis, neque corpori vestro quid induamini. Nonne anima plus est quam esca, et corpus plus quam vestimentum? Respicite volatilia cæli, quoniam non serunt, *tui and trabem in* neque metunt, neque congregant in horrea et Pater vester cælestis pascit illa. Nonne vos magis pluris estis illis? Quis autem vestrum cogitans potest adjicere ad staturam suam cubitum unum? Et de vestimento quid *excidetur et* solliciti estis? Considerate lilia agri quomodo crescunt non laborant, neque nent. Dico autem vobis, quoniam nec Salomon in omni gloria sua coopertus *crescunt non* est sicut unum ex istis. Si autem fœnum agri, quod hodie est, et cras in clibanum mittitur, Deus sic vestit, quanto magis vos modicæ fidei? Nolite ergo solliciti esse, dicentes Quid manducabimus, aut quid bibemus, aut quo operiemur? hæc enim omnia gentes inquirunt. Scit enim Pater vester, quia his omnibus indigetis. Quærite ergo primum regnum Dei, et justitiam ejus et hæc omnia adjicientur.
|
||||
|
||||
{% DefinitionList %}
|
||||
{% DefinitionItem term="Facit audiens autem jesus miratus est et" %}
|
||||
Justitiam tunc dimisit eum baptizatus
|
||||
{% /DefinitionItem %}
|
||||
|
||||
{% DefinitionItem term="Quoniam potens est" %}
|
||||
```java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
{% /DefinitionItem %}
|
||||
|
||||
{% DefinitionItem term="Eis tempus stell" %}
|
||||
- Munera aurum thus et myrrham et.
|
||||
- Sed super `Continuo relictis retibus secuti sunt` candelabrum ut luceat omnibus qui in.
|
||||
- Dico vobis quia omnis qui
|
||||
- In aquis *unus scriba* **domini** pastores ==hoc== autem **ab** fugerunt et **baptizari et tu venis** venientes.
|
||||
- Neque congregant `De cælis dicens` in **hypocrit** horrea et pater vester.
|
||||
- Et ego *in clis sanctificetur nomen* homo sum sub potestate constitutus.
|
||||
- Dicentem dicens surge et accipe [Vocabitur in regno clorum dico enim vobis quia][6] puerum.
|
||||
- Vide nemini dixeris sed.
|
||||
- In diebus autem illis venit joannes
|
||||
- Antiquis non *quoniam illusus* occides **facit super** qui autem.
|
||||
{% /DefinitionItem %}
|
||||
|
||||
{% DefinitionItem term="Assimilari eis scit" %}
|
||||
Ait Domine, non sum dignus ut intres sub tectum meum sed tantum dic verbo, et sanabitur puer meus. Nam et ego homo sum sub potestate constitutus, habens sub me milites, et dico huic Vade, et vadit et alii Veni, et venit et servo meo Fac hoc, et facit. Audiens autem Jesus miratus est, et sequentibus se dixit Amen dico vobis, non inveni tantam fidem in Israël. Dico autem vobis, quod multi ab oriente et occidente venient, et recumbent cum Abraham, et Isaac, et Jacob in regno cælorum filii autem regni ejicientur in tenebras exteriores ibi erit fletus et stridor *evangelium* dentium. Et dixit Jesus centurioni **quomodo medicis fratri tuo** Vade, et sicut credidisti, fiat tibi. Et sanatus *cum zebedo patre eorum* est puer in illa hora. Et cum venisset Jesus in domum Petri, vidit socrum ejus jacentem, et febricitantem et tetigit manum ejus, et dimisit eam febris, et surrexit, et ministrabat eis. Vespere autem facto, obtulerunt ei multos dæmonia habentes et ejiciebat spiritus verbo, et omnes male habentes curavit. Ut adimpleretur quod dictum est per Isaiam prophetam, dicentem Ipse infirmitates nostras accepit ægrotationes *malo amen si enim* nostras portavit. Videns autem Jesus turbas multas circum **quid autem empty** se, jussit ire trans fretum. Et accedens unus **operiemur hc** scriba, ait illi Magister, sequar te.
|
||||
{% /DefinitionItem %}
|
||||
|
||||
{% DefinitionItem term="Assimilari eis scit" %}
|
||||
**Potest duobus dominis servire aut enim** *unum odio habebit,* ~~et alterum diliget aut unum sustinebit~~, ***et alterum contemnet.*** **~~Non potestis Deo servire et mammonæ.~~** *~~Erat locustæ, et mel silvestre.~~* Tunc exibat ad eum Jerosolyma, et omnis Judæa, et omnis regio circa Jordanem; et baptizabantur ab eo in Jordane, confitentes peccata sua. Videns autem multos pharisæorum, et sadducæorum, venientes ad baptismum suum, dixit eis Progenies viperarum, quis demonstravit vobis fugere a ventura ira? Facite ergo fructum dignum pœnitentiæ. Et ne velitis dicere intra vos Patrem habemus Abraham. Dico enim vobis quoniam potens est Deus de lapidibus istis suscitare filios Abrahæ. Jam enim securis ad radicem arborum posita est. Omnis ergo arbor, quæ non facit fructum bonum, excidetur, et in ignem mittetur. Ego quidem baptizo vos in aqua in pœnitentiam qui autem post me venturus est, fortior me est, cujus non sum dignus calceamenta portare ipse vos baptizabit in Spiritu Sancto, et igni. Cujus ventilabrum in manu sua et [Fundata enim erat super petram and that omnis](https://example.com/videne/qui) permundabit aream suam et congregabit triticum [Erit si ergo lumen quod in te est](https://example.com/audi/hodiee) suum in horreum, paleas autem comburet igni inextinguibili. Tunc venit Jesus a Galilæa in Jordanem ad Joannem, ut baptizaretur ab eo. Joannes autem prohibebat eum, dicens Ego a te [Procedens inde](https://example.com/intest/nisiu) debeo baptizari, et tu venis ad me? Respondens autem Jesus, dixit ei Sine modo sic enim decet nos implere.
|
||||
{% /DefinitionItem %}
|
||||
{% /DefinitionList %}
|
||||
|
||||
### Super justos et injustos si
|
||||
|
||||
- Ab illis grex multorum porcorum.
|
||||
- Dico vobis quia ==tunc reliquit== omnis.
|
||||
- Sicut in cælo et in terra. Panem nostrum supersubstantialem da nobis hodie, et dimitte nobis debita nostra, sicut et nos dimittimus debitoribus nostris. Et ne nos inducas in tentationem, sed libera nos a malo. Amen. Si enim dimiseritis hominibus.
|
||||
- Unum capillum album facere, aut nigrum. Sit autem sermo vester, est, est non, non quod autem his abundantius est, a malo est. Audistis quia dictum est Oculum pro oculo, et dentem pro dente. Ego autem dico vobis, non.
|
||||
- Eo joannes autem prohibebat
|
||||
- Sine modo sic enim decet nos implere omnem justitiam. Tunc dimisit eum. Baptizatus autem Jesus, confestim ascendit de aqua, et ecce aperti sunt ei cæli et vidit Spiritum Dei descendentem sicut columbam, et venientem super se. Et ecce vox de cælis dicens.Sine modo sic enim decet nos implere omnem justitiam. Tunc dimisit eum. Baptizatus autem Jesus, confestim ascendit de aqua, et ecce aperti sunt ei cæli et vidit Spiritum Dei descendentem sicut columbam, et venientem super se. Et ecce vox de cælis dicens.
|
||||
- In manibus tollent te, ne forte offendas ad lapidem pedem tuum. Ait illi Jesus Rursum scriptum est Non tentabis Dominum Deum tuum. Iterum assumpsit eum diabolus in montem excelsum valde et ostendit ei omnia regna mundi, et gloriam eorum, et dixit ei Hæc omnia.
|
||||
- Qualis est hic, quia venti et mare obediunt ei? Et cum venisset trans fretum in regionem Gerasenorum, occurrerunt ei duo habentes dæmonia, de monumentis exeuntes, sævi nimis, ita ut nemo posset transire per viam illam. Et ecce clamaverunt, dicentes Quid nobis et tibi, Jesu.
|
||||
- Quia scabellum est pedum ejus neque per Jerosolymam, quia civitas est magni regis neque per caput tuum juraveris, quia non potes unum capillum album facere, aut nigrum. Sit autem sermo vester, est, est non, non quod autem his abundantius est, a malo est. Audistis quia dictum est Oculum.
|
||||
- Enim Pater vester, quia his omnibus indigetis. Quærite ergo primum regnum Dei, et justitiam ejus et hæc omnia adjicientur vobis. Nolite ergo solliciti esse in crastinum. Crastinus enim dies sollicitus erit sibi ipsi sufficit diei malitia sua. Nolite.
|
||||
- Quæ ducit ad perditionem and multi sunt which input per eam. Quam brought angusta and via arcta is Quæ ducit ad vitam pauci sunt and that inveniunt eam! Attendite has falsis Prophetis which veniunt your ad in vestimentis ovium, intrinsecus autem sunt.
|
||||
- A diabolo et cum jejunasset quadraginta [Ubi](https://example.com/erit/abierun) diebus.
|
||||
- Usque dum dicam tibi futurum est
|
||||
- Dignus ut intres sub tectum meum
|
||||
- Ei munera aurum thus *te autem* et myrrham *omnia ergo qucumque vultis* et responso.
|
||||
- Eum et circuibat jesus totam galilam *puerum* docens.
|
||||
- Qurebant animam pueri qui consurgens accepit
|
||||
- Carcerem mittaris amen **et ecce** dico tibi non exies inde.
|
||||
|
||||
{% table %}
|
||||
- Uxorem
|
||||
- Data filiis
|
||||
- Te
|
||||
- Prophetam dicentem
|
||||
---
|
||||
- 4917
|
||||
- 7167
|
||||
- 1356
|
||||
- 4441
|
||||
---
|
||||
- 3916
|
||||
- 3671
|
||||
- 3384
|
||||
- 1812
|
||||
---
|
||||
- 9396
|
||||
- 5812
|
||||
- 6643
|
||||
- 4856
|
||||
---
|
||||
- 3131
|
||||
- 8183
|
||||
- 8667
|
||||
- 6427
|
||||
{% /table %}
|
||||
|
||||
Fœnum agri, quod hodie est, et cras in clibanum mittitur, Deus sic vestit, quanto magis vos modicæ fidei? Nolite ergo solliciti esse, dicentes Quid manducabimus, aut quid bibemus, aut quo operiemur? hæc enim omnia gentes inquirunt. Scit enim Pater vester, quia his omnibus indigetis. Quærite ergo [Nostra sicut et nos](https://example.com/etmitt/prius) primum regnum Dei, et justitiam ejus et hæc omnia adjicientur vobis. Nolite ergo solliciti esse in crastinum. Crastinus enim dies sollicitus erit sibi ipsi sufficit diei malitia sua. Nolite judicare, ut not judicemini. In enim judicio judicaveritis quo, judicabimini and in four mensura Mensi fueritis, remetietur vobis. Quid autem empty festucam in oculo fratris tui and [Et tinea demolitur et ubi](https://example.com/aborien/unummem) trabem in oculo tuo non-empty? Aut quomodo *non non quod autem* Medicis fratri tuo Sine ejiciam festucam of oculo tuo and ecce trabs is in oculo tuo? Hypocrita, ejice primum [Docens eos sicut potestatem habens not](https://example.com/centuri/estau) trabem of oculo tuo and tunc videbis ejicere festucam of oculo fratris tui. Nolite dare sanctum canibus neque mittatis margaritas ante *intrabit in regnum* vestras Porcos do conculcent eas pedibus am strong, and your *sitis mali nostis bona* dirumpant.
|
||||
|
||||
> Est in cælis. Sic enim persecuti sunt prophetas, qui fuerunt ante vos. Vos estis sal terræ. **et** Quod si sal evanuerit, in quo salietur? ad nihilum valet ultra, nisi ut mittatur foras, et conculcetur ab hominibus. Vos estis lux mundi. Non potest civitas abscondi supra montem posita, neque accendunt lucernam, et ponunt eam sub modio, sed super candelabrum, ut luceat omnibus qui in domo sunt. Sic luceat lux vestra coram hominibus ut videant opera vestra bona, et glorificent Patrem vestrum, qui in cælis est. Nolite putare quoniam veni solvere legem aut prophetas non veni solvere, sed ==vester pater== adimplere. Amen quippe dico vobis, donec transeat cælum et terra, jota unum aut unus apex non præteribit a lege, donec omnia fiant. Qui ergo solverit unum de mandatis istis minimis, et docuerit sic homines, minimus vocabitur in regno cælorum qui autem fecerit et docuerit, hic magnus vocabitur in regno cælorum. Dico enim vobis, quia nisi abundaverit justitia vestra plus quam scribarum et pharisæorum, non intrabitis in regnum cælorum. Audistis quia dictum est antiquis Non occides qui autem occiderit, reus erit judicio. Ego autem dico vobis quia omnis qui irascitur fratri suo, reus erit judicio. Qui autem dixerit.
|
||||
>
|
||||
> Daemonia ejecimus and in nomine tuo virtutes multas fecimus? And tunc Confitebor illis numquam novi your Quia discedite was me who operamini iniquitatem. Omnis ergo that audit verba mea CEST and facit Others assimilabitur viro Sapienti which ædificavit domum suam petram supra, and down pluvia and venerunt flumina and flaverunt fan and irruerunt in domum illam, not cecidit Fundata enim erat super petram. And that omnis verba mea CEST audit and non facit Others similis erit viro stulto which ædificavit domum suam super arenam and down pluvia and venerunt flumina and flaverunt fan and irruerunt in domum illam and cecidit and leaking ruined illius magna. And factum is Jesus cum consummasset verba CEST, admirabantur turbæ **homines minimus vocabitur in** super doctrina jus. Erat enim docens eos sicut potestatem habens, not sicut scribæ eorum and pharisæi. Cum autem descendisset de monte, secutæ sunt eum turbæ multæ et ecce leprosus veniens, adorabat eum, dicens **et** Domine, si **no potest arbor bona** vis, potes me mundare. Et extendens Jesus manum.
|
||||
>
|
||||
> > Et accedens unus scriba, ait illi Magister, sequar te, quocumque ieris. Et dicit ei Jesus Vulpes foveas habent, et volucres cæli nidos; Filius autem hominis non habet ubi caput reclinet. Alius autem de discipulis ejus ait illi Domine, permitte me primum ire, et sepelire patrem meum. Jesus autem ait illi Sequere me, et dimitte mortuos sepelire mortuos suos. Et ascendente eo in naviculam, secuti sunt eum discipuli ejus et ecce motus magnus factus est in mari, ita ut navicula operiretur fluctibus ipse vero dormiebat. Et accesserunt ad eum discipuli `Dimiseritis` ejus, et suscitaverunt eum, dicentes Domine, salva nos perimus. Et dicit eis Jesus Quid timidi estis, modicæ fidei? Tunc surgens imperavit ventis, et mari, et facta est tranquillitas magna. Porro homines mirati sunt, dicentes Qualis est hic, quia venti et mare obediunt ei? Et cum venisset trans fretum in regionem Gerasenorum, occurrerunt ei duo habentes dæmonia, de monumentis exeuntes, sævi nimis, ita ut nemo posset transire per viam illam. Et ecce clamaverunt, dicentes Quid nobis et tibi, Jesu fili Dei? Venisti huc ante tempus torquere nos? Erat autem non longe ab illis grex multorum porcorum pascens. Dæmones autem rogabant eum, dicentes Si ejicis nos hinc.
|
||||
>
|
||||
> *— Jane Phillips*
|
||||
|
||||
#### Quid timidi estis modic fidei
|
||||
|
||||
1. Eleemosynam noli tuba canere.
|
||||
1. Vade in terram isral defuncti
|
||||
1. Facit fructum bonum [Te et in manibus tollent](https://example.com/fratres/estsi) excidetur et [Grotationes nostras portavit](https://example.com/abste/paci) in *quod* ignem.
|
||||
|
||||
1. Amant in synagogis et.
|
||||
|
||||
1. In terram isral audiens autem quod archelaus ==docuerit== regnaret.
|
||||
|
||||
- Faciat dextera tua `Venientes ad baptismum suum` ut sit.
|
||||
1. Venerunt flumina and flaverunt fan and irruerunt
|
||||
- Ut videantur ab hominibus **illa die in mihi** amen dico vobis.
|
||||
|
||||
1. Dignus ut intres sub tectum meum
|
||||
1. Ei munera aurum thus *te autem* et myrrham *omnia ergo qucumque vultis* et responso.
|
||||
- Eum et circuibat jesus totam galilam *puerum* docens.
|
||||
- Qurebant animam pueri qui consurgens accepit
|
||||
- Carcerem mittaris amen **et ecce** dico tibi non exies inde.
|
||||
1. Hominibus jejunans sed [Rex judorum vidimus](https://example.com/magister/exiba) patri.
|
||||
1. Pedum ejus **nephthalim** neque per **in oculo tuo nonempty** jerosolymam.
|
||||
|
||||
```go
|
||||
package main
|
||||
import "fmt"
|
||||
func main() {
|
||||
fmt.Println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
That facit voluntatem Patris mei, who is in Cælis, ipse intrabit in regnum Caelorum. Multi dicent illa die in mihi Domine, Domine, in nomine tuo prophetavimus nun, and in nomine tuo Daemonia ejecimus and in nomine tuo virtutes multas fecimus? And tunc Confitebor illis numquam novi your Quia discedite was me who operamini iniquitatem. Omnis ergo that audit verba mea CEST and facit Others assimilabitur viro Sapienti which ædificavit domum suam petram supra, and down pluvia and venerunt flumina and flaverunt fan and irruerunt in domum illam, not cecidit Fundata enim erat super petram. And that omnis verba mea CEST audit and non facit Others similis erit viro stulto which ædificavit domum suam super arenam and down pluvia and venerunt flumina and flaverunt fan and irruerunt in domum illam and cecidit and leaking ruined illius magna. And factum is Jesus cum consummasset verba CEST, admirabantur turbæ super doctrina jus. Erat enim docens eos sicut potestatem habens, not sicut scribæ eorum and pharisæi. Cum autem descendisset de monte, secutæ sunt eum turbæ multæ et ecce leprosus veniens, adorabat.
|
||||
|
||||
---
|
||||
|
||||
##### Est in clis sic enim persecuti
|
||||
|
||||
Ad baptismum suum, dixit eis Progenies viperarum, quis demonstravit vobis fugere a ventura ira? Facite ergo fructum dignum pœnitentiæ. Et ne velitis dicere intra vos Patrem habemus Abraham. Dico enim vobis quoniam potens est Deus de lapidibus istis suscitare filios Abrahæ. Jam enim securis ad radicem arborum posita est. Omnis ergo arbor, quæ non facit fructum bonum, excidetur, et in ignem mittetur. Ego quidem baptizo vos in aqua in pœnitentiam qui autem post me venturus est, fortior me est, cujus non sum dignus calceamenta portare ipse vos baptizabit in Spiritu Sancto, et igni. Cujus ventilabrum in manu sua et permundabit aream suam et congregabit triticum suum in horreum, paleas autem comburet igni inextinguibili. Tunc venit Jesus a Galilæa in Jordanem ad Joannem, ut baptizaretur ab eo. Joannes autem prohibebat eum, dicens Ego a te debeo baptizari, et tu venis ad me? Respondens autem Jesus, dixit ei Sine modo sic enim.
|
||||
|
||||
|
||||
|
||||
Et vidit Spiritum Dei descendentem sicut columbam, et venientem super se. Et ecce vox de cælis dicens Hic est Filius meus dilectus, in quo mihi complacui. Tunc Jesus ductus est in desertum a Spiritu, ut tentaretur a diabolo. Et cum jejunasset quadraginta diebus, et quadraginta noctibus, postea esuriit. Et accedens tentator dixit ei Si Filius Dei es, dic ut lapides isti panes fiant. Qui respondens dixit Scriptum est Non in solo pane vivit homo, sed in omni verbo, quod procedit de ore Dei. Tunc assumpsit eum diabolus in sanctam civitatem, et statuit eum super pinnaculum templi, et dixit ei Si Filius Dei es, mitte te deorsum. Scriptum est enim Quia angelis suis mandavit de te, et in manibus tollent te, ne forte offendas ad lapidem pedem tuum. Ait illi Jesus Rursum scriptum est Non tentabis Dominum Deum tuum. Iterum assumpsit eum diabolus in montem excelsum valde et ostendit ei omnia regna mundi, et.
|
||||
|
||||
###### Via spatiosa is qu ducit ad
|
||||
|
||||
In omni verbo, quod procedit de ore Dei. Tunc assumpsit eum diabolus in sanctam civitatem, et statuit eum super pinnaculum templi, et dixit ei Si Filius Dei es, mitte te deorsum. Scriptum est enim Quia angelis suis mandavit de te, et in manibus tollent te, ne forte offendas ad lapidem pedem tuum. Ait illi Jesus Rursum scriptum est Non tentabis Dominum Deum tuum. Iterum assumpsit eum diabolus in montem excelsum valde et ostendit ei omnia regna mundi, et gloriam eorum, et dixit ei Hæc omnia tibi dabo, si cadens adoraveris me. Tunc dicit ei Jesus Vade Satana Scriptum est enim Dominum Deum tuum *ad* adorabis, et illi soli servies. Tunc reliquit eum diabolus et ecce angeli accesserunt, et ministrabant ei. Cum autem audisset Jesus quod Joannes traditus esset, secessit in Galilæam et, relicta civitate Nazareth, venit, et habitavit in Capharnaum maritima, in finibus Zabulon et Nephthalim ut adimpleretur quod *quia his omnibus* dictum est per Isaiam prophetam Terra Zabulon, et terra Nephthalim, via maris trans Jordanem, alilæa gentium *ait illi* populus.
|
||||
|
||||
Congregant in horrea et Pater vester cælestis pascit illa. Nonne vos magis pluris estis illis? Quis autem vestrum cogitans potest adjicere ad staturam suam cubitum unum? Et de vestimento quid solliciti estis? Considerate lilia agri quomodo crescunt non laborant, neque nent. Dico autem vobis, quoniam nec Salomon in omni gloria sua *reddet tibi* coopertus est sicut unum ex istis. Si autem fœnum agri, quod hodie est, et cras in clibanum mittitur, Deus sic vestit, quanto magis vos modicæ fidei? Nolite ergo solliciti esse, dicentes Quid manducabimus, aut quid bibemus, aut quo operiemur? hæc enim omnia gentes inquirunt. Scit enim Pater vester, quia his omnibus indigetis. Quærite ergo primum regnum Dei, et justitiam ejus et hæc omnia adjicientur vobis. Nolite ergo solliciti esse in *est* crastinum. Crastinus enim dies sollicitus erit sibi ipsi sufficit diei malitia sua. Nolite judicare, ut not judicemini. In enim judicio judicaveritis quo, judicabimini and in four mensura *videantur ab* Mensi fueritis, remetietur vobis. Quid autem empty festucam in oculo.
|
||||
|
||||
Homines and your facite illis. CEST is enim lex and Prophetae. Per INTRATE angustam portam quia carried lata and via spatiosa is Quæ ducit ad perditionem and multi sunt which input per eam. Quam brought angusta and via arcta is Quæ ducit ad vitam pauci sunt and that inveniunt eam! Attendite has falsis Prophetis which veniunt your ad in vestimentis ovium, intrinsecus autem sunt lupi raptors has fructibus eorum cognoscetis eos. Numquid colligunt of Spinas uvas, aut Tribulis ficus? Sic omnis arbor bona fructus bonos facit mala autem arbor malos fructus facit. No potest arbor bona malos fructus facere neque arbor mala bonos fructus facere. Omnis arbor, Quae not facit fructum bonum, excidetur and in ignem mittetur. Igitur ex fructibus eorum cognoscetis eos. Non omnis who dicit mihi, Domine, Domine, intrabit in regnum Caelorum sed that facit voluntatem Patris mei, who is in Cælis, ipse intrabit in regnum Caelorum. Multi dicent illa die in mihi Domine, Domine, in nomine tuo prophetavimus **fratri suo reus** nun, and in nomine tuo Daemonia ejecimus and in nomine tuo virtutes multas fecimus? And tunc Confitebor illis numquam novi your Quia discedite was me who `Ipsi possidebunt terram. Beati qui` operamini iniquitatem. Omnis ergo **intrinsecus autem sunt lupi** that audit *vulpes **alteram et ei qui** foveas* verba mea CEST *judex tradat* and facit.
|
||||
|
||||
Vobis fugere a ventura ira? Facite ergo fructum dignum pœnitentiæ. Et ne velitis dicere intra vos Patrem habemus Abraham. Dico enim vobis quoniam potens est Deus de lapidibus istis suscitare filios Abrahæ. Jam enim securis ad radicem arborum posita est. Omnis ergo arbor, quæ non facit fructum bonum, excidetur, et in ignem mittetur. Ego quidem baptizo vos in aqua in pœnitentiam qui autem post me venturus est, fortior me est, cujus non sum dignus calceamenta portare ipse vos baptizabit in Spiritu Sancto, et igni. Cujus ventilabrum in manu sua et permundabit aream suam et congregabit triticum suum in horreum, paleas autem comburet igni inextinguibili. Tunc venit Jesus a Galilæa in Jordanem ad Joannem, ut baptizaretur ab eo. Joannes autem prohibebat eum, dicens Ego a te debeo baptizari, et tu venis ad me? Respondens autem Jesus, dixit ei Sine modo sic enim decet nos implere omnem justitiam. Tunc dimisit eum. Baptizatus autem Jesus, confestim ascendit de aqua.
|
||||
|
||||
Pater vester cælestis delicta vestra. Si autem non dimiseritis hominibus nec Pater vester dimittet vobis peccata vestra. Cum autem jejunatis, nolite fieri sicut hypocritæ, tristes. Exterminant enim facies suas, ut appareant hominibus jejunantes. Amen dico vobis, quia receperunt mercedem suam. Tu autem, cum jejunas, unge caput tuum, et faciem tuam lava, ne videaris hominibus jejunans, sed Patri tuo, qui est in abscondito et Pater tuus, qui videt in abscondito, reddet tibi. Nolite thesaurizare vobis thesauros in terra ubi ærugo, et tinea demolitur et ubi fures effodiunt, et furantur. Thesaurizate autem vobis thesauros in cælo, ubi neque ærugo, neque tinea demolitur, et ubi fures non effodiunt, nec furantur. Ubi enim est thesaurus tuus, ibi est et cor tuum. Lucerna corporis tui est oculus tuus. Si oculus tuus fuerit simplex, totum corpus tuum lucidum erit. Si autem oculus tuus fuerit nequam, totum corpus tuum tenebrosum erit. Si ergo lumen, quod in te est, tenebræ sunt ipsæ tenebræ quantæ erunt? Nemo potest duobus dominis servire aut enim unum odio habebit, et alterum diliget aut unum sustinebit, et alterum contemnet. Non potestis Deo servire et mammonæ. Ideo dico vobis, ne solliciti sitis animæ vestræ quid manducetis, neque corpori vestro quid.
|
||||
|
||||
Omnem infirmitatem in populo. Et abiit opinio ejus in totam Syriam, et obtulerunt ei omnes male habentes, variis languoribus, et tormentis comprehensos, et qui dæmonia habebant, et lunaticos, et paralyticos, et curavit eos et secutæ sunt eum turbæ multæ de Galilæa, et Decapoli, et de Jerosolymis, et de Judæa, et de trans Jordanem. Videns autem Jesus turbas, ascendit in montem, et cum sedisset, accesserunt ad eum discipuli ejus, et aperiens os suum docebat eos dicens Beati pauperes spiritu quoniam ipsorum est regnum cælorum. Beati mites quoniam ipsi possidebunt terram. Beati qui lugent quoniam ipsi consolabuntur. Beati qui esuriunt et sitiunt justitiam quoniam ipsi saturabuntur. Beati misericordes quoniam ipsi misericordiam consequentur. Beati mundo corde quoniam ipsi Deum videbunt. Beati pacifici quoniam filii Dei vocabuntur. Beati qui persecutionem patiuntur propter justitiam quoniam ipsorum est regnum cælorum. Beati estis cum maledixerint vobis, et persecuti vos fuerint, et dixerint omne malum adversum vos mentientes, propter.
|
||||
|
||||
Ejus nocte, et secessit in Ægyptum et erat ibi usque ad obitum Herodis ut adimpleretur quod dictum est a Domino per prophetam dicentem Ex Ægypto vocavi filium meum. Tunc Herodes videns quoniam illusus esset a magis, iratus est valde, et mittens occidit omnes pueros, qui erant in Bethlehem, et in omnibus finibus ejus, a bimatu et infra secundum tempus, quod exquisierat a magis. Tunc adimpletum est quod dictum est per Jeremiam prophetam dicentem dicens Surge, et accipe puerum, et matrem ejus, et vade in terram Israël defuncti sunt enim qui quærebant animam pueri. Qui consurgens, accepit puerum, et matrem ejus, et venit in terram Israël. Audiens autem quod Archelaus regnaret in Judæa pro Herode patre suo, timuit illo ire et admonitus in somnis, secessit in partes Galilææ. Et veniens habitavit in civitate quæ vocatur Nazareth ut adimpleretur quod dictum est per prophetas Quoniam Nazaræus vocabitur. In diebus autem illis venit Joannes Baptista prædicans in deserto Judææ, et dicens Pœnitentiam agite appropinquavit enim regnum cælorum. Hic est enim, qui dictus est per Isaiam prophetam dicentem Vox clamantis in deserto Parate viam Domini; rectas.
|
||||
|
||||
Ipsi consolabuntur. Beati qui esuriunt et sitiunt justitiam quoniam ipsi saturabuntur. Beati misericordes quoniam ipsi misericordiam consequentur. Beati mundo corde quoniam ipsi Deum videbunt. Beati pacifici quoniam filii Dei vocabuntur. Beati qui persecutionem patiuntur propter justitiam quoniam ipsorum est regnum cælorum. Beati estis cum maledixerint vobis, et persecuti vos fuerint, et dixerint omne malum adversum vos mentientes, propter me gaudete, et exsultate, quoniam merces vestra copiosa est in cælis. Sic enim persecuti sunt prophetas, qui fuerunt ante vos. Vos estis sal terræ. Quod si sal evanuerit, in quo salietur? ad nihilum valet ultra, nisi ut mittatur foras, et conculcetur ab hominibus. Vos estis lux ==four== mundi. Non potest civitas abscondi supra montem posita, neque accendunt lucernam, et ponunt eam sub modio, sed super candelabrum, ut luceat omnibus qui in domo sunt. Sic luceat lux vestra coram hominibus ut videant opera vestra bona, et glorificent Patrem vestrum, qui in cælis est. Nolite putare quoniam veni solvere legem aut prophetas non veni solvere, sed adimplere. Amen quippe dico vobis, donec transeat cælum et terra, jota unum aut unus apex non præteribit a lege, donec omnia fiant. Qui ergo solverit unum de mandatis istis minimis, et docuerit sic homines, minimus vocabitur.
|
||||
6
src/lib/content/base.ts
Normal file
6
src/lib/content/base.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { createReader } from '@keystatic/core/reader'
|
||||
import { cache } from 'react'
|
||||
import keystaticConfig from '~/keystatic.config'
|
||||
|
||||
export const reader = createReader(process.cwd(), keystaticConfig)
|
||||
export { cache }
|
||||
9
src/lib/content/meta/articles.ts
Normal file
9
src/lib/content/meta/articles.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { cache, reader } from '@/lib/content/base'
|
||||
|
||||
export const getArticles = cache(async () =>
|
||||
reader.collections['meta_posts'].all()
|
||||
)
|
||||
|
||||
export const getArticleBySlug = cache(async (slug: string) =>
|
||||
reader.collections['meta_posts'].read(slug)
|
||||
)
|
||||
7
src/lib/content/taxonomy/authors.ts
Normal file
7
src/lib/content/taxonomy/authors.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { cache, reader } from '@/lib/content/base'
|
||||
|
||||
export const getAuthors = cache(async () => reader.collections['authors'].all())
|
||||
|
||||
export const getAuthorBySlug = cache(async (slug: string) =>
|
||||
reader.collections['authors'].read(slug)
|
||||
)
|
||||
7
src/lib/content/taxonomy/tags.ts
Normal file
7
src/lib/content/taxonomy/tags.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { cache, reader } from '@/lib/content/base'
|
||||
|
||||
export const getTags = cache(async () => reader.collections['tags'].all())
|
||||
|
||||
export const getTagBySlug = cache(async (slug: string) =>
|
||||
reader.collections['tags'].read(slug)
|
||||
)
|
||||
12
src/lib/keystatic/collections/meta/article.ts
Normal file
12
src/lib/keystatic/collections/meta/article.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createArticleFields } from '@/lib/keystatic/fields/article'
|
||||
import { collection } from '@keystatic/core'
|
||||
|
||||
export const MetaPostsCollection = collection({
|
||||
label: 'Meta – Posts',
|
||||
slugField: 'title',
|
||||
path: 'src/content/the-metatron/*',
|
||||
format: { contentField: 'content' },
|
||||
schema: {
|
||||
...createArticleFields('the-metatron'),
|
||||
},
|
||||
})
|
||||
26
src/lib/keystatic/collections/taxonomy/authors.ts
Normal file
26
src/lib/keystatic/collections/taxonomy/authors.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { collection, fields } from '@keystatic/core'
|
||||
|
||||
export const AuthorsCollection = collection({
|
||||
label: 'Authors',
|
||||
slugField: 'name',
|
||||
path: 'src/content/taxonomy/authors/*',
|
||||
format: { data: 'json' },
|
||||
schema: {
|
||||
name: fields.slug({ name: { label: 'Name' } }),
|
||||
avatar: fields.image({
|
||||
label: 'Avatar',
|
||||
directory: 'public/images/authors',
|
||||
publicPath: '/images/authors',
|
||||
}),
|
||||
description: fields.text({ label: 'Description', multiline: true }),
|
||||
test: fields.markdoc({
|
||||
label: 'Test',
|
||||
options: {
|
||||
image: {
|
||||
directory: 'public/images/authors',
|
||||
publicPath: '/images/authors',
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
})
|
||||
13
src/lib/keystatic/collections/taxonomy/tags.ts
Normal file
13
src/lib/keystatic/collections/taxonomy/tags.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { collection, fields } from '@keystatic/core'
|
||||
|
||||
export const TagsCollection = collection({
|
||||
label: 'Tags',
|
||||
slugField: 'name',
|
||||
path: 'src/content/taxonomy/tags/*',
|
||||
format: { data: 'json' },
|
||||
schema: {
|
||||
name: fields.slug({ name: { label: 'Name' } }),
|
||||
icon: fields.image({ label: 'Icon' }),
|
||||
description: fields.text({ label: 'Description', multiline: true }),
|
||||
},
|
||||
})
|
||||
19
src/lib/keystatic/components/DefinitionList.ts
Normal file
19
src/lib/keystatic/components/DefinitionList.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { fileTextIcon } from '@keystar/ui/icon/icons/fileTextIcon'
|
||||
import { fields } from '@keystatic/core'
|
||||
import { repeating, wrapper } from '@keystatic/core/content-components'
|
||||
|
||||
export const definitionListComponents = {
|
||||
DefinitionList: repeating({
|
||||
label: 'Definition List',
|
||||
icon: fileTextIcon,
|
||||
children: ['DefinitionItem'],
|
||||
schema: {},
|
||||
}),
|
||||
DefinitionItem: wrapper({
|
||||
label: 'Definition Item',
|
||||
forSpecificLocations: true,
|
||||
schema: {
|
||||
term: fields.text({ label: 'Term' }),
|
||||
},
|
||||
}),
|
||||
}
|
||||
18
src/lib/keystatic/fields/article.ts
Normal file
18
src/lib/keystatic/fields/article.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { createContentField } from '@/lib/keystatic/fields/content'
|
||||
import { fields } from '@keystatic/core'
|
||||
import { createPublishingField } from './publishing'
|
||||
import { createSeoField } from './seo'
|
||||
|
||||
export const createArticleFields = (imageSubfolder: string) => ({
|
||||
title: fields.slug({ name: { label: 'Title' } }),
|
||||
summary: fields.text({ label: 'Summary', multiline: true }),
|
||||
cover: fields.image({
|
||||
label: 'Cover Image',
|
||||
directory: `public/images/covers/${imageSubfolder}`,
|
||||
publicPath: `/images/covers/${imageSubfolder}`,
|
||||
}),
|
||||
coverAlt: fields.text({ label: 'Cover Alt Text' }),
|
||||
publishing: createPublishingField(),
|
||||
seo: createSeoField(),
|
||||
content: createContentField(imageSubfolder),
|
||||
})
|
||||
16
src/lib/keystatic/fields/content.ts
Normal file
16
src/lib/keystatic/fields/content.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { definitionListComponents } from '@/lib/keystatic/components/DefinitionList'
|
||||
import { fields } from '@keystatic/core'
|
||||
|
||||
export const createContentField = (imageSubfolder: string) =>
|
||||
fields.markdoc({
|
||||
label: 'Content',
|
||||
options: {
|
||||
image: {
|
||||
directory: `public/images/content/${imageSubfolder}`,
|
||||
publicPath: `/images/content/${imageSubfolder}`,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
...definitionListComponents,
|
||||
},
|
||||
})
|
||||
41
src/lib/keystatic/fields/publishing.ts
Normal file
41
src/lib/keystatic/fields/publishing.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { ComponentSchema } from '@keystatic/core'
|
||||
import { fields } from '@keystatic/core'
|
||||
|
||||
export const createPublishingField = (): ComponentSchema =>
|
||||
fields.object(
|
||||
{
|
||||
publishDate: fields.date({ label: 'Publish Date' }),
|
||||
editDate: fields.date({ label: 'Edit Date' }),
|
||||
status: fields.select({
|
||||
label: 'Status',
|
||||
options: [
|
||||
{ label: 'Draft', value: 'draft' },
|
||||
{ label: 'Published', value: 'published' },
|
||||
{ label: 'Archived', value: 'archived' },
|
||||
],
|
||||
defaultValue: 'draft',
|
||||
}),
|
||||
featured: fields.checkbox({
|
||||
label: 'Featured',
|
||||
description: 'Show on Homepage',
|
||||
}),
|
||||
tags: fields.array(
|
||||
fields.relationship({
|
||||
label: 'Tags',
|
||||
collection: 'tags',
|
||||
}),
|
||||
{
|
||||
label: 'Tags',
|
||||
itemLabel: (props) => props.value || 'Select Tag',
|
||||
}
|
||||
),
|
||||
author: fields.relationship({
|
||||
label: 'Author',
|
||||
collection: 'authors',
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: 'Publishing',
|
||||
layout: [4, 4, 4, 12, 12, 12],
|
||||
}
|
||||
)
|
||||
26
src/lib/keystatic/fields/seo.ts
Normal file
26
src/lib/keystatic/fields/seo.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { ComponentSchema } from '@keystatic/core'
|
||||
import { fields } from '@keystatic/core'
|
||||
export const createSeoField = (): ComponentSchema =>
|
||||
fields.object(
|
||||
{
|
||||
metaTitle: fields.text({
|
||||
label: 'Meta Title',
|
||||
validation: { length: { max: 60 } },
|
||||
}),
|
||||
metaDescription: fields.text({
|
||||
label: 'Meta Description',
|
||||
multiline: true,
|
||||
validation: { length: { max: 160 } },
|
||||
}),
|
||||
keywords: fields.array(fields.text({ label: 'Keyword' }), {
|
||||
label: 'SEO Keywords',
|
||||
}),
|
||||
noIndex: fields.checkbox({
|
||||
label: 'No Index',
|
||||
description: 'Prevent search engines from indexing',
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: 'SEO Settings',
|
||||
}
|
||||
)
|
||||
13
src/lib/markdoc/tags.ts
Normal file
13
src/lib/markdoc/tags.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Config } from '@markdoc/markdoc'
|
||||
|
||||
export const tags: Config['tags'] = {
|
||||
DefinitionList: {
|
||||
render: 'DefinitionList', // String
|
||||
},
|
||||
DefinitionItem: {
|
||||
render: 'DefinitionItem', // String
|
||||
attributes: {
|
||||
term: { type: String, required: true },
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -1,330 +0,0 @@
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: var(--spacing-snug) 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="time"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="week"],
|
||||
input[type="month"] {
|
||||
width: 100%;
|
||||
margin: var(--spacing-snug) 0;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-md);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active,
|
||||
&:focus-within {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical; /* only allow vertical resizing */
|
||||
|
||||
width: 100%;
|
||||
min-height: var(--size-32);
|
||||
margin: var(--spacing-snug) 0;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-md);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
legend {
|
||||
width: 100%;
|
||||
margin: var(--spacing-snug) 0;
|
||||
padding: var(--spacing-snug) var(--spacing-comfortable);
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
color: var(--color-surface-base);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: var(--size-6);
|
||||
height: var(--size-6);
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-primary);
|
||||
|
||||
&:checked {
|
||||
&::after {
|
||||
content: "✔";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: var(--size-6);
|
||||
height: var(--size-6);
|
||||
border-radius: 50%;
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-primary);
|
||||
|
||||
&:checked {
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: var(--size-2);
|
||||
height: var(--size-2);
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
cursor: pointer;
|
||||
|
||||
width: var(--size-10);
|
||||
height: var(--size-10);
|
||||
padding: 0;
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: var(--size-0);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"],
|
||||
input[type="image"]{
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: transparent;
|
||||
|
||||
&::file-selector-button {
|
||||
cursor: pointer;
|
||||
|
||||
margin-right: var(--spacing-snug);
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
border: none;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
cursor: pointer;
|
||||
|
||||
width: 100%;
|
||||
height: var(--size-2);
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-secondary);
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
cursor: pointer;
|
||||
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: none;
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
cursor: pointer;
|
||||
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-text-primary);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
padding: var(--spacing-snug) var(--spacing-comfortable);
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-surface-base);
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
padding-right: calc(var(--spacing-snug) + 1.5rem);
|
||||
border: none;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-md);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--spacing-snug) center;
|
||||
background-size: 1rem;
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
color: var(--color-surface-base);
|
||||
background-color: var(--color-text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& optgroup {
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
& option {
|
||||
font-weight: var(--typo-weight-regular);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
.content {
|
||||
max-width: clamp(60ch, 90vw, 90ch);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-comfortable);
|
||||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
from {
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
to {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up-ver-top {
|
||||
0% {
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@@ -1,156 +0,0 @@
|
||||
em,
|
||||
i {
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-surface-base);
|
||||
letter-spacing: var(--typo-spacing-relaxed);
|
||||
|
||||
background: var(--color-primary)
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: var(--typo-weight-black);
|
||||
letter-spacing: var(--typo-spacing-loose);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
text-underline-offset: 2px;
|
||||
|
||||
transition: color 0.5s ease-in-out, background 0.5s ease-in-out;
|
||||
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--color-surface-base);
|
||||
text-decoration: none;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&:visited,
|
||||
&:active {
|
||||
color: var(--color-primary-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.1em 0.3em;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1em 0.3em;
|
||||
border: 1px solid var(--color-text-primary);
|
||||
border-radius: 2px;
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
samp {
|
||||
padding: 0.1em 0.3em;
|
||||
border-left: var(--size-1) solid var(--color-text-tertiary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background: var(--color-surface-elevated-2);
|
||||
}
|
||||
|
||||
var {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1em 0.2em;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-surface-base);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 0.5625em;
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
del,
|
||||
s {
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: var(--size-1);
|
||||
}
|
||||
|
||||
ins {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-primary);
|
||||
text-decoration-thickness: var(--size-1);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
text-underline-offset: var(--size-1);
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-weight: var(--typo-weight-bold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
cite {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
font-style: normal;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
|
||||
&::before {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "«";
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
@keyframes line-up {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
51% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale3d(1, 0.045, 1);
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
ul {
|
||||
padding-left: var(--element-list-indent-l1);
|
||||
|
||||
& li {
|
||||
padding-left: var(--spacing-snug);
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ul-symbol-l1);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-left: var(--element-list-indent-l2);
|
||||
|
||||
& li::marker {
|
||||
content: var(--element-ul-symbol-l2);
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-left: var(--element-list-indent-l3);
|
||||
|
||||
& li::marker {
|
||||
content: var(--element-ul-symbol-l3);
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-left: var(--element-list-indent-l4);
|
||||
|
||||
& li::marker {
|
||||
content: var(--element-ul-symbol-l4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-counter-l1;
|
||||
padding-left: var(--element-list-indent-l1);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l1;
|
||||
padding-left: var(--spacing-comfortable);
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l1) counter(ol-counter-l1, var(--element-ol-style-l1)) var(--element-ol-suffix-l1);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
& ol {
|
||||
counter-reset: ol-counter-l2;
|
||||
padding-left: var(--element-list-indent-l2);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l2;
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l2) counter(ol-counter-l2, var(--element-ol-style-l2)) var(--element-ol-suffix-l2);
|
||||
}
|
||||
}
|
||||
|
||||
& ol {
|
||||
counter-reset: ol-counter-l3;
|
||||
padding-left: var(--element-list-indent-l3);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l3;
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l3) counter(ol-counter-l3, var(--element-ol-style-l3)) var(--element-ol-suffix-l3);
|
||||
}
|
||||
}
|
||||
|
||||
& ol {
|
||||
counter-reset: ol-counter-l4;
|
||||
padding-left: var(--element-list-indent-l4);
|
||||
|
||||
& li {
|
||||
counter-increment: ol-counter-l4;
|
||||
|
||||
&::marker {
|
||||
content: var(--element-ol-prefix-l4) counter(ol-counter-l4, var(--element-ol-style-l4)) var(--element-ol-suffix-l4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
padding: var(--spacing-snug);
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.5385;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 var(--spacing-snug) 0;
|
||||
padding: var(--spacing-snug);
|
||||
|
||||
& p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
width: 100%;
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
border: var(--size-2) solid var(--color-text-primary);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
|
||||
& thead th,
|
||||
& th {
|
||||
font-family: var(--font-display), serif;
|
||||
font-weight: var(--typo-weight-black);
|
||||
color: var(--color-surface-base);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
& tbody td,
|
||||
& td {
|
||||
padding: var(--spacing-snug) var(--spacing-cozy);
|
||||
border: var(--size-1) solid var(--color-text-primary);
|
||||
text-align: center;
|
||||
background: var(--color-surface-base)
|
||||
}
|
||||
|
||||
& td:first-child,
|
||||
& th:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& tfoot td {
|
||||
padding: var(--spacing-snug) var(--spacing-cozy);
|
||||
border: var(--size-px) solid var(--color-text-primary);
|
||||
|
||||
font-weight: var(--typo-weight-bold);
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
@@ -1,254 +0,0 @@
|
||||
html {
|
||||
font-size: var(--typo-size-base);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body), sans-serif;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-weight: var(--typo-weight-regular);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: var(--typo-leading-comfortable);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background-color: var(--color-surface-base);
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: var(--font-display), serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--spacing-cozy);
|
||||
padding-bottom: var(--spacing-snug);
|
||||
border-bottom: var(--size-4) solid var(--color-text-primary);
|
||||
|
||||
font-size: var(--typo-size-6xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.125;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0137em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: var(--spacing-relaxed) 0 var(--spacing-cozy) 0;
|
||||
padding-left: var(--spacing-cozy);
|
||||
border-left: var(--size-4) solid var(--color-text-primary);
|
||||
|
||||
font-size: var(--typo-size-5xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.1765;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.0096em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: var(--spacing-comfortable) 0 var(--spacing-cozy) 0;
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
|
||||
font-size: var(--typo-size-4xl);
|
||||
font-weight: var(--typo-weight-extrabold);
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.004em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: var(--spacing-comfortable) 0 var(--spacing-snug) 0;
|
||||
padding: var(--spacing-tight) var(--spacing-snug);
|
||||
|
||||
font-size: var(--typo-size-3xl);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
line-height: 1.125;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.0025em;
|
||||
|
||||
background: var(--color-text-primary);
|
||||
|
||||
}
|
||||
|
||||
h5 {
|
||||
position: relative;
|
||||
|
||||
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
|
||||
border-top: var(--size-2) solid var(--color-text-secondary);
|
||||
border-bottom: var(--size-2) solid var(--color-text-secondary);
|
||||
|
||||
font-size: var(--typo-size-2xl);
|
||||
font-weight: var(--typo-weight-extrabold);
|
||||
line-height: 1.28;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
|
||||
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-black);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
/* &::after {
|
||||
content: "▼";
|
||||
display: block;
|
||||
font-size: 1.25em;
|
||||
} */
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--spacing-cozy) 0;
|
||||
font-size: var(--typo-size-md);
|
||||
line-height: var(--typo-leading-normal);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
h1 + p {
|
||||
font-size: var(--typo-size-xl);
|
||||
font-weight: var(--typo-weight-bold);
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.022em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
|
||||
border-left: var(--size-4) solid var(--color-text-tertiary);
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
& p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
padding: var(--spacing-comfortable);
|
||||
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: var(--typo-size-sm);
|
||||
line-height: 1.5385;
|
||||
color: var(--color-surface-base);
|
||||
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
height: var(--size-4);
|
||||
margin: var(--spacing-relaxed) 0;
|
||||
border: none;
|
||||
|
||||
background-color: var(--color-text-primary);
|
||||
|
||||
&::after {
|
||||
content: "▼";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
padding: 0 var(--spacing-snug);
|
||||
|
||||
font-size: var(--typo-size-4xl);
|
||||
line-height: var(--typo-leading-compressed);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
background-color: var(--color-surface-base);
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(--spacing-relaxed) 0;
|
||||
padding: var(--spacing-comfortable) 0;
|
||||
border-top: var(--size-3) solid var(--color-text-primary);
|
||||
border-bottom: var(--size-3) solid var(--color-text-primary);
|
||||
|
||||
& blockquote {
|
||||
position: relative;
|
||||
|
||||
margin: var(--spacing-comfortable) 0;
|
||||
padding: var(--spacing-snug) 0 var(--spacing-comfortable) var(--spacing-comfortable);
|
||||
border: none;
|
||||
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: var(--typo-weight-extrabold);
|
||||
line-height: var(--typo-leading-loose);
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
bottom: calc(var(--size-1)*-1);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: var(--size-16);
|
||||
height: var(--size-2);
|
||||
|
||||
background: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
margin-top: var(--spacing-snug);
|
||||
|
||||
font-size: var(--typo-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.074em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
details {
|
||||
overflow: hidden;
|
||||
|
||||
& summary {
|
||||
padding: var(--spacing-snug) 0;
|
||||
|
||||
font-family: var(--font-display), serif;
|
||||
font-size: var(--typo-size-lg);
|
||||
font-weight: var(--typo-weight-black);
|
||||
line-height: 1.5385;
|
||||
color: var(--color-surface-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.035em;
|
||||
|
||||
background: var(--color-text-secondary);
|
||||
|
||||
&::marker {
|
||||
content: "🞃";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-family: var(--font-body), sans-serif
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
summary {
|
||||
&::marker {
|
||||
content: "🞁";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,293 +0,0 @@
|
||||
:root {
|
||||
/* === TYPOGRAPHY === */
|
||||
|
||||
/* == Font Families == */
|
||||
--font-display: 'Geist Variable';
|
||||
--font-body: 'Iosevka Aile';
|
||||
--font-mono: 'Iosevka';
|
||||
|
||||
/* == Font Sizes == */
|
||||
--typo-size-base: 16px;
|
||||
--typo-size-6xl: 4em; /* 64px */
|
||||
--typo-size-5xl: 3.1875em; /* 51px */
|
||||
--typo-size-4xl: 2.5em; /* 40px */
|
||||
--typo-size-3xl: 2em; /* 32px */
|
||||
--typo-size-2xl: 1.5625em; /* 25px */
|
||||
--typo-size-xl: 1.25em; /* 20px */
|
||||
--typo-size-lg: 1.125em; /* 18px */
|
||||
--typo-size-md: 1em; /* 16px */
|
||||
--typo-size-sm: 0.875em; /* 14px */
|
||||
--typo-size-xs: 0.8125em; /* 13px */
|
||||
--typo-size-2xs: 0.625em; /* 10px */
|
||||
|
||||
/* == Line Height == */
|
||||
--typo-leading-compressed: 1.0; /* 1.0 - very tight */
|
||||
--typo-leading-tight: 1.125; /* 1.125 - tight */
|
||||
--typo-leading-snug: 1.25; /* 1.25 - snug */
|
||||
--typo-leading-cozy: 1.375; /* 1.375 - cozy */
|
||||
--typo-leading-normal: 1.5; /* 1.5 - normal */
|
||||
--typo-leading-relaxed: 1.625; /* 1.625 - relaxed */
|
||||
--typo-leading-comfortable: 1.75; /* 1.75 - comfortable */
|
||||
--typo-leading-loose: 1.875; /* 1.875 - loose */
|
||||
--typo-leading-spacious: 2.0; /* 2.0 - very loose */
|
||||
|
||||
/* == Letter Spacing == */
|
||||
--typo-spacing-tightest: -0.05em; /* -0.05em - very tight */
|
||||
--typo-spacing-tighter: -0.025em; /* -0.025em - tight */
|
||||
--typo-spacing-tight: -0.0125em; /* -0.0125em - slightly tight */
|
||||
--typo-spacing-normal: 0em; /* 0 - normal */
|
||||
--typo-spacing-relaxed: 0.025em; /* 0.025em - slightly loose */
|
||||
--typo-spacing-comfortable: 0.05em; /* 0.05em - comfortable */
|
||||
--typo-spacing-loose: 0.1em; /* 0.1em - loose */
|
||||
--typo-spacing-looser: 0.15em; /* 0.15em - very loose */
|
||||
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
|
||||
|
||||
/* == Font Weight == */
|
||||
--typo-weight-thin: 100;
|
||||
--typo-weight-extralight: 200;
|
||||
--typo-weight-light: 300;
|
||||
--typo-weight-regular: 400;
|
||||
--typo-weight-medium: 500;
|
||||
--typo-weight-semibold: 600;
|
||||
--typo-weight-bold: 700;
|
||||
--typo-weight-extrabold: 800;
|
||||
--typo-weight-black: 900;
|
||||
|
||||
/* === SPACING === */
|
||||
|
||||
/* == Base Size Units == */
|
||||
--size-0: 0;
|
||||
--size-px: 1px;
|
||||
--size-05: 0.125rem; /* 2px */
|
||||
--size-1: 0.25rem; /* 4px */
|
||||
--size-2: 0.5rem; /* 8px */
|
||||
--size-3: 0.75rem; /* 12px */
|
||||
--size-4: 1rem; /* 16px */
|
||||
--size-5: 1.25rem; /* 20px */
|
||||
--size-6: 1.5rem; /* 24px */
|
||||
--size-8: 2rem; /* 32px */
|
||||
--size-10: 2.5rem; /* 40px */
|
||||
--size-12: 3rem; /* 48px */
|
||||
--size-16: 4rem; /* 64px */
|
||||
--size-20: 5rem; /* 80px */
|
||||
--size-24: 6rem; /* 96px */
|
||||
--size-32: 8rem; /* 128px */
|
||||
--size-40: 10rem; /* 160px */
|
||||
--size-48: 12rem; /* 192px */
|
||||
--size-64: 16rem; /* 256px */
|
||||
--size-80: 20rem; /* 320px */
|
||||
--size-96: 24rem; /* 384px */
|
||||
--size-128: 32rem; /* 512px */
|
||||
--size-160: 40rem; /* 640px */
|
||||
--size-192: 48rem; /* 768px */
|
||||
--size-256: 64rem; /* 1024px */
|
||||
--size-320: 80rem; /* 1280px */
|
||||
--size-384: 96rem; /* 1536px */
|
||||
--size-360: 90rem; /* 1440px */
|
||||
--size-400: 100rem; /* 1600px */
|
||||
--size-480: 120rem; /* 1920px */
|
||||
|
||||
/* == Semantic Spacing == */
|
||||
--spacing-none: var(--size-0);
|
||||
--spacing-hairline: var(--size-px);
|
||||
--spacing-tight: var(--size-1);
|
||||
--spacing-snug: var(--size-2);
|
||||
--spacing-cozy: var(--size-4);
|
||||
--spacing-comfortable: var(--size-6);
|
||||
--spacing-relaxed: var(--size-8);
|
||||
--spacing-spacious: var(--size-12);
|
||||
--spacing-generous: var(--size-16);
|
||||
--spacing-luxurious: var(--size-24);
|
||||
--spacing-expansive: var(--size-32);
|
||||
|
||||
/* === LIST STYLING === */
|
||||
|
||||
/* == List Indentation Levels == */
|
||||
--element-list-indent-l1: var(--spacing-cozy);
|
||||
--element-list-indent-l2: var(--spacing-cozy);
|
||||
--element-list-indent-l3: var(--spacing-cozy);
|
||||
--element-list-indent-l4: var(--spacing-cozy);
|
||||
|
||||
/* == Unordered List Symbols == */
|
||||
--element-ul-symbol-l1: '⯃';
|
||||
--element-ul-symbol-l2: '⯁';
|
||||
--element-ul-symbol-l3: '⯆';
|
||||
--element-ul-symbol-l4: '⯀';
|
||||
|
||||
/* == Ordered List Styling == */
|
||||
--element-ol-prefix-l1: '';
|
||||
--element-ol-style-l1: decimal;
|
||||
--element-ol-suffix-l1: '.)';
|
||||
--element-ol-prefix-l2: '';
|
||||
--element-ol-style-l2: lower-alpha;
|
||||
--element-ol-suffix-l2: '.)';
|
||||
--element-ol-prefix-l3: '';
|
||||
--element-ol-style-l3: decimal-leading-zero;
|
||||
--element-ol-suffix-l3: '';
|
||||
--element-ol-prefix-l4: '';
|
||||
--element-ol-style-l4: lower-greek;
|
||||
--element-ol-suffix-l4: '.)';
|
||||
|
||||
/* === COLORS === */
|
||||
|
||||
/* == Default Palette == */
|
||||
|
||||
/* Blacks, Grays & Off-Whites */
|
||||
--color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg); /* Woodsmoke: #0B0C10 */
|
||||
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg); /* Shark: #1A1A1D */
|
||||
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg); /* Shark2: #222629 */
|
||||
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg); /* Bright Gray: #313745 */
|
||||
--color-palette-slate-gray: oklch(33.3% 0 89.876deg); /* Mineshaft: #363636 */
|
||||
--color-palette-gunmetal: oklch(41.1% 0.008 248.035deg); /* Abbey2: #474B4F */
|
||||
--color-palette-carbon: oklch(39.8% 0 89.876deg); /* Tundora: #474747 */
|
||||
--color-palette-steel-gray: oklch(42.5% 0.003 286.26deg); /* Abbey: #4e4e50 */
|
||||
--color-palette-dusty-black: oklch(43.7% 0.013 17.672deg); /* DonJuan: #594F4F */
|
||||
--color-palette-stone: oklch(64.3% 0.005 91.471deg); /* Natural Gray: #8E8D8A */
|
||||
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg); /* Nevada: #6B6E70 */
|
||||
--color-palette-silver: oklch(72.9% 0.001 17.185deg); /* Silver Chalice: #A8A7A7 */
|
||||
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg); /* Silversand: #C5C6C7 */
|
||||
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg); /* Westar: #E3E2DF */
|
||||
--color-palette-pale-stone: oklch(89.7% 0.004 106.481deg); /* Quillgray: #DDDDDA */
|
||||
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg); /* Gallery: #ECECEC */
|
||||
--color-palette-off-white: oklch(98.1% 0.003 247.858deg); /* Catskill White: #F7F9fB */
|
||||
--color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg); /* Cat Squeeze: #F7FAFC */
|
||||
--color-palette-smoky-mauve: oklch(50% 0.054 308.622deg); /* Smoky: #6C5B7B */
|
||||
|
||||
/* Reds */
|
||||
--color-palette-oxblood: oklch(30.5% 0.122 12.109deg); /* Bordeaux: #5D001E */
|
||||
--color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg); /* Crown of Thorns: #6F2232 */
|
||||
--color-palette-crimson: oklch(43.2% 0.169 7.14deg); /* Monarch: #950740 */
|
||||
--color-palette-cherry-red: oklch(45.4% 0.168 1.454deg); /* Disco: #9A1750 */
|
||||
--color-palette-ruby: oklch(52.1% 0.206 15.782deg); /* Shiraz: #C3073F */
|
||||
--color-palette-red-clay: oklch(65.1% 0.178 27.507deg); /* Burnt Sienna: #E85A4F */
|
||||
--color-palette-lava: oklch(63.6% 0.193 17.075deg); /* Mandy: #E84A5F */
|
||||
--color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg); /* Radical Red: #FE4365 */
|
||||
|
||||
/* Pinks & Magentas */
|
||||
--color-palette-heliotrope: oklch(68.3% 0.217 353.666deg); /* Heliotrope: #F74FA3 */
|
||||
--color-palette-hot-pink: oklch(65.4% 0.2 6.69deg); /* French Rose: #EE4C7C */
|
||||
--color-palette-cerise: oklch(60.7% 0.23 18.554deg); /* Amaranth: #EC2049 */
|
||||
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg); /* Hibiscus: #A7226E */
|
||||
--color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg); /* Turkish Rose: #C06C84 */
|
||||
--color-palette-berry: oklch(60.8% 0.159 2.621deg); /* Mulberry: #CC527A */
|
||||
--color-palette-petal-pink: oklch(80.5% 0.063 1.992deg); /* Rose Fog: #E3AFBC */
|
||||
--color-palette-coral-pink: oklch(71.2% 0.162 15.607deg); /* Froly: #F67280 */
|
||||
--color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg); /* Sweet Pink: #FC9D9A */
|
||||
|
||||
/* Oranges & Browns */
|
||||
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg); /* Flamingo: #F26B38 */
|
||||
--color-palette-terracotta: oklch(71.3% 0.131 27.646deg); /* Apricot: #E98074 */
|
||||
--color-palette-tan: oklch(82.7% 0.047 76.752deg); /* Akaroa: #D8C3A5 */
|
||||
--color-palette-peach: oklch(88.5% 0.072 57.746deg); /* Flesh: #FECEAB */
|
||||
--color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg); /* Rosebud: #F8B195 */
|
||||
--color-palette-light-apricot: oklch(87.8% 0.066 57.778deg); /* Vivid Tangerine: #F9CDAD */
|
||||
--color-palette-bone-white: oklch(92.7% 0.015 94.206deg); /* Satin Linen: #EAE7DC */
|
||||
|
||||
/* Yellows */
|
||||
--color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg); /* Ripe Lemon: #F2C51D */
|
||||
--color-palette-bright-canary: oklch(89% 0.157 97.726deg); /* Energy Yellow: #F7DB4F */
|
||||
--color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg); /* Mimosa: #E5FCAD */
|
||||
|
||||
/* Greens */
|
||||
--color-palette-forest-green: oklch(58.1% 0.127 130.001deg); /* Crete: #61892F */
|
||||
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg); /* Atlantis: #86C232 */
|
||||
--color-palette-electric-green: oklch(87.7% 0.227 137.099deg); /* Screaming Green: #87f74f */
|
||||
--color-palette-sage: oklch(75.1% 0.056 144.175deg); /* Norway: #87f74f */
|
||||
--color-palette-mint-green: oklch(84.8% 0.098 151.333deg); /* Chinook: #9de0ad */
|
||||
--color-palette-olive-drab: oklch(82.5% 0.042 107.285deg); /* Olive Drap: #C8C8A9 */
|
||||
--color-palette-seafoam: oklch(71.6% 0.056 165.214deg); /* Acapulco: #83AF9B */
|
||||
|
||||
/* Blues & Teals */
|
||||
--color-palette-dark-navy: oklch(27.3% 0.024 253.693deg); /* Ebony Clay: #1F2833 */
|
||||
--color-palette-deep-teal: oklch(32.4% 0.018 225.132deg); /* Outer Space: #2A363B */
|
||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg); /* Ming: #355C7D */
|
||||
--color-palette-sky-blue: oklch(76.3% 0.129 233.891deg); /* Picton Blue: #4FBFF7 */
|
||||
--color-palette-slate-blue: oklch(55.1% 0.043 210.602deg); /* Cutty Sark: #547980 */
|
||||
--color-palette-turquoise: oklch(61.5% 0.091 198.865deg); /* Lochinvar: #2F9599 */
|
||||
--color-palette-aqua: oklch(68.6% 0.095 190.758deg); /* Keppel: #45ADA8 */
|
||||
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg); /* Aquamarine: #66FCF1 */
|
||||
--color-palette-powder-blue: oklch(88.2% 0.062 187.276deg); /* Powder Blue: #a9e6df */
|
||||
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg); /* Twilight Blue: #feffff */
|
||||
|
||||
/* == Semantic Colors == */
|
||||
|
||||
/* Primary Colors */
|
||||
--color-primary: var(--color-palette-lava);
|
||||
--color-primary-surface: var(--color-palette-sweet-pink);
|
||||
--color-primary-emphasis: var(--color-palette-cherry-red);
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary: var(--color-palette-seafoam);
|
||||
--color-secondary-surface: var(--color-palette-olive-drab);
|
||||
--color-secondary-emphasis: var(--color-palette-mint-green);
|
||||
|
||||
/* Tertiary Colors */
|
||||
--color-tertiary: var(--color-palette-bright-canary);
|
||||
--color-tertiary-surface: var(--color-palette-pale-lemon);
|
||||
--color-tertiary-emphasis: var(--color-palette-ripe-lemon);
|
||||
|
||||
/* Quartenary Colors */
|
||||
--color-quarternary: var(--color-palette-powder-blue);
|
||||
--color-quarternary-surface: var(--color-palette-aqua);
|
||||
--color-quarternary-emphasis: var(--color-palette-slate-blue);
|
||||
|
||||
/* Text Base Colors */
|
||||
--color-text-primary: var(--color-palette-black-ink); /* Main Body Texts, headlines */
|
||||
--color-text-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
|
||||
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
|
||||
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
|
||||
--color-text-inverse: var(--color-palette-ice-blue); /* Text on dark backgrounds */
|
||||
--color-text-disabled: var(--color-palette-cloud-gray); /* Disabled form labels, inactive text */
|
||||
|
||||
/* Surface Base Colors */
|
||||
--color-surface-base: var(--color-palette-ice-blue); /* Main page background */
|
||||
--color-surface-elevated-1: var(--color-palette-off-white); /* Cards, Panels */
|
||||
--color-surface-elevated-2: var(--color-palette-very-pale-gray); /* Modals, Dropdowns */
|
||||
--color-surface-elevated-3: var(--color-palette-pale-gray); /* Tooltips, popovers */
|
||||
--color-surface-elevated-4: var(--color-palette-light-silver); /* Highest Elevation */
|
||||
--color-surface-inverse: var(--color-palette-black-ink); /* Darkest Surface for Contrast */
|
||||
|
||||
/* Border Base Colors */
|
||||
--color-border-subtle: var(--color-palette-silver); /* Subtle Dividers, Card Borders */
|
||||
--color-border-normal: var(--color-palette-stone); /* Standard Borders, form fields */
|
||||
--color-border-strong: var(--color-palette-charcoal-gray); /* Emphasized Borders */
|
||||
|
||||
/* State Colors */
|
||||
--color-state-error: var(--color-palette-cerise); /* Error Text, Container, icons */
|
||||
--color-state-warning: var(--color-palette-persimmon); /* Warning Text, Container, Icons */
|
||||
--color-state-success: var(--color-palette-lime-green); /* Success Text, Container, Icons */
|
||||
--color-state-info: var(--color-palette-royal-blue); /* Info Text, Container, Icons */
|
||||
|
||||
/* Link Colors */
|
||||
--color-text-link: var(--color-text-tertiary);
|
||||
--color-text-link-hover: var(--color-secondary);
|
||||
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||
|
||||
/* Focus States */
|
||||
--color-focus-ring: var(--color-primary);
|
||||
--color-focus-ring-offset: var(--color-primary);
|
||||
--color-focus-indicator: var(--color-primary-emphasis)
|
||||
|
||||
/* Overlays */;
|
||||
--color-utility-overlay-light: oklch(0% 0 0deg / 10%); /* Light overlays */
|
||||
--color-utility-overlay-medium: oklch(0% 0 0deg / 30%); /* Medium overlays */
|
||||
--color-utility-overlay-heavy: oklch(0% 0 0deg / 60%); /* Heavy overlays, modal backdrops */
|
||||
--color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
|
||||
--color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */
|
||||
|
||||
/* Loading/Skeleton */
|
||||
--color-utility-skeleton-base: var(--color-surface-elevated-2); /* Skeleton loader base */
|
||||
--color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */
|
||||
|
||||
/* Dividers */
|
||||
--color-utility-divider: var(--color-border-subtle); /* Section dividers, HR elements */
|
||||
--color-utility-divider-strong: var(--color-border-normal); /* Emphasized dividers */
|
||||
|
||||
/* Shadows */
|
||||
--color-utility-shadow: oklch(0% 0 0deg / 10%); /* Drop shadows */
|
||||
--color-utility-shadow-strong: oklch(0% 0 0deg / 25%); /* Strong shadows */
|
||||
|
||||
/* Highlights */
|
||||
--color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
|
||||
--color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
|
||||
}
|
||||
6
src/styles/settings.css
Normal file
6
src/styles/settings.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import url('./settings/colors.css');
|
||||
@import url('./settings/typography.css');
|
||||
@import url('./settings/dimensions.css');
|
||||
@import url('./settings/elements.css');
|
||||
@import url('./settings/animations.css');
|
||||
|
||||
0
src/styles/settings/animations.css
Normal file
0
src/styles/settings/animations.css
Normal file
162
src/styles/settings/colors.css
Normal file
162
src/styles/settings/colors.css
Normal file
@@ -0,0 +1,162 @@
|
||||
:root {
|
||||
/* === Default Palette === */
|
||||
|
||||
/* == Blacks, Grays & Off-Whites == */
|
||||
--color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg); /* Woodsmoke: #0B0C10 */
|
||||
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg); /* Shark: #1A1A1D */
|
||||
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg); /* Shark2: #222629 */
|
||||
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg); /* Bright Gray: #313745 */
|
||||
--color-palette-slate-gray: oklch(33.3% 0 89.876deg); /* Mineshaft: #363636 */
|
||||
--color-palette-gunmetal: oklch(41.1% 0.008 248.035deg); /* Abbey2: #474B4F */
|
||||
--color-palette-carbon: oklch(39.8% 0 89.876deg); /* Tundora: #474747 */
|
||||
--color-palette-steel-gray: oklch(42.5% 0.003 286.26deg); /* Abbey: #4e4e50 */
|
||||
--color-palette-dusty-black: oklch(43.7% 0.013 17.672deg); /* DonJuan: #594F4F */
|
||||
--color-palette-stone: oklch(64.3% 0.005 91.471deg); /* Natural Gray: #8E8D8A */
|
||||
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg); /* Nevada: #6B6E70 */
|
||||
--color-palette-silver: oklch(72.9% 0.001 17.185deg); /* Silver Chalice: #A8A7A7 */
|
||||
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg); /* Silversand: #C5C6C7 */
|
||||
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg); /* Westar: #E3E2DF */
|
||||
--color-palette-pale-stone: oklch(89.7% 0.004 106.481deg); /* Quillgray: #DDDDDA */
|
||||
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg); /* Gallery: #ECECEC */
|
||||
--color-palette-off-white: oklch(98.1% 0.003 247.858deg); /* Catskill White: #F7F9fB */
|
||||
--color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg); /* Cat Squeeze: #F7FAFC */
|
||||
--color-palette-smoky-mauve: oklch(50% 0.054 308.622deg); /* Smoky: #6C5B7B */
|
||||
|
||||
/* == Reds == */
|
||||
--color-palette-oxblood: oklch(30.5% 0.122 12.109deg); /* Bordeaux: #5D001E */
|
||||
--color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg); /* Crown of Thorns: #6F2232 */
|
||||
--color-palette-crimson: oklch(43.2% 0.169 7.14deg); /* Monarch: #950740 */
|
||||
--color-palette-cherry-red: oklch(45.4% 0.168 1.454deg); /* Disco: #9A1750 */
|
||||
--color-palette-ruby: oklch(52.1% 0.206 15.782deg); /* Shiraz: #C3073F */
|
||||
--color-palette-red-clay: oklch(65.1% 0.178 27.507deg); /* Burnt Sienna: #E85A4F */
|
||||
--color-palette-lava: oklch(63.6% 0.193 17.075deg); /* Mandy: #E84A5F */
|
||||
--color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg); /* Radical Red: #FE4365 */
|
||||
|
||||
/* == Pinks & Magentas == */
|
||||
--color-palette-heliotrope: oklch(68.3% 0.217 353.666deg); /* Heliotrope: #F74FA3 */
|
||||
--color-palette-hot-pink: oklch(65.4% 0.2 6.69deg); /* French Rose: #EE4C7C */
|
||||
--color-palette-cerise: oklch(60.7% 0.23 18.554deg); /* Amaranth: #EC2049 */
|
||||
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg); /* Hibiscus: #A7226E */
|
||||
--color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg); /* Turkish Rose: #C06C84 */
|
||||
--color-palette-berry: oklch(60.8% 0.159 2.621deg); /* Mulberry: #CC527A */
|
||||
--color-palette-petal-pink: oklch(80.5% 0.063 1.992deg); /* Rose Fog: #E3AFBC */
|
||||
--color-palette-coral-pink: oklch(71.2% 0.162 15.607deg); /* Froly: #F67280 */
|
||||
--color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg); /* Sweet Pink: #FC9D9A */
|
||||
|
||||
/* == Oranges & Browns == */
|
||||
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg); /* Flamingo: #F26B38 */
|
||||
--color-palette-terracotta: oklch(71.3% 0.131 27.646deg); /* Apricot: #E98074 */
|
||||
--color-palette-tan: oklch(82.7% 0.047 76.752deg); /* Akaroa: #D8C3A5 */
|
||||
--color-palette-peach: oklch(88.5% 0.072 57.746deg); /* Flesh: #FECEAB */
|
||||
--color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg); /* Rosebud: #F8B195 */
|
||||
--color-palette-light-apricot: oklch(87.8% 0.066 57.778deg); /* Vivid Tangerine: #F9CDAD */
|
||||
--color-palette-bone-white: oklch(92.7% 0.015 94.206deg); /* Satin Linen: #EAE7DC */
|
||||
|
||||
/* == Yellows == */
|
||||
--color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg); /* Ripe Lemon: #F2C51D */
|
||||
--color-palette-bright-canary: oklch(89% 0.157 97.726deg); /* Energy Yellow: #F7DB4F */
|
||||
--color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg); /* Mimosa: #E5FCAD */
|
||||
|
||||
/* == Greens == */
|
||||
--color-palette-forest-green: oklch(58.1% 0.127 130.001deg); /* Crete: #61892F */
|
||||
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg); /* Atlantis: #86C232 */
|
||||
--color-palette-electric-green: oklch(87.7% 0.227 137.099deg); /* Screaming Green: #87f74f */
|
||||
--color-palette-sage: oklch(75.1% 0.056 144.175deg); /* Norway: #87f74f */
|
||||
--color-palette-mint-green: oklch(84.8% 0.098 151.333deg); /* Chinook: #9de0ad */
|
||||
--color-palette-olive-drab: oklch(82.5% 0.042 107.285deg); /* Olive Drap: #C8C8A9 */
|
||||
--color-palette-seafoam: oklch(71.6% 0.056 165.214deg); /* Acapulco: #83AF9B */
|
||||
|
||||
/* == Blues & Teals == */
|
||||
--color-palette-dark-navy: oklch(27.3% 0.024 253.693deg); /* Ebony Clay: #1F2833 */
|
||||
--color-palette-deep-teal: oklch(32.4% 0.018 225.132deg); /* Outer Space: #2A363B */
|
||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg); /* Ming: #355C7D */
|
||||
--color-palette-sky-blue: oklch(76.3% 0.129 233.891deg); /* Picton Blue: #4FBFF7 */
|
||||
--color-palette-slate-blue: oklch(55.1% 0.043 210.602deg); /* Cutty Sark: #547980 */
|
||||
--color-palette-turquoise: oklch(61.5% 0.091 198.865deg); /* Lochinvar: #2F9599 */
|
||||
--color-palette-aqua: oklch(68.6% 0.095 190.758deg); /* Keppel: #45ADA8 */
|
||||
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg); /* Aquamarine: #66FCF1 */
|
||||
--color-palette-powder-blue: oklch(88.2% 0.062 187.276deg); /* Powder Blue: #a9e6df */
|
||||
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg); /* Twilight Blue: #feffff */
|
||||
|
||||
/* === Semantic Colors === */
|
||||
|
||||
/* == Primary Colors == */
|
||||
--color-primary: var(--color-palette-lava);
|
||||
--color-primary-surface: var(--color-palette-sweet-pink);
|
||||
--color-primary-emphasis: var(--color-palette-cherry-red);
|
||||
|
||||
/* == Secondary Colors == */
|
||||
--color-secondary: var(--color-palette-seafoam);
|
||||
--color-secondary-surface: var(--color-palette-olive-drab);
|
||||
--color-secondary-emphasis: var(--color-palette-mint-green);
|
||||
|
||||
/* == Tertiary Colors == */
|
||||
--color-tertiary: var(--color-palette-bright-canary);
|
||||
--color-tertiary-surface: var(--color-palette-pale-lemon);
|
||||
--color-tertiary-emphasis: var(--color-palette-ripe-lemon);
|
||||
|
||||
/* == Quartenary Colors == */
|
||||
--color-quarternary: var(--color-palette-powder-blue);
|
||||
--color-quarternary-surface: var(--color-palette-aqua);
|
||||
--color-quarternary-emphasis: var(--color-palette-slate-blue);
|
||||
|
||||
/* == Text Base Colors == */
|
||||
--color-text-primary: var(--color-palette-black-ink); /* Main Body Texts, headlines */
|
||||
--color-text-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
|
||||
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
|
||||
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
|
||||
--color-text-inverse: var(--color-palette-ice-blue); /* Text on dark backgrounds */
|
||||
--color-text-disabled: var(--color-palette-cloud-gray); /* Disabled form labels, inactive text */
|
||||
|
||||
/* == Surface Base Colors == */
|
||||
--color-surface-base: var(--color-palette-ice-blue); /* Main page background */
|
||||
--color-surface-elevated-1: var(--color-palette-off-white); /* Cards, Panels */
|
||||
--color-surface-elevated-2: var(--color-palette-very-pale-gray); /* Modals, Dropdowns */
|
||||
--color-surface-elevated-3: var(--color-palette-pale-gray); /* Tooltips, popovers */
|
||||
--color-surface-elevated-4: var(--color-palette-light-silver); /* Highest Elevation */
|
||||
--color-surface-inverse: var(--color-palette-black-ink); /* Darkest Surface for Contrast */
|
||||
|
||||
/* == Border Base Colors == */
|
||||
--color-border-subtle: var(--color-palette-silver); /* Subtle Dividers, Card Borders */
|
||||
--color-border-normal: var(--color-palette-stone); /* Standard Borders, form fields */
|
||||
--color-border-strong: var(--color-palette-charcoal-gray); /* Emphasized Borders */
|
||||
|
||||
/* == State Colors == */
|
||||
--color-state-error: var(--color-palette-cerise); /* Error Text, Container, icons */
|
||||
--color-state-warning: var(--color-palette-persimmon); /* Warning Text, Container, Icons */
|
||||
--color-state-success: var(--color-palette-lime-green); /* Success Text, Container, Icons */
|
||||
--color-state-info: var(--color-palette-royal-blue); /* Info Text, Container, Icons */
|
||||
|
||||
/* == Link Colors == */
|
||||
--color-text-link: var(--color-text-tertiary);
|
||||
--color-text-link-hover: var(--color-secondary);
|
||||
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||
|
||||
/* == Focus States == */
|
||||
--color-focus-ring: var(--color-primary);
|
||||
--color-focus-ring-offset: var(--color-primary);
|
||||
--color-focus-indicator: var(--color-primary-emphasis)
|
||||
|
||||
/* == Overlays == */;
|
||||
--color-utility-overlay-light: oklch(0% 0 0deg / 10%); /* Light overlays */
|
||||
--color-utility-overlay-medium: oklch(0% 0 0deg / 30%); /* Medium overlays */
|
||||
--color-utility-overlay-heavy: oklch(0% 0 0deg / 60%); /* Heavy overlays, modal backdrops */
|
||||
--color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
|
||||
--color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */
|
||||
|
||||
/* == Loading/Skeleton == */
|
||||
--color-utility-skeleton-base: var(--color-surface-elevated-2); /* Skeleton loader base */
|
||||
--color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */
|
||||
|
||||
/* == Dividers == */
|
||||
--color-utility-divider: var(--color-border-subtle); /* Section dividers, HR elements */
|
||||
--color-utility-divider-strong: var(--color-border-normal); /* Emphasized dividers */
|
||||
|
||||
/* == Shadows == */
|
||||
--color-utility-shadow: oklch(0% 0 0deg / 10%); /* Drop shadows */
|
||||
--color-utility-shadow-strong: oklch(0% 0 0deg / 25%); /* Strong shadows */
|
||||
|
||||
/* == Highlights == */
|
||||
--color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
|
||||
--color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
|
||||
}
|
||||
46
src/styles/settings/dimensions.css
Normal file
46
src/styles/settings/dimensions.css
Normal file
@@ -0,0 +1,46 @@
|
||||
:root {
|
||||
/* === Base Size Units === */
|
||||
--size-0: 0;
|
||||
--size-px: 1px;
|
||||
--size-05: 0.125rem; /* 2px */
|
||||
--size-1: 0.25rem; /* 4px */
|
||||
--size-2: 0.5rem; /* 8px */
|
||||
--size-3: 0.75rem; /* 12px */
|
||||
--size-4: 1rem; /* 16px */
|
||||
--size-5: 1.25rem; /* 20px */
|
||||
--size-6: 1.5rem; /* 24px */
|
||||
--size-8: 2rem; /* 32px */
|
||||
--size-10: 2.5rem; /* 40px */
|
||||
--size-12: 3rem; /* 48px */
|
||||
--size-16: 4rem; /* 64px */
|
||||
--size-20: 5rem; /* 80px */
|
||||
--size-24: 6rem; /* 96px */
|
||||
--size-32: 8rem; /* 128px */
|
||||
--size-40: 10rem; /* 160px */
|
||||
--size-48: 12rem; /* 192px */
|
||||
--size-64: 16rem; /* 256px */
|
||||
--size-80: 20rem; /* 320px */
|
||||
--size-96: 24rem; /* 384px */
|
||||
--size-128: 32rem; /* 512px */
|
||||
--size-160: 40rem; /* 640px */
|
||||
--size-192: 48rem; /* 768px */
|
||||
--size-256: 64rem; /* 1024px */
|
||||
--size-320: 80rem; /* 1280px */
|
||||
--size-384: 96rem; /* 1536px */
|
||||
--size-360: 90rem; /* 1440px */
|
||||
--size-400: 100rem; /* 1600px */
|
||||
--size-480: 120rem; /* 1920px */
|
||||
|
||||
/* === Semantic Spacing === */
|
||||
--spacing-none: var(--size-0);
|
||||
--spacing-hairline: var(--size-px);
|
||||
--spacing-tight: var(--size-1);
|
||||
--spacing-snug: var(--size-2);
|
||||
--spacing-cozy: var(--size-4);
|
||||
--spacing-comfortable: var(--size-6);
|
||||
--spacing-relaxed: var(--size-8);
|
||||
--spacing-spacious: var(--size-12);
|
||||
--spacing-generous: var(--size-16);
|
||||
--spacing-luxurious: var(--size-24);
|
||||
--spacing-expansive: var(--size-32);
|
||||
}
|
||||
256
src/styles/settings/elements.css
Normal file
256
src/styles/settings/elements.css
Normal file
@@ -0,0 +1,256 @@
|
||||
:root {
|
||||
/* === H1 VARIABLES === */
|
||||
--el-h1-color: var(--color-text-primary);
|
||||
--el-h1-font-family: var(--font-display);
|
||||
--el-h1-font-size: var(--typo-size-6xl);
|
||||
--el-h1-font-weight: var(--typo-weight-black);
|
||||
--el-h1-letter-spacing: -0.0137em;
|
||||
--el-h1-line-height: 1.125;
|
||||
--el-h1-text-transform: uppercase;
|
||||
--el-h1-vspace-base: calc(1em * var(--el-h1-line-height));
|
||||
--el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-spacious));
|
||||
--el-h1-vspace-bottom: calc(var(--el-h1-vspace-base) * var(--vspace-comfortable));
|
||||
|
||||
/* === H2 VARIABLES === */
|
||||
--el-h2-color: var(--color-text-primary);
|
||||
--el-h2-font-family: var(--font-display);
|
||||
--el-h2-font-size: var(--typo-size-5xl);
|
||||
--el-h2-font-weight: var(--typo-weight-black);
|
||||
--el-h2-letter-spacing: -0.0096em;;
|
||||
--el-h2-line-height: 1.1765;
|
||||
--el-h2-text-transform: uppercase;
|
||||
--el-h2-vspace-base: calc(1em * var(--el-h2-line-height));
|
||||
--el-h2-vspace-top: calc(var(--el-h2-vspace-base) * var(--vspace-snug));
|
||||
--el-h2-vspace-bottom: calc(var(--el-h2-vspace-base) * var(--vspace-compressed));
|
||||
|
||||
/* === H3 VARIABLES === */
|
||||
--el-h3-color: var(--color-text-secondary);
|
||||
--el-h3-font-family: var(--font-display);
|
||||
--el-h3-font-size: var(--typo-size-4xl);
|
||||
--el-h3-font-weight: var(--typo-weight-extrabold);
|
||||
--el-h3-letter-spacing: -0.004em;
|
||||
--el-h3-line-height: 1.2;
|
||||
--el-h3-text-transform: uppercase;
|
||||
--el-h3-vspace-base: calc(1em * var(--el-h3-line-height));
|
||||
--el-h3-vspace-top: calc(var(--el-h3-vspace-base) * var(--vspace-relaxed));
|
||||
--el-h3-vspace-bottom: calc(var(--el-h3-vspace-base) * var(--vspace-snug));
|
||||
|
||||
/* === H4 VARIABLES === */
|
||||
--el-h4-color: var(--color-text-secondary);
|
||||
--el-h4-font-family: var(--font-display);
|
||||
--el-h4-font-size: var(--typo-size-3xl);
|
||||
--el-h4-font-weight: var(--typo-weight-extrabold);
|
||||
--el-h4-letter-spacing: 0.0025em;
|
||||
--el-h4-line-height: 1.125;
|
||||
--el-h4-text-transform: uppercase;
|
||||
--el-h4-vspace-base: calc(1em * var(--el-h4-line-height));
|
||||
--el-h4-vspace-top: calc(var(--el-h4-vspace-base) * var(--vspace-normal));
|
||||
--el-h4-vspace-bottom: calc(var(--el-h4-vspace-base) * var(--vspace-tight));
|
||||
|
||||
/* === H5 VARIABLES === */
|
||||
--el-h5-color: var(--color-text-secondary);
|
||||
--el-h5-font-family: var(--font-display);
|
||||
--el-h5-font-size: var(--typo-size-2xl);
|
||||
--el-h5-font-weight: var(--typo-weight-extrabold);
|
||||
--el-h5-letter-spacing: 0.05em;
|
||||
--el-h5-line-height: 1.28;
|
||||
--el-h5-text-transform: uppercase;
|
||||
--el-h5-vspace-base: calc(1em * var(--el-h5-line-height));
|
||||
--el-h5-vspace-top: calc(var(--el-h5-vspace-base) * var(--vspace-cozy));
|
||||
--el-h5-vspace-bottom: calc(var(--el-h5-vspace-base) * var(--vspace-tight));
|
||||
|
||||
/* === H6 VARIABLES === */
|
||||
--el-h6-color: var(--color-text-secondary);
|
||||
--el-h6-font-family: var(--font-display);
|
||||
--el-h6-font-size: var(--typo-size-xl);
|
||||
--el-h6-font-weight: var(--typo-weight-black);
|
||||
--el-h6-letter-spacing: 0.035em;
|
||||
--el-h6-line-height: 1.4;
|
||||
--el-h6-text-transform: uppercase;
|
||||
--el-h6-vspace-base: calc(1em * var(--el-h6-line-height));
|
||||
--el-h6-vspace-top: calc(var(--el-h6-vspace-base) * var(--vspace-snug));
|
||||
--el-h6-vspace-bottom: calc(var(--el-h6-vspace-base) * var(--vspace-compressed));
|
||||
|
||||
/* === PARAGRAPH VARIABLES === */
|
||||
--el-p-color: var(--color-text-primary);
|
||||
--el-p-font-family: var(--font-body);
|
||||
--el-p-font-size: var(--typo-size-md);
|
||||
--el-p-font-weight: var(--typo-weight-regular);
|
||||
--el-p-line-height: var(--typo-leading-normal);
|
||||
--el-p-text-align: justify;
|
||||
--el-p-vspace-base: calc(1em * var(--el-p-line-height));
|
||||
--el-p-vspace-top: calc(var(--el-p-vspace-base) * var(--vspace-snug));
|
||||
--el-p-vspace-bottom: calc(var(--el-p-vspace-base) * var(--vspace-snug));
|
||||
|
||||
/* === BLOCKQUOTE VARIABLES === */
|
||||
--el-blockquote-color: var(--color-text-tertiary);
|
||||
--el-border-color: var(--color-text-tertiary);
|
||||
--el-blockquote-font-family: var(--font-body);
|
||||
--el-blockquote-font-size: var(--typo-size-md);
|
||||
--el-blockquote-font-style: var(--typo-weight-regular);
|
||||
--el-blockquote-font-weight: var(--typo-weight-medium);
|
||||
--el-blockquote-line-height: var(--typo-leading-comfortable);
|
||||
--el-blockquote-vspace-base: calc(1em * var(--el-blockquote-line-height));
|
||||
--el-blockquote-vspace-top: calc(var(--el-blockquote-vspace-base) * var(--vspace-snug));
|
||||
--el-blockquote-vspace-bottom: calc(var(--el-blockquote-vspace-base) * var(--vspace-snug));
|
||||
|
||||
/* === PRE VARIABLES === */
|
||||
--el-pre-color: var(--color-text-inverse);
|
||||
--el-pre-background: var(--color-surface-inverse);
|
||||
--el-pre-font-family: var(--font-mono);
|
||||
--el-pre-font-size: var(--typo-size-sm);
|
||||
--el-pre-line-height: 1.5385;
|
||||
--el-pre-vspace-base: calc(1em * var(--el-pre-line-height));
|
||||
--el-pre-vspace-top: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
|
||||
--el-pre-vspace-bottom: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
|
||||
|
||||
/* === CODE VARIABLES === */
|
||||
--el-code-color: var(--color-text-inverse);
|
||||
--el-code-background: var(--color-surface-inverse);
|
||||
--el-code-font-family: var(--font-mono);
|
||||
--el-code-font-size: var(--typo-size-sm);
|
||||
|
||||
/* === List Variables (For UL/OL) === */
|
||||
--el-list-color: var(--color-text-primary);
|
||||
--el-list-line-height: var(--typo-leading-normal);
|
||||
--el-list-font-size: var(--typo-size-md);
|
||||
--el-list-vspace-base: calc(1em * var(--el-list-line-height));
|
||||
--el-list-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-list-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-list-nested-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-list-nested-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-li-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-li-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
|
||||
--el-li-nested-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-tight));
|
||||
--el-li-nested-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-tight));
|
||||
|
||||
/* === UL VARIABLES === */
|
||||
--el-ul-indent-l1: var(--spacing-cozy);
|
||||
--el-ul-indent-l2: var(--spacing-cozy);
|
||||
--el-ul-indent-l3: var(--spacing-cozy);
|
||||
--el-ul-indent-l4: var(--spacing-cozy);
|
||||
--el-ul-item-padding: var(--spacing-cozy);
|
||||
--el-ul-symbol-l1: '⯃';
|
||||
--el-ul-symbol-l1-color: var(--color-text-primary);
|
||||
--el-ul-symbol-l2: '⯁';
|
||||
--el-ul-symbol-l2-color: var(--color-text-primary);
|
||||
--el-ul-symbol-l3: '⯆';
|
||||
--el-ul-symbol-l3-color: var(--color-text-primary);
|
||||
--el-ul-symbol-l4: '⯀';
|
||||
--el-ul-symbol-l4-color: var(--color-text-primary);
|
||||
|
||||
/* === OL VARIABLES === */
|
||||
--el-ol-indent-l1: var(--spacing-cozy);
|
||||
--el-ol-item-indent-l1: 1.5em;
|
||||
--el-ol-indent-l2: var(--spacing-cozy);
|
||||
--el-ol-item-indent-l2: 0.825em;
|
||||
--el-ol-indent-l3: var(--spacing-cozy);
|
||||
--el-ol-item-indent-l3: 0;
|
||||
--el-ol-indent-l4: var(--spacing-cozy);
|
||||
--el-ol-item-indent-l4: 0;
|
||||
--el-ol-item-padding: var(--spacing-cozy);
|
||||
--el-ol-line-height: var(--typo-leading-normal);
|
||||
--el-ol-marker-color-l1: var(--color-text-primary);
|
||||
--el-ol-prefix-l1: '';
|
||||
--el-ol-style-l1: decimal-leading-zero;
|
||||
--el-ol-suffix-l1: '.)';
|
||||
--el-ol-marker-color-l2: var(--color-text-primary);
|
||||
--el-ol-prefix-l2: '';
|
||||
--el-ol-style-l2: lower-alpha;
|
||||
--el-ol-suffix-l2: '.)';
|
||||
--el-ol-marker-color-l3: var(--color-text-primary);
|
||||
--el-ol-prefix-l3: '';
|
||||
--el-ol-style-l3: upper-roman;
|
||||
--el-ol-suffix-l3: '.)';
|
||||
--el-ol-marker-color-l4: var(--color-text-primary);
|
||||
--el-ol-prefix-l4: '';
|
||||
--el-ol-style-l4: lower-greek;
|
||||
--el-ol-suffix-l4: '.)';
|
||||
|
||||
/* === DL VARIABLES === */
|
||||
--el-dl-font-size: var(--typo-size-md);
|
||||
--el-dl-line-height: var(--typo-leading-normal);
|
||||
--el-dl-vspace-base: calc(1em * var(--el-dl-line-height));
|
||||
--el-dl-vspace-top: calc(var(--el-dl-vspace-base) * var(--vspace-snug));
|
||||
--el-dl-vspace-bottom: calc(var(--el-dl-vspace-base) * var(--vspace-compressed));
|
||||
|
||||
/* === DT VARIABLES === */
|
||||
--el-dt-color: var(--color-text-inverse);
|
||||
--el-dt-background: var(--color-surface-inverse);
|
||||
--el-dt-font-family: var(--font-display);
|
||||
--el-dt-font-size: var(--typo-size-lg);
|
||||
--el-dt-font-weight: var(--typo-weight-bold);
|
||||
--el-dt-line-height: 1.4;
|
||||
--el-dt-text-transform: uppercase;
|
||||
--el-dt-letter-spacing: 0.035em;
|
||||
--el-dt-padding: var(--spacing-snug);
|
||||
--el-dt-vspace-base: calc(1em * var(--el-dt-line-height));
|
||||
--el-dt-vspace-top: calc(var(--el-dt-vspace-base) * var(--vspace-snug));
|
||||
--el-dt-vspace-bottom: calc(var(--el-dt-vspace-base) * var(--vspace-compressed));
|
||||
|
||||
/* === DD VARIABLES === */
|
||||
--el-dd-color: var(--color-text-primary);
|
||||
--el-dd-font-family: var(--font-body);
|
||||
--el-dd-font-size: var(--typo-size-md);
|
||||
--el-dd-line-height: var(--typo-leading-normal);
|
||||
--el-dd-indent: 0 var(--spacing-comfortable);
|
||||
--el-dd-vspace-base: calc(1em * var(--el-dd-line-height));
|
||||
--el-dd-vspace-top: calc(var(--el-dd-vspace-base) * var(--vspace-compressed));
|
||||
--el-dd-vspace-bottom: calc(var(--el-dd-vspace-base) * var(--vspace-tight));
|
||||
|
||||
/* === TABLE VARIABLES === */
|
||||
--el-table-font-size: var(--typo-size-sm);
|
||||
--el-table-line-height: 1.2;
|
||||
--el-table-border: var(--size-2) solid var(--color-text-primary);
|
||||
--el-table-vspace-top: var(--spacing-tight);
|
||||
--el-table-vspace-bottom: var(--spacing-tight);
|
||||
|
||||
/* === TH VARIABLES === */
|
||||
--el-th-color: var(--color-text-inverse);
|
||||
--el-th-background: var(--color-surface-inverse);
|
||||
--el-th-font-family: var(--font-display);
|
||||
--el-th-font-size: var(--typo-size-sm);
|
||||
--el-th-font-weight: var(--typo-weight-black);
|
||||
--el-th-text-transform: uppercase;
|
||||
--el-th-line-height: var(--el-table-line-height);
|
||||
--el-th-padding: 0 var(--spacing-snug) var(--spacing-snug);
|
||||
|
||||
/* === TD VARIABLES === */
|
||||
--el-td-color: var(--color-text-primary);
|
||||
--el-td-font-family: var(--font-mono);
|
||||
--el-td-font-size: var(--typo-size-sm);
|
||||
--el-td-line-height: var(--el-table-line-height);
|
||||
--el-td-padding: var(--spacing-snug);
|
||||
--el-td-border: var(--size-1) solid var(--color-text-secondary);
|
||||
|
||||
/* === CAPTION VARIABLES === */
|
||||
--el-caption-color: var(--color-text-tertiary);
|
||||
--el-caption-font-family: var(--font-body);
|
||||
--el-caption-font-size: var(--typo-size-sm);
|
||||
--el-caption-font-style: italic;
|
||||
--el-caption-text-align: center;
|
||||
|
||||
/* === FIGCAPTION VARIABLES === */
|
||||
--el-figcaption-color: var(--color-text-tertiary);
|
||||
--el-figcaption-font-family: var(--font-body);
|
||||
--el-figcaption-font-size: var(--typo-size-xs);
|
||||
--el-figcaption-font-style: italic;
|
||||
--el-figcaption-text-align: center;
|
||||
|
||||
/* === SMALL VARIABLES === */
|
||||
--el-small-color: var(--color-text-tertiary);
|
||||
--el-small-font-family: var(--font-body);
|
||||
--el-small-font-size: var(--typo-size-xs);
|
||||
|
||||
/* HR */
|
||||
--hr-height: var(--size-3);
|
||||
--hr-margin: var(--spacing-relaxed) 0;
|
||||
--hr-color: var(--color-text-tertiary);
|
||||
--hr-symbol-content: "▼";
|
||||
--hr-symbol-size: var(--typo-size-4xl);
|
||||
--hr-symbol-space: 0 0.25em;
|
||||
--hr-symbol-line-height: var(--typo-leading-compressed);
|
||||
--hr-symbol-color: var(--color-text-tertiary);
|
||||
--hr-symbol-background: var(--color-surface-base);
|
||||
|
||||
}
|
||||
65
src/styles/settings/typography.css
Normal file
65
src/styles/settings/typography.css
Normal file
@@ -0,0 +1,65 @@
|
||||
:root {
|
||||
/* === Font Families === */
|
||||
--font-display: 'Geist';
|
||||
--font-body: 'Iosevka Aile';
|
||||
--font-mono: 'Iosevka';
|
||||
|
||||
/* === Font Sizes === */
|
||||
--font-size-responsive: clamp(1rem, 2.5vw, 1.25rem);
|
||||
--typo-size-base: 16px;
|
||||
--typo-size-6xl: 4em; /* 64px */
|
||||
--typo-size-5xl: 3.1875em; /* 51px */
|
||||
--typo-size-4xl: 2.5em; /* 40px */
|
||||
--typo-size-3xl: 2em; /* 32px */
|
||||
--typo-size-2xl: 1.5625em; /* 25px */
|
||||
--typo-size-xl: 1.25em; /* 20px */
|
||||
--typo-size-lg: 1.125em; /* 18px */
|
||||
--typo-size-md: 1em; /* 16px */
|
||||
--typo-size-sm: 0.875em; /* 14px */
|
||||
--typo-size-xs: 0.8125em; /* 13px */
|
||||
--typo-size-2xs: 0.625em; /* 10px */
|
||||
|
||||
/* === Line Height === */
|
||||
--typo-leading-compressed: 1.0; /* 1.0 - very tight */
|
||||
--typo-leading-tight: 1.125; /* 1.125 - tight */
|
||||
--typo-leading-snug: 1.25; /* 1.25 - snug */
|
||||
--typo-leading-cozy: 1.375; /* 1.375 - cozy */
|
||||
--typo-leading-normal: 1.5; /* 1.5 - normal */
|
||||
--typo-leading-relaxed: 1.625; /* 1.625 - relaxed */
|
||||
--typo-leading-comfortable: 1.75; /* 1.75 - comfortable */
|
||||
--typo-leading-loose: 1.875; /* 1.875 - loose */
|
||||
--typo-leading-spacious: 2.0; /* 2.0 - very loose */
|
||||
|
||||
/* === Letter Spacing === */
|
||||
--typo-spacing-tightest: -0.05em; /* -0.05em - very tight */
|
||||
--typo-spacing-tighter: -0.025em; /* -0.025em - tight */
|
||||
--typo-spacing-tight: -0.0125em; /* -0.0125em - slightly tight */
|
||||
--typo-spacing-normal: 0em; /* 0 - normal */
|
||||
--typo-spacing-relaxed: 0.025em; /* 0.025em - slightly loose */
|
||||
--typo-spacing-comfortable: 0.05em; /* 0.05em - comfortable */
|
||||
--typo-spacing-loose: 0.1em; /* 0.1em - loose */
|
||||
--typo-spacing-looser: 0.15em; /* 0.15em - very loose */
|
||||
--typo-spacing-loosest: 0.2em; /* 0.2em - extremely loose */
|
||||
|
||||
/* === Font Weight === */
|
||||
--typo-weight-thin: 100;
|
||||
--typo-weight-extralight: 200;
|
||||
--typo-weight-light: 300;
|
||||
--typo-weight-regular: 400;
|
||||
--typo-weight-medium: 500;
|
||||
--typo-weight-semibold: 600;
|
||||
--typo-weight-bold: 700;
|
||||
--typo-weight-extrabold: 800;
|
||||
--typo-weight-black: 900;
|
||||
|
||||
/* === Vertical Spacing === */
|
||||
--vspace-compressed: 0.25;
|
||||
--vspace-tight: 0.5;
|
||||
--vspace-snug: 0.75;
|
||||
--vspace-cozy: 1;
|
||||
--vspace-normal: 1.25;
|
||||
--vspace-relaxed: 1.5;
|
||||
--vspace-comfortable: 1.75;
|
||||
--vspace-loose: 2;
|
||||
--vspace-spacious: 2.5;
|
||||
}
|
||||
Reference in New Issue
Block a user