Add catppuccin palette
Some checks failed
github pages / deploy (push) Has been cancelled

This commit is contained in:
Jeffrey Serio 2025-02-18 19:57:20 -06:00
parent c3286b77b8
commit 25b88869b6
2 changed files with 267 additions and 90 deletions

180
assets/catppuccin.css Normal file
View File

@ -0,0 +1,180 @@
body {
font-family: Verdana, sans-serif;
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: #11111b;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: #cdd6f4;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
color: #cdd6f4;
}
a {
color: #f38ba8;
}
.title {
text-decoration: none;
border: 0;
}
.title h1 {
font-size: 24px;
margin: 19.92px 0 19.92px 0;
}
.title span {
font-weight: 400;
}
nav a {
margin-right: 10px;
}
textarea {
background-color: #313244;
color: #bac2de;
width: 100%;
font-size: 16px;
}
input {
background-color: #313244;
color: #bac2de;
font-size: 16px;
}
content {
line-height: 1.6;
}
table {
width: 100%;
}
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
border-color: #bac2de;
padding: 5px;
}
img {
max-width: 100%;
height: auto;
}
code {
padding: 2px 5px;
color: #cdd6f4;
background-color: #1e1e2e;
}
pre code {
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 14px;
overflow-x: auto;
text-wrap: nowrap;
}
blockquote {
border-left: 1px solid #a6adc8;
color: #a6adc8;
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px;
text-align: center;
}
.helptext {
color: #a6adc8;
font-size: small;
}
.errorlist {
color: #f9e2af;
font-size: small;
}
/* blog posts */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
margin-bottom: 10px;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: #f38ba8;
}
a.blog-tags {
line-height: 2;
margin-right: 12px;
}
h3.blog-filter {
margin-bottom: 0;
}
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.7;
}
p.byline {
font-style: italic;
}
/* "Skip to main content" link */
.skip-link {
position: absolute;
top: 5;
transform: translateY(-600%);
transition: transform 0.5s;
background-color: #11111b;
padding: 6px;
}
.skip-link:focus {
transform: translateY(0%);
}
figure {
margin-inline-start: 0em;
margin-inline-end: 0em;
}
figcaption > p {
margin-block-start: 0px;
text-align: center;
font-style: italic;
color: #cdd6f4;
}

View File

