improve color scheme system
All checks were successful
Build Blog / Build (push) Successful in 5m54s
All checks were successful
Build Blog / Build (push) Successful in 5m54s
This commit is contained in:
parent
521af2d17a
commit
e2eb8297dc
92
_data/colors.js
Normal file
92
_data/colors.js
Normal file
|
|
@ -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%)"
|
||||
}
|
||||
},
|
||||
}
|
||||
154
_includes/base16-prism.css
Normal file
154
_includes/base16-prism.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
67
_includes/colors.css
Normal file
67
_includes/colors.css
Normal file
|
|
@ -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 }};
|
||||
}
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
{%- css %}{% include "public/css/fonts.css"%} {% endcss %}
|
||||
{%- css %}{% include "public/css/index.css" %}{% endcss %}
|
||||
{%- css %}{% include "colors.css" %}{% endcss %}
|
||||
|
||||
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
|
||||
<link rel="stylesheet" href="{% getBundleFileUrl "css", "defer" %}">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue