Add responsive tables as separate shortcode

The Apertis theme uses a shortcode called `DIVclass` to allow
semi-arbitrary CSS to be applied. Simplify this for document writers by
spliting the responsive table functionality (demoed on the bundle spec) as
a separate shortcode.

Signed-off-by: Martyn Welch <martyn.welch@collabora.com>

README.md

@@ -59,6 +59,21 @@ process will fail when the target page of the reference can not be found,
 causing the CI to fail and thus aids with reducing the risk broken links being
 provided on the website.
 
+## Adding responsive tables
+
+The Apertis theme provides a shortcode to wrapper tables to be more responsive when resizing, splitting the table down into blocks on small screen sizes. This can be enabled by wrapping the table in the `responsive-table` shortcode:
+
+```
+{{% responsive-table %}}
+
+| Item  | Status       |
+|-------|--------------|
+| `foo` | Badgers      |
+| `bar` | More badgers |
+
+{{% /responsive-table %}}
+```
+
 ## Formatting
 
 Please follow these guidelines to enable us to maintain some consistency across the documentation:

content/architecture/bundle-spec.md

@@ -125,6 +125,8 @@ are interpreted according to the [AppStream upstream XML] specification.
 This table provides a summary of the relevant tags. All other tags are either
 not recommended for any type of bundle, or not allowed.
 
+{{% responsive-table %}}
+
 | Tag                           | Status                        |
 |-------------------------------|-------------------------------|
 | `id`                          | required, must be bundle ID   |
@@ -142,6 +144,8 @@ not recommended for any type of bundle, or not allowed.
 | `provides` → *any other*      | not allowed                   |
 | `custom` → `value`            | optional                      |
 
+{{% /responsive-table %}}
+
 If the app-bundle has  [Entry points]( {{< ref "#entry-points" >}} ), the file MUST be named
 either `${bundle_id}.appdata.xml` or `${bundle_id}.metainfo.xml`, replacing
 `${bundle_id}` with the  [Bundle ID]( {{< ref "#bundle-id" >}} ). In this case the `component` tag MUST
@@ -334,6 +338,8 @@ fields. All other fields are either not recommended for any type of entry
 point, or not allowed. A table cell containing a literal value indicates that
 the field is required and must have exactly that value.
 
+{{% responsive-table %}}
+
 | Field                          |  [Main entry point]( {{< ref "#main-entry-point" >}} ) | Other graphical programs | Agents          |
 |--------------------------------|-----------------------|--------------------------|--------------------|
 | `Categories`                   | required              | required                 | not recommended    |
@@ -355,6 +361,8 @@ the field is required and must have exactly that value.
 | `X-Apertis-ServiceExec`        | recommended           | optional                 | not allowed        |
 | `X-Apertis-ParentEntry`        | not recommended       | optional                 | not allowed        |
 
+{{% /responsive-table %}}
+
 ### General fields for all entry points
 
 `Type` MUST be set to `Application`.

themes/apertis/layouts/shortcodes/responsive-table.html

+<div class="data">
+{{ .Inner }}
+</div>