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

8
site/_includes/base.njk
View file

@ -9,6 +9,12 @@ title: Joshua's Homepage
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="stylesheet" href="{{ "/site.css" | url }}"/>
<link rel="preload" as="font" href="/fonts/inter/InterVariable.woff2"/>
<script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
<script defer src="/scripts/effects.js"></script>
<link rel="prefetch" href="/fonts/inter/InterVariable-Italic.woff2"/>
<link rel="prefetch" href="/fonts/ftaurebesh/ftaurebesh-medium.woff2"/>
<link rel="prefetch" href="/fonts/ftaurebesh/ftaurebesh-bold.woff2"/>
<link rel="me" href="https://github.com/seigler"/>
<link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention"/>
<title>{{ computedTitle }} - {{ site.title }}</title>
@ -24,8 +30,6 @@ title: Joshua's Homepage
{% endif %}
<meta name="twitter:card" content="summary"/>
<meta name="generator" content="{{ eleventy.generator }}">
<script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
<script defer src="/scripts/effects.js"></script>
</head>
<body data-font="english" data-path="{{ page.url }}">
{% include "-header.njk" %}

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;

2
site/posts/2025-06-15-replacing-github-pages.md
View file

@ -26,7 +26,7 @@ I usually use nginx, but I wanted to give Caddy a shot, and it has been a great
Here is the Caddyfile I made---you will need to change the domains names and the email. Email could be removed, but it is recommended so SSL certificate issuers can contact you if there is a problem with your certificates.
`/etc/caddy/Caddyfile`
```undefined
```caddy
# Global options block
{
email you@example.com # <<<< CHANGE THIS <<<<