diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index de1c1c9..9b16e02 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -38,7 +38,6 @@
Current Ratio
- The contrast ratio is
{displayRatio}:1
{#if alphaWarning}
@@ -116,6 +115,7 @@
@include config.between('sm-page-break', 'lg-page-break') {
--result-layout-gap: var(--gutter-plus);
+
grid-template:
'contrastinfo status' auto
'... knownissues' auto / 1fr 1fr;
@@ -127,7 +127,9 @@
}
.contrast-info {
+ --ratio-width: 8.5rem;
--contrast-info-columns: minmax(var(--ratio-width), 25%) 1fr;
+
column-gap: var(--shim);
display: grid;
grid-area: contrastinfo;
@@ -205,7 +207,6 @@
align-items: center;
display: inline-flex;
grid-area: number;
- justify-content: flex-start;
line-height: 0.7; // weird number alignment
}
@@ -214,6 +215,7 @@
--warning-padding-block: var(--shim);
--warning-padding-inline: var(--shim);
--warning-size: var(--small);
+
border: var(--border-width) solid var(--border);
border-radius: var(--border-radius);
display: flex;
@@ -236,6 +238,7 @@
text-align: center;
@include config.between('sm-page-break', 'lg-page-break') {
+ align-content: start;
grid-template-rows: min-content;
padding-block-start: var(--shim-plus);
}
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index a393d60..33644dc 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -12,7 +12,6 @@ $swatch: 3.25rem;
$icon-size-default: 1.125em;
$icon-small: 0.65em;
$icon-medium: 1.5em;
-$ratio-width: 8.5rem;
$range-thumb-size: 1.35rem;
$range-input: 0.85rem;
$triangle-width: var(--shim);