mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 11:26:37 -04:00
switch to shiki for syntax highlighting
This commit is contained in:
@ -5,7 +5,7 @@
|
||||
border: 2px solid var(--colors-light);
|
||||
border-radius: 0.6em;
|
||||
color: var(--colors-text);
|
||||
background-color: var(--colors-superDuperLight);
|
||||
background-color: var(--colors-super-duper-light);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
@ -41,12 +41,12 @@
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
color: var(--colors-text);
|
||||
background-color: var(--colors-kindaLight);
|
||||
background-color: var(--colors-kinda-light);
|
||||
}
|
||||
|
||||
.submitButton:hover,
|
||||
.submitButton:focus-visible {
|
||||
color: var(--colors-superDuperLight);
|
||||
color: var(--colors-super-duper-light);
|
||||
background-color: var(--colors-link);
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
body {
|
||||
font-family: var(--fonts-sans) !important;
|
||||
background-color: var(--colors-backgroundInner);
|
||||
background-color: var(--colors-background-inner);
|
||||
}
|
||||
|
||||
code,
|
||||
|
@ -33,7 +33,7 @@ const Page = () => {
|
||||
fontSize: "0.9em",
|
||||
lineHeight: 1.8,
|
||||
margin: "1.25em 1em 0 1em",
|
||||
color: "var(--colors-mediumLight)",
|
||||
color: "var(--colors-medium-light)",
|
||||
}}
|
||||
>
|
||||
Video is property of{" "}
|
||||
|
@ -26,7 +26,7 @@ const Page = () => {
|
||||
fontSize: "0.9em",
|
||||
lineHeight: 1.8,
|
||||
margin: "1.25em 1em 0 1em",
|
||||
color: "var(--colors-mediumLight)",
|
||||
color: "var(--colors-medium-light)",
|
||||
}}
|
||||
>
|
||||
Video is property of{" "}
|
||||
|
@ -28,7 +28,7 @@ const Link = ({
|
||||
href={uniqueId}
|
||||
precedence={styles.page}
|
||||
>
|
||||
{`.t_${uniqueId}{--colors-link:${lightColor};--colors-linkUnderline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .t_${uniqueId}{--colors-link:${darkColor};--colors-linkUnderline:${rgba(darkColor, 0.4)}}`}
|
||||
{`.t_${uniqueId}{--colors-link:${lightColor};--colors-link-underline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .t_${uniqueId}{--colors-link:${darkColor};--colors-link-underline:${rgba(darkColor, 0.4)}}`}
|
||||
</style>
|
||||
</UnstyledLink>
|
||||
);
|
||||
@ -150,7 +150,7 @@ const Page = () => {
|
||||
>
|
||||
the Tooth Fairy
|
||||
</Link>
|
||||
. <span style={{ color: "var(--colors-mediumLight)" }}>I've improved a bit since then, I think? 🤷</span>
|
||||
. <span style={{ color: "var(--colors-medium-light)" }}>I've improved a bit since then, I think? 🤷</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
@ -23,7 +23,7 @@ body:has(.wackyWrapper) a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0.6em 0;
|
||||
border: 2px solid var(--colors-kindaLight);
|
||||
border: 2px solid var(--colors-kinda-light);
|
||||
}
|
||||
|
||||
.screenshot,
|
||||
|
@ -1,7 +1,6 @@
|
||||
import PageTitle from "../../components/PageTitle";
|
||||
import Link from "../../components/Link";
|
||||
import Figure from "../../components/Figure";
|
||||
import CodeInline from "../../components/CodeInline";
|
||||
import HorizontalRule from "../../components/HorizontalRule";
|
||||
import { addMetadata } from "../../lib/helpers/metadata";
|
||||
|
||||
@ -50,14 +49,14 @@ const Page = () => {
|
||||
|
||||
<p style={{ textAlign: "center", margin: "0.5em 0" }}>
|
||||
🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
|
||||
<CodeInline
|
||||
<code
|
||||
style={{
|
||||
fontSize: "0.8em",
|
||||
fontSize: "0.9em",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
color: <span style={{ color: "#32cd32" }}>limegreen</span>
|
||||
</CodeInline>{" "}
|
||||
</code>{" "}
|
||||
ahead...
|
||||
</p>
|
||||
|
||||
|
@ -12,10 +12,10 @@
|
||||
flex-grow: 1;
|
||||
width: 370px;
|
||||
padding: 1.2em 1.2em 0.8em;
|
||||
border: 1px solid var(--colors-kindaLight);
|
||||
border: 1px solid var(--colors-kinda-light);
|
||||
border-radius: 1em;
|
||||
font-size: 0.9em;
|
||||
color: var(--colors-mediumDark);
|
||||
color: var(--colors-medium-dark);
|
||||
}
|
||||
|
||||
.card .name {
|
||||
|
@ -1,59 +1,37 @@
|
||||
:root {
|
||||
--colors-backgroundInner: #ffffff;
|
||||
--colors-backgroundOuter: #fcfcfc;
|
||||
--colors-backgroundHeader: rgb(252 252 252 / 70%);
|
||||
--colors-background-inner: #ffffff;
|
||||
--colors-background-outer: #fcfcfc;
|
||||
--colors-background-header: rgb(252 252 252 / 70%);
|
||||
--colors-text: #202020;
|
||||
--colors-mediumDark: #515151;
|
||||
--colors-medium-dark: #515151;
|
||||
--colors-medium: #5e5e5e;
|
||||
--colors-mediumLight: #757575;
|
||||
--colors-medium-light: #757575;
|
||||
--colors-light: #d2d2d2;
|
||||
--colors-kindaLight: #e3e3e3;
|
||||
--colors-superLight: #f4f4f4;
|
||||
--colors-superDuperLight: #fbfbfb;
|
||||
--colors-kinda-light: #e3e3e3;
|
||||
--colors-super-light: #f4f4f4;
|
||||
--colors-super-duper-light: #fbfbfb;
|
||||
--colors-link: #0e6dc2;
|
||||
--colors-linkUnderline: rgb(14 109 194 / 40%);
|
||||
--colors-link-underline: rgb(14 109 194 / 40%);
|
||||
--colors-success: #44a248;
|
||||
--colors-error: #ff1b1b;
|
||||
--colors-warning: #f78200;
|
||||
--colors-codeText: #313131;
|
||||
--colors-codeBackground: #fdfdfd;
|
||||
--colors-codeComment: #656e77;
|
||||
--colors-codeKeyword: #029cb9;
|
||||
--colors-codeAttribute: #70a800;
|
||||
--colors-codeNamespace: #f92672;
|
||||
--colors-codeLiteral: #ae81ff;
|
||||
--colors-codePunctuation: #111111;
|
||||
--colors-codeVariable: #d88200;
|
||||
--colors-codeAddition: #44a248;
|
||||
--colors-codeDeletion: #ff1b1b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--colors-backgroundInner: #1e1e1e;
|
||||
--colors-backgroundOuter: #252525;
|
||||
--colors-backgroundHeader: rgb(37 37 37 / 85%);
|
||||
--colors-background-inner: #1e1e1e;
|
||||
--colors-background-outer: #252525;
|
||||
--colors-background-header: rgb(37 37 37 / 85%);
|
||||
--colors-text: #f1f1f1;
|
||||
--colors-mediumDark: #d7d7d7;
|
||||
--colors-medium-dark: #d7d7d7;
|
||||
--colors-medium: #b1b1b1;
|
||||
--colors-mediumLight: #959595;
|
||||
--colors-medium-light: #959595;
|
||||
--colors-light: #646464;
|
||||
--colors-kindaLight: #535353;
|
||||
--colors-superLight: #272727;
|
||||
--colors-superDuperLight: #1f1f1f;
|
||||
--colors-kinda-light: #535353;
|
||||
--colors-super-light: #272727;
|
||||
--colors-super-duper-light: #1f1f1f;
|
||||
--colors-link: #88c7ff;
|
||||
--colors-linkUnderline: rgb(136 199 255 / 40%);
|
||||
--colors-link-underline: rgb(136 199 255 / 40%);
|
||||
--colors-success: #78df55;
|
||||
--colors-error: #ff5151;
|
||||
--colors-warning: #f2b702;
|
||||
--colors-codeText: #e4e4e4;
|
||||
--colors-codeBackground: #212121;
|
||||
--colors-codeComment: #929292;
|
||||
--colors-codeKeyword: #3b9dd2;
|
||||
--colors-codeAttribute: #78df55;
|
||||
--colors-codeNamespace: #f95757;
|
||||
--colors-codeLiteral: #d588fb;
|
||||
--colors-codePunctuation: #cccccc;
|
||||
--colors-codeVariable: #fd992a;
|
||||
--colors-codeAddition: #78df55;
|
||||
--colors-codeDeletion: #ff5151;
|
||||
}
|
||||
|
@ -1,5 +1,4 @@
|
||||
import Link from "../../components/Link";
|
||||
import CodeBlock from "../../components/CodeBlock/CodeBlock";
|
||||
import { addMetadata } from "../../lib/helpers/metadata";
|
||||
|
||||
import backgroundImg from "./sundar.jpg";
|
||||
@ -16,54 +15,57 @@ const Page = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
margin: "1em auto",
|
||||
backgroundImage: `url(${backgroundImg.src})`,
|
||||
backgroundRepeat: "repeat",
|
||||
backgroundPosition: "center",
|
||||
borderRadius: "0.6em",
|
||||
}}
|
||||
>
|
||||
<CodeBlock
|
||||
<code
|
||||
style={{
|
||||
backgroundColor: "var(--colors-backgroundHeader)",
|
||||
backgroundColor: "var(--colors-background-header)",
|
||||
backdropFilter: "saturate(180%) blur(5px))",
|
||||
display: "block",
|
||||
overflowX: "auto",
|
||||
padding: "1em",
|
||||
fontSize: "0.9em",
|
||||
tabSize: 2,
|
||||
border: "1px solid var(--colors-kinda-light)",
|
||||
borderRadius: "0.6em",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@
|
||||
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>:
|
||||
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
|
||||
<span style={{ color: "var(--colors-codeLiteral)" }}>mv</span> /root
|
||||
<span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
|
||||
<span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>mv</span> /root
|
||||
<Link href="https://killedbygoogle.com/" style={{ color: "inherit" }} plain>
|
||||
/stable_products_that_people_rely_on/
|
||||
</Link>
|
||||
googledomains.zip /tmp/
|
||||
<br />
|
||||
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@
|
||||
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>:
|
||||
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
|
||||
<span style={{ color: "var(--colors-codeLiteral)" }}>crontab</span>{" "}
|
||||
<span style={{ color: "var(--colors-codeVariable)" }}>-l</span>
|
||||
<span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
|
||||
<span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>crontab</span>{" "}
|
||||
<span style={{ color: "#fd992a" }}>-l</span>
|
||||
<br />
|
||||
<br />
|
||||
<span style={{ color: "var(--colors-codeComment)" }}>
|
||||
<span style={{ color: "#929292" }}>
|
||||
# TODO(someone else): make super duper sure this only deletes actual zip files and *NOT* the sketchy domains
|
||||
ending with file extensions released by us & purchased on our registrar (which i just yeeted btw cuz i'm bored
|
||||
& also my evil superpowers are fueled by my reckless disregard for the greater good of the internet). - xoxo
|
||||
sundar <span style={{ color: "var(--colors-codeNamespace)" }}><3</span>
|
||||
sundar <span style={{ color: "#f95757" }}><3</span>
|
||||
</span>
|
||||
<br />
|
||||
<span style={{ color: "var(--colors-codeAttribute)" }}>@monthly</span>
|
||||
<span style={{ color: "var(--colors-codeLiteral)" }}>rm</span>{" "}
|
||||
<span style={{ color: "var(--colors-codeVariable )" }}>-f</span> /tmp/
|
||||
<span style={{ color: "#78df55" }}>@monthly</span>
|
||||
<span style={{ color: "#d588fb" }}>rm</span> <span style={{ color: "#fd992a" }}>-f</span> /tmp/
|
||||
<Link href="https://fuckyougoogle.zip/" style={{ color: "inherit" }} plain>
|
||||
*.zip
|
||||
</Link>
|
||||
<br />
|
||||
<br />
|
||||
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@
|
||||
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>:
|
||||
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
|
||||
<span style={{ color: "var(--colors-codeLiteral)" }}>reboot</span> 0
|
||||
</CodeBlock>
|
||||
<span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
|
||||
<span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>reboot</span> 0
|
||||
</code>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user