feat: added cookbooks design (#192)

* feat: added cookbooks design

* fix: added icon and hover effects

* fix: cleaned up home page styling

* fix: added an image fallback for video

* fix: added an image fallback for video

* fix: space between within card

---------

Co-authored-by: Kapil Gowru <[email protected]>
Co-authored-by: Kapil Gowru <[email protected]>

Author: 3 people

fern/assets/custom-styles.css

@@ -14,15 +14,6 @@
   border-bottom: 0;
 }
 
-.fern-search-bar {
-  background-color: #75757640 !important;
-  box-shadow: none !important;
-}
-
-.fern-search-bar:hover {
-  background-color: #75757659 !important;
-}
-
 .fern-sidebar-container > nav {
   padding-left: 0 !important;
 }
@@ -54,6 +45,10 @@
   border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
 }
 
+#fern-search-button { 
+  background-color: var(--grayscale-3) !important;
+}
+
 .fern-breadcrumb-item {
   font-weight: 500;
 }
@@ -64,4 +59,36 @@
 
 .fern-mdx-link {
   font-weight: 500 !important;
-}
+}
+
+/* Styling for the sidebar icon in the left nav */
+.fern-sidebar-icon {
+  padding: 0.375rem;
+  background-color: var(--grayscale-4);
+  border-radius: 0.25rem;
+}
+
+/* Hide expand icon for Cookbooks in sidebar */
+.fern-sidebar-link[href="/docs/guides"] .fern-sidebar-link-expand {
+  display: none !important;
+}
+
+/* Hide the sidebar group for Cookbooks */
+.fern-sidebar-link[href="/docs/guides"] + .fern-sidebar-group {
+  display: none !important;
+}
+
+/* Change font-semibold to font-medium in fern-cards */
+.fern-card .font-semibold {
+  font-weight: 500 !important; /* medium weight */
+}
+
+/* Remove opacity-50 from links in the Cookbooks section */
+.fern-sidebar-link-container:has(a.fern-sidebar-link[href^="/docs/guides"]) a.fern-sidebar-link.opacity-50 {
+  opacity: 1 !important;
+}
+
+/* Remove bottom borderfrom header */
+.fern-header {
+  border-bottom: 0 !important;
+}

fern/assets/img/cookbooks/icons/audio-intelligence-icon.svg

@@ -71,7 +71,7 @@ navigation:
         skip-slug: true
         contents:
           - section: Cookbooks
-            icon: regular book
+            icon: duotone book
             path: pages/05-guides/index.mdx
             slug: guides
             contents:
@@ -358,7 +358,7 @@ navigation:
                 slug: real-time
                 hidden: true
           - section: SDKs
-            icon: cubes
+            icon: duotone cubes
             contents:
               - link: Python
                 href: https://github.com/AssemblyAI/assemblyai-python-sdk
@@ -371,7 +371,7 @@ navigation:
               - link: C#
                 href: https://github.com/AssemblyAI/assemblyai-csharp-sdk
           - section: Integrations
-            icon: code-fork
+            icon: duotone code-fork
             path: pages/06-integrations/index.mdx
             contents:
             - section: LangChain
@@ -565,7 +565,7 @@ colors:
 layout:
   page-width: full
   searchbar-placement: header
-  header-height: 80px
+  header-height: 56px
   sidebar-width: 316px
   tabs-placement: header
 logo: