Color fade effect for function & event pages

Author: FileEX

web/src/pages/reference/[event].astro

@@ -82,6 +82,8 @@ const needsChecking =
       tableOfContents: false,
     }}
   >
+    <div class={`fading-bg fade-${eventType}`}></div>
+
     {
       needsChecking && (
         <div class="notes-section">

web/src/pages/reference/[func].astro

@@ -97,6 +97,8 @@ const oopList = Array.isArray(funcInfo.oop) ? funcInfo.oop : funcInfo.oop ? [fun
       tableOfContents: false,
     }}
   >
+    <div class={`fading-bg fade-${funcType}`}></div>
+
     {needsChecking && (
       <div class="notes-section">
         <NoteBox type="needs_checking">

web/src/styles/custom.css

@@ -17,10 +17,44 @@
     /* Override Starlight styling */
     --sl-content-width: 70rem;
 }
+
 .small-text {
     font-size: 0.7em;
 }
 
+.fading-bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(to bottom, var(--fade-color), transparent 50%);
+  opacity: 0.25;
+}
+
+:root[data-theme='dark'] .fade-shared {
+  --fade-color: var(--color-type-shared-background-high-light);
+}
+
+:root[data-theme='dark'] .fade-client {
+  --fade-color: var(--color-type-client-background-high-light);
+}
+
+:root[data-theme='dark'] .fade-server {
+  --fade-color: var(--color-type-server-background-high-light);
+}
+
+:root[data-theme='light'] .fade-shared {
+  --fade-color: var(--color-type-shared-background-high-dark);
+}
+
+:root[data-theme='light'] .fade-client {
+  --fade-color: var(--color-type-client-background-high-dark);
+}
+
+:root[data-theme='light'] .fade-server {
+  --fade-color: var(--color-type-server-background-high-dark);
+}
+
 .function-syntax,
 .function-oop,
 .notes-section,