Apply column span for full-width features (#681)

Author: ngnijland

docs/src/collections/feature/asc-drag-drop-video.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/asc-drag-drop-demo.mp4"
   alt: "Drag your recorded MP4 or GIF into any destination. Use it as an App Store Preview video or share a visual representation inside GitHub issues and pull requests. Directly share what you're working on in Slack or on Twitter."
   alignment: "full-width"
-  columnSpan: 8
+  columnSpan: 12
 sortOrder: 17
 ---
 

docs/src/collections/feature/compare-designs.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/onboarding-compare.mp4"
   alt: "Comparing designs on top of the Simulator after exporting them from apps like Figma."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 3
 ---
 

docs/src/collections/feature/location-simulation.md

@@ -6,7 +6,7 @@ asset:
   path: "../../assets/features/location-routes.png"
   alt: "Single locations or automobile and walking routes: Test them right in the Simulator."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 8
 ---
 

docs/src/collections/feature/magnify.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/magnifier-color-picker.mp4"
   alt: "Use the Color Picker and copy the value as SwiftUI Color, NSColor, or UIColor code."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 5.3
 ---
 

docs/src/collections/feature/network-monitoring.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/network-monitoring-demo.mp4"
   alt: "Clicking through network requests that are done while using the Stock Analyzer app."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
   caption: "Network Monitoring is made possible by [Pulse](https://github.com/kean/Pulse), an open-source project created by [Alex Grebenyuk](https://github.com/kean)."
 sortOrder: 1
 ---

docs/src/collections/feature/recording-example.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/recording-example.mp4"
   alt: "RocketSim's touch-attention mode ensures your demo is easy to follow since a touch indicator will be constantly visible."
   alignment: "full-width"
-  columnSpan: 8
+  columnSpan: 6
 sortOrder: 16
 ---
 

docs/src/collections/feature/user-defaults-editor.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/user-defaults-editor.mp4"
   alt: "Test how your app responds to User Defaults changes. Quickly switch states like User Defaults-driven experiments."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 6
 ---
 

docs/src/components/Feature.astro

@@ -164,7 +164,7 @@ if (asset.alignment === "full-width") {
     style={{
       "--image-column":
         asset.alignment === "full-width"
-          ? "1 / -1"
+          ? `${(12 - asset.columnSpan) / 2 + 1} / span ${asset.columnSpan}`
           : `${asset.alignment === "left" ? 1 : `span ${asset.columnSpan}`} / ${asset.alignment === "left" ? `span ${asset.columnSpan}` : -1}`,
     }}
     data-aos={asset.alignment === "full-width" ? "fade-up" : undefined}

docs/src/components/OnlineTeamManager.astro

@@ -20,7 +20,7 @@ import Feature from "./Feature.astro";
         path: "/features/team-insights-dashboard.mp4",
         alt: "RocketSim for Teams dashboard. Showing the build insights page. It is showing build times, build count and breakdown charts for the an Xcode project.",
         alignment: "full-width",
-        columnSpan: 8,
+        columnSpan: 12,
       },
       sortOrder: 1,
     }}

docs/src/content.config.ts

@@ -2,7 +2,7 @@ import { glob } from "astro/loaders";
 import { z, defineCollection } from "astro:content";
 
 const alignment = z.enum(["left", "right", "full-width"]);
-const columnSpan = z.union([z.literal(6), z.literal(8)]);
+const columnSpan = z.union([z.literal(6), z.literal(8), z.literal(12)]);
 
 const feature = defineCollection({
   loader: glob({ pattern: "**/[^_]*.md", base: "./src/collections/feature" }),