Use CSS vars
This commit is contained in:
parent
4a8dfd11ce
commit
98e8a7ad14
1 changed files with 16 additions and 19 deletions
|
@ -1,5 +1,13 @@
|
|||
/* @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap'); */
|
||||
|
||||
:root {
|
||||
--fp-primary: #0F0;
|
||||
--fp-background: #000;
|
||||
--fp-secondary: #0FF;
|
||||
--fp-danger: #F00;
|
||||
--fp-dim: #111;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
src: url('/fonts/SourceCodePro.ttf');
|
||||
|
@ -8,24 +16,24 @@
|
|||
* {
|
||||
color-scheme: light dark;
|
||||
font-family: 'Source Code Pro', monospace !important;
|
||||
color: #0F0;
|
||||
color: var(--fp-primary);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #0F0;
|
||||
color: var(--fp-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Source Code Pro', monospace !important;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #000;
|
||||
background-color: var(--fp-background);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #F00;
|
||||
color: var(--fp-danger);
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -52,7 +60,7 @@ a:has(button) {
|
|||
box-shadow: none;
|
||||
transform: none;
|
||||
outline: none;
|
||||
background: #000;
|
||||
background: var(--fp-background);
|
||||
}
|
||||
|
||||
.center {
|
||||
|
@ -69,16 +77,6 @@ a:has(button) {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
.rainbow {
|
||||
background: linear-gradient(90.02deg, #F00 0.02%, #E0F 27.09%, #0BF 51.04%, #0F1 76.56%, #F00 99.99%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
*/
|
||||
|
||||
.rainbow {
|
||||
background: linear-gradient(to right, #F00 0%, #E0F 10%, #0BF 30%, #0F1 50%, #F00 90%);
|
||||
-webkit-background-clip: text;
|
||||
|
@ -88,11 +86,11 @@ a:has(button) {
|
|||
}
|
||||
|
||||
.color {
|
||||
color: #0F0;
|
||||
color: var(--fp-primary);
|
||||
}
|
||||
|
||||
.force-color {
|
||||
background: #0F0;
|
||||
background: var(--fp-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
@ -107,7 +105,7 @@ a:has(button) {
|
|||
}
|
||||
|
||||
pre {
|
||||
background: #111;
|
||||
background: var(--fp-dim);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
|
@ -115,7 +113,6 @@ pre {
|
|||
|
||||
code {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0ch 1ch;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue