wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean up code block

Browse source
This commit is contained in:
madrilene 2024-06-04 07:21:09 +02:00
parent 13463917ed
commit 5c84594c2a
1 changed files with 9 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/assets/css/global/blocks/code.css
View file

@ -1,16 +1,11 @@
code { :root {
--color-code-orange: hsl(30, 70%, 60%); --color-code-orange: hsl(30, 70%, 60%);
--color-code-blue: var(--color-secondary); --color-code-blue: var(--color-secondary);
--color-code-indigo: hsl(260, 48%, 56%); --color-code-indigo: hsl(260, 48%, 56%);
--color-code-violet: hsl(314, 70%, 60%); --color-code-violet: hsl(314, 70%, 60%);
--color-code-pink: hsl(350, 70%, 60%); --color-code-pink: hsl(350, 70%, 60%);
--color-code-gray: hsl(0, 0%, 58%); --color-code-gray: hsl(0, 0%, 58%);
} --color-code-bg: color-mix(in oklab, var(--color-bg) 92%, black);
pre {
--dark-bg: color-mix(in oklab, var(--color-bg) 92%, black);
grid-column: popout !important;
overflow-x: auto;
} }
code, code,
@ -18,62 +13,29 @@ pre {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--size-step-min-1); font-size: var(--size-step-min-1);
line-height: 1.4; line-height: 1.4;
background-color: var(--color-bg-accent); background: var(--color-code-bg);
padding: 0.1em 0.4em; padding: 0.1em 0.4em;
border-radius: var(--border-radius); border-radius: var(--border-radius);
}
pre[class*='language-'] {
padding: var(--space-m-l);
}
code[class*='language-'] {
padding: 0;
}
code[class*='language-'],
pre[class*='language-'] {
text-align: left; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
color: var(--color-text-accent); color: var(--color-text-accent);
background: var(--color-bg);
border-radius: var(--border-radius);
hyphens: none; hyphens: none;
} }
@media (prefers-color-scheme: dark) { /* Specific Styles for <pre> Elements */
code[class*='language-'], pre {
pre[class*='language-'] { grid-column: popout !important;
background-color: var(--dark-bg); overflow-x: auto;
} padding: var(--space-m-l);
}
:root[data-theme='light'] {
code[class*='language-'],
pre[class*='language-'] {
background-color: var(--color-bg-accent);
}
}
/* Dark Color Scheme (Override) */
:root[data-theme='dark'] {
code[class*='language-'],
pre[class*='language-'] {
background-color: var(--dark-bg);
}
} }
/* Style Adjustments for <code> within different contexts */
:where(:not(pre)) > code { :where(:not(pre)) > code {
position: relative; position: relative;
top: -0.05em; top: -0.05em;
background-color: var(--color-bg-accent);
}
:where(:not(a, pre, blockquote)) > code {
color: var(--color-text-accent);
} }
pre[class*='language-'] { pre[class*='language-'] {
@ -81,12 +43,6 @@ pre[class*='language-'] {
position: relative; position: relative;
} }
.language-css > code,
.language-sass > code,
.language-scss > code {
color: var(--color-text-accent);
}
[class*='language-'] .namespace { [class*='language-'] .namespace {
opacity: 0.7; opacity: 0.7;
} }