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