CSS

Author: BlessEphraem

Blog/assets/css/custom.css

@@ -32,7 +32,9 @@
   --docusaurus-highlighted-code-line-bg: var(--ifm-color-primary-alpha-10);
 
   --glass-border: rgba(255, 255, 255, 0.08);
-  --title-gradient: linear-gradient(-90deg, var(--ifm-color-primary) 0%, var(--color-pink) 100%);
+  --title-gradient-from: var(--ifm-color-primary);
+  --title-gradient-to:   var(--color-pink);
+  --title-gradient-dir:  -90deg;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

Wiki/assets/css/custom.css

@@ -35,7 +35,9 @@
   --ifm-heading-font-family: 'Satoshi', sans-serif;
   --ifm-heading-font-weight: 900;
   --docusaurus-highlighted-code-line-bg: var(--ifm-color-primary-alpha-10);
-  --title-gradient: linear-gradient(-90deg, #ffffff 0%, var(--ifm-color-primary) 100%);
+  --title-gradient-from: #ffffff;
+  --title-gradient-to:   var(--ifm-color-primary);
+  --title-gradient-dir:  -90deg;
   --secondary: var(--ifm-color-secondary);
   --glass-border: rgba(255, 255, 255, 0.08);
   -webkit-font-smoothing: antialiased;

assets/css/root.css

@@ -155,8 +155,8 @@ body::after {
     font-weight: 900;
     letter-spacing: 0.05em;
     line-height: 1;
-    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--news), var(--primary));
-    background-size: 200% auto;
+    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--news));
+    background-size: 400% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;

assets/css/title.css

@@ -1,8 +1,17 @@
-/* Shared gradient title style — used by Wiki navbar & Portfolio hero */
+/* Shared gradient title style — used by Wiki navbar, Blog navbar & Portfolio
+ * Override --title-gradient-from / --title-gradient-to / --title-gradient-dir
+ * per section. Never override --title-gradient directly. */
 
 :root {
-  --title-gradient: linear-gradient(135deg, #ff1796, #3ad0ff);
-  --title-font: 'Satoshi', sans-serif;
-  --title-weight: 900;
+  --title-gradient-from: #ff1796;  /* first stop  (0%)   — default: pink */
+  --title-gradient-to:   #3ad0ff;  /* second stop (100%) — default: cyan */
+  --title-gradient-dir:  135deg;   /* default: diagonal (Portfolio) */
+  --title-gradient: linear-gradient(
+    var(--title-gradient-dir),
+    var(--title-gradient-from),
+    var(--title-gradient-to)
+  );
+  --title-font:           'Satoshi', sans-serif;
+  --title-weight:         900;
   --title-letter-spacing: 2px;
 }