Move color issues to main section

src/lib/components/ratio/ColorIssues.svelte

@@ -1,25 +1,13 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-
-  interface Props {
-    pass: boolean;
-  }
-
-  let { pass }: Props = $props();
-
-  let startOpen = $state(false);
-  onMount(() => {
-    startOpen = window.matchMedia('(min-width: 80em)').matches;
-  });
 </script>
 
-<details class="known-issues" open={startOpen} data-pass={pass}>
-  <summary>Known Color Issues</summary>
-  <dl class="issues-list">
-    <dt>Gamut Mapping Implementation</dt>
-    <dd>
+<hr />
+<div class="known-issues">
+  <h2 class="section-heading">Known Color Issues</h2>
+  <ul class="issues-list">
+    <li>
+      <h3 class="list-item-heading">Gamut Mapping Implementation</h3>
       <p>
         Browsers implemented gamut mapping using clipping, which is fast but
         provides inferior results compared to the algorithm defined in the <ExternalLink
@@ -28,9 +16,9 @@
         >. Until browsers are updated, colors that are out of gamut for your
         screen may be displayed very differently than expected.
       </p>
-    </dd>
-    <dt>Checking for Out of Gamut Colors</dt>
-    <dd>
+    </li>
+    <li>
+      <h3 class="list-item-heading">Checking for Out of Gamut Colors</h3>
       <p>
         The new color features in CSS allow for a much wider range of colors,
         many of which cannot be shown on many (or any) screens. When selecting
@@ -53,42 +41,25 @@
         When a color is out of gamut for the user's screen, the browser will
         adjust the color to be in gamut.
       </p>
-    </dd>
-  </dl>
-</details>
+    </li>
+  </ul>
+</div>
 
 <style lang="scss">
-  @use 'config';
-  .known-issues {
-    grid-area: knownissues;
-    padding: var(--gutter);
-
-    @include config.above('lg-page-break') {
-      margin-inline: calc(var(--gutter) * -1);
-    }
+  hr {
+    border: unset;
+    border-block-start: var(--border-width) solid var(--border-light);
+    margin-block-end: var(--spacer);
+    margin-inline: unset;
   }
 
-  summary {
-    align-items: center;
-    display: grid;
-    gap: var(--shim-plus);
-    grid-template-columns: max-content var(--triangle-height);
+  .known-issues {
+    margin-block-end: var(--spacer);
   }
 
   .issues-list {
-    display: grid;
-    gap: var(--half-shim);
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr;
     margin-block-start: var(--gutter);
-  }
-
-  dt {
-    font-weight: bold;
-  }
-
-  dd {
-    --description-margin-inline: 0;
+    max-inline-size: 85ch;
   }
 
   p {

src/lib/components/ratio/index.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { contrast } from 'colorjs.io/fn';
 
-  import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import { RATIOS } from '$lib/constants';
@@ -66,7 +65,6 @@
       <dd>Bold Weight</dd>
     </dl>
   </div>
-  <ColorIssues {pass} />
 </aside>
 
 <style lang="scss">

src/routes/+page.svelte

@@ -10,6 +10,7 @@
   import Header from '$lib/components/Header.svelte';
   import Ratio from '$lib/components/ratio/index.svelte';
   import { bg, fg, format } from '$lib/stores';
+  import ColorIssues from '$src/lib/components/ratio/ColorIssues.svelte';
   import { hashToStoreValues, storeValuesToHash } from '$src/lib/utils';
 
   let bg_fallback = $derived(display($bg));
@@ -49,6 +50,7 @@
   <Ratio />
   <main data-layout="main">
     <Colors />
+    <ColorIssues />
   </main>
   <Footer />
 </div>

src/sass/initial/_layout.scss

@@ -55,10 +55,14 @@ body {
   --layout-pad-block: 0;
   --layout-pad-inline: 0; // allows warning to stretch to the edge
 
+  display: grid;
   grid-area: main;
+  grid-template: '... content ...' auto / var(--double-gutter) 1fr var(
+      --double-gutter
+    );
 
   > * {
-    padding-inline: var(--double-gutter);
+    grid-column: content;
   }
 }
 

src/sass/patterns/_index.scss

@@ -7,5 +7,4 @@
 @forward 'buttons';
 @forward 'icons';
 @forward 'lists';
-@forward 'disclosure';
 @forward 'themes';

src/sass/patterns/_lists.scss

@@ -27,3 +27,8 @@ dl {
 dd {
   margin-inline-start: var(--description-margin-inline, var(--gutter));
 }
+
+.list-item-heading {
+  font-weight: bold;
+  font-size: var(--small);
+}