revert: "feat: header facelift (#1662)" (#1672)

Author: katzino

apify-docs-theme/src/config.js

@@ -137,6 +137,13 @@ 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',
@@ -249,10 +256,6 @@ 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',
@@ -271,15 +274,9 @@ const themeConfig = {
         appId: 'N8EOCSBQGH',
         apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
         indexName: 'apify_sdk_v2',
-        placeholder: 'Search documentation',
         algoliaOptions: {
             facetFilters: ['version:VERSION'],
         },
-        translations: {
-            button: {
-                buttonText: 'Search documentation…',
-            },
-        },
     },
     hubspot: {
         accountId: '19497222',

apify-docs-theme/src/theme/Footer/index.jsx

@@ -1,6 +1,5 @@
 import { useThemeConfig } from '@docusaurus/theme-common';
 import LinkItem from '@theme/Footer/LinkItem';
-import ColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -9,7 +8,7 @@ import styles from './index.module.css';
 function FooterLinksColumn({ column }) {
     return (
         <>
-            <div className={styles.title}>{column.title}</div>
+            <div className={styles.footerTitle}>{column.title}</div>
             <ul className={clsx(styles.footerItem, 'clean-list')}>
                 {column.items.map((item, i) => (
                     <li key={i} className="footer__item">
@@ -29,24 +28,21 @@ function Footer() {
     const { links, style } = footer;
     return (
         <footer className={clsx(styles.footer, style)}>
-            <div className={styles.container}>
-                <div className={clsx('row', styles.top)}>
+            <div className="container padding-horiz--lg">
+                <div className="row" style={{ justifyContent: 'space-between' }}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>
                             <FooterLinksColumn {...{ column }} />
                         </div>
                     ))
                     }
                 </div>
-                <div className={clsx('row', styles.bottom)}>
-                    <div className="col col--6">
+                <div className="row padding-vert--md padding-top--lg">
+                    <div className="col padding-vert--md col--6">
                         <a href="https://apify.com" target={'_blank'} rel={'dofollow noreferrer'}>
-                            <span className={styles.logo}></span>
+                            <span className={styles.footerLogo}></span>
                         </a>
                     </div>
-                    <div className="col col--6">
-                        <ColorModeToggle className={styles.toggle} />
-                    </div>
                 </div>
             </div>
         </footer>

apify-docs-theme/src/theme/Footer/index.module.css

@@ -1,14 +1,5 @@
 .footer {
-    padding: 4rem 1.6rem 8rem;
-    border-top: 1px solid var(--color-neutral-separator-subtle);
-}
-
-.container {
-    max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
-    width: 100%;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
+    padding-top: 64px;
 }
 
 .builtBy {
@@ -42,79 +33,29 @@
     fill: #6f7490;
 }
 
-.title {
-    font-size: 1.6rem;
-    font-weight: 700;
-    line-height: 2.4rem;
-    margin-bottom: 1.6rem;
-}
-
-.top {
-    justify-content: space-between;
-}
-
-.bottom {
-    padding-top: 8rem;
-
-    :global(.col) {
-        display: flex;
-        align-items: center;
-    }
-}
-
-.toggle {
-    margin-left: auto;
+.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;
+    margin-bottom: 20px;
 }
 
-.logo {
+.footerLogo {
     display: inline-block;
     width: 90px;
     height: 24px;
     background-image: url('/img/footer-apify-logo-black.svg');
     background-repeat: no-repeat;
 }
 
-html[data-theme='dark'] .logo {
+html[data-theme='dark'] .footerLogo {
     background-image: url('/img/footer-apify-logo-white.svg');
 }
 
-@media (max-width: 996px) {
-    .footer {
-        padding: 3.2rem 1.6rem;
-    }
-
-    .container {
-        flex-direction: column-reverse;
-    }
-
-    .bottom {
-        padding-top: 0;
-        gap: 1.6rem;
-
-        :global(.col) {
-            justify-content: center;
-        }
-    }
-
-    .toggle {
-        margin-left: unset;
-    }
-
-    .top {
-        padding: 3.2rem 0;
-        gap: 3.2rem;
-        text-align: center;
-    }
-
-    .top::before {
-        width: 100%;
-        height: 1px;
-        margin: 0 -1.6rem;
-        padding: 0 1.6rem;
-        content: '';
-        display: block;
-        background-color: var(--color-neutral-separator-subtle);
-    }
-}
-
 /** dummy comment just to trigger theme publishing 3 */

apify-docs-theme/src/theme/Layout/index.jsx

@@ -12,7 +12,7 @@ export default function LayoutWrapper(props) {
 
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',

apify-docs-theme/src/theme/Navbar/CTA/index.jsx

@@ -4,14 +4,15 @@ 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';
 import NavbarItem from '@theme/NavbarItem';
 import React from 'react';
 
 import SearchBar from '../../SearchBar';
-import NavbarCTA from '../CTA';
+import styles from './styles.module.css';
 
 function NavbarItems({ items }) {
     return (
@@ -71,7 +72,6 @@ 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>
                         )}
-                        <NavbarCTA />
-                        <NavbarMobileSidebarToggle />
                     </>
                 }
             />

apify-docs-theme/src/theme/Navbar/CTA/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}