From fd15fbf5af12276ca04f62dd93fdd4123e1f8aa1 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Thu, 19 Jun 2025 08:00:34 +0800
Subject: [PATCH] [feih] styles tweaks

---
 .../components/SidebarAd/styles.module.css    | 94 ++++++++++---------
 website/src/css/custom.css                    | 26 +++--
 2 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css
index 9df2a4759..81ef9461a 100644
--- a/website/src/components/SidebarAd/styles.module.css
+++ b/website/src/components/SidebarAd/styles.module.css
@@ -1,47 +1,53 @@
 /* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
 @property --border-angle-1 {
-  syntax: "<angle>";
+  syntax: '<angle>';
   inherits: true;
   initial-value: 0deg;
 }
 
 @property --border-angle-2 {
-  syntax: "<angle>";
+  syntax: '<angle>';
   inherits: true;
   initial-value: 90deg;
 }
 
 @property --border-angle-3 {
-  syntax: "<angle>";
+  syntax: '<angle>';
   inherits: true;
   initial-value: 180deg;
 }
 
 :root {
-  --color-one: #A07CFE;
-  --color-two: #FE8FB5;
-  --color-three: #FFBE7B;
+  --color-one: #a07cfe;
+  --color-two: #fe8fb5;
+  --color-three: #ffbe7b;
   --background: #fff;
   --foreground: #18181b;
   --border-size: 1.5px;
   --border-radius: 0.75rem;
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --background: #18181b;
   --foreground: #fff;
 }
 
 @keyframes rotateBackground {
-  to { --border-angle-1: 360deg; }
+  to {
+    --border-angle-1: 360deg;
+  }
 }
 
 @keyframes rotateBackground2 {
-  to { --border-angle-2: -270deg; }
+  to {
+    --border-angle-2: -270deg;
+  }
 }
 
 @keyframes rotateBackground3 {
-  to { --border-angle-3: 540deg; }
+  to {
+    --border-angle-3: 540deg;
+  }
 }
 
 .container {
@@ -58,45 +64,46 @@
   display: flex;
   border-radius: var(--border-radius);
   background-color: transparent;
-  background-image: conic-gradient(
-    from var(--border-angle-1) at 10% 15%,
-    transparent,
-    var(--color-one) 10%,
-    transparent 30%,
-    transparent
-  ),
-  conic-gradient(
-    from var(--border-angle-2) at 70% 60%,
-    transparent,
-    var(--color-two) 10%,
-    transparent 60%,
-    transparent
-  ),
-  conic-gradient(
-    from var(--border-angle-3) at 50% 20%,
-    transparent,
-    var(--color-three) 10%,
-    transparent 50%,
-    transparent
-  );
-  animation: 
+  background-image:
+    conic-gradient(
+      from var(--border-angle-1) at 10% 15%,
+      transparent,
+      var(--color-one) 10%,
+      transparent 30%,
+      transparent
+    ),
+    conic-gradient(
+      from var(--border-angle-2) at 70% 60%,
+      transparent,
+      var(--color-two) 10%,
+      transparent 60%,
+      transparent
+    ),
+    conic-gradient(
+      from var(--border-angle-3) at 50% 20%,
+      transparent,
+      var(--color-three) 10%,
+      transparent 50%,
+      transparent
+    );
+  animation:
     rotateBackground 3s linear infinite,
     rotateBackground2 8s linear infinite,
     rotateBackground3 13s linear infinite;
+}
 
-  &:hover {
-    text-decoration: none;
-  }
+.container:hover {
+  text-decoration: none;
 }
 
 .container > * {
-  background: var(--background); 
+  background: var(--background);
   padding: 0.75rem;
   border-radius: calc(var(--border-radius) - var(--border-size));
   color: var(--foreground);
 }
 
-[data-theme^="dark"] .container {
+[data-theme^='dark'] .container {
   border: 0;
 }
 
@@ -118,14 +125,15 @@
   color: var(--ifm-color-content-secondary);
   font-size: 0.75rem;
   margin-bottom: 0;
-  
-  strong, u {
-    color: var(--ifm-color-content);
-    font-weight: 500;
-  }
 }
 
-[data-theme="dark"] .tagline {
+.tagline strong,
+.tagline u {
+  color: var(--ifm-color-content);
+  font-weight: 500;
+}
+
+[data-theme='dark'] .tagline {
   color: #a1a1aa;
 }
 
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 4c6beacdb..9cbd2e508 100755
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -26,9 +26,10 @@
   --ifm-color-primary-lighter: #dc4b8d;
   --ifm-color-primary-lightest: #e26ca2;
 
-  --ifm-font-family-base: 'Inter var', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+  --ifm-font-family-base:
+    'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
 
   --ifm-footer-padding-vertical: 5rem;
 }
@@ -47,11 +48,8 @@ strong {
   font-weight: 600;
 }
 
-html[data-theme='dark'] strong {
-  color: #fff;
-}
-
-.footer, .footer-dark {
+.footer,
+.footer-dark {
   --ifm-footer-background-color: #18181b;
 }
 
@@ -76,12 +74,12 @@ header h1 {
   line-height: 1.2em;
 }
 
-html[data-theme="dark"] .markdown h1,
-html[data-theme="dark"] .markdown h2,
-html[data-theme="dark"] .markdown h3,
-html[data-theme="dark"] .markdown h4,
-html[data-theme="dark"] .markdown h5,
-html[data-theme="dark"] .markdown h6 {
+html[data-theme='dark'] .markdown h1,
+html[data-theme='dark'] .markdown h2,
+html[data-theme='dark'] .markdown h3,
+html[data-theme='dark'] .markdown h4,
+html[data-theme='dark'] .markdown h5,
+html[data-theme='dark'] .markdown h6 {
   color: #fff;
 }