DOCS-3760: Move to tablesteps for complex content

Author: npentrel

assets/scss/_styles_project.scss

@@ -553,8 +553,9 @@ details > div.expand-content > *:last-child {
 }
 
 .expand {
-  padding-bottom: 0.75rem;
   clear: both;
+  margin-bottom: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .expand i {
@@ -1193,6 +1194,7 @@ td > ul, td > ol {
   padding: .7rem 0;
   background-color: white;
   border-bottom: 1px solid rgb(215, 215, 217);
+  max-width: 1000px;
 }
 
 .horizontalheaders * .tab-content, .horizontalheaders > .tab-content {
@@ -3275,6 +3277,35 @@ li.active-path.tutorial-heading > a {
   display: table-row;
 }
 
+.td-content > ol > li > p, .td-content > .table * ol > li > p,
+.td-content * .table * ol > li > p,
+.td-content > ol > li > .expand, .td-content > .table * ol > li > .expand,
+.td-content > ol * li > .expand, .td-content * .table * ol > li > .expand,
+.td-content > ol > li > div, .td-content > .table * ol > li > div,
+.td-content * ol > li > div, .td-content * .table * ol > li > div,
+.td-content > ol > li > picture, .td-content > .table * ol > li > picture,
+.td-content * ol > li > picture, .td-content * .table * ol > li > picture,
+.td-content > .table * ol > li > ul,
+.td-content * ol > li > ul, .td-content * .table * ol > li > ul,
+.td-content > ol > li > img, .td-content > .table * ol > li > img,
+.td-content * ol > li > img, .td-content * .table * ol > li > img {
+    margin-left: 2.5rem;
+}
+
+.td-content > ol > li > ul {
+  margin-left: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.td-content * ul {
+  margin-left: 1rem;
+  padding-left: 0rem;
+}
+
+.td-content * ol * ul > li, .td-content > ol * ul > li {
+  margin-left: 1.5rem;
+}
+
 div.tablestep {
   display: flex;
   flex-direction: row;
@@ -3334,6 +3365,11 @@ div.tablestep > table td, div.tablestep table td {
   margin-bottom: 0rem;
 }
 
+.td-content > ul li, .td-content > ol li {
+  list-style-position: outside;
+  margin-left: 1.0rem;
+}
+
 .td-content > ul {
   padding-left: 1rem;
 }

docs/data-ai/capture-data/conditional-sync.md

@@ -236,7 +236,7 @@ On your machine's **CONFIGURE** tab, switch to **JSON** mode and add a `selectiv
 
 {{% expand "Click to view a full configuration example" %}}
 
-```json {class="line-numbers linkable-line-numbers" data-line="12-22,25-37,40-45"}
+```json {class="line-numbers linkable-line-numbers" data-line="12-21,25-37,40-45"}
 {
   "components": [
     {

docs/manage/fleet/provision/setup.md

@@ -479,7 +479,7 @@ For a guide you can give to end users for setting up their machine, see [Setup m
 {{< tabs >}}
 {{% tab name="Mobile app" min-height="703px" %}}
 
-{{<video webm_src="/platform/provisioning-demo.webm" mp4_src="/platform/provisioning-demo.mp4" alt="Using the Viam mobile app to provision a new machine with viam-agent." poster="/platform/provisioning-demo.jpg" class="alignright" max-width="400px" style="margin-left: 2rem">}}
+{{<video webm_src="/platform/provisioning-demo.webm" mp4_src="/platform/provisioning-demo.mp4" alt="Using the Viam mobile app to provision a new machine with viam-agent." poster="/platform/provisioning-demo.jpg" class="" max-width="400px" style="margin-left: 2rem">}}
 
 1. Open the app and follow any instructions there until the app directs you to turn on the machine.
 

docs/operate/get-started/other-hardware/_index.md

@@ -202,6 +202,10 @@ You can find details about the return types at [python.viam.dev](https://python.
 
 {{< expand "Example code for a sensor module" >}}
 
+The following code implements the sensor API by getting weather data from Open-Meteo and returning it using the `get_readings` function.
+
+The `validate` and `reconfigure` functions have been edited so that the user can configure coordinates from which to get weather data, but if the user does not configure these optional attributes, defaults are assigned.
+
 ```python {class="line-numbers linkable-line-numbers"}
 import asyncio
 from typing import Any, ClassVar, Final, Mapping, Optional, Sequence
@@ -412,8 +416,6 @@ For each method you want to implement, replace the body of the method with your
 Make sure you return the correct type in accordance with the function's return signature.
 You can find details about the return types at [go.viam.com/rdk/components](https://pkg.go.dev/go.viam.com/rdk/components).
 
-<ol><li style="counter-reset: item 5"><strong>Edit the methods you want to implement</strong>:
-
 {{< expand "Example code for a camera module" >}}
 This example from [Hello World module](/operate/get-started/other-hardware/hello-world-module/) implements only one method of the camera API by returning a static image.
 It demonstrates a required configuration attribute (`image_path`) and an optional configuration attribute (`example_value`).
@@ -554,7 +556,7 @@ You can find more examples by looking at the source code GitHub repos linked fro
 
 </li></ol>
 
-<ol><li style="counter-reset: item 6"><strong>Add logging</strong> messages as desired.
+<ol><li style="counter-reset: item 5"><strong>Add logging</strong> messages as desired.
 
 You can add log messages with various levels of severity:
 
@@ -790,7 +792,7 @@ Configure any required attributes using proper JSON syntax.
 Click the **TEST** bar at the bottom of your modular component configuration, and check whether it works as expected.
 For example, if you created a sensor component, check whether readings are displayed.
 
-{{<imgproc src="/how-tos/sensor-test.png" resize="x1100" declaredimensions=true alt="The test section of an example modular sensor, with readings displayed." style="width:600px" class="shadow" >}}
+{{<imgproc src="/how-tos/sensor-test.png" resize="x1100" declaredimensions=true alt="The test section of an example modular sensor, with readings displayed." style="max-width:600px" class="shadow" >}}
 
 {{% /tablestep %}}
 {{% tablestep number=5 %}}