Firepup650/firepup-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use CSS vars

Browse source
This commit is contained in:
Firepup Sixfifty 2025-03-27 17:06:45 -05:00
parent 4a8dfd11ce
commit 98e8a7ad14
No known key found for this signature in database
1 changed files with 16 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

35
public/styles/style.css
View file

@ -1,5 +1,13 @@
/* @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap'); */ /* @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-face {
font-family: 'Source Code Pro'; font-family: 'Source Code Pro';
src: url('/fonts/SourceCodePro.ttf'); src: url('/fonts/SourceCodePro.ttf');
@ -8,24 +16,24 @@
* { * {
color-scheme: light dark; color-scheme: light dark;
font-family: 'Source Code Pro', monospace !important; font-family: 'Source Code Pro', monospace !important;
color: #0F0; color: var(--fp-primary);
} }
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
color: #0F0; color: var(--fp-primary);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Source Code Pro', monospace !important; font-family: 'Source Code Pro', monospace !important;
} }
html { html {
background-color: #000; background-color: var(--fp-background);
} }
.warning { .warning {
color: #F00; color: var(--fp-danger);
} }
body { body {
@ -52,7 +60,7 @@ a:has(button) {
box-shadow: none; box-shadow: none;
transform: none; transform: none;
outline: none; outline: none;
background: #000; background: var(--fp-background);
} }
.center { .center {
@ -69,16 +77,6 @@ a:has(button) {
text-align: right; 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 { .rainbow {
background: linear-gradient(to right, #F00 0%, #E0F 10%, #0BF 30%, #0F1 50%, #F00 90%); background: linear-gradient(to right, #F00 0%, #E0F 10%, #0BF 30%, #0F1 50%, #F00 90%);
-webkit-background-clip: text; -webkit-background-clip: text;
@ -88,11 +86,11 @@ a:has(button) {
} }
.color { .color {
color: #0F0; color: var(--fp-primary);
} }
.force-color { .force-color {
background: #0F0; background: var(--fp-primary);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@ -107,7 +105,7 @@ a:has(button) {
} }
pre { pre {
background: #111; background: var(--fp-dim);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;
@ -115,7 +113,6 @@ pre {
code { code {
overflow-x: auto; overflow-x: auto;
max-width: 100%;
display: block; display: block;
margin: 0ch 1ch; margin: 0ch 1ch;
} }