Make color palette heading sticky at the top (#2081)

Fixes #2065

- Added a **sticky color palette header** for better visibility while
scrolling.
- Made it **responsive** for smaller screens.  

### Changes Before & After  
#### Before:  

![image](https://github.com/user-attachments/assets/ee3f9e5e-86ef-4895-91b1-152e51cd717a)

#### After:  
<img width="802" alt="Screenshot 2025-02-10 at 7 40 16 PM"
src="https://github.com/user-attachments/assets/25833dc2-31fd-4ecc-9959-a2e78b552fdb"
/>

#### Highlighted Changes:  
<img width="803" alt="Screenshot 2025-02-10 at 7 38 11 PM"
src="https://github.com/user-attachments/assets/ebd47a99-7fd7-4190-bd41-55756ba89926"
/>

Let me know if any changes are required!

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: ManishaBose

src/components/color-palette.tsx

@@ -30,7 +30,8 @@ for (let line of styles.split("\n")) {
 export function ColorPalette() {
   return (
     <div className="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4">
-      <div className="col-start-2 grid grid-cols-11 justify-items-center gap-1.5 font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] dark:text-white">
+      <div className="sticky top-28 z-9 bg-white lg:top-14 dark:bg-gray-950">&nbsp;</div>
+      <div className="sticky top-28 z-9 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white">
         <div>50</div>
         <div>100</div>
         <div>200</div>