review edits

oddbird · Dec 19, 2023 · 72e099c · 72e099c
1 parent 88bac50
commit 72e099c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 3 deletions.
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
@@ -31,13 +31,40 @@
 <style lang="scss">
   .known-issues {
     grid-area: knownissues;
-    padding: var(--shim) var(--double-gutter);
+    margin-inline: calc(var(--gutter) * -1);
+    padding: var(--gutter);
+  }
+
+  summary {
+    align-items: center;
+    display: grid;
+    gap: var(--shim-plus);
+    grid-template-columns: max-content var(--triangle-height);
+    &::marker {
+      content: none;
+    }
+    &::before {
+      border-color: transparent transparent transparent currentColor;
+      border-style: solid;
+      border-width: var(--triangle-width) 0 var(--triangle-width)
+        var(--triangle-height);
+      content: '';
+      grid-column: 2;
+      grid-row: 1;
+      margin-top: var(--half-shim);
+      transform: rotate;
+    }
+  }
+
+  [open] summary::before {
+    transform: rotate(90deg);
   }
   .issues-list {
     display: grid;
-    gap: var(--gutter);
+    gap: var(--half-shim);
     grid-auto-rows: auto;
     grid-template-columns: 1fr;
+    margin-block-start: var(--gutter);
   }
 
   dt {

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
@@ -76,7 +76,7 @@
     background-color: var(--bgcolor);
     color: var(--fgcolor);
     display: grid;
-    gap: var(--result-layout-gap, var(--double-gutter));
+    gap: var(--result-layout-gap, var(--shim));
     grid-template:
       'contrastinfo' min-content
       'status' min-content

diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
@@ -15,3 +15,5 @@ $icon-medium: 1.5em;
 $ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
+$triangle-width: var(--shim);
+$triangle-height: var(--shim-plus);
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
@@ -33,6 +33,10 @@ dl {
   display: grid;
   grid-template-columns: auto 1fr;
   margin-block: var(--half-shim) var(--double-gutter);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 dd {

diff --git a/src/sass/patterns/_themes.scss b/src/sass/patterns/_themes.scss
@@ -5,6 +5,8 @@
 
 // If the ratio is too low, make sure important info has high enough contrast
 [data-pass='false'] {
+  --link: var(--status-result-fg);
+  --link-focus: var(--status-result-fg);
   --status-result-bg: var(--text);
   --status-result-fg: var(--bg);
 }