openvibers/openvibe.design Commits
/brand: the hero mark keeps its glow on, and the motion section points to /motion (#54)
Changes
@@@ -78,7 +78,7 @@ function brandPage({ base = 'https://openvibe.design' } = {}) {n = 0;const C = mark.COLORS;const hero = `<header class="br-hero">-- <div class="br-hero-stage">${live('data-size="300" data-wide data-br-hero', { wide: true })}</div>++ <div class="br-hero-stage">${live('data-size="300" data-wide data-glow data-br-hero', { wide: true })}</div><div class="br-hero-words"><p class="br-eye">The OpenVibe mark</p><h1 class="br-h1">A ring and a round V.</h1>@@@ -196,7 +196,7 @@ mark.svg({ form: 'heavy' }); // 22 px and under`;<ul class="br-mo-fmts">${FORMATS.map(([end, fmt, dims]) => chip(`${v.stem}-${end}`, fmt, dims)).join('')}</ul></figcaption></figure>`;const motion = `<section class="br-sec" id="motion" aria-labelledby="br-motion">-- <div class="br-sec-head"><h2 id="br-motion">The motion, as files</h2><p>For a video, a slide or a stream overlay. Each one is rendered from the same ov-mark.js the navbar runs, so what you download is how the mark really moves. On a web page, drop in the live mark instead: it moves, and it keeps still under reduced motion.</p></div>++ <div class="br-sec-head"><h2 id="br-motion">The motion, as files</h2><p>For a video, a slide or a stream overlay. Each one is rendered from the same ov-mark.js the navbar runs, so what you download is how the mark really moves. On a web page, drop in the live mark instead: it moves, and it keeps still under reduced motion. Everything else on OpenVibe moves the same way: <a href="/motion">see the motion</a>.</p></div><div class="br-mo">${VARIANTS.map(card).join('')}</div><div class="br-mo-use"><h3>The live mark, on any page</h3>${kit.snippet({ code: useLive, id: 'br-motion-live', label: 'Copy the HTML' })}</div></section>`;@@@ -23,6 +23,8 @@ const { FILES, STATES } = require('../server/views/brand');}assert.ok(html.includes('A page on its way'), 'the page-load ring, in words');assert.ok(html.includes('data-br-hero') && html.includes('data-br-demo'), 'the live marks for ov-mark.js');++ assert.ok(/data-glow data-br-hero/.test(html), 'the hero mark keeps its glow on (4.65.0)');++ assert.ok(html.includes('href="/motion"'), 'and the page points to how everything else moves');assert.ok(html.includes('/shared/ov-mark.js" async></script>'), 'the script snippet');assert.ok(html.includes('require('openvibe-shared/mark')'), 'the Node snippet');assert.ok(html.includes('/shared/ov-brand.woff2'), 'the font snippet');
@@ -78,7 +78,7 @@ function brandPage({ base = 'https://openvibe.design' } = {}) {
@@ -78,7 +78,7 @@ function brandPage({ base = 'https://openvibe.design' } = {}) {
n = 0;
n = 0;
const C = mark.COLORS;
const C = mark.COLORS;
const hero = `<header class="br-hero">
const hero = `<header class="br-hero">
- <div class="br-hero-stage">${live('data-size="300" data-wide data-br-hero', { wide: true })}</div>
+ <div class="br-hero-stage">${live('data-size="300" data-wide data-glow data-br-hero', { wide: true })}</div>
<div class="br-hero-words">
<div class="br-hero-words">
<p class="br-eye">The OpenVibe mark</p>
<p class="br-eye">The OpenVibe mark</p>
<h1 class="br-h1">A ring and a round V.</h1>
<h1 class="br-h1">A ring and a round V.</h1>
@@ -196,7 +196,7 @@ mark.svg({ form: 'heavy' }); // 22 px and under`;
@@ -196,7 +196,7 @@ mark.svg({ form: 'heavy' }); // 22 px and under`;
<ul class="br-mo-fmts">${FORMATS.map(([end, fmt, dims]) => chip(`${v.stem}-${end}`, fmt, dims)).join('')}</ul></figcaption>
<ul class="br-mo-fmts">${FORMATS.map(([end, fmt, dims]) => chip(`${v.stem}-${end}`, fmt, dims)).join('')}</ul></figcaption>
</figure>`;
</figure>`;
const motion = `<section class="br-sec" id="motion" aria-labelledby="br-motion">
const motion = `<section class="br-sec" id="motion" aria-labelledby="br-motion">
- <div class="br-sec-head"><h2 id="br-motion">The motion, as files</h2><p>For a video, a slide or a stream overlay. Each one is rendered from the same ov-mark.js the navbar runs, so what you download is how the mark really moves. On a web page, drop in the live mark instead: it moves, and it keeps still under reduced motion.</p></div>
+ <div class="br-sec-head"><h2 id="br-motion">The motion, as files</h2><p>For a video, a slide or a stream overlay. Each one is rendered from the same ov-mark.js the navbar runs, so what you download is how the mark really moves. On a web page, drop in the live mark instead: it moves, and it keeps still under reduced motion. Everything else on OpenVibe moves the same way: <a href="/motion">see the motion</a>.</p></div>
<div class="br-mo">${VARIANTS.map(card).join('')}</div>
<div class="br-mo">${VARIANTS.map(card).join('')}</div>
<div class="br-mo-use"><h3>The live mark, on any page</h3>${kit.snippet({ code: useLive, id: 'br-motion-live', label: 'Copy the HTML' })}</div>
<div class="br-mo-use"><h3>The live mark, on any page</h3>${kit.snippet({ code: useLive, id: 'br-motion-live', label: 'Copy the HTML' })}</div>
</section>`;
</section>`;
@@ -23,6 +23,8 @@ const { FILES, STATES } = require('../server/views/brand');
@@ -23,6 +23,8 @@ const { FILES, STATES } = require('../server/views/brand');
}
}
assert.ok(html.includes('A page on its way'), 'the page-load ring, in words');
assert.ok(html.includes('A page on its way'), 'the page-load ring, in words');
assert.ok(html.includes('data-br-hero') && html.includes('data-br-demo'), 'the live marks for ov-mark.js');
assert.ok(html.includes('data-br-hero') && html.includes('data-br-demo'), 'the live marks for ov-mark.js');
+ assert.ok(/data-glow data-br-hero/.test(html), 'the hero mark keeps its glow on (4.65.0)');
+ assert.ok(html.includes('href="/motion"'), 'and the page points to how everything else moves');
assert.ok(html.includes('/shared/ov-mark.js" async></script>'), 'the script snippet');
assert.ok(html.includes('/shared/ov-mark.js" async></script>'), 'the script snippet');
assert.ok(html.includes('require('openvibe-shared/mark')'), 'the Node snippet');
assert.ok(html.includes('require('openvibe-shared/mark')'), 'the Node snippet');
assert.ok(html.includes('/shared/ov-brand.woff2'), 'the font snippet');
assert.ok(html.includes('/shared/ov-brand.woff2'), 'the font snippet');