refactor gradient styles

uiua-lang · Dec 21, 2023 · a0e1019 · a0e1019
1 parent 0f1e872
commit a0e1019
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 59 deletions.
diff --git a/site/src/main.rs b/site/src/main.rs
@@ -351,9 +351,9 @@ macro_rules! code_font {
 fn prim_class(prim: Primitive) -> &'static str {
  match prim {
  Primitive::Identity => code_font!("stack-function"),
- Primitive::Transpose => code_font!("monadic-function trans"),
- Primitive::Both => code_font!("monadic-modifier bi"),
- Primitive::All => code_font!("dyadic-modifier pan"),
+ Primitive::Transpose => code_font!("monadic-function trans text-gradient"),
+ Primitive::Both => code_font!("monadic-modifier bi text-gradient"),
+ Primitive::All => code_font!("dyadic-modifier pan text-gradient"),
  prim if prim.class() == PrimClass::Stack && prim.modifier_args().is_none() => {
  code_font!("stack-function")
  }
@@ -379,14 +379,14 @@ fn prim_class(prim: Primitive) -> &'static str {
 
 fn binding_class(name: &str, sig: Signature, margs: usize) -> &'static str {
  match name {
- "Trans" => code_font!("trans"),
- "Bi" => code_font!("bi"),
- "Pan" => code_font!("pan"),
- "Gay" => code_font!("gay"),
- "Ace" => code_font!("ace"),
- "Nb" | "Enby" => code_font!("nb"),
- "Fluid" => code_font!("fluid"),
- "Queer" => code_font!("queer"),
+ "Trans" => code_font!("trans text-gradient"),
+ "Bi" => code_font!("bi text-gradient"),
+ "Pan" => code_font!("pan text-gradient"),
+ "Gay" => code_font!("gay text-gradient"),
+ "Ace" => code_font!("ace text-gradient"),
+ "Nb" | "Enby" => code_font!("nb text-gradient"),
+ "Fluid" => code_font!("fluid text-gradient"),
+ "Queer" => code_font!("queer text-gradient"),
  _ => match margs {
  0 => match (sig.args, sig.outputs) {
  (0, 1) => code_font!("noadic-function"),

diff --git a/site/styles.css b/site/styles.css
@@ -1016,6 +1016,15 @@ a.clean {
  color: #db2;
 }
 
+.text-gradient {
+ background-size: 100%;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -moz-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ -moz-text-fill-color: transparent;
+}
+
 .trans {
  background-image: linear-gradient(180deg,
  #5BCEFA 36%,
@@ -1026,12 +1035,6 @@ a.clean {
  #F5A9B8 58%,
  #F5A9B8 69%,
  #5BCEFA 69%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .bi {
@@ -1040,12 +1043,6 @@ a.clean {
  #9B4F96 48%,
  #9B4F96 65%,
  #0038A8 65%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .pan {
@@ -1054,12 +1051,6 @@ a.clean {
  #FFD800 48%,
  #FFD800 65%,
  #21B1FF 65%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .gay {
@@ -1074,12 +1065,6 @@ a.clean {
  #0000F9 60%,
  #0000F9 70%,
  #86007D 70%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .ace {
@@ -1090,12 +1075,6 @@ a.clean {
  #FFFFFF 50%,
  #FFFFFF 70%,
  #800080 70%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .nb {
@@ -1106,12 +1085,6 @@ a.clean {
  #9C59D1 50%,
  #9C59D1 70%,
  #2C2C2C 70%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .fluid {
@@ -1124,12 +1097,6 @@ a.clean {
  #000000 58%,
  #000000 69%,
  #2F3CBE 69%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 .queer {
@@ -1138,12 +1105,6 @@ a.clean {
  #FFFFFF 48%,
  #FFFFFF 65%,
  #4A8123 65%);
- background-size: 100%;
- background-clip: text;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
 }
 
 @media (prefers-color-scheme: light) {