From eff495e6064dffc3cb93f12d313cdc9dacb12b78 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <contact@benjamincabanes.com>
Date: Thu, 10 Jun 2021 12:23:25 -0400
Subject: [PATCH] docs(core): mobile style fixes (#5958)

---
 nx-dev/feature-doc-viewer/src/lib/sidebar.tsx  |  2 +-
 nx-dev/nx-dev/styles/main.css                  |  2 +-
 nx-dev/nx-dev/tailwind.config.js               | 12 ++++++++++++
 nx-dev/ui/common/src/lib/header.tsx            |  8 ++++++--
 nx-dev/ui/common/src/lib/nx-users-showcase.tsx |  2 +-
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx b/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
index c07cffc100..c4cc5befc9 100644
--- a/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
@@ -142,7 +142,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
                   )}
                 >
                   {isActiveLink ? (
-                    <span className="rounded-md absolute h-full w-1 -right-4 top-0 bg-green-nx-base" />
+                    <span className="rounded-md absolute h-full w-1 -right-2 sm:-right-4 top-0 bg-green-nx-base" />
                   ) : null}
                   <span
                     className={cx('relative', {
diff --git a/nx-dev/nx-dev/styles/main.css b/nx-dev/nx-dev/styles/main.css
index 0ed411359a..32589c785e 100644
--- a/nx-dev/nx-dev/styles/main.css
+++ b/nx-dev/nx-dev/styles/main.css
@@ -27,10 +27,10 @@ iframe[src*='youtube'] {
 .prose img {
   display: block;
   margin: 1.7rem auto;
-  max-width: 560px;
 }
 .prose iframe {
   width: 100%;
+  max-width: 560px;
 }
 .prose img {
   width: max-content;
diff --git a/nx-dev/nx-dev/tailwind.config.js b/nx-dev/nx-dev/tailwind.config.js
index e03c26f742..1110d49c3e 100644
--- a/nx-dev/nx-dev/tailwind.config.js
+++ b/nx-dev/nx-dev/tailwind.config.js
@@ -43,6 +43,18 @@ module.exports = {
           'nx-base': 'hsla(162, 47%, 50%, 1)',
         },
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            'code::before': {
+              content: '',
+            },
+            'code::after': {
+              content: '',
+            },
+          },
+        },
+      },
     },
   },
   variants: {
diff --git a/nx-dev/ui/common/src/lib/header.tsx b/nx-dev/ui/common/src/lib/header.tsx
index c8bdaad0e9..7397e98356 100644
--- a/nx-dev/ui/common/src/lib/header.tsx
+++ b/nx-dev/ui/common/src/lib/header.tsx
@@ -68,10 +68,14 @@ export function Header({ flavor, showSearch, version }: HeaderProps) {
             <Link
               href={`/${version.value}/${flavor.value}/core-concepts/plugins`}
             >
-              <a className="px-3 py-2 text-white leading-tight">Plugins</a>
+              <a className="px-3 py-2 hidden md:inline-flex text-white leading-tight">
+                Plugins
+              </a>
             </Link>
             <Link href="/community">
-              <a className="px-3 py-2 text-white leading-tight">Community</a>
+              <a className="px-3 py-2 hidden md:inline-flex text-white leading-tight">
+                Community
+              </a>
             </Link>
             <a
               href="https://nx.app/?utm_source=nx.dev"
diff --git a/nx-dev/ui/common/src/lib/nx-users-showcase.tsx b/nx-dev/ui/common/src/lib/nx-users-showcase.tsx
index e1e20a1d6d..8ed81b8870 100644
--- a/nx-dev/ui/common/src/lib/nx-users-showcase.tsx
+++ b/nx-dev/ui/common/src/lib/nx-users-showcase.tsx
@@ -2,7 +2,7 @@ export function NxUsersShowcase() {
   return (
     <div className="max-w-screen-lg mx-auto px-5 py-32">
       <p className="sm:mx-auto sm:text-lg">Join the ecosystem of Nx users</p>
-      <div className="mt-12 grid items-center justify-items-center grid-cols-3 md:grid-cols-6 gap-12 text-gray-500">
+      <div className="mt-12 grid items-center justify-items-center grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-12 text-gray-500">
         <svg width="160" height="88" viewBox="0 0 160 88" fill="currentColor">
           <path d="M90.9947 24.3067L98.6787 27.3333L90.9947 30.1947V34.2827L104.155 28.9693V25.7L90.9947 20.3867V24.3067Z" />
           <path d="M82.4107 42.1293C83.3107 40.412 85.1107 39.4333 87.0707 39.5133V39.5107C89.864 39.5107 91.7307 41.1467 91.7307 44.9067V55.2093H87.3974V45.5627C87.3974 43.764 86.6614 42.9467 85.108 42.9467C83.7174 42.8667 82.4907 44.0107 82.4107 45.4V55.2093H78.16V39.84H82.4107V42.1293Z" />