joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

colors and gradients

Browse source
This commit is contained in:
Joshua Seigler 2025-06-16 00:46:07 -04:00
parent 2895c107e6
commit 277945f7ec
4 changed files with 63 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

83
site/_includes/css/prism.css
View file

@ -1,4 +1,4 @@
/* Prism Material */
/* Prism Material with some adjustments */
code[class*="language-"],
pre[class*="language-"] {
text-align: left;
@ -45,48 +45,45 @@ p:has(>code) + pre[class*="language-"] {
}
.token.id { font-weight: bold; }
.token.important { font-weight: bold; }
/* Prism Material Light */
.language-css > code,
.language-sass > code,
.language-scss > code {
color: #f76d47;
}
.token.atrule { color: #7c4dff; }
.token.attr-name { color: #39adb5; }
.token.attr-value { color: #f6a434; }
.token.attribute { color: #f6a434; }
.token.boolean { color: #7c4dff; }
.token.builtin { color: #39adb5; }
.token.cdata { color: #39adb5; }
.token.char { color: #39adb5; }
.token.class { color: #39adb5; }
.token.class-name { color: #6182b8; }
.token.comment { color: #aabfc9; }
.token.constant { color: #7c4dff; }
.token.deleted { color: #e53935; }
.token.doctype { color: #aabfc9; }
.token.entity { color: #e53935; }
.token.function { color: #7c4dff; }
.token.hexcode { color: #f76d47; }
.token.id { color: #7c4dff; }
.token.important { color: #7c4dff; }
.token.inserted { color: #39adb5; }
.token.keyword { color: #7c4dff; }
.token.number { color: #f76d47; }
.token.operator { color: #39adb5; }
.token.prolog { color: #aabfc9; }
.token.property { color: #39adb5; }
.token.pseudo-class { color: #f6a434; }
.token.pseudo-element { color: #f6a434; }
.token.punctuation { color: #39adb5; }
.token.regex { color: #6182b8; }
.token.selector { color: #e53935; }
.token.string { color: #f6a434; }
.token.symbol { color: #7c4dff; }
.token.tag { color: #e53935; }
.token.unit { color: #f76d47; }
.token.url { color: #e53935; }
.token.variable { color: #e53935; }
/* Prism Material Light, darkened in LCH by 50% */
.language-scss > code { color: oklch(0.349 0.178 36.3); }
.token.atrule { color: oklch(0.29 0.247 288.2); }
.token.attr-name { color: oklch(0.344 0.101 201.7); }
.token.attr-value { color: oklch(0.391 0.153 69.5); }
.token.attribute { color: oklch(0.391 0.153 69.5); }
.token.boolean { color: oklch(0.29 0.247 288.2); }
.token.builtin { color: oklch(0.344 0.101 201.7); }
.token.cdata { color: oklch(0.344 0.101 201.7); }
.token.char { color: oklch(0.344 0.101 201.7); }
.token.class { color: oklch(0.344 0.101 201.7); }
.token.class-name { color: oklch(0.302 0.091 260); }
.token.comment { color: oklch(0.396 0.027 228); }
.token.constant { color: oklch(0.29 0.247 288.2); }
.token.deleted { color: oklch(0.304 0.209 27); }
.token.doctype { color: oklch(0.396 0.027 228); }
.token.entity { color: oklch(0.304 0.209 27); }
.token.function { color: oklch(0.29 0.247 288.2); }
.token.hexcode { color: oklch(0.349 0.178 36.3); }
.token.id { color: oklch(0.29 0.247 288.2); }
.token.important { color: oklch(0.29 0.247 288.2); }
.token.inserted { color: oklch(0.344 0.101 201.7); }
.token.keyword { color: oklch(0.29 0.247 288.2); }
.token.number { color: oklch(0.349 0.178 36.3); }
.token.operator { color: oklch(0.344 0.101 201.7); }
.token.prolog { color: oklch(0.396 0.027 228); }
.token.property { color: oklch(0.344 0.101 201.7); }
.token.pseudo-class { color: oklch(0.391 0.153 69.5); }
.token.pseudo-element { color: oklch(0.391 0.153 69.5); }
.token.punctuation { color: oklch(0.344 0.101 201.7); }
.token.regex { color: oklch(0.302 0.091 260); }
.token.selector { color: oklch(0.304 0.209 27); }
.token.string { color: oklch(0.391 0.153 69.5); }
.token.symbol { color: oklch(0.29 0.247 288.2); }
.token.tag { color: oklch(0.304 0.209 27); }
.token.unit { color: oklch(0.349 0.178 36.3); }
.token.url { color: oklch(0.304 0.209 27); }
.token.variable { color: oklch(0.304 0.209 27); }
/* Prism Material Dark */
[data-theme="dark"] {
.language-css > code,

26
site/_includes/css/site.css
View file

@ -8,15 +8,16 @@
flex-grow: 1;
padding: 0;
line-height: 1.5;
font-display: swap;
}
body {
--c-highlight: oklch(100% 0 0 / 0.875);
--c-accent: white;
--c-dark: oklch(32.1% 0.022 259.9);
--c-body-background: oklch(85% 0 338);
--c-bg1: oklch(85% 0.04 285);
--c-bg2: oklch(85% 0.04 160);
--c-body-background: oklch(87.5% 0 338);
--c-bg1: oklch(87.5% 0.04 285);
--c-bg2: oklch(87.5% 0.04 160);
--c-text-background-light: oklch(96.2% 0 0 / 0.6);
--c-text-light: var(--c-highlight);
@ -44,11 +45,11 @@ body {
--inset: calc(50vw - var(--content-width) / 2);
background-image:
url(/noise.png),
radial-gradient(circle at -20% 20vmin, var(--c-bg1), transparent 60%),
radial-gradient(circle at -20% 20vmin, var(--c-bg1), transparent 150vmin),
radial-gradient(
circle at 120% calc(100% - 20vmin),
var(--c-bg2),
transparent 60%
transparent 150vmin
);
}
@ -106,7 +107,9 @@ body {
flex-grow: 1;
padding: 0;
margin: 0;
font-family: Inter, sans-serif;
font-family:
Inter, Ubuntu, "Noto Sans", "Fira Sans", Roboto, "Helvetica Neue",
"Arial Nova", "Nimbus Sans", Arial, sans-serif;
background-color: var(--c-body-background);
color: var(--c-text-dark);
}
@ -247,7 +250,8 @@ ul.collection {
p {
margin: 0;
}
p + p, pre + p {
p + p,
pre + p {
margin-top: 1lh;
}
blockquote {
@ -546,7 +550,8 @@ a.header-anchor {
margin-bottom: 1rem;
}
p > code, pre {
p > code,
pre {
font-family: "Commit Mono", monospace;
background-color: var(--c-text-background-light);
padding: 0.1em;
@ -594,7 +599,7 @@ body .isso-input-wrapper label {
}
body .isso-input-wrapper input,
input[type='text'],
input[type="text"],
body .isso-textarea,
body .isso-preview {
color: inherit;
@ -627,7 +632,8 @@ body .isso-preview {
var(--c-text-background-light) 20px
);
}
body .isso-post-action > input, button {
body .isso-post-action > input,
button {
color: inherit;
background-color: var(--c-text-background-light);
font-size: 1rem;