Give rendered-data sections a background and some padding (#1195)

Gives definition sections for APIs, events, etc a background and a small indent, which I find very helpful to guide the eye.

assets/scss/_variables_project.scss

@@ -30,6 +30,9 @@ $note: $secondary;
 $note-background: $secondary-background;
 $warning-background: #FFE0E0;
 
+// colours for definition tables.
+// the border colour matches that used for "highlight" divs
+$table-border-color: rgba(black, .125);
 $table-row-alternate: $secondary-lightest-background;
 $table-row-default: $secondary-lighter-background;
 

assets/scss/custom.scss

@@ -264,13 +264,13 @@ footer {
 
 /* Styles for sections that are rendered from data, such as HTTP APIs and event schemas */
 .rendered-data {
-  margin: 1rem 0 3rem 0;
+  background-color: $secondary-lightest-background;
+  padding: 1rem;
+  margin: 1rem 0;
 
   details {
     summary {
       padding: .5rem 0;
-      list-style-position: outside;
-
       p {
         max-width: 80%;
       }
@@ -336,22 +336,30 @@ footer {
       padding: 1rem;
     }
 
-    th {
-      background-color: $white;
+    &.object-table, &.response-table {
+        border: 1px $table-border-color solid;
+
+        caption {
+            // the caption is outside the table's border box,
+            // so we have to give it its own border.
+            border: 1px $table-border-color solid;
+
+            // ... but avoid double border between caption and table
+            border-bottom: 0;
         }
 
-    caption, tr {
+        caption, tbody tr {
             background-color: $table-row-default;
         }
 
-    tr:nth-child(even) {
+        tbody tr:nth-child(even) {
             background-color: $table-row-alternate;
         }
+    }
 
     &.basic-info, &.basic-info th, &.basic-info td {
       table-layout: fixed;
       margin: 1rem 0 .5rem 0;
-      background-color: $white;
     }
 
     &.basic-info th {

changelogs/internal/newsfragments/1195.clarification

@@ -0,0 +1 @@
+Give rendered-data sections a background and some padding.

layouts/partials/openapi/render-object-table.html

@@ -21,7 +21,7 @@
 
 {{ if $properties }}
 
-<table{{ if .anchor }} id="{{ .anchor }}"{{ end }}>
+<table{{ if .anchor }} id="{{ .anchor }}"{{ end }} class="object-table">
  {{ with $title }}
  <caption>{{ . }}</caption>
  {{ end }}

layouts/partials/openapi/render-responses.html

@@ -20,7 +20,7 @@
 
 <h2>Responses</h2>
 
-<table class>
+<table class="response-table">
  <thead>
   <th class="col-status">Status</th>
   <th class="col-status-description">Description</th>