custom styles

Author: chdeskur

fern/assets/custom-styles.css

@@ -32,4 +32,16 @@
 .fern-sidebar-link-text {
   font-weight: 400 !important;
   font-size: 14px !important;
-}
+}
+
+.fern-sidebar-container {
+  background: rgba(255, 255, 255, 0.5) !important;
+  backdrop-filter: blur(6px);
+  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+:is(.dark) .fern-sidebar-container {
+  background: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(6px);
+  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
+}

fern/docs.yml

@@ -238,9 +238,6 @@ colors:
   border:
     light: "#E5E5E5"
     dark: "#2A2522"
-  sidebar-background:
-    light: "#FFFFFF"
-    dark: "#09060F"
 layout:
   page-width: full
   searchbar-placement: header

fern/pages/home.mdx

@@ -12,37 +12,37 @@ hide-feedback: true
     background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/2.3487c091+2.png);
     background-repeat: no-repeat;
     background-position: center;
-    animation: bigPulse 4s ease-in-out infinite;
-    position: absolute;
-    top: 10%;
-    left: 0;
-    width: 50%;
+    animation: bigPulse 6s ease-in-out infinite;
+    position: fixed;
+    bottom: -5%;
+    left: -35%;
+    width: 100%;
     height: 50%;
-    z-index: 1;
+    z-index: -1;
     opacity: 0.2;
   }
   
   .image-2 {
-    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/12.7db0f10a.webp);
+    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/12.7db0f10a+2.png);
     background-repeat: no-repeat;
     background-position: center;
-    animation: oppositePulse 3s ease-in-out infinite;
-    position: absolute;
-    top: 40%;
-    right: 0;
-    width: 50%;
+    animation: oppositePulse 6s ease-in-out infinite;
+    position: fixed;
+    top: 20%;
+    right: -40%;
+    width: 100%;
     height: 50%;
     z-index: 1;
     opacity: 0.2;
   }
   
   @keyframes bigPulse {
     0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.2); }
+    50% { transform: scale(1.1); }
   }
   
   @keyframes oppositePulse {
-    0%, 100% { transform: scale(1.2); }
+    0%, 100% { transform: scale(1.1); }
     50% { transform: scale(1); }
   }