diff --git a/_data/colors.js b/_data/colors.js
new file mode 100644
index 0000000..00674cd
--- /dev/null
+++ b/_data/colors.js
@@ -0,0 +1,92 @@
+export default {
+ dark: {
+ "source": "rootloops.sh",
+ "hex": {
+ "background": "#0a0808",
+ "foreground": "#e7e1e2",
+ "cursor": "#c2b5b8",
+ "black": "#272022",
+ "red": "#cf5080",
+ "green": "#7b8d39",
+ "yellow": "#b57235",
+ "blue": "#3c8cbf",
+ "magenta": "#9468d8",
+ "cyan": "#3b9586",
+ "white": "#c2b5b8",
+ "brightBlack": "#5a4e51",
+ "brightRed": "#e26b95",
+ "brightGreen": "#8fa445",
+ "brightYellow": "#cf8544",
+ "brightBlue": "#4fa1d7",
+ "brightMagenta": "#a782e5",
+ "brightCyan": "#47ac9b",
+ "brightWhite": "#f3f0f1"
+ },
+ "hsl": {
+ "background": "hsl(345.13, 15.37%, 3.54%)",
+ "foreground": "hsl(344.94, 10.53%, 89.29%)",
+ "cursor": "hsl(344.63, 9.37%, 73.52%)",
+ "black": "hsl(344.1, 8.9%, 13.97%)",
+ "red": "hsl(337.55, 56.97%, 56.34%)",
+ "green": "hsl(72.88, 42.49%, 38.93%)",
+ "yellow": "hsl(28.49, 54.76%, 45.89%)",
+ "blue": "hsl(203.33, 52.42%, 49.09%)",
+ "magenta": "hsl(264.05, 58.81%, 62.59%)",
+ "cyan": "hsl(169.71, 43.35%, 40.84%)",
+ "white": "hsl(344.63, 9.37%, 73.52%)",
+ "brightBlack": "hsl(344.15, 7.1%, 32.99%)",
+ "brightRed": "hsl(339.06, 67.64%, 65.41%)",
+ "brightGreen": "hsl(72.99, 40.55%, 45.65%)",
+ "brightYellow": "hsl(28.18, 58.94%, 53.93%)",
+ "brightBlue": "hsl(203.73, 63.27%, 57.72%)",
+ "brightMagenta": "hsl(262.71, 65.56%, 70.29%)",
+ "brightCyan": "hsl(169.62, 41.51%, 47.79%)",
+ "brightWhite": "hsl(345.03, 10.68%, 94.62%)"
+ }
+ },
+ light: {
+ "source": "rootloops.sh",
+ "hex": {
+ "background": "#f3f0f1",
+ "foreground": "#40373a",
+ "cursor": "#74666a",
+ "black": "#e7e1e2",
+ "red": "#cf5080",
+ "green": "#7b8d39",
+ "yellow": "#b57235",
+ "blue": "#3c8cbf",
+ "magenta": "#9468d8",
+ "cyan": "#3b9586",
+ "white": "#74666a",
+ "brightBlack": "#b5a7ab",
+ "brightRed": "#e26b95",
+ "brightGreen": "#8fa445",
+ "brightYellow": "#cf8544",
+ "brightBlue": "#4fa1d7",
+ "brightMagenta": "#a782e5",
+ "brightCyan": "#47ac9b",
+ "brightWhite": "#272022"
+ },
+ "hsl": {
+ "background": "hsl(345.03, 10.68%, 94.62%)",
+ "foreground": "hsl(344.11, 7.75%, 23.41%)",
+ "cursor": "hsl(344.2, 6.49%, 42.82%)",
+ "black": "hsl(344.94, 10.53%, 89.29%)",
+ "red": "hsl(337.55, 56.97%, 56.34%)",
+ "green": "hsl(72.88, 42.49%, 38.93%)",
+ "yellow": "hsl(28.49, 54.76%, 45.89%)",
+ "blue": "hsl(203.33, 52.42%, 49.09%)",
+ "magenta": "hsl(264.05, 58.81%, 62.59%)",
+ "cyan": "hsl(169.71, 43.35%, 40.84%)",
+ "white": "hsl(344.2, 6.49%, 42.82%)",
+ "brightBlack": "hsl(344.53, 8.76%, 68.33%)",
+ "brightRed": "hsl(339.06, 67.64%, 65.41%)",
+ "brightGreen": "hsl(72.99, 40.55%, 45.65%)",
+ "brightYellow": "hsl(28.18, 58.94%, 53.93%)",
+ "brightBlue": "hsl(203.73, 63.27%, 57.72%)",
+ "brightMagenta": "hsl(262.71, 65.56%, 70.29%)",
+ "brightCyan": "hsl(169.62, 41.51%, 47.79%)",
+ "brightWhite": "hsl(344.1, 8.9%, 13.97%)"
+ }
+ },
+}
diff --git a/_includes/base16-prism.css b/_includes/base16-prism.css
new file mode 100644
index 0000000..19f7c9e
--- /dev/null
+++ b/_includes/base16-prism.css
@@ -0,0 +1,154 @@
+/**
+ * base16-prism (https://github.com/chawyehsu/base16-prism)
+ * @license MIT
+ *
+ * prism.js {{scheme-name}} theme for JavaScript, CSS and HTML
+ * @author {{scheme-author}}
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: var(--color-fg); /* base05 */
+ background: var(--color-black);
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 1em;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+ color: inherit;
+ text-shadow: none;
+ background: var(--color-black-bright); /* base02 */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+ color: inherit;
+ text-shadow: none;
+ background: var(--color-black-bright); /* base02 */
+}
+
+@media print {
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #{{base00-hex}}; /* base00 */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+ color: #{{base03-hex}}; /* base03 */
+}
+
+.token.entity,
+.language-css .token.string,
+.style .token.string {
+ color: #{{base04-hex}}; /* base04 */
+ background: #{{base01-hex}}; /* base01 */
+}
+
+.token.punctuation {
+ color: #{{base05-hex}}; /* base05 */
+}
+
+.token.variable,
+.token.tag,
+.token.operator,
+.token.deleted {
+ color: var(--color-blue); /* base08 */
+}
+
+.token.property,
+.token.number,
+.token.boolean,
+.token.constant,
+.token.url {
+ color: var(--color-red); /* base09 */
+}
+
+.token.class-name,
+.token.bold {
+ color: var(--color-yellow); /* base0A */
+}
+
+.token.string,
+.token.symbol,
+.token.attr-value,
+.token.inserted,
+.token.atrule {
+ color: var(--color-cyan); /* base0B */
+}
+
+.token.regex,
+.token.important {
+ color: var(--color-cyan-bright); /* base0C */
+}
+
+.token.function,
+.token.attr-name {
+ color: var(--color-magenta); /* base0D */
+}
+
+.token.keyword,
+.token.selector,
+.token.italic,
+.token.char,
+.token.builtin {
+ color: var(--color-green); /* base0E */
+}
+
+.token.doctype {
+ color: var(--color-magenta-bright); /* base0F */
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.namespace {
+ opacity: .7;
+}
+
diff --git a/_includes/colors.css b/_includes/colors.css
new file mode 100644
index 0000000..f9d35e2
--- /dev/null
+++ b/_includes/colors.css
@@ -0,0 +1,67 @@
+/* colors based from colors.js */
+:root {
+
+ --color-black: {{ colors.light.hex.black }};
+ --color-black-bright: {{ colors.light.hex.brightBlack }};
+
+ --color-red: {{ colors.light.hex.red }};
+ --color-red-bright: {{ colors.light.hex.brightRed }};
+
+ --color-green: {{ colors.light.hex.green }};
+ --color-green-bright: {{ colors.light.hex.brightGreen }};
+
+ --color-yellow: {{ colors.light.hex.yellow }};
+ --color-yellow-bright: {{ colors.light.hex.brightYellow }};
+
+ --color-blue: {{ colors.light.hex.blue }};
+ --color-blue-bright: {{ colors.light.hex.brightBlue }};
+
+ --color-magenta: {{ colors.light.hex.magenta }};
+ --color-magenta-bright: {{ colors.light.hex.brightMagenta }};
+
+ --color-cyan: {{ colors.light.hex.cyan }};
+ --color-cyan-bright: {{ colors.light.hex.brightCyan }};
+
+ --color-white: {{ colors.light.hex.white }};
+ --color-white-bright: {{ colors.light.hex.brightWhite }};
+
+
+ --color-bg: {{ colors.light.hex.background }};
+ --color-fg: {{ colors.light.hex.foreground }};
+ --color-cursor: {{ colors.light.hex.cursor }};
+
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+
+ --color-black: {{ colors.dark.hex.black }};
+ --color-black-bright: {{ colors.dark.hex.brightBlack }};
+
+ --color-red: {{ colors.dark.hex.red }};
+ --color-red-bright: {{ colors.dark.hex.brightRed }};
+
+ --color-green: {{ colors.dark.hex.green }};
+ --color-green-bright: {{ colors.dark.hex.brightGreen }};
+
+ --color-yellow: {{ colors.dark.hex.yellow }};
+ --color-yellow-bright: {{ colors.dark.hex.brightYellow }};
+
+ --color-blue: {{ colors.dark.hex.blue }};
+ --color-blue-bright: {{ colors.dark.hex.brightBlue }};
+
+ --color-magenta: {{ colors.dark.hex.magenta }};
+ --color-magenta-bright: {{ colors.dark.hex.brightMagenta }};
+
+ --color-cyan: {{ colors.dark.hex.cyan }};
+ --color-cyan-bright: {{ colors.dark.hex.brightCyan }};
+
+ --color-white: {{ colors.dark.hex.white }};
+ --color-white-bright: {{ colors.dark.hex.brightWhite }};
+
+
+ --color-bg: {{ colors.dark.hex.background }};
+ --color-fg: {{ colors.dark.hex.foreground }};
+ --color-cursor: {{ colors.dark.hex.cursor }};
+ }
+}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index e03526f..b09c799 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -14,6 +14,7 @@
{%- css %}{% include "public/css/fonts.css"%} {% endcss %}
{%- css %}{% include "public/css/index.css" %}{% endcss %}
+ {%- css %}{% include "colors.css" %}{% endcss %}
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index f6eba17..0d99cad 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -2,7 +2,7 @@
layout: layouts/base.njk
---
{# Only include the syntax highlighter CSS on blog posts #}
-{%- css "defer" %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
+{%- css "defer" %}{% include "base16-prism.css" %}{% endcss %}
{%- css "defer" %}{% include "public/css/prism-diff.css" %}{%- endcss %}
{# Only include the katex CSS on blog posts #}
{%- css "defer" %}{% include "node_modules/katex/dist/katex.min.css" %}{% endcss %}
diff --git a/content/blog/nix-unprivileged-deployments.md b/content/blog/nix-unprivileged-deployments.md
index 92ec517..154ed2e 100644
--- a/content/blog/nix-unprivileged-deployments.md
+++ b/content/blog/nix-unprivileged-deployments.md
@@ -4,9 +4,7 @@ date: 2025-04-17
tags: NixOS
---
-{% callout %}
-This post assumes familiarity with the Nix ecosystem.
-{% endcallout %}
+> This post assumes familiarity with the Nix ecosystem.
Nix and NixOS make managing servers much easier than bespoke scripts or
complex Ansible playbooks. While I don't think NixOS is ready for
@@ -37,10 +35,12 @@ scp -r _site/ blog@my-remote-server:_site/
And then have `nginx` use `/home/blog/_site/` as the site root. This works, but doesn't feel
"Nix" enough.
-Other users have tied their blog to the NixOS system-level configuration, like [this user](https://jeancharles.quillet.org/posts/2023-08-01-Deploying-a-static-website-with-nix.html). While I think this
-is a good solution, it has the issue of relying on root access for updating the site.
-To me, this feels excessive. I should be able to deploy my site from a lesser-privileged user.
-This method also ties sysadmin-tasks to our blog, which isn't keeping our concerns separate.
+Other users have tied their blog to the NixOS system-level configuration, like
+[this user](https://jeancharles.quillet.org/posts/2023-08-01-Deploying-a-static-website-with-nix.html).
+While I think this is a good solution, it has the issue of relying on root
+access for updating the site. To me, this feels excessive. I should be able to
+deploy my site from a lesser-privileged user. This method also ties
+sysadmin-tasks to our blog, which isn't keeping our concerns separate.
# Scaffolding the Solution
diff --git a/public/css/index.css b/public/css/index.css
index 342282f..c64bc56 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -8,37 +8,7 @@
/* Theme colors */
:root {
- --color-black: #000000;
- --color-black-bright: #5a4e51;
- --color-red: #cf5080;
- --color-red-bright: #e26b95;
-
- --color-green: #7b8d39;
- --color-green-bright: #8fa445;
-
- --color-yellow: #b57235;
- --color-yellow-bright: #cf8544;
-
- --color-blue: #3c8cbf;
- --color-blue-bright: #4fa1d7;
-
- --color-magenta: #9468d8;
- --color-magenta-bright: #a782e5;
-
- --color-cyan: #a782e5;
- --color-cyan-bright: #47ac9b;
-
- --color-white: #c2bdbd;
- --color-white-bright: #ffffff;
-
- --color-gray-20: #e0e0e0;
- --color-gray-50: #C0C0C0;
- --color-gray-90: #333;
-
- --background-color: var(--color-white);
-
- --text-color: var(--color-gray-90);
--text-color-link: var(--color-cyan);
--text-color-link-active: var(--color-cyan-bright);
--text-color-link-visited: var(--color-cyan);
@@ -48,10 +18,6 @@
@media (prefers-color-scheme: dark) {
:root {
- --color-gray-20: #e0e0e0;
- --color-gray-50: #C0C0C0;
- --color-gray-90: #dad8d8;
- --background-color: var(--color-black);
/* --text-color is assigned to --color-gray-_ above */
/* --text-color-link: #1493fb; */
@@ -65,6 +31,13 @@
}
+/* list style custom */
+
+ul {
+ /* list-style: symbols(cyclic "\25E5" "\25E2" "\25E3" "\25E4"); */
+ list-style: symbols(cyclic "\25E9");
+}
+
/* Global stylesheet */
* {
box-sizing: border-box;
@@ -75,8 +48,8 @@ body {
padding: 0;
margin: 0 auto;
font-family: var(--font-family);
- color: var(--text-color);
- background-color: var(--background-color);
+ color: var(--color-fg);
+ background-color: var(--color-bg);
}
html {
overflow-y: scroll;
@@ -172,7 +145,7 @@ pre:not([class*="language-"]) {
word-break: normal;
}
code {
- word-break: break-all;
+ /* word-break: break-all; */
color: var(--color-black);
background-color: var(--color-white);
@@ -312,7 +285,7 @@ h1, h2, h3 {
/* Callout styles */
-.callout {
+blockquote {
padding: 2em; /* Adjust padding as needed */
position: relative; /* Needed for positioning pseudo-elements */
border: none; /* Ensure no default border */
@@ -320,33 +293,33 @@ h1, h2, h3 {
overflow: hidden; /* Prevents pseudo-elements from causing scrollbars if they slightly exceed bounds */
}
-.callout p {
+blockquote p {
margin: 0; /* Remove default paragraph margin inside callout */
}
/* Top-left corner bracket */
-.callout::before {
+blockquote::before {
content: '';
position: absolute;
top: 0.5em; /* Adjust position */
left: 0.5em; /* Adjust position */
width: 1.5em; /* Adjust size */
height: 1.5em; /* Adjust size */
- border-top: 3px solid #ffffff; /* White border, adjust thickness */
- border-left: 3px solid #ffffff; /* White border, adjust thickness */
+ border-top: 3px solid var(--color-white); /* White border, adjust thickness */
+ border-left: 3px solid var(--color-white); /* White border, adjust thickness */
box-sizing: border-box;
}
/* Bottom-right corner bracket */
-.callout::after {
+blockquote::after {
content: '';
position: absolute;
bottom: 0.5em; /* Adjust position */
right: 0.5em; /* Adjust position */
width: 1.5em; /* Adjust size */
height: 1.5em; /* Adjust size */
- border-bottom: 3px solid #ffffff; /* White border, adjust thickness */
- border-right: 3px solid #ffffff; /* White border, adjust thickness */
+ border-bottom: 3px solid var(--color-white); /* White border, adjust thickness */
+ border-right: 3px solid var(--color-white); /* White border, adjust thickness */
box-sizing: border-box;
}