main section

Author: claudiacodacy

docusaurus/docusaurus.config.ts

@@ -6,8 +6,8 @@ import type * as Preset from '@docusaurus/preset-classic';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: 'My Site',
-  tagline: 'Dinosaurs are cool',
+  title: 'Codacy Docs',
+  tagline: 'Documentation for the Codacy automated code review tool.',
   favicon: 'img/codacy-favicon.ico',
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future

docusaurus/src/css/custom.css

@@ -13,8 +13,9 @@
 @import './imports/components/search.css';
 @import './imports/components/navbar.css';
 @import './imports/components/nav-multistep.css';
+@import './imports/components/main-section.css';
 
-
+@layer docusaurus.infima, docusaurus.custom;
 
 .table-of-contents__left-border {
   border: none;
@@ -25,19 +26,4 @@
   background-repeat: no-repeat;
 }
 
-.menu {
-  padding: 0.5rem
-}
-
-.theme-layout-main .container {
-  padding: 0 4rem;
-  margin: 4rem auto;
-}
-
-@media (max-width: 1200px){
-  .theme-layout-main .container {
-    padding: 1.5rem;
-    margin: 0;
-  }
-}
 

docusaurus/src/css/imports/components/main-section.css

@@ -0,0 +1,28 @@
+@media (min-width: 997px) {
+    .main-wrapper {
+        margin: 0 2rem;
+    }
+
+    .menu {
+        border: 1px solid var(--ifm-color-emphasis-300);
+        border-radius: 1rem 0 0 1rem;
+        padding: 1rem 0.5rem !important;
+    }
+}
+
+@media (max-width: 1200px){
+    .theme-layout-main .container {
+        padding: 1.5rem;
+        margin: 0;
+    }
+  }
+
+@layer docusaurus.infima {
+    @media (min-width: 997px) {
+        .theme-layout-main .container {
+            padding-top: 4rem !important;
+            padding-left: 4rem;
+            padding-right: 4rem;
+        }
+    }
+}

docusaurus/src/css/imports/components/navbar.css

@@ -6,7 +6,6 @@
 
 .navbar {
     box-shadow: none;
-    border-bottom: 1px solid var(--ifm-toc-border-color);
 }
 
 .navbar__title {

docusaurus/src/theme/DocRoot/Layout/Main/index.tsx

@@ -0,0 +1,33 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
+import type {Props} from '@theme/DocRoot/Layout/Main';
+
+import styles from './styles.module.css';
+
+export default function DocRootLayoutMain({
+  hiddenSidebarContainer,
+  children,
+}: Props): ReactNode {
+  const sidebar = useDocsSidebar();
+  const isEnhanced = hiddenSidebarContainer || !sidebar;
+
+  return (
+    <main
+      className={clsx(
+        styles.docMainContainer,
+        isEnhanced && styles.docMainContainerEnhanced,
+      )}>
+      <div className={styles.docItemWrapperOuter}>
+        <div
+          className={clsx(
+            'container',
+            styles.docItemWrapper,
+            hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+          )}>
+          <div className={styles.docItemWrapperInner}>{children}</div>
+        </div>
+      </div>
+    </main>
+  );
+}

docusaurus/src/theme/DocRoot/Layout/Main/styles.module.css

@@ -0,0 +1,69 @@
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+.docItemWrapperOuter {
+  width: 100%;
+}
+
+.docItemWrapper {
+  width: 100%;
+}
+
+.docItemWrapperInner {
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+
+  .docItemWrapperOuter {
+    border-radius: 0 1rem 1rem 0;
+    border-color: var(--ifm-color-emphasis-300);
+    border-style: solid;
+    border-width: 1px 1px 1px 0;
+    position: relative;
+    z-index: 0;
+  }
+
+  .docItemWrapperOuter::after {
+    content: '';
+    position: fixed;
+    display: block;
+    width: calc(100% - var(--doc-sidebar-width) - 2rem - 2rem - 1px);
+    height: 2rem;
+    clip-path: inset(0 0 1rem 0);
+    border-color: var(--ifm-color-emphasis-300);
+    border-style: solid;
+    border-width: 1px 1px 0 0;
+    border-radius: 0 1rem 1rem 0;
+    top: calc(var(--ifm-navbar-height));
+    z-index: 2;
+  }
+
+  .docItemWrapperOuter::before {
+    content: '';
+    position: fixed;
+    width: 1rem;
+    height: 10rem;
+    background: var(--ifm-background-surface-color);
+    top: calc(var(--ifm-navbar-height) - 9rem);
+    right: 2rem;
+    z-index: 1;
+  }
+
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}