adjust grid for color issues

oddbird · Dec 18, 2023 · ea54c12 · ea54c12
1 parent 13ae3bd
commit ea54c12
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
@@ -11,9 +11,9 @@
   });
 </script>
 
-<details open={startOpen} data-pass={pass}>
+<details class="known-issues" open={startOpen} data-pass={pass}>
   <summary><strong>Known Color Issues</strong></summary>
-  <dl>
+  <dl class="issues-list">
     <dt><strong>Gamut Mapping Implementation</strong></dt>
     <dd>
       <p>
@@ -29,10 +29,21 @@
 </details>
 
 <style lang="scss">
-  dl {
-    display: block;
+  .known-issues {
+    grid-area: knownissues;
+    padding: var(--shim) var(--double-gutter);
+  }
+  .issues-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+    gap: var(--gutter);
   }
   dd {
     --description-margin-inline: 0;
   }
+
+  p {
+    margin-block-end: var(--gutter);
+  }
 </style>
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
@@ -79,11 +79,15 @@
     gap: var(--result-layout-gap, var(--double-gutter));
     grid-template:
       'contrastinfo' min-content
-      'status' min-content / 1fr;
+      'status' min-content
+      'contrastdefined' min-content
+      'knownissues' min-content / 1fr;
 
     @include config.between('sm-page-break', 'lg-page-break') {
       --result-layout-gap: var(--gutter-plus);
-      grid-template: 'contrastinfo status' auto / 1fr 1fr;
+      grid-template:
+        'contrastinfo status' auto
+        '... knownissues' auto / 1fr 1fr;
     }
 
     @include config.above('lg-page-break') {

diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
@@ -26,7 +26,6 @@ details {
 summary {
   cursor: pointer;
   list-style-position: outside;
-  margin-block-end: var(--gutter);
 }
 
 dl {