Allow page to scale with window width

iRobotEducation · Jan 10, 2024 · d4be417 · d4be417
1 parent feba03f
commit d4be417
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/docs/hw/face.md b/docs/hw/face.md
@@ -30,42 +30,42 @@ The LEDs expose internal state information about the robot, but can also be over
 ### While Charging
 |  Spinning White  |  Partial White  |  Solid White  |  Pulsing Red  |
 | ----- | ----- | ----- | ------ |
-|  ![Full spinning white](data/lightring/boot.gif){: style="height:100px;width:100px"}  |  ![Partial spinning white](data/lightring/charged_spinning.gif){: style="height:100px;width:100px"}  |  ![Solid white](data/lightring/white_solid.jpg){: style="height:100px;width:100px"}  |  ![Pulsing Red](data/lightring/red_pulsing.gif){: style="height:100px;width:100px"}  |
+|  ![Full spinning white](data/lightring/boot.gif){: style="height:100%;width:100%"}  |  ![Partial spinning white](data/lightring/charged_spinning.gif){: style="height:100%;width:100%"}  |  ![Solid white](data/lightring/white_solid.jpg){: style="height:100%;width:100%"}  |  ![Pulsing Red](data/lightring/red_pulsing.gif){: style="height:100%;width:100%"}  |
 |  Robot is booting up.<br>Wait for "happy sound" to play.  |  Robot is charging<br>(Example shows 40%)  |  Robot is 100% charged  |  Battery < 10%  |
 
 ### While Idle
 |  Spinning White  |  Solid White  |  Pulsing Red  |  Solid Red  |
 | ----- | ----- | ----- | ------ |
-|  ![Full spinning white](data/lightring/boot.gif){: style="height:100px;width:100px"}  |  ![Solid white](data/lightring/white_solid.jpg){: style="height:100px;width:100px"}  |  ![Pulsing Red](data/lightring/red_pulsing.gif){: style="height:100px;width:100px"}  |  ![Solid Red](data/lightring/red_solid.jpg){: style="height:100px;width:100px"}  |
+|  ![Full spinning white](data/lightring/boot.gif){: style="height:100%;width:100%"}  |  ![Solid white](data/lightring/white_solid.jpg){: style="height:100%;width:100%"}  |  ![Pulsing Red](data/lightring/red_pulsing.gif){: style="height:100%;width:100%"}  |  ![Solid Red](data/lightring/red_solid.jpg){: style="height:100%;width:100%"}  |
 |  Robot is booting up.<br>Wait for "happy sound" to play.  |  Robot is powered on  |  Battery <10%. Place on charger.  |  Robot error. Cycle power.  |
 
 ### While Connecting to Robot Access Point
-|  Spinning Cyan  |  Solid Cyan  |
-| ----- | ----- |
-|  ![Spinning cyan](data/lightring/cyan_spinning.gif){: style="height:100px;width:100px"}  |  ![Solid cyan](data/lightring/cyan_solid.jpg){: style="height:100px;width:100px"}  |
-|  Access Point is active. <br> Select robot from device’s <br> Wi-Fi menu.  |  Device is connected to <br> robot’s Access Point page.  |
+|  Spinning Cyan  |  Solid Cyan  | | |
+| ----- | ----- | ----- | ----- |
+|  ![Spinning cyan](data/lightring/cyan_spinning.gif){: style="height:100%;width:100%"}  |  ![Solid cyan](data/lightring/cyan_solid.jpg){: style="height:100%;width:100%"}  | | |
+|  Access Point is active. <br> Select robot from device’s <br> Wi-Fi menu.  |  Device is connected to <br> robot’s Access Point page.  | | |
 
 ### While Connecting to Wi-Fi
 |  Solid Cyan  |  Spinning Cyan  |  Quick Green Flash  |  Solid White  |
 | ----- | ----- | ----- | ----- |
