fix(layout): fix layout for non-default html font-size / revision 2 (#…

…6073) Co-authored-by: Ole Reglitzki <zerg@git.xoria.dev>
QwikDev · Mar 30, 2024 · 6ab865c · 6ab865c
1 parent fd2ccbd
commit 6ab865c
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 98 deletions.
diff --git a/packages/docs/src/components/header/header.css b/packages/docs/src/components/header/header.css
@@ -85,7 +85,8 @@ header .close-icon {
 }
 
 header .header-inner {
-  max-width: 1400px;
+  @apply flex items-center;
+  max-width: var(--container-max-width);
   margin-left: auto;
   margin-right: auto;
   position: relative;
@@ -97,10 +98,6 @@ header .header-inner {
 }
 
 header .header-logo {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: max(0px, calc(50% - 45rem));
   padding-left: 1rem;
   display: flex;
   align-items: center;

diff --git a/packages/docs/src/components/on-this-page/on-this-page.css b/packages/docs/src/components/on-this-page/on-this-page.css
@@ -1,12 +1,11 @@
 .on-this-page {
-  @apply z-20 bottom-0 pb-8;
+  @apply py-8 pt-10 ml-8;
   @apply text-base;
-}
 
-@media screen and (min-width: 1280px) {
-  .on-this-page {
-    top: 162px;
-  }
+  position: sticky;
+  top: var(--header-height);
+  min-width: fit-content;
+  max-height: calc(100vh - var(--header-height));
 }
 
 .on-this-page h6 {

diff --git a/packages/docs/src/components/on-this-page/on-this-page.tsx b/packages/docs/src/components/on-this-page/on-this-page.tsx
@@ -125,7 +125,7 @@ export const OnThisPage = component$(() => {
   ];
 
   return (
-    <aside class="on-this-page fixed text-sm z-20 bottom-0 right-[max(0px,calc(50%-42rem))] overflow-y-auto hidden xl:block xl:w-[16rem]">
+    <aside class="on-this-page text-sm overflow-y-auto hidden xl:block">
       {contentHeadings.length > 0 ? (
         <>
           <h6>On This Page</h6>

diff --git a/packages/docs/src/components/sidebar/sidebar.css b/packages/docs/src/components/sidebar/sidebar.css
@@ -1,11 +1,16 @@
 .sidebar {
-  @apply fixed z-20 top-0 bottom-0;
+  @apply hidden lg:block;
+
+  position: sticky;
+  top: var(--header-height);
+  min-width: fit-content;
+  max-height: calc(100vh - var(--header-height));
 }
 
 .sidebar summary {
   cursor: pointer;
   display: block;
-  padding-top: 3px;
+  margin-top: 3px;
   margin-bottom: 3px;
 }
 
@@ -71,28 +76,28 @@
 }
 
 .menu {
-  @apply fixed z-10 bottom-0;
-  @apply pb-6;
-  @apply overflow-y-auto;
-  @apply hidden;
-
-  @apply right-auto left-[max(0px,calc(50%-43rem))];
+  @apply py-8 pt-10;
+  @apply h-full overflow-y-auto;
 
   /* large */
-  @apply lg:block;
   @apply lg:pl-4 lg:pr-4;
   @apply lg:w-[14rem];
 
-  padding-top: 30px;
-  top: 8rem;
   border-right: 1px solid #8c8c8c66;
+  overscroll-behavior: contain;
 }
 
 .menu h5 {
-  @apply px-3 py-1 mb-1 rounded-md whitespace-nowrap;
+  @apply px-3 py-1 mb-2 rounded-md whitespace-nowrap;
   color: var(--interactive-text-color);
 }
 
+.menu li:first-child h5,
+.menu li:first-child summary {
+  margin-top: 0;
+  padding-top: 0;
+}
+
 .menu ul {
   @apply border-slate-100;
   padding-bottom: 15px;

diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
@@ -60,6 +60,7 @@
 :root {
   color-scheme: light;
   --header-height: 80px;
+  --container-max-width: 1400px;
   --builder-bar-height: 56px;
   --panel-toggle-height: 0px;
   --scroll-margin-top: calc(var(--header-height) + var(--builder-bar-height) + 10px);
@@ -203,21 +204,19 @@ select {
 }
 
 body {
-  @apply antialiased min-h-screen;
+  @apply antialiased h-screen overflow-auto;
 }
 
 @media (max-width: 1023px) {
   .menu-open .sidebar {
-    width: 100%;
-    @apply z-50;
+    @apply block fixed z-50 top-0 bottom-0 left-0 max-h-none w-full;
   }
 
   .menu-open .menu {
     @apply block;
 
     @apply top-0;
-    @apply p-3;
-    @apply pr-16;
+    @apply p-3 pt-6 pr-16;
     width: 360px;
 
     background: var(--bg-color);
@@ -232,30 +231,6 @@ body {
     @apply p-3;
   }
 
-  .menu-open header {
-    pointer-events: none;
-    touch-action: none;
-    opacity: 0.4;
-    background-color: transparent;
-  }
-
-  .menu-open .breadcrumbs {
-    pointer-events: none;
-    touch-action: none;
-    opacity: 0.2;
-    background-color: transparent;
-  }
-
-  .menu-open main {
-    pointer-events: none;
-    touch-action: none;
-    opacity: 0.2;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    background: transparent;
-  }
-
   .menu-close {
     display: block;
     position: fixed;
@@ -266,6 +241,8 @@ body {
     padding-left: 12px;
     cursor: default;
     color: var(--qwik-dark-blue);
+    background: color-mix(in hsl, var(--bg-color), transparent 20%);
+    backdrop-filter: blur(3px);
   }
 
   .menu-close svg {

diff --git a/packages/docs/src/routes/community/layout.tsx b/packages/docs/src/routes/community/layout.tsx
@@ -15,17 +15,19 @@ export default component$(() => {
   return (
     <div class="docs fixed-header">
       <Header />
-      <SideBar />
-      <main>
-        <div class="docs-container">
-          <article>
-            <Slot />
-          </article>
-          <ContentNav />
-          <Footer />
-        </div>
-        <OnThisPage />
-      </main>
+      <div class="flex gap-12 xl:gap-20 items-stretch content-container">
+        <SideBar />
+        <main class="contents">
+          <div class="docs-container">
+            <article>
+              <Slot />
+            </article>
+            <ContentNav />
+            <Footer />
+          </div>
+          <OnThisPage />
+        </main>
+      </div>
     </div>
   );
 });
diff --git a/packages/docs/src/routes/docs/docs.css b/packages/docs/src/routes/docs/docs.css
@@ -1,18 +1,17 @@
-.docs main {
-  @apply mx-auto min-h-[100vh] xl:max-w-[1300px];
+.docs .content-container {
+  @apply px-8 lg:pl-0 xl:pr-0;
+  @apply mx-auto min-h-[100vh];
+  max-width: var(--container-max-width);
 }
 
 .docs .docs-container {
-  @apply pt-8;
-  @apply px-8;
+  @apply pt-8 lg:pt-5;
 
-  /* medium */
-
-  /* large */
-  @apply lg:pt-5 lg:ml-[17rem] lg:mr-[4rem] lg:px-0;
-
-  /* xlarge */
-  @apply xl:pr-16 xl:mr-[18rem];
+  @screen lg {
+    /* approx 85ch, but since the contents use font-sizes in absolute values,
+       we need to use an absolute value here too */
+    max-width: 850px;
+  }
 }
 
 .docs article a {
@@ -269,13 +268,3 @@ h6 a:hover .icon {
   border-radius: 5px;
   overflow: hidden;
 }
-
-.docs main.no-right-menu .on-this-page {
-  display: none;
-}
-
-@media (min-width: 1280px) {
-  .docs main.no-right-menu .docs-container {
-    margin-right: 6rem;
-  }
-}
diff --git a/packages/docs/src/routes/docs/layout.tsx b/packages/docs/src/routes/docs/layout.tsx
@@ -3,7 +3,6 @@ import { useContent, useLocation } from '@builder.io/qwik-city';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
-import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { createBreadcrumbs, SideBar } from '../../components/sidebar/sidebar';
 import { GlobalStore } from '../../context';
 import styles from './docs.css?inline';
@@ -13,8 +12,6 @@ import Contributors from '../../components/contributors';
 export { useMarkdownItems } from '../../components/sidebar/sidebar';
 
 export default component$(() => {
-  const loc = useLocation();
-  const noRightMenu = ['/docs/'].includes(loc.url.pathname);
   useStyles$(styles);
   const { menu } = useContent();
   const globalStore = useContext(GlobalStore);
@@ -50,22 +47,17 @@ export default component$(() => {
           </ol>
         ) : null}
       </nav>
-      <SideBar />
-      <main
-        class={{
-          'no-right-menu': noRightMenu,
-        }}
-      >
-        <div class="docs-container">
+      <div class="flex gap-12 xl:gap-20 items-stretch content-container">
+        <SideBar />
+        <main class="docs-container">
           <article>
             <Slot />
             <Contributors />
           </article>
           <ContentNav />
           <Footer />
-        </div>
-        <OnThisPage />
-      </main>
+        </main>
+      </div>
     </div>
   );
 });