@ -1,91 +1,88 @@
/* This style is a variant of Dracula that is more accessible to people with poor eyesight */ /* Generated using: hugo gen chromastyles --style=catppuccin-mocha */
/* See https://web.dev/color-and-contrast-accessibility/ */
/* And https://xyproto.github.io/splash/docs/dracula.html */
/* And https://github.com/alecthomas/chroma/blob/a40c95e447a577322e20eac58f2f7c0d026665b0/styles/dracula.xml */
/* Background */ .bg { color: #f8f8f2; background-color: #282a36; } /* Background */ .bg { color:#cdd6f4;background-color:#1e1e2e; }
/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; } /* PreWrapper */ .chroma { color:#cdd6f4;background-color:#1e1e2e; }
/* Other .chroma .x { } */ /* Other */ .chroma .x { }
/* Error .chroma .err { } */ /* Error */ .chroma .err { color:#f38ba8 }
/* CodeLine .chroma .cl { } */ /* CodeLine */ .chroma .cl { }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc } /* LineHighlight */ .chroma .hl { background-color:#45475a }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #929292 } /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f849c }
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #929292 } /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f849c }
/* Line */ .chroma .line { display: flex; } /* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color: #ff79c6 } /* Keyword */ .chroma .k { color:#cba6f7 }
/* KeywordConstant */ .chroma .kc { color: #ff79c6 } /* KeywordConstant */ .chroma .kc { color:#fab387 }
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic } /* KeywordDeclaration */ .chroma .kd { color:#f38ba8 }
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 } /* KeywordNamespace */ .chroma .kn { color:#94e2d5 }
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 } /* KeywordPseudo */ .chroma .kp { color:#cba6f7 }
/* KeywordReserved */ .chroma .kr { color: #ff79c6 } /* KeywordReserved */ .chroma .kr { color:#cba6f7 }
/* KeywordType */ .chroma .kt { color: #8be9fd } /* KeywordType */ .chroma .kt { color:#f38ba8 }
/* Name .chroma .n { } */ /* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #50fa7b } /* NameAttribute */ .chroma .na { color:#89b4fa }
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic } /* NameBuiltin */ .chroma .nb { color:#89dceb }
/* NameBuiltinPseudo .chroma .bp { } */ /* NameBuiltinPseudo */ .chroma .bp { color:#89dceb }
/* NameClass */ .chroma .nc { color: #50fa7b } /* NameClass */ .chroma .nc { color:#f9e2af }
/* NameConstant .chroma .no { } */ /* NameConstant */ .chroma .no { color:#f9e2af }
/* NameDecorator .chroma .nd { } */ /* NameDecorator */ .chroma .nd { color:#89b4fa;font-weight:bold }
/* NameEntity .chroma .ni { } */ /* NameEntity */ .chroma .ni { color:#94e2d5 }
/* NameException .chroma .ne { } */ /* NameException */ .chroma .ne { color:#fab387 }
/* NameFunction */ .chroma .nf { color: #50fa7b } /* NameFunction */ .chroma .nf { color:#89b4fa }
/* NameFunctionMagic .chroma .fm { } */ /* NameFunctionMagic */ .chroma .fm { color:#89b4fa }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic } /* NameLabel */ .chroma .nl { color:#89dceb }
/* NameNamespace .chroma .nn { } */ /* NameNamespace */ .chroma .nn { color:#fab387 }
/* NameOther .chroma .nx { } */ /* NameOther */ .chroma .nx { }
/* NameProperty .chroma .py { } */ /* NameProperty */ .chroma .py { color:#fab387 }
/* NameTag */ .chroma .nt { color: #ff79c6 } /* NameTag */ .chroma .nt { color:#cba6f7 }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic } /* NameVariable */ .chroma .nv { color:#f5e0dc }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic } /* NameVariableClass */ .chroma .vc { color:#f5e0dc }
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic } /* NameVariableGlobal */ .chroma .vg { color:#f5e0dc }
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic } /* NameVariableInstance */ .chroma .vi { color:#f5e0dc }
/* NameVariableMagic .chroma .vm { } */ /* NameVariableMagic */ .chroma .vm { color:#f5e0dc }
/* Literal .chroma .l { } */ /* Literal */ .chroma .l { }
/* LiteralDate .chroma .ld { } */ /* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #f1fa8c } /* LiteralString */ .chroma .s { color:#a6e3a1 }
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c } /* LiteralStringAffix */ .chroma .sa { color:#f38ba8 }
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c } /* LiteralStringBacktick */ .chroma .sb { color:#a6e3a1 }
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c } /* LiteralStringChar */ .chroma .sc { color:#a6e3a1 }
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c } /* LiteralStringDelimiter */ .chroma .dl { color:#89b4fa }
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c } /* LiteralStringDoc */ .chroma .sd { color:#6c7086 }
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c } /* LiteralStringDouble */ .chroma .s2 { color:#a6e3a1 }
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c } /* LiteralStringEscape */ .chroma .se { color:#89b4fa }
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c } /* LiteralStringHeredoc */ .chroma .sh { color:#6c7086 }
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c } /* LiteralStringInterpol */ .chroma .si { color:#a6e3a1 }
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c } /* LiteralStringOther */ .chroma .sx { color:#a6e3a1 }
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c } /* LiteralStringRegex */ .chroma .sr { color:#94e2d5 }
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c } /* LiteralStringSingle */ .chroma .s1 { color:#a6e3a1 }
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c } /* LiteralStringSymbol */ .chroma .ss { color:#a6e3a1 }
/* LiteralNumber */ .chroma .m { color: #bd93f9 } /* LiteralNumber */ .chroma .m { color:#fab387 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 } /* LiteralNumberBin */ .chroma .mb { color:#fab387 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 } /* LiteralNumberFloat */ .chroma .mf { color:#fab387 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 } /* LiteralNumberHex */ .chroma .mh { color:#fab387 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 } /* LiteralNumberInteger */ .chroma .mi { color:#fab387 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 } /* LiteralNumberIntegerLong */ .chroma .il { color:#fab387 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 } /* LiteralNumberOct */ .chroma .mo { color:#fab387 }
/* Operator */ .chroma .o { color: #ff79c6 } /* Operator */ .chroma .o { color:#89dceb;font-weight:bold }
/* OperatorWord */ .chroma .ow { color: #ff79c6 } /* OperatorWord */ .chroma .ow { color:#89dceb;font-weight:bold }
/* Punctuation .chroma .p { } */ /* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #8491b8 } /* Comment */ .chroma .c { color:#6c7086;font-style:italic }
/* CommentHashbang */ .chroma .ch { color: #8491b8 } /* CommentHashbang */ .chroma .ch { color:#6c7086;font-style:italic }
/* CommentMultiline */ .chroma .cm { color: #8491b8 } /* CommentMultiline */ .chroma .cm { color:#6c7086;font-style:italic }
/* CommentSingle */ .chroma .c1 { color: #8491b8 } /* CommentSingle */ .chroma .c1 { color:#6c7086;font-style:italic }
/* CommentSpecial */ .chroma .cs { color: #8491b8 } /* CommentSpecial */ .chroma .cs { color:#6c7086;font-style:italic }
/* CommentPreproc */ .chroma .cp { color: #ff79c6 } /* CommentPreproc */ .chroma .cp { color:#6c7086;font-style:italic }
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 } /* CommentPreprocFile */ .chroma .cpf { color:#6c7086;font-weight:bold;font-style:italic }
/* Generic .chroma .g { } */ /* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #ff5555 } /* GenericDeleted */ .chroma .gd { color:#f38ba8;background-color:#313244 }
/* GenericEmph */ .chroma .ge { text-decoration: underline } /* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError .chroma .gr { } */ /* GenericError */ .chroma .gr { color:#f38ba8 }
/* GenericHeading */ .chroma .gh { font-weight: bold } /* GenericHeading */ .chroma .gh { color:#fab387;font-weight:bold }
/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold } /* GenericInserted */ .chroma .gi { color:#a6e3a1;background-color:#313244 }
/* GenericOutput */ .chroma .go { color: #44475a } /* GenericOutput */ .chroma .go { }
/* GenericPrompt .chroma .gp { } */ /* GenericPrompt */ .chroma .gp { }
/* GenericStrong .chroma .gs { } */ /* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { font-weight: bold } /* GenericSubheading */ .chroma .gu { color:#fab387;font-weight:bold }
/* GenericTraceback .chroma .gt { } */ /* GenericTraceback */ .chroma .gt { color:#f38ba8 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline } /* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace .chroma .w { } */ /* TextWhitespace */ .chroma .w { }