Add an optional wrapper to tabs

src/_11ty/shortcodes.ts

@@ -35,9 +35,9 @@ function _setupTabs(eleventyConfig: UserConfig) {
   let currentTabWrapperId = 0;
   let currentTabPaneId = 0;
 
-  eleventyConfig.addPairedShortcode('tabs', function (content: string, saveKey: string) {
+  eleventyConfig.addPairedShortcode('tabs', function (content: string, saveKey: string, wrapped: boolean = false) {
     const tabWrapperId = currentTabWrapperId++;
-    let tabMarkup = `<div id="${tabWrapperId}" class="tabs-wrapper" ${saveKey ? `data-tab-save-key="${slugify(saveKey)}"` : ''}><ul class="nav-tabs" role="tablist">`;
+    let tabMarkup = `<div id="${tabWrapperId}" class="tabs-wrapper${wrapped ? " wrapped" : ""}" ${saveKey ? `data-tab-save-key="${slugify(saveKey)}"` : ''}><ul class="nav-tabs" role="tablist">`;
 
     // Only select child tab panes that don't already have a parent wrapper.
     const tabPanes = selectAll('.tab-pane[data-tab-wrapper-id="undefined"]', fromHtml(content));

src/_sass/base/_root.scss

@@ -42,6 +42,7 @@ body {
   --site-base-fgColor-alt: #6a6f71;
 
   --site-raised-bgColor: #e9ecef;
+  --site-raised-bgColor-translucent: #{color.change(#e9ecef, $alpha: 0.2)};
 
   --site-primary-color: #{$base_primary_color};
   --site-accent-color: #833ef2;
@@ -56,8 +57,8 @@ body {
   --site-onPrimary-color-lighter: #{color.mix(#fff, #B8EAFE, 50%)};
   --site-onPrimary-color-lightest: #{color.mix(#fff, #B8EAFE, 75%)};
 
-  --site-inset-bgColor: #F8F9FA;
-  --site-inset-bgColor-translucent: rgba(248, 249, 250, 0.8);
+  --site-inset-bgColor: #F6F7F8;
+  --site-inset-bgColor-translucent: rgba(237, 240, 242, 0.8);
   --site-inset-fgColor: var(--site-base-fgColor);
   --site-inset-borderColor: #DADCE0;
 
@@ -109,6 +110,7 @@ body {
     --site-base-fgColor-alt: #a8acad;
 
     --site-raised-bgColor: #1c1e27;
+    --site-raised-bgColor-translucent: #{color.change(#1c1e27, $alpha: 0.4)};
 
     --site-primary-color: #{$base_primary_color};
     --site-accent-color: #b07fff;

src/_sass/components/_content.scss

@@ -15,7 +15,11 @@
     min-width: 8rem;
     max-width: 960px;
     min-height: calc(100vh - var(--site-header-height) - var(--site-subheader-height));
-    padding: 2rem;
+    padding: 1.5rem;
+
+    @media (min-width: 576px) {
+      padding: 2rem;
+    }
 
     img {
       object-fit: contain;

src/_sass/components/_sidebar.scss

@@ -32,6 +32,7 @@
     border-right: 0.1rem solid var(--site-outline-variant);
     padding: 0.75rem 0.75rem 2.25rem;
     position: sticky;
+    height: calc(100vh - var(--site-header-height));
     top: var(--site-header-height);
     overscroll-behavior: auto;
     width: 16rem;

src/_sass/components/_tabs.scss

@@ -8,15 +8,18 @@
   }
 }
 
+$wrapper-padding: 0.375rem;
+$wrapper-radius: 0.125rem;
+
 ul.nav-tabs {
   list-style: none;
 
   display: flex;
   flex-direction: row;
   align-items: center;
 
-  padding: 0.375rem;
-  border-radius: 0.125rem;
+  padding: $wrapper-padding;
+  border-radius: $wrapper-radius;
   background-color: var(--site-raised-bgColor);
   gap: 0.5rem;
   overflow-x: scroll;
@@ -57,3 +60,27 @@ ul.nav-tabs {
     }
   }
 }
+
+.tabs-wrapper.wrapped {
+  .nav-tabs {
+    margin-bottom: 0;
+  }
+
+  .tab-content {
+    padding: 1rem 1rem 0;
+    background-color: var(--site-raised-bgColor-translucent);
+
+    border: $wrapper-padding solid var(--site-raised-bgColor);
+    border-top: none;
+    border-bottom-left-radius: $wrapper-radius;
+    border-bottom-right-radius: $wrapper-radius;
+
+    ul {
+      padding-left: 1rem;
+    }
+
+    .tab-pane > :first-child {
+      margin-block-start: 0;
+    }
+  }
+}

src/content/ui/layout/index.md

@@ -159,7 +159,7 @@ displays the widget.
 <a id="material-apps" aria-hidden="true"></a>
 <a id="cupertino-apps" aria-hidden="true"></a>
 
-{% tabs "app-type-tabs" %}
+{% tabs "app-type-tabs", true %}
 
 {% tab "Standard apps" %}
 
@@ -772,41 +772,58 @@ only Material apps can use the Material Components library.
 <a id="standard-widgets" aria-hidden="true"></a>
 <a id="materials-widgets" aria-hidden="true"></a>
 
-{% tabs "os-archive-tabs" %}
+{% tabs "widget-types-tabs", true %}
 
 {% tab "Standard widgets" %}
 
-* [`Container`](#container): Adds padding, margins, borders,
+[`Container`](#container)
+: Adds padding, margins, borders,
   background color, or other decorations to a widget.
-* [`GridView`](#gridview): Lays widgets out as a scrollable grid.
-* [`ListView`](#listview): Lays widgets out as a scrollable list.
-* [`Stack`](#stack): Overlaps a widget on top of another.
+
+[`GridView`](#gridview)
+: Lays widgets out as a scrollable grid.
+
+[`ListView`](#listview)
+: Lays widgets out as a scrollable list.
+
+[`Stack`](#stack)
+: Overlaps a widget on top of another.
 
 {% endtab %}
 
 {% tab "Material widgets" %}
 
-* [`Scaffold`][]: Provides a structured layout framework
+[`Scaffold`][]
+: Provides a structured layout framework
   with slots for common Material Design app elements.
-* [`AppBar`][]: Creates a horizontal bar that's typically
+
+[`AppBar`][]
+: Creates a horizontal bar that's typically
   displayed at the top of a screen.
-* [`Card`](#card): Organizes related info into a box with
+
+[`Card`](#card)
+: Organizes related info into a box with
   rounded corners and a drop shadow.
-* [`ListTile`](#listtile): Organizes up to 3 lines of text,
+
+[`ListTile`](#listtile)
+: Organizes up to 3 lines of text,
   and optional leading and trailing icons, into a row.
 
 {% endtab %}
 
 {% tab "Cupertino widgets" %}
 
-* [`CupertinoPageScaffold`][]: Provides the basic layout
-  structure for an iOS-style page.   
-* [`CupertinoNavigationBar`][]: Creates an iOS-style
-  navigation bar at the top of the screen.   
-* [`CupertinoSegmentedControl`][]: Creates a segmented
-  control for selecting.   
-* [`CupertinoTabBar`][] and [`CupertinoTabScaffold`][]:
-  Creates the characteristic iOS bottom tab bar.
+[`CupertinoPageScaffold`][]
+: Provides the basic layout structure for an iOS-style page.
+
+[`CupertinoNavigationBar`][]
+: Creates an iOS-style  navigation bar at the top of the screen.
+
+[`CupertinoSegmentedControl`][]
+: Creates a segmented control for selecting.
+
+[`CupertinoTabBar`][] and [`CupertinoTabScaffold`][]
+: Creates the characteristic iOS bottom tab bar.
 
 {% endtab %}