iTwin · mayank99 · Jun 8, 2023 · Jun 7, 2023 · Jun 7, 2023 · Jun 7, 2023
diff --git a/apps/website/src/components/LeftSidebarContent.astro b/apps/website/src/components/LeftSidebarContent.astro
@@ -84,13 +84,17 @@ sections.set(
     padding-top: var(--space-7);
     max-height: 100vh;
     min-width: 220px;
-  }
 
-  .nav-groups > li + li:not(.nav-link) {
-    margin-top: var(--space-5);
+    > li:last-of-type {
+      padding-block-end: var(--space-7);
+    }
 
-    @media (max-width: 50em) {
-      margin-top: var(--space-7);
+    > li + li:not(.nav-link) {
+      margin-top: var(--space-5);
+
+      @media (max-width: 50em) {
+        margin-top: var(--space-7);
+      }
     }
   }
 

diff --git a/apps/website/src/components/variables/ColorList.astro b/apps/website/src/components/variables/ColorList.astro
@@ -1,35 +1,31 @@
 ---
-import ColorList from './ColorList';
-import '@itwin/itwinui-variables';
+import Wrapper from './_wrapper.astro';
+import ColorListR from './ColorList';
 
 type Props = { colors: string[] | string[][] } & astroHTML.JSX.HTMLAttributes;
 
 const { colors, ...rest } = Astro.props;
 ---
 
-<article class:list={[{ 'color-list-wrapper': Array.isArray(colors[0]) }]} {...rest}>
+<Wrapper class='color-list-wrapper' {...rest}>
   {
     Array.isArray(colors[0]) ? (
       <>
         {colors.map((_colors) => (
-          <ColorList client:visible colors={_colors} />
+          <ColorListR client:visible colors={_colors} />
         ))}
       </>
     ) : (
-      <ColorList client:visible colors={colors as string[]} />
+      <ColorListR client:visible colors={colors as string[]} />
     )
   }
-</article>
+</Wrapper>
 
 <style>
-  article {
-    border-radius: var(--space-2);
-    border: 1px solid var(--color-line-2);
-    padding: var(--space-3);
+  .color-list-wrapper {
     display: grid;
     grid-auto-flow: column;
     gap: var(--space-5);
-    justify-content: center;
   }
 </style>
 

diff --git a/apps/website/src/components/variables/FontsDemo.astro b/apps/website/src/components/variables/FontsDemo.astro
@@ -6,7 +6,7 @@ const { sizes, weights } = Astro.props;
 const howMany = sizes ? 6 : 4;
 ---
 
-<Wrapper class:list={[{ sizes: sizes, weights: !sizes && weights }]}>
+<Wrapper class={[sizes && 'sizes', !sizes && weights && 'weights'].filter(Boolean).join(' ')}>
   {
     Array.from({ length: howMany }).map((_, i) => (
       <p>The quick brown fox jumped over the lazy dog</p>

diff --git a/apps/website/src/components/variables/_wrapper.astro b/apps/website/src/components/variables/_wrapper.astro
@@ -1,4 +1,10 @@
-<article data-iui-theme='dark' {...Astro.props}>
+---
+import '@itwin/itwinui-variables';
+
+const { class: className, ...props } = Astro.props;
+---
+
+<article {...props} data-iui-theme='dark' class:list={['iui-root', className]}>
   <slot />
 </article>
 

diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro
@@ -1,6 +1,7 @@
 ---
 // This file should contain all the global styles and markup shared between layouts.
 
+import '@itwin/itwinui-react/styles.css';
 import HeadSEO from '~/components/HeadSEO.astro';
 import MoveOnVisible from '~/components/utils/MoveOnVisible.astro';
 import '@fontsource/noto-sans';
@@ -235,7 +236,7 @@ const { content = {} } = Astro.props;
     </style>
   </head>
 
-  <body class='iui-root' data-iui-theme='dark'>
+  <body>
     <slot />
 
     <!-- Util classes/styles and scripts -->

diff --git a/apps/website/src/pages/docs/_layout.astro b/apps/website/src/pages/docs/_layout.astro
@@ -76,7 +76,6 @@ const currentPage = new URL(Astro.request.url).pathname;
     align-items: start;
     justify-content: center;
     padding: var(--space-7);
-    padding-block-end: calc(2 * var(--space-7));
     grid-template:
       'h1' auto
       'toc' auto
@@ -90,6 +89,13 @@ const currentPage = new URL(Astro.request.url).pathname;
         '. aftermain . toc' / 1fr var(--_content-width) 1fr auto;
       position: relative;
 
+      // using pseudo-element to work around firefox bug
+      &:global(::after) {
+        content: '';
+        grid-row: aftermain-end;
+        padding-block-end: var(--space-7);
+      }
+
       > :global(.toc-wrapper) {
         position: sticky;
         top: 0;

diff --git a/apps/website/src/pages/docs/variables.mdx b/apps/website/src/pages/docs/variables.mdx
@@ -12,20 +12,10 @@ import OpacityDemo from '~/components/variables/OpacityDemo.astro';
 import BorderRadiusDemo from '~/components/variables/BorderRadiusDemo.astro';
 import ShadowsDemo from '~/components/variables/ShadowsDemo.astro';
 
-## Installation
+iTwinUI offers an extensive set of handcrafted CSS variables. If you're using iTwinUI-react, these variables will be automatically included and imported into your application.
+If you want to use it standalone, you can manually `npm install @itwin/itwinui-variables`.
 
-If you're using iTwinUI-react, the variables will be automatically included and imported into your application.
-If you want to use it standalone, you can install and import it manually:
-
-```shell
-npm install @itwin/itwinui-variables
-```
-
-```js
-import '@itwin/itwinui-variables';
-```
-
-## Variables
+## TODO: fix heading levels (PR 1334)
 
 ### Background colors
 

diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import '@itwin/itwinui-react/styles.css';
 import Global from './_global.astro';
 import Header from '~/components/Header.astro';
 import ITwinUILogo from '~/components/iTwinUILogo';