feat: header facelift

katzino · katzino · commit 7a2f5c1be40e · 2025-07-01T16:36:02.000+02:00
diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js
@@ -137,20 +137,6 @@ const themeConfig = {
                     },
                 ],
             },
-            {
-                href: 'https://github.com/apify',
-                label: 'GitHub',
-                title: 'Apify on GitHub',
-                position: 'right',
-                className: 'icon',
-            },
-            {
-                href: 'https://discord.com/invite/jyEM2PRvMU',
-                label: 'Discord',
-                title: 'Chat on Discord',
-                position: 'right',
-                className: 'icon',
-            },
         ],
     },
     colorMode: {
@@ -256,6 +242,10 @@ const themeConfig = {
                         label: 'GitHub',
                         href: 'https://github.com/apify',
                     },
+                    {
+                        href: 'https://discord.com/invite/jyEM2PRvMU',
+                        label: 'Discord',
+                    },
                     {
                         label: 'Trust Center',
                         href: 'https://trust.apify.com',
diff --git a/apify-docs-theme/src/theme/Footer/index.jsx b/apify-docs-theme/src/theme/Footer/index.jsx
@@ -28,7 +28,7 @@ function Footer() {
     const { links, style } = footer;
     return (
         <footer className={clsx(styles.footer, style)}>
-            <div className="container padding-horiz--lg">
+            <div className={styles.container}>
                 <div className="row" style={{ justifyContent: 'space-between' }}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>
diff --git a/apify-docs-theme/src/theme/Footer/index.module.css b/apify-docs-theme/src/theme/Footer/index.module.css
@@ -1,5 +1,20 @@
 .footer {
-    padding-top: 64px;
+    padding: 4rem 1.6rem 0;
+    border-top: 1px solid var(--color-neutral-separator-subtle);
+}
+
+.container {
+    max-width: var(--max-layout-width);
+    margin: 0 auto;
+    width: 100%;
+}
+
+:global(.row) {
+    margin: unset;
+}
+
+:global(.col) {
+    padding: unset;
 }
 
 .builtBy {
@@ -34,15 +49,9 @@
 }
 
 .footerTitle {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #8d92af;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 2.4rem;
     margin-bottom: 20px;
 }
 
diff --git a/apify-docs-theme/src/theme/Layout/index.jsx b/apify-docs-theme/src/theme/Layout/index.jsx
@@ -2,17 +2,14 @@ import { useLocation } from '@docusaurus/router';
 // cannot use any of the theme aliases here as it causes a circular dependency :( ideas welcome
 import Layout from '@docusaurus/theme-classic/lib/theme/Layout/index';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { usePluginData } from '@docusaurus/useGlobalData';
 import React from 'react';
 
 export default function LayoutWrapper(props) {
-    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
     const baseUrl = useBaseUrl('/');
     const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');
 
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',
diff --git a/apify-docs-theme/src/theme/Navbar/Content/index.jsx b/apify-docs-theme/src/theme/Navbar/Content/index.jsx
@@ -4,7 +4,6 @@ import {
     splitNavbarItems,
 } from '@docusaurus/theme-common/internal';
 import { usePluginData } from '@docusaurus/useGlobalData';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarSearch from '@theme/Navbar/Search';
@@ -72,6 +71,7 @@ export default function NavbarContent() {
     const { navbar: { items } } = useThemeConfig();
     const [leftItems, rightItems] = splitNavbarItems(items);
     const searchBarItem = items.find((item) => item.type === 'search');
+
     return (
         <div
             style={{
@@ -85,20 +85,20 @@ export default function NavbarContent() {
             <NavbarContentLayout
                 left={
                     <>
-                        <NavbarMobileSidebarToggle />
                         <NavbarLogo />
                         <NavbarItems items={leftItems} />
                     </>
                 }
                 right={
                     <>
-                        <NavbarColorModeToggle className={styles.colorModeToggle} />
                         <NavbarItems items={rightItems} />
                         {!searchBarItem && (
                             <NavbarSearch>
                                 <SearchBar />
                             </NavbarSearch>
                         )}
+                        <a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
+                        <NavbarMobileSidebarToggle />
                     </>
                 }
             />
diff --git a/apify-docs-theme/src/theme/Navbar/Content/styles.module.css b/apify-docs-theme/src/theme/Navbar/Content/styles.module.css
@@ -1,8 +1,44 @@
-/*
-Hide color mode toggle in small viewports
- */
-@media (max-width: 996px) {
-  .colorModeToggle {
-    display: none;
+.getStarted {
+  all: unset;
+  height: 4rem;
+  padding: 0.8rem 1.6rem !important;
+  background-color: var(--color-primary-black-action);
+  border-radius: 2rem;
+  color: var(--color-neutral-text-on-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 2.4rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: none;
+  position: relative;
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--button-gradient);
+    opacity: 0.4;
+    border-radius: inherit;
+    transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  }
+
+  &:hover {
+    background-color: var(--color-primary-black-action-hover);
+    color: var(--color-neutral-text-on-primary);
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+@media (min-width: 480px) {
+  .getStarted {
+    display: block;
   }
 }
diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js
@@ -5,6 +5,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React, { useCallback } from 'react';
 
 import { ApifySearch } from '@apify/docs-search-modal';
+import './styles.css';
 
 /**
  * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).
diff --git a/apify-docs-theme/src/theme/SearchBar/styles.css b/apify-docs-theme/src/theme/SearchBar/styles.css
@@ -4,9 +4,81 @@
 }
 
 .DocSearch-Button {
+  height: 4rem;
   margin: 0;
-  transition: all var(--ifm-transition-fast)
-    var(--ifm-transition-timing-default);
+  padding: 0.8rem 1.2rem;
+  background-color: var(--color-Neutral_BackgroundMuted);
+  border: 1px solid var(--color-neutral-field-border);
+  border-radius: 6px;
+  color: var(--color-neutral-text-placeholder);
+  /* Annoying, but needed */
+  /* https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically/26140154 */
+  font-family: inherit;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
+    color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+@media (max-width: 768px) {
+    .DocSearch-Button {
+        gap: 0;
+    }
+}
+
+.DocSearch-Button:hover {
+  box-shadow: none;
+  background-color: var(--color-Neutral_BackgroundMuted);
+  color: var(--color-neutral-icon);
+}
+
+.DocSearch-Search-Icon {
+  display: none;
+}
+
+.DocSearch-Button-Placeholder {
+  color: inherit;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  padding: 0;
+  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.DocSearch-Button-Keys {
+  width: 3rem;
+  min-width: unset;
+  height: 2rem;
+  background-color: var(--color-neutral-background-subtle);
+  border: 1px solid var(--color-neutral-border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+}
+
+.DocSearch-Button-Key {
+  top: unset;
+  width: unset;
+  min-width: 0.8rem;
+  height: unset;
+  margin: unset;
+  padding: unset;
+  background: unset;
+  border-radius: unset;
+  box-shadow: unset;
+  color: var(--color-neutral-text-subtle);
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.DocSearch-Button-Key:first-child {
+  width: 1.2rem;
+  height: 1.2rem;
+  font-size: 1.6rem;
+  line-height: 1.2rem;
 }
 
 .DocSearch-Container {
diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
