mirror of
https://github.com/ItsDrike/itsdrike.com.git
synced 2025-11-04 04:06:36 +00:00
Overhaul codeblock style
This commit is contained in:
parent
cd306cd6c6
commit
6a2a77ac48
6 changed files with 178 additions and 2 deletions
82
static/src/scss/_chroma.scss
Normal file
82
static/src/scss/_chroma.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/* Background */ .chroma { color: #f8f8f2; background-color: $codeblock-background }
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #3c3d38 }
|
||||
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Keyword */ .chroma .k { color: #66d9ef }
|
||||
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
|
||||
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
|
||||
/* KeywordType */ .chroma .kt { color: #66d9ef }
|
||||
/* Name */ .chroma .n { }
|
||||
/* NameAttribute */ .chroma .na { color: #a6e22e }
|
||||
/* NameBuiltin */ .chroma .nb { }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { }
|
||||
/* NameClass */ .chroma .nc { color: #a6e22e }
|
||||
/* NameConstant */ .chroma .no { color: #66d9ef }
|
||||
/* NameDecorator */ .chroma .nd { color: #a6e22e }
|
||||
/* NameEntity */ .chroma .ni { }
|
||||
/* NameException */ .chroma .ne { color: #a6e22e }
|
||||
/* NameFunction */ .chroma .nf { color: #a6e22e }
|
||||
/* NameFunctionMagic */ .chroma .fm { }
|
||||
/* NameLabel */ .chroma .nl { }
|
||||
/* NameNamespace */ .chroma .nn { }
|
||||
/* NameOther */ .chroma .nx { color: #a6e22e }
|
||||
/* NameProperty */ .chroma .py { }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* NameVariable */ .chroma .nv { }
|
||||
/* NameVariableClass */ .chroma .vc { }
|
||||
/* NameVariableGlobal */ .chroma .vg { }
|
||||
/* NameVariableInstance */ .chroma .vi { }
|
||||
/* NameVariableMagic */ .chroma .vm { }
|
||||
/* Literal */ .chroma .l { color: #ae81ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #e6db74 }
|
||||
/* LiteralString */ .chroma .s { color: #e6db74 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
|
||||
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||
/* Operator */ .chroma .o { color: #f92672 }
|
||||
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||
/* Punctuation */ .chroma .p { }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color: #f92672 }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { }
|
||||
/* GenericHeading */ .chroma .gh { }
|
||||
/* GenericInserted */ .chroma .gi { color: #a6e22e }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #75715e }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
71
static/src/scss/_code.scss
Normal file
71
static/src/scss/_code.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
code {
|
||||
font-family: $font-family-mono;
|
||||
font-display: auto;
|
||||
font-feature-settings: normal;
|
||||
background: $inline-code-background;
|
||||
padding: 1px 6px;
|
||||
margin: 0 2px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.95rem;
|
||||
color: $inline-code-color;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin: 3rem 0 1rem;
|
||||
}
|
||||
.highlight > div {
|
||||
background: $codeblock-background;
|
||||
}
|
||||
|
||||
.highlight > pre {
|
||||
margin: 0 0 2rem;
|
||||
padding: 1rem;
|
||||
// border-radius: 1 rem;
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
font-family: $font-family-mono;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.chroma [data-lang]:before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: -22px;
|
||||
left: 0;
|
||||
content: attr(data-lang);
|
||||
font-size: 0.8em;
|
||||
color: #a9a9b3;
|
||||
background-color: $codeblock-background;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 5px 10px 7px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: $codeblock-background;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
overflow: auto;
|
||||
|
||||
code {
|
||||
background: none !important;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,24 +3,45 @@ $primary-light: #FF773D;
|
|||
$primary-lighter: #F19143;
|
||||
$primary-yellow: #FFB238;
|
||||
$primary-red: #B20600;
|
||||
|
||||
$inline-code-color: #E2777A;
|
||||
$inline-code-background: #3B3D42;
|
||||
$codeblock-background: #272822;
|
||||
|
||||
$body-bg: #17181C;
|
||||
$footer-height: 110px;
|
||||
$headings-margin-bottom: 1.5rem;
|
||||
$paragraph-margin-bottom: $headings-margin-bottom * 0.85;
|
||||
|
||||
$font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
$font-family-mono: "JetBrains Mono", monospace;
|
||||
$font-size-base: 1.2rem;
|
||||
|
||||
@import "node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
@import url('https://rsms.me/inter/inter.css');
|
||||
@font-face {
|
||||
font-style: normal;
|
||||
font-family: "JetBrains Mono";
|
||||
font-display: swap;
|
||||
src: local("JetBrains Mono"),
|
||||
local("JetBrains-Mono"),
|
||||
url("../lib/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") format("woff2"),
|
||||
url("../lib/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff") format("woff"),
|
||||
url("../lib/JetBrainsMono/web/eot/JetBrainsMono-Regular.eot") format("embedded-opentype"),
|
||||
url("../lib/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype");
|
||||
};
|
||||
|
||||
$navbar-height: 40px;
|
||||
$body-color: $gray-300;
|
||||
|
||||
|
||||
@import "chroma";
|
||||
@import "main";
|
||||
@import "navbar";
|
||||
@import "footer";
|
||||
@import "items";
|
||||
@import "table_of_contents";
|
||||
@import "anchors";
|
||||
@import "code";
|
||||
@import "code_copy";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue