openvibers/openvibe.exchange Commits
The passport stamp's small line reads (#47)
Changes
@@@ -72,7 +72,7 @@ html.ov-motion .ex-motif-arrows path { stroke-dasharray: 500; animation: ex-loop.ex-motif-item { position: absolute; padding: 9px 14px; border-radius: 12px; font-size: .86rem; font-weight: 800; background: var(--bg-card, #0f1729); border: 1px solid color-mix(in srgb, var(--room-accent) 45%, var(--border, #1f2d47)); color: var(--text-primary, #e6edf7); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }.ex-motif-item-a { left: 4%; top: 18%; } .ex-motif-item-b { right: 4%; top: 18%; }.ex-motif-passport { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; display: grid; justify-items: center; padding: 10px 18px; border-radius: 14px; background: var(--room-fill); color: var(--room-on); rotate: -4deg; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }--.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }++.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }.ex-motif-passport b { font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }html.ov-motion .ex-motif-passport { animation: ex-stamp .5s cubic-bezier(.2,.9,.3,1.4) 1.2s both; }@keyframes ex-stamp { from { opacity: 0; scale: 1.6; } }nnew file mode 100644@@@ -0,0 +1,14 @@++'use strict';++// WCAG 2.1 AA: the passport stamp's small line was 3.8:1 at .8 opacity. It now sits at .95.++// node test/contrast.test.js++const assert = require('assert');++const fs = require('fs');++const path = require('path');++++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'exchange.css'), 'utf8');++assert.ok(++ css.includes('.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }'),++ 'the passport small line is .95, not .8'++);++assert.ok(!css.includes('.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }'), 'the .8 stamp line is gone');++console.log('contrast: the passport stamp reads');
@@ -72,7 +72,7 @@ html.ov-motion .ex-motif-arrows path { stroke-dasharray: 500; animation: ex-loop
@@ -72,7 +72,7 @@ html.ov-motion .ex-motif-arrows path { stroke-dasharray: 500; animation: ex-loop
.ex-motif-item { position: absolute; padding: 9px 14px; border-radius: 12px; font-size: .86rem; font-weight: 800; background: var(--bg-card, #0f1729); border: 1px solid color-mix(in srgb, var(--room-accent) 45%, var(--border, #1f2d47)); color: var(--text-primary, #e6edf7); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.ex-motif-item { position: absolute; padding: 9px 14px; border-radius: 12px; font-size: .86rem; font-weight: 800; background: var(--bg-card, #0f1729); border: 1px solid color-mix(in srgb, var(--room-accent) 45%, var(--border, #1f2d47)); color: var(--text-primary, #e6edf7); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.ex-motif-item-a { left: 4%; top: 18%; } .ex-motif-item-b { right: 4%; top: 18%; }
.ex-motif-item-a { left: 4%; top: 18%; } .ex-motif-item-b { right: 4%; top: 18%; }
.ex-motif-passport { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; display: grid; justify-items: center; padding: 10px 18px; border-radius: 14px; background: var(--room-fill); color: var(--room-on); rotate: -4deg; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.ex-motif-passport { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; display: grid; justify-items: center; padding: 10px 18px; border-radius: 14px; background: var(--room-fill); color: var(--room-on); rotate: -4deg; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
-.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
+.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }
.ex-motif-passport b { font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }
.ex-motif-passport b { font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }
html.ov-motion .ex-motif-passport { animation: ex-stamp .5s cubic-bezier(.2,.9,.3,1.4) 1.2s both; }
html.ov-motion .ex-motif-passport { animation: ex-stamp .5s cubic-bezier(.2,.9,.3,1.4) 1.2s both; }
@keyframes ex-stamp { from { opacity: 0; scale: 1.6; } }
@keyframes ex-stamp { from { opacity: 0; scale: 1.6; } }
new file mode 100644
new file mode 100644
@@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
+'use strict';
+// WCAG 2.1 AA: the passport stamp's small line was 3.8:1 at .8 opacity. It now sits at .95.
+// node test/contrast.test.js
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'exchange.css'), 'utf8');
+assert.ok(
+ css.includes('.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }'),
+ 'the passport small line is .95, not .8'
+);
+assert.ok(!css.includes('.ex-motif-passport small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }'), 'the .8 stamp line is gone');
+console.log('contrast: the passport stamp reads');