-|  ![Solid cyan](data/lightring/cyan_solid.jpg){: style="height:100px;width:100px"}  |  ![Spinning cyan](data/lightring/cyan_spinning.gif){: style="height:100px;width:100px"}  |  ![Green Flash](data/lightring/green_solid.jpg){: style="height:100px;width:100px"}  |  ![Solid White](data/lightring/white_solid.jpg){: style="height:100px;width:100px"}  |
+|  ![Solid cyan](data/lightring/cyan_solid.jpg){: style="height:100%;width:100%"}  |  ![Spinning cyan](data/lightring/cyan_spinning.gif){: style="height:100%;width:100%"}  |  ![Green Flash](data/lightring/green_solid.jpg){: style="height:100%;width:100%"}  |  ![Solid White](data/lightring/white_solid.jpg){: style="height:100%;width:100%"}  |
 |  Device is connected to <br> robot’s Access Point page.  |  Robot attempting to <br> connect to Wi-Fi  |  Success connecting to Wi-Fi  |  Robot successfully <br> disconnected from <br> Access Point page  |
 
 |  Yellow with Red  |  Yellow with Green  |  Yellow with Blue  |  Yellow with White  |  Solid Yellow  |
 | ----- | ----- | ----- | ----- | ----- |
-|  ![Yellow with red](data/lightring/yellow-red_solid.jpg){: style="height:100px;width:100px"}  |  ![Yellow with green](data/lightring/yellow-green_solid.jpg){: style="height:100px;width:100px"}  |  ![Yellow with blue](data/lightring/yellow-blue_solid.jpg){: style="height:100px;width:100px"}  |  ![Yellow with white](data/lightring/yellow-white_solid.jpg){: style="height:100px;width:100px"}  |  ![Solid yellow](data/lightring/yellow_solid.jpg){: style="height:100px;width:100px"}  |
+|  ![Yellow with red](data/lightring/yellow-red_solid.jpg){: style="height:100%;width:100%"}  |  ![Yellow with green](data/lightring/yellow-green_solid.jpg){: style="height:100%;width:100%"}  |  ![Yellow with blue](data/lightring/yellow-blue_solid.jpg){: style="height:100%;width:100%"}  |  ![Yellow with white](data/lightring/yellow-white_solid.jpg){: style="height:100%;width:100%"}  |  ![Solid yellow](data/lightring/yellow_solid.jpg){: style="height:100%;width:100%"}  |
 |  Failed Wi-Fi password  |  Robot cannot connect to <br> network access point | DHCP failed to obtain a valid <br> IP address before time-out. <br> Try again. |  Access point located but <br> failed association. Try again.  |  Failed to connect to Wi-Fi <br> for unknown reason  |
 
 ### While Updating Firmware
 |  Solid Cyan  |  Spinning Blue  |  Spinning White  |  Solid White  |
 | ----- | ----- | ----- | ----- |
-|  ![Solid cyan](data/lightring/cyan_solid.jpg){: style="height:100px;width:100px"}  |  ![Spinning blue](data/lightring/blue_spinning.gif){: style="height:100px;width:100px"}  |  ![Full spinning white](data/lightring/boot.gif){: style="height:100px;width:100px"}  |  ![Solid White](data/lightring/white_solid.jpg){: style="height:100px;width:100px"}  |
+|  ![Solid cyan](data/lightring/cyan_solid.jpg){: style="height:100%;width:100%"}  |  ![Spinning blue](data/lightring/blue_spinning.gif){: style="height:100%;width:100%"}  |  ![Full spinning white](data/lightring/boot.gif){: style="height:100%;width:100%"}  |  ![Solid White](data/lightring/white_solid.jpg){: style="height:100%;width:100%"}  |
 |  Device is connected to <br> robot’s Access Point page.  |  Robot downloading <br> update file  |  Robot updating firmware <br> Do not remove from dock  |  Update successful  |
 
 ### While Operating
 |  Spinning White  |  Solid White  |  Pulsing Red  |  Spinning Red  |  Half Solid Orange  | Half Solid Yellow  |
 | ----- | ----- | ----- | ----- | ----- | ----- |
-|  ![Full spinning white](data/lightring/boot.gif){: style="height:100px;width:100px"}  |  ![Solid white](data/lightring/white_solid.jpg){: style="height:100px;width:100px"}  |  ![Pulsing Red](data/lightring/red_pulsing.gif){: style="height:100px;width:100px"}  |  ![Spinning Red](data/lightring/red_spinning.gif){: style="height:100px;width:100px"}  |  ![Rear Half Orange](data/lightring/orange_half_solid.jpg){: style="height:100px;width:100px"}  |  ![Rear Half Yellow](data/lightring/yellow_half_solid.jpg){: style="height:100px;width:100px"}  |
+|  ![Full spinning white](data/lightring/boot.gif){: style="height:100%;width:100%"}  |  ![Solid white](data/lightring/white_solid.jpg){: style="height:100%;width:100%"}  |  ![Pulsing Red](data/lightring/red_pulsing.gif){: style="height:100%;width:100%"}  |  ![Spinning Red](data/lightring/red_spinning.gif){: style="height:100%;width:100%"}  |  ![Rear Half Orange](data/lightring/orange_half_solid.jpg){: style="height:100%;width:100%"}  |  ![Rear Half Yellow](data/lightring/yellow_half_solid.jpg){: style="height:100%;width:100%"}  |
 |  Robot is booting up.<br>Wait for "happy sound" to play.  |  Default light color  |  Battery < 10%  |  Battery < 3%  |  Back-up safety activated  |  Wheels disabled  |
 
 [^1]: The Bluetooth® word mark and logos are registered trademarks owned by Bluetooth SIG, Inc. and any use of such marks by iRobot is under license.

diff --git a/docs/hw/overview.md b/docs/hw/overview.md
@@ -3,20 +3,20 @@ The Create® 3 is based on the Roomba®, a robot vacuum cleaner.
 Its sensors, actuators, and compact design are capable of navigating and mapping a the whole floor of a home or office space.
 The robot also ships with an iRobot® Home Base™ Charging Station.
 
-![Create® 3 from its above-front-right, next to its dock.](data/front_iso.jpg "Robot Front")
+![Create® 3 from its above-front-right, next to its dock.](data/front_iso.jpg "Robot Front")<br>
 The front of the robot features a multizone bumper with seven pairs of IR proximity sensors, which can be used to detect obstacles.
 The top of the robot contains three buttons which can all be overloaded by a ROS 2 application (only the • and •• buttons can be overloaded in the iRobot Coding app.)
 The power button features a ring of six RGB LEDs for indication.
 
-![Create® 3 from its above-rear-left, with the top cover and cargo bay removed.](data/rear_iso.jpg "Robot Rear")
+![Create® 3 from its above-rear-left, with the top cover and cargo bay removed.](data/rear_iso.jpg "Robot Rear")<br>
 The faceplate and cargo bay of the robot feature a regular hole pattern for attaching payloads and can be removed without tools for quick prototyping.
 There are two cable passthroughs: one on the top edge of the cargo bay which is good for quick prototyping and one that penetrates the top cover and faceplate which is useful for keeping wires within the radius of the robot.
 More information on these features can be found on the [Mechanical](../mechanical/) page.
 
 Also visible with the faceplate removed is the adapter board, which is used to interface to external computers either through Bluetooth®[^1] or via USB-C®[^2].
 More information on this board is available on the [Electrical](../electrical/) page.
 
-![Create® 3 from a bottom view, with the cargo bay removed.](data/bottom.jpg "Robot Bottom")
+![Create® 3 from a bottom view, with the cargo bay removed.](data/bottom.jpg "Robot Bottom")<br>
 The bottom of the robot includes four cliff sensors to keep the robot on solid ground, a front caster (by default, the robot's center of gravity is forward of the center axis), charging contacts, two wheels with current sensors and encoders, and an optical odometry sensor.
 Not visible is the robot's IMU, which is used with the optical odometry sensor and wheel encoders to generate a fused odometry estimate.
 

diff --git a/docs/stylesheets/irobot-palette.css b/docs/stylesheets/irobot-palette.css
@@ -7,18 +7,18 @@
     --md-default-bg-color--light:        hsla(0, 0%, 100%, 0.7);
     --md-default-bg-color--lighter:      hsla(0, 0%, 100%, 0.3);
     --md-default-bg-color--lightest:     hsla(0, 0%, 100%, 0.12);
-  
+
     --md-primary-fg-color:               #6CB86A;
     --md-primary-fg-color--light:        #ECB7B7;
     --md-primary-fg-color--dark:         #90030C;
     --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
     --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);
-  
+
     --md-accent-fg-color:                #e95c67;
     --md-accent-fg-color--transparent:   #e95c67;
     --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
     --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);
-  
+
 
     --md-code-fg-color:                hsla(200, 18%, 26%, 1);
     --md-code-bg-color:                hsla(0, 0%, 96%, 1);
@@ -60,4 +60,8 @@
     --md-footer-fg-color--lighter:     hsla(0, 0%, 100%, 0.3);
     --md-footer-bg-color:              hsla(0, 0%, 0%, 0.87);
     --md-footer-bg-color--dark:        hsla(0, 0%, 0%, 0.32);
+  }
+
+  .md-grid {
+    max-width: 85%;
   }