Change a lot of things (see description)
- removes tailwind (was cool but dont need it) - reworks a lot of the html - utilize a no css... library? css file? idk - add a few details - rework the navigation on the built notes pages - write a bunch of tailwind like css classes - ... maybe some more, too lazy
This commit is contained in:
parent
78be0209ae
commit
fd51f273f4
@ -2,6 +2,6 @@ import type { HTMLAttributes } from "react";
|
|||||||
|
|
||||||
export function Border({ className }: { className?: HTMLAttributes<HTMLDivElement>['className'] }) {
|
export function Border({ className }: { className?: HTMLAttributes<HTMLDivElement>['className'] }) {
|
||||||
return (
|
return (
|
||||||
<div className={`flex-1 border-dashed border-slate-500 my-4 border ${className}`}></div>
|
<span className={``}></span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
export default function CustomLink({ children, href }) {
|
|
||||||
// If the link is local it will start with a "/"
|
|
||||||
// Otherwise it'll be something like "https://"
|
|
||||||
return href.startsWith('/') || href === '' ? (
|
|
||||||
<Link href={href} className={"tuancao"}>
|
|
||||||
<a>
|
|
||||||
{children}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<a
|
|
||||||
href={href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className={"tuan"}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,11 +1,9 @@
|
|||||||
export default function ExternalLinkIcon() {
|
export default function ExternalLinkIcon() {
|
||||||
return (
|
return (
|
||||||
<div >
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
|
stroke="currentColor" className="sm hover-font-yellow hover-pointer">
|
||||||
stroke="currentColor" className="w-4 h-4 cursor-pointer ">
|
<path strokeLinecap="round" strokeLinejoin="round"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round"
|
d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||||
d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,31 +6,29 @@ import { styled } from '@mui/material/styles';
|
|||||||
const TCTreeItem = styled(TreeItem)(({ theme }) => ({
|
const TCTreeItem = styled(TreeItem)(({ theme }) => ({
|
||||||
'& .MuiTreeItem-content': {
|
'& .MuiTreeItem-content': {
|
||||||
borderRadius: '10px',
|
borderRadius: '10px',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(25, 118, 210, 0.59)'
|
||||||
|
},
|
||||||
'& .MuiTreeItem-label': {
|
'& .MuiTreeItem-label': {
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
paddingLeft: '6px',
|
paddingLeft: '6px',
|
||||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
|
||||||
lineHeight: 2.0,
|
lineHeight: 2.0,
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
|
||||||
export default function FolderTree(props) {
|
export default function FolderTree(props) {
|
||||||
const renderTree = (nodes) => (
|
|
||||||
<TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
|
|
||||||
{Array.isArray(nodes.children)
|
|
||||||
? nodes.children.map((node) => renderTree(node))
|
|
||||||
: null}
|
|
||||||
</TCTreeItem>
|
|
||||||
);
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
// const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id})
|
|
||||||
|
const memoTree = React.useMemo(() => renderTree(props.tree), [props.tree])
|
||||||
const expandedNodes = [props.tree.id]
|
const expandedNodes = [props.tree.id]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<a href="http://localhost:3000" class="mb-5 flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">{"<-"} Back To Portfolio</a>
|
<a href="http://localhost:3000" className="">{"<-"} Back To Portfolio</a>
|
||||||
|
|
||||||
<TreeView
|
<TreeView
|
||||||
aria-label="rich object"
|
aria-label="rich object"
|
||||||
@ -45,9 +43,9 @@ export default function FolderTree(props) {
|
|||||||
router.push(currentNode.routePath)
|
router.push(currentNode.routePath)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
sx={{ flexGrow: 1, overflowY: 'auto' }}
|
sx={{ overflowY: 'scroll' }}
|
||||||
>
|
>
|
||||||
{renderTree(props.tree)}
|
{memoTree}
|
||||||
</TreeView>
|
</TreeView>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@ -69,3 +67,12 @@ function ChevronDownIcon() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderTree(nodes, layer) {
|
||||||
|
return (
|
||||||
|
<TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name} sx={{ marginLeft: 1 * layer }}>
|
||||||
|
{Array.isArray(nodes.children)
|
||||||
|
? nodes.children.map((node) => renderTree(node, layer + 1))
|
||||||
|
: null}
|
||||||
|
</TCTreeItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
@ -8,15 +8,15 @@ export interface JobProps {
|
|||||||
|
|
||||||
export default function Job({ logo, name, details, dateFrom, dateTo }: JobProps) {
|
export default function Job({ logo, name, details, dateFrom, dateTo }: JobProps) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-slate-500 bg-opacity-20 border-slate-500 border-opacity-0" >
|
<article className="flex gap-1" >
|
||||||
<img src={logo} className="w-10 h-10 rounded-full" />
|
<img src={logo} className="rounded lg bg-grey" />
|
||||||
<div className="flex flex-col flex-1" >
|
<span className="flex-1">
|
||||||
<div className="flex justify-between" >
|
<div className="flex flex-between">
|
||||||
<span className="block text-sm font-bold " > {name} </span>
|
<span className="font-bold" > {name} </span>
|
||||||
<span className="block text-xs font-bold " > {dateFrom} - {dateTo} </span>
|
<span className="font-muted" > {dateFrom} - {dateTo} </span>
|
||||||
</div>
|
</div>
|
||||||
<span className="block text-xs " > {details} </span>
|
<span className="font-muted" > {details} </span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</article>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { useRef, useEffect, type ElementType } from "react";
|
||||||
import { Border } from "./Border";
|
import { Border } from "./Border";
|
||||||
import ExternalLinkIcon from "./ExternalLinkIcon";
|
import ExternalLinkIcon from "./ExternalLinkIcon";
|
||||||
|
|
||||||
@ -9,15 +10,32 @@ export interface ListItemProps {
|
|||||||
|
|
||||||
export default function ListItem({ label, date, url }: ListItemProps) {
|
export default function ListItem({ label, date, url }: ListItemProps) {
|
||||||
return (
|
return (
|
||||||
<div className="cursor-pointer flex flex-row items-baseline justify-between gap-2">
|
<div className="flex-row flex-between y-bottom gap-1">
|
||||||
<a href={url} target="_blank">
|
<Link {...{ url, label }} />
|
||||||
<p className="text-xs ">{label}</p>
|
<Divider />
|
||||||
</a>
|
<Date {...{ date }} />
|
||||||
<Border />
|
<ExternalLinkIcon />
|
||||||
<div className="flex gap-1 items-baseline">
|
|
||||||
{!!date && <i className="text-xs">{date}</i>}
|
|
||||||
<ExternalLinkIcon />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function Link({ url, label }) {
|
||||||
|
return (
|
||||||
|
<a href={url} target="_blank">
|
||||||
|
{label}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Divider() {
|
||||||
|
return (
|
||||||
|
<div style={{ border: '1px dashed #fff2' }} className="flex-1" />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Date({ date }) {
|
||||||
|
if (!date) return null
|
||||||
|
return <i className="font-muted" >{date}</i>
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@ -12,7 +12,7 @@ function MDContainer({ post, fileNames }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Container">
|
<div className="">
|
||||||
{posts.map(p => (
|
{posts.map(p => (
|
||||||
<MDContent key={uuidv4()} content={p} handleOpenNewContent={handleClick} fileNames={fileNames} />
|
<MDContent key={uuidv4()} content={p} handleOpenNewContent={handleClick} fileNames={fileNames} />
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -12,25 +12,25 @@ interface BackLinksProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function BackLinks({ linkList }: BackLinksProps) {
|
function BackLinks({ linkList }: BackLinksProps) {
|
||||||
return (<div className="note-footer">
|
return (<div className="">
|
||||||
<h3 className="backlink-heading">Link to this note</h3>
|
<h3 className="">Link to this note</h3>
|
||||||
{(linkList != null && linkList.length > 0)
|
{(linkList != null && linkList.length > 0)
|
||||||
?
|
?
|
||||||
<>
|
<>
|
||||||
<div className="backlink-container">
|
<div className="">
|
||||||
{linkList.map(aLink =>
|
{linkList.map(aLink =>
|
||||||
<div key={aLink.slug} className="backlink">
|
<div key={aLink.slug} className="">
|
||||||
{/*<Link href={aLink.slug}>*/}
|
{/*<Link href={aLink.slug}>*/}
|
||||||
<a href={aLink.slug}>
|
<a href={aLink.slug}>
|
||||||
<p className="backlink-title">{aLink.title}</p>
|
<p className="">{aLink.title}</p>
|
||||||
<p className="backlink-preview">{aLink.shortSummary} </p>
|
<p className="">{aLink.shortSummary} </p>
|
||||||
</a>
|
</a>
|
||||||
{/*</Link>*/}
|
{/*</Link>*/}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
: <> <p className="no-backlinks"> No backlinks found</p> </>}
|
: <> <p className=""> No backlinks found</p> </>}
|
||||||
</div>);
|
</div>);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -45,7 +45,7 @@ function MDContent({ content, backLinks }: MDContentProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="markdown-rendered">
|
<div className="flex-1 p-xl">
|
||||||
<div dangerouslySetInnerHTML={{ __html: content }} />
|
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||||
<BackLinksGroup links={backLinks} />
|
<BackLinksGroup links={backLinks} />
|
||||||
<hr />
|
<hr />
|
||||||
@ -64,7 +64,7 @@ function BackLinksGroup({ links }: BackLinksGroupProps) {
|
|||||||
|
|
||||||
if (!links?.length) {
|
if (!links?.length) {
|
||||||
return (
|
return (
|
||||||
<p className="no-backlinks"> No backlinks found</p>
|
<p className=""> No backlinks found</p>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,9 +6,7 @@ export interface SkillProps {
|
|||||||
export default function Skill({ label, link = "#" }: SkillProps) {
|
export default function Skill({ label, link = "#" }: SkillProps) {
|
||||||
return (
|
return (
|
||||||
<a href={link} target="_blank" style={{ textDecoration: 'none !important' }}>
|
<a href={link} target="_blank" style={{ textDecoration: 'none !important' }}>
|
||||||
<div className={`hover:scale-110 transition duration-100 bg-slate-500 text-white rounded-xl px-2 py-1 text-xs`}>
|
{label}
|
||||||
{label}
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
export function SocialLink({ SvgElement, link = "#" }) {
|
export function SocialLink({ SvgElement, link = "#" }) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<span>
|
||||||
<a href={link}>
|
<a href={link} >
|
||||||
{SvgElement}
|
{SvgElement}
|
||||||
</a>
|
</a>
|
||||||
</div >
|
</span >
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,15 @@
|
|||||||
import { SocialLink } from "./SocialLink"
|
import { SocialLink } from "./SocialLink"
|
||||||
|
|
||||||
export function SocialLinksList() {
|
export function SocialLinksList() {
|
||||||
const width = 36
|
const width = 26
|
||||||
|
const size = '1.6rem'
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-5 grid-rows-1 gap-2 list-none ">
|
<div className="flex gap-1">
|
||||||
<SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>} />
|
<SocialLink SvgElement={<svg style={{ width: size, heigth: size }} className="hover-scale" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>} />
|
||||||
<SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /> <rect x="2" y="9" width="4" height="12" /> <circle cx="4" cy="4" r="2" /></svg>} />
|
<SocialLink SvgElement={<svg style={{ width: size, heigth: size }} className="hover-scale" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /> <rect x="2" y="9" width="4" height="12" /> <circle cx="4" cy="4" r="2" /></svg>} />
|
||||||
<SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z" /></svg>} />
|
<SocialLink SvgElement={<svg style={{ width: size, heigth: size }} className="hover-scale" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z" /></svg>} />
|
||||||
<SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} stroke="currentcolor" xmlns="http://www.w3.org/2000/svg"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" /></svg>} />
|
<SocialLink SvgElement={<svg style={{ width: size, heigth: size }} className="hover-scale" viewBox={`0 0 ${width} ${width}`} stroke="currentcolor" xmlns="http://www.w3.org/2000/svg"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" /></svg>} />
|
||||||
<SocialLink SvgElement={<svg className="h-7 w-7 text-white" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" /></svg>} />
|
<SocialLink SvgElement={<svg style={{ width: size, heigth: size }} className="hover-scale" viewBox={`0 0 ${width} ${width}`} fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" /></svg>} />
|
||||||
</div >
|
</div >
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,10 +2,10 @@ import ExternalLinkIcon from "../ExternalLinkIcon.js";
|
|||||||
|
|
||||||
export function UsefulLink({ title, link }) {
|
export function UsefulLink({ title, link }) {
|
||||||
return (
|
return (
|
||||||
<a href={link} className="text-white">
|
<a href={link} className="">
|
||||||
<li className="flex w-full items-baseline gap-1">
|
<li className="">
|
||||||
<div>{title}</div>
|
<div>{title}</div>
|
||||||
<div className="border flex-1 h-0 border-dashed " />
|
<div className="" />
|
||||||
<ExternalLinkIcon />
|
<ExternalLinkIcon />
|
||||||
</li>
|
</li>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -3,15 +3,31 @@ import { UsefulLink } from "./UsefulLink"
|
|||||||
|
|
||||||
export function UsefulLinksList() {
|
export function UsefulLinksList() {
|
||||||
return (
|
return (
|
||||||
<ul className="list-none m-0 p-0 flex flex-col">
|
<>
|
||||||
<ListItem label="CSS-Tricks" url="" />
|
<div className="flex-col">
|
||||||
<ListItem label="Indie Hackers" url="" />
|
<h5>🧰 Tools</h5>
|
||||||
<ListItem label="W3Schools" url="" />
|
<ListItem label="CSS-Tricks" url="" />
|
||||||
<ListItem label="Simple Icons" url="https://simpleicons.org" />
|
<ListItem label="Indie Hackers" url="" />
|
||||||
<ListItem label="Hero Icons" url="https://heroicons.com" />
|
<ListItem label="W3Schools" url="" />
|
||||||
<ListItem label="Tailwind Cheatsheet" url="https://nerdcave.com/tailwind-cheat-sheet" />
|
<ListItem label="Simple Icons" url="https://simpleicons.org" />
|
||||||
<ListItem label="Tailwind Elements" url="https://tw-elements.com" />
|
<ListItem label="Hero Icons" url="https://heroicons.com" />
|
||||||
<ListItem label="Tailwind Components" url="https://tailwindcomponents.com" />
|
<ListItem label="Tailwind Cheatsheet" url="https://nerdcave.com/tailwind-cheat-sheet" />
|
||||||
</ul>
|
<ListItem label="Tailwind Elements" url="https://tw-elements.com" />
|
||||||
|
<ListItem label="Tailwind Components" url="https://tailwindcomponents.com" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-col">
|
||||||
|
<h5>🎨 NoCss</h5>
|
||||||
|
<ListItem label="Water CSS" url="https://watercss.kognise.dev" />
|
||||||
|
<ListItem label="MPV CSS" url="https://andybrewer.github.io/mvp/" />
|
||||||
|
<ListItem label="Bahunya" url="https://hakanalpay.com/bahunya/" />
|
||||||
|
<ListItem label="Marx" url="https://mblode.github.io/marx/" />
|
||||||
|
<ListItem label="Sakura" url="https://oxal.org/projects/sakura/" />
|
||||||
|
<ListItem label="Tacit" url="https://yegor256.github.io/tacit/" />
|
||||||
|
<ListItem label="New CSS" url="https://newcss.net" />
|
||||||
|
<ListItem label="Bullframe CSS" url="https://marcop135.github.io/bullframe.css/" />
|
||||||
|
<ListItem label="Markdown CSS (modest)" url="https://markdowncss.github.io/modest/" />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -68,7 +68,6 @@
|
|||||||
"remark-frontmatter": "latest",
|
"remark-frontmatter": "latest",
|
||||||
"remark-react": "latest",
|
"remark-react": "latest",
|
||||||
"remark-stringify": "latest",
|
"remark-stringify": "latest",
|
||||||
"tailwindcss": "latest",
|
|
||||||
"uuid": "latest"
|
"uuid": "latest"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import type { AppProps } from "next/app";
|
|
||||||
import "../styles/global.css";
|
import "../styles/global.css";
|
||||||
import "../styles/prism.css";
|
import "../styles/prism.css";
|
||||||
|
import type { AppProps } from "next/app";
|
||||||
import type { HomeProps } from "./notes";
|
import type { HomeProps } from "./notes";
|
||||||
import type React from "react";
|
import type React from "react";
|
||||||
|
|
||||||
|
|||||||
141
pages/index.tsx
141
pages/index.tsx
@ -13,86 +13,93 @@ interface LandingProps {
|
|||||||
projects: ProjectsType[]
|
projects: ProjectsType[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* bahunya.css <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
|
||||||
|
*
|
||||||
|
* new.css
|
||||||
|
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" />
|
||||||
|
*/
|
||||||
export default function Landing({ jobs, skills, projects }: LandingProps) {
|
export default function Landing({ jobs, skills, projects }: LandingProps) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
<body className="bg-gradient-to-b from-richBlack from-30% to-black to-90% container max-w-full mx-auto text-gray-300 py-24 px-4 w-full sm:px-20 md:px-16" />
|
<meta name="color-scheme" content='dark' />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main className="flex flex-col-reverse gap-8 md:grid md:grid-cols-8">
|
<article>
|
||||||
<aside className="md:col-start-1 md:col-span-3 lg:col-span-2">
|
<p>Probably going to put something here</p>
|
||||||
<div className='sticky top-10 flex flex-col gap-4'>
|
</article>
|
||||||
<section className="row-span-1 col-span-6" >
|
|
||||||
<h2 className="mt-1">Useful Links</h2>
|
|
||||||
<UsefulLinksList />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="hidden sm:grid grid-rows-3 col-start-1 col-span-6 row-span-1" >
|
<header>
|
||||||
<div className="row-span-1">
|
<div className="flex-col gap-05">
|
||||||
<SocialLinksList />
|
<img style={{ border: '1px dashed var(--links)' }} className="rounded xl "
|
||||||
</div>
|
src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
|
||||||
</section>
|
<h1 className='m-0'>Triston Armstrong 🫰</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Full Stack Software Developer {' '}
|
||||||
|
<a target="_blank" href="https://ventrahealth.com">
|
||||||
|
@VentraHealth
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
|
||||||
|
problems using code.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="">
|
||||||
|
<section>
|
||||||
|
<h4>🤹 Skills</h4>
|
||||||
|
<div className="flex gap-1" id="skills">
|
||||||
|
{skills.map(skill => <Skill key={skill.label} label={skill.label} />)}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</section>
|
||||||
|
|
||||||
<section className=" flex gap-1 flex-col md:col-start-4 col-span-5 lg:col-start-3 xl:col-span-4">
|
<section>
|
||||||
<article>
|
<h4>💼 Jobs</h4>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex-col " id="jobs">
|
||||||
<div className="flex gap-4 items-center">
|
{jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
|
||||||
<img className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
|
</div>
|
||||||
src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
|
</section>
|
||||||
<h1 className="text-2xl font-bold">Triston Armstrong</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
|
|
||||||
className="text-blue-500">VentraHealth</a></p>
|
|
||||||
<div className="w-full border-dashed border-slate-500 my-4 border "></div>
|
|
||||||
<p className="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
|
|
||||||
problems using code.</p>
|
|
||||||
|
|
||||||
<section className="sm:hidden" >
|
|
||||||
<div className="row-span-1 ">
|
|
||||||
<SocialLinksList />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<Border className="sm:hidden" />
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
<section>
|
||||||
<h2 className="text-1xl font-bold uppercase">Skills</h2>
|
<h4>🚧 Projects</h4>
|
||||||
<div className="flex gap-2 py-4" id="skills">
|
<div className='flex-col'>
|
||||||
{skills.map(skill => <Skill key={skill.label} label={skill.label} />)}
|
{projects.map(project => <ListItem key={project.label} label={project.label} date={project.date} url={project.url} />)}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<h2 className="text-1xl font-bold uppercase">Jobs</h2>
|
|
||||||
<div className="flex flex-col gap-3 py-4" id="jobs">
|
|
||||||
{jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
|
|
||||||
<div className="flex flex-col gap-1 py-4" id="projects">
|
|
||||||
{projects.map(project => <ListItem key={project.label} label={project.label} date={project.date} url={project.url} />)}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<h2 className="text-1xl font-bold uppercase">Notes</h2>
|
|
||||||
<p>An endless trail of links to my personal notes</p>
|
|
||||||
<a href="/notes" target="_blank">Go To Notes {'->'}</a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<h2 className="text-1xl font-bold uppercase">Experimental Stuff</h2>
|
|
||||||
<a href="/portfolio2" target="_blank">Portfolio 2 {"->"}</a>
|
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
|
<footer className='flex-col flex-between gap-1 mt-4 '>
|
||||||
|
<div className='flex-row gap-1'>
|
||||||
|
<a href="/notes" target="_blank" className='text-md font-muted font-bold'>🏃 Notes</a>
|
||||||
|
{"|"}
|
||||||
|
<a href="/portfolio2" target="_blank" className='text-md font-muted font-bold'>🏃 Playground</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex-row gap-1'>
|
||||||
|
<UsefulLinksList />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ margin: "10px 0" }} />
|
||||||
|
|
||||||
|
<div className='flex-row flex-between '>
|
||||||
|
<div className='flex-row gap-1'>
|
||||||
|
<SocialLinksList />
|
||||||
|
</div>
|
||||||
|
<small>©2023-2024 Triston Armstrong. All rights reserved.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</div >
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -21,11 +21,13 @@ export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes
|
|||||||
<Layout>
|
<Layout>
|
||||||
<Head>
|
<Head>
|
||||||
{note.title && <meta name="title" content={note.title} />}
|
{note.title && <meta name="title" content={note.title} />}
|
||||||
</Head>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
|
||||||
<div className='notes-container '>
|
<body style={{ margin: 0, padding: 0 }} /> </Head>
|
||||||
<nav className="nav-bar">
|
<div className='flex gap-1 w-full'>
|
||||||
|
<nav className="">
|
||||||
<FolderTree tree={tree} flattenNodes={flattenNodes} />
|
<FolderTree tree={tree} flattenNodes={flattenNodes} />
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<MDContent content={note.data} backLinks={backLinks} />
|
<MDContent content={note.data} backLinks={backLinks} />
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import Layout from "components/Layout";
|
|||||||
import Util from 'lib/utils'
|
import Util from 'lib/utils'
|
||||||
import FolderTree from "components/FolderTree";
|
import FolderTree from "components/FolderTree";
|
||||||
import MDContent, { type LinkType } from "components/MDContent";
|
import MDContent, { type LinkType } from "components/MDContent";
|
||||||
|
import Head from "next/head";
|
||||||
|
|
||||||
|
|
||||||
export interface HomeProps {
|
export interface HomeProps {
|
||||||
@ -14,8 +15,11 @@ export interface HomeProps {
|
|||||||
export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
|
export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className='notes-container '>
|
<Head>
|
||||||
<nav className="nav-bar">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
|
||||||
|
</Head>
|
||||||
|
<div className=''>
|
||||||
|
<nav className="">
|
||||||
<FolderTree tree={tree} flattenNodes={flattenNodes} />
|
<FolderTree tree={tree} flattenNodes={flattenNodes} />
|
||||||
</nav>
|
</nav>
|
||||||
<MDContent content={content} backLinks={backLinks} />
|
<MDContent content={content} backLinks={backLinks} />
|
||||||
|
|||||||
@ -1,683 +1,249 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* LOGO Theme colors */
|
/* PUT OVERRIDES HERE */
|
||||||
--rich-black: #071425ff;
|
/*--links: #ff0000 !important;*/
|
||||||
--air-force-blue: #6f8fa5ff;
|
--elevated: #ffffff0a;
|
||||||
--light-blue: #a5c6cdff;
|
|
||||||
--white: #ffffffff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
transition: all .1s ease-in-out;
|
||||||
|
|
||||||
@layer components {
|
|
||||||
.nav-bar {
|
|
||||||
@apply px-5 py-2 bg-slate-500 bg-opacity-20 flex flex-col;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-container {
|
|
||||||
@apply flex min-h-screen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-rendered {
|
|
||||||
@apply container mx-auto p-10 max-w-3xl;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
.flex-row {
|
||||||
:root {
|
display: flex;
|
||||||
--background-body: #071425ff;
|
flex-direction: row;
|
||||||
--background: #6f8fa5ff;
|
width: 100%;
|
||||||
--background-alt: #6f8fa5ff;
|
flex: 1;
|
||||||
--selection: #1c76c5;
|
}
|
||||||
--text-main: #a5c6cdff;
|
|
||||||
--text-bright: #ffffffff;
|
.flex-col {
|
||||||
--text-muted: #a9b1ba;
|
display: flex;
|
||||||
--links: #41adff;
|
flex-direction: column;
|
||||||
--focus: #0096bfab;
|
width: 100%;
|
||||||
--border: #526980;
|
flex: 1;
|
||||||
--code: #ffbe85;
|
}
|
||||||
--animation-duration: 0.1s;
|
|
||||||
--button-base: #0c151c;
|
.flex-1 {
|
||||||
--button-hover: #040a0f;
|
flex: 1
|
||||||
--scrollbar-thumb: var(--button-hover);
|
}
|
||||||
--scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
|
|
||||||
--form-placeholder: #a9a9a9;
|
.wrap {
|
||||||
--form-text: #fff;
|
flex-wrap: wrap;
|
||||||
--variable: #d941e2;
|
}
|
||||||
--highlight: #efdb43;
|
|
||||||
--select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
|
|
||||||
}
|
/* WIDTH HEIGHT ---------------------------------*/
|
||||||
|
.sm {
|
||||||
/* base --------------------------------*/
|
width: 1rem;
|
||||||
html {
|
height: 1rem;
|
||||||
scrollbar-color: var(--scrollbar-thumb) var(--background-body);
|
}
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
.md {
|
||||||
|
width: 2rem;
|
||||||
body {
|
height: 2rem;
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
|
}
|
||||||
line-height: 1.4;
|
|
||||||
word-wrap: break-word;
|
.lg {
|
||||||
color: var(--text-main);
|
width: 3rem;
|
||||||
background: var(--background-body);
|
height: 3rem;
|
||||||
text-rendering: optimizeLegibility;
|
}
|
||||||
}
|
|
||||||
|
.xl {
|
||||||
button,
|
width: 4rem;
|
||||||
input,
|
height: 4rem;
|
||||||
textarea {
|
}
|
||||||
transition:
|
|
||||||
background-color var(--animation-duration) linear,
|
.w-full {
|
||||||
border-color var(--animation-duration) linear,
|
width: 100dvw;
|
||||||
color var(--animation-duration) linear,
|
}
|
||||||
box-shadow var(--animation-duration) linear,
|
|
||||||
transform var(--animation-duration) ease;
|
.h-full {
|
||||||
}
|
height: 100dvh;
|
||||||
|
}
|
||||||
ol,
|
|
||||||
ul,
|
.x-center {
|
||||||
menu {
|
align-items: center;
|
||||||
list-style: revert;
|
}
|
||||||
margin: revert;
|
|
||||||
padding: revert;
|
.y-center {
|
||||||
}
|
justify-content: center;
|
||||||
|
}
|
||||||
/* code --------------------------------*/
|
|
||||||
code,
|
.y-bottom {
|
||||||
samp,
|
align-items: baseline;
|
||||||
time {
|
}
|
||||||
background: var(--background);
|
|
||||||
color: var(--code);
|
.flex-between {
|
||||||
padding: 2.5px 5px;
|
justify-content: space-between;
|
||||||
border-radius: 6px;
|
}
|
||||||
font-size: 1em;
|
|
||||||
}
|
.flex {
|
||||||
|
display: flex;
|
||||||
pre>code {
|
}
|
||||||
padding: 10px;
|
|
||||||
display: block;
|
.gap-05 {
|
||||||
overflow-x: auto;
|
gap: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
var {
|
.gap-1 {
|
||||||
color: var(--variable);
|
gap: 1rem;
|
||||||
font-style: normal;
|
}
|
||||||
font-family: monospace;
|
|
||||||
}
|
.bg-grey {
|
||||||
|
background-color: grey;
|
||||||
kbd {
|
}
|
||||||
background: var(--background);
|
|
||||||
border: 1px solid var(--border);
|
.p-sm {
|
||||||
border-radius: 2px;
|
padding: 4px;
|
||||||
color: var(--text-main);
|
}
|
||||||
padding: 2px 4px 2px 4px;
|
|
||||||
}
|
.p-md {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
/* forms --------------------------------*/
|
|
||||||
button,
|
.p-lg {
|
||||||
select,
|
padding: 1rem;
|
||||||
input[type='submit'],
|
}
|
||||||
input[type='reset'],
|
|
||||||
input[type='button'],
|
.p-xl {
|
||||||
input[type='checkbox'],
|
padding: 2rem;
|
||||||
input[type='range'],
|
}
|
||||||
input[type='radio'] {
|
|
||||||
cursor: pointer;
|
.text-sm {
|
||||||
}
|
font-size: 1rem;
|
||||||
|
}
|
||||||
input,
|
|
||||||
select {
|
.text-md {
|
||||||
display: block;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type='checkbox'],
|
.text-lg {
|
||||||
[type='radio'] {
|
font-size: 1.4rem;
|
||||||
display: initial;
|
}
|
||||||
}
|
|
||||||
|
.font-muted {
|
||||||
input,
|
color: var(--text-muted);
|
||||||
button,
|
}
|
||||||
textarea,
|
|
||||||
select {
|
.font-main {
|
||||||
color: var(--form-text);
|
color: var(--text-main);
|
||||||
background-color: var(--background);
|
}
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
.font-bold {
|
||||||
margin-right: 6px;
|
font-weight: bold;
|
||||||
margin-bottom: 6px;
|
}
|
||||||
padding: 10px;
|
|
||||||
border: none;
|
.h-0 {
|
||||||
border-radius: 6px;
|
height: 0;
|
||||||
outline: none;
|
}
|
||||||
}
|
|
||||||
|
/* BORDER ---------------------------------- */
|
||||||
button,
|
.border-dashed {
|
||||||
input[type='submit'],
|
border-style: dashed;
|
||||||
input[type='reset'],
|
}
|
||||||
input[type='button'] {
|
|
||||||
background-color: var(--button-base);
|
.border-grey {
|
||||||
padding-right: 30px;
|
border-color: grey;
|
||||||
padding-left: 30px;
|
}
|
||||||
}
|
|
||||||
|
.border-1 {
|
||||||
button:hover,
|
border-width: 1px;
|
||||||
input[type='submit']:hover,
|
}
|
||||||
input[type='reset']:hover,
|
|
||||||
input[type='button']:hover {
|
.rounded {
|
||||||
background: var(--button-hover);
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='color'] {
|
.rounded-sm {
|
||||||
min-height: 2rem;
|
border-radius: 10px;
|
||||||
padding: 8px;
|
}
|
||||||
cursor: pointer;
|
|
||||||
}
|
/* MARGIN ----------------------------------*/
|
||||||
|
.mt-4 {
|
||||||
input[type='checkbox'],
|
margin-top: 4rem;
|
||||||
input[type='radio'] {
|
}
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
.m-0 {
|
||||||
}
|
margin: 0;
|
||||||
|
}
|
||||||
input[type='radio'] {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
/* HOVER ----------------------------------*/
|
||||||
|
.hover-scale:hover {
|
||||||
input {
|
transform: scale(1.2);
|
||||||
vertical-align: top;
|
}
|
||||||
}
|
|
||||||
|
.hover-font-yellow:hover {
|
||||||
label {
|
color: var(--links);
|
||||||
vertical-align: middle;
|
}
|
||||||
margin-bottom: 4px;
|
|
||||||
display: inline-block;
|
.hover-pointer:hover {
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
input:not([type='checkbox']):not([type='radio']),
|
|
||||||
input[type='range'],
|
|
||||||
select,
|
/* BACKGROUND ----------------------------------*/
|
||||||
button,
|
.bg-elevated {
|
||||||
textarea {
|
background-color: var(--elevated);
|
||||||
-webkit-appearance: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
/* OVERRIDES ----------------------------------*/
|
||||||
display: block;
|
article {
|
||||||
margin-right: 0;
|
@apply bg-elevated;
|
||||||
box-sizing: border-box;
|
}
|
||||||
resize: vertical;
|
|
||||||
}
|
body nav:first-of-type::before {
|
||||||
|
backdrop-filter: unset;
|
||||||
textarea:not([cols]) {
|
-webkit-backdrop-filter: unset;
|
||||||
width: 100%;
|
content: unset;
|
||||||
}
|
position: unset;
|
||||||
|
z-index: unset;
|
||||||
textarea:not([rows]) {
|
top: unset;
|
||||||
min-height: 40px;
|
left: unset;
|
||||||
height: 140px;
|
right: unset;
|
||||||
}
|
bottom: unset;
|
||||||
|
}
|
||||||
select {
|
|
||||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
body nav:first-of-type {
|
||||||
padding-right: 35px;
|
position: unset;
|
||||||
}
|
padding: 1rem !important;
|
||||||
|
align-items: unset !important;
|
||||||
select::-ms-expand {
|
width: unset !important;
|
||||||
display: none;
|
min-height: 100dvh !important;
|
||||||
}
|
flex-direction: column !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
select[multiple] {
|
-webkit-touch-callout: none;
|
||||||
padding-right: 10px;
|
/* iOS Safari */
|
||||||
background-image: none;
|
-webkit-user-select: none;
|
||||||
overflow-y: auto;
|
/* Safari */
|
||||||
}
|
-khtml-user-select: none;
|
||||||
|
/* Konqueror HTML */
|
||||||
input:focus,
|
-moz-user-select: none;
|
||||||
select:focus,
|
/* Old versions of Firefox */
|
||||||
button:focus,
|
-ms-user-select: none;
|
||||||
textarea:focus {
|
/* Internet Explorer/Edge */
|
||||||
box-shadow: 0 0 0 2px var(--focus);
|
user-select: none;
|
||||||
}
|
backdrop-filter: saturate(180%) blur(5px);
|
||||||
|
-webkit-backdrop-filter: saturate(180%) blur(5px);
|
||||||
input[type='checkbox']:active,
|
}
|
||||||
input[type='radio']:active,
|
|
||||||
input[type='submit']:active,
|
body nav:first-of-type ul {
|
||||||
input[type='reset']:active,
|
list-style-type: unset !important;
|
||||||
input[type='button']:active,
|
margin: unset !important;
|
||||||
input[type='range']:active,
|
padding: unset !important;
|
||||||
button:active {
|
overflow: unset !important;
|
||||||
transform: translateY(2px);
|
display: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled,
|
body nav:first-of-type ul li {
|
||||||
select:disabled,
|
float: unset !important;
|
||||||
button:disabled,
|
}
|
||||||
textarea:disabled {
|
|
||||||
cursor: not-allowed;
|
body nav:first-of-type ul li ul {
|
||||||
opacity: 0.5;
|
display: unset !important;
|
||||||
}
|
position: unset !important;
|
||||||
|
background: unset !important;
|
||||||
::placeholder {
|
backdrop-filter: unset !important;
|
||||||
color: var(--form-placeholder);
|
-webkit-backdrop-filter: unset !important;
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px var(--focus) solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* links --------------------------------*/
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--links);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* misc --------------------------------*/
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: none;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
table-layout: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
table caption {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: 6px;
|
|
||||||
text-align: left;
|
|
||||||
vertical-align: top;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
tfoot {
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(even) {
|
|
||||||
background-color: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(even) button {
|
|
||||||
background-color: var(--background-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(even) button:hover {
|
|
||||||
background-color: var(--background-body);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: var(--background);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--scrollbar-thumb);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--scrollbar-thumb-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background-color: var(--selection);
|
|
||||||
color: var(--text-bright);
|
|
||||||
}
|
|
||||||
|
|
||||||
details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
background-color: var(--background-alt);
|
|
||||||
padding: 10px 10px 0;
|
|
||||||
margin: 1em 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
details[open] {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
details> :last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
details[open] summary {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
background-color: var(--background);
|
|
||||||
padding: 10px;
|
|
||||||
margin: -10px -10px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary:hover,
|
|
||||||
summary:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
details> :not(summary) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary::-webkit-details-marker {
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog {
|
|
||||||
background-color: var(--background-alt);
|
|
||||||
color: var(--text-main);
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
border-color: var(--border);
|
|
||||||
padding: 10px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog>header:first-child {
|
|
||||||
background-color: var(--background);
|
|
||||||
border-radius: 6px 6px 0 0;
|
|
||||||
margin: -10px -30px 10px;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog::backdrop {
|
|
||||||
background: #0000009c;
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
padding-top: 10px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
body>footer {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* print --------------------------------*/
|
|
||||||
@media print {
|
|
||||||
|
|
||||||
body,
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
summary,
|
|
||||||
details,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
body,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
footer,
|
|
||||||
summary,
|
|
||||||
strong {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary::marker {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary::-webkit-details-marker {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(even) {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #00f;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* range --------------------------------*/
|
|
||||||
input[type='range'] {
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-webkit-slider-runnable-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 9.5px;
|
|
||||||
transition: 0.2s;
|
|
||||||
background: var(--background);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-webkit-slider-thumb {
|
|
||||||
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--border);
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin-top: -7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-moz-range-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 9.5px;
|
|
||||||
transition: 0.2s;
|
|
||||||
background: var(--background);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-moz-range-thumb {
|
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-ms-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 9.5px;
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
border-width: 16px 0;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-ms-fill-lower {
|
|
||||||
background: var(--background);
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-ms-fill-upper {
|
|
||||||
background: var(--background);
|
|
||||||
border: 0.2px solid #010101;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']::-ms-thumb {
|
|
||||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
|
||||||
border: 1px solid #000;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']:focus::-ms-fill-lower {
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='range']:focus::-ms-fill-upper {
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* typography --------------------------------*/
|
|
||||||
h1 {
|
|
||||||
font-size: 2.2em;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
strong {
|
|
||||||
color: var(--text-bright);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
b,
|
|
||||||
strong,
|
|
||||||
th {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
q::before {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
q::after {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
q {
|
|
||||||
border-left: 4px solid var(--focus);
|
|
||||||
margin: 1.5em 0;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote>footer {
|
|
||||||
font-style: normal;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote cite {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
address {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
a[href^='mailto\:']::before {
|
|
||||||
content: '📧 ';
|
|
||||||
}
|
|
||||||
|
|
||||||
a[href^='tel\:']::before {
|
|
||||||
content: '📞 ';
|
|
||||||
}
|
|
||||||
|
|
||||||
a[href^='sms\:']::before {
|
|
||||||
content: '💬 ';
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background-color: var(--highlight);
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 0 2px 0 2px;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
a>code,
|
|
||||||
a>strong {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
import defaultTheme, { fontFamily as _fontFamily } from 'tailwindcss/defaultTheme'
|
|
||||||
|
|
||||||
export const content = [
|
|
||||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
'./components/**/*.{js,ts,jsx,tsx,mdx}'
|
|
||||||
]
|
|
||||||
export const theme = {
|
|
||||||
...defaultTheme,
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter var', ..._fontFamily.sans]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export const plugins = []
|
|
||||||
Loading…
Reference in New Issue
Block a user