north-star / commit
changed the arrow to be an actual svg file
src/app.js | 7 ++++++- src/arrow.svg | 6 ++++++ src/index.html | 2 +- src/style.css | 30 +++++++++++++++++++++++------- 4 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/app.js b/src/app.js index aceedaf..0392e50 100644 --- a/src/app.js +++ b/src/app.js @@ -23,7 +23,12 @@ const logDebug = (message) => { } const arrow = document.getElementById('default-arrow'); -document.head.appendChild(Object.assign(document.createElement("link"), { rel: "icon", href: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>" + arrow.innerText + "</text></svg>" })) +const arrowSvgResponse = await fetch('./arrow.svg'); +if (!arrowSvgResponse.ok) { + throw new Error(`arrow.svg request failed with ${arrowSvgResponse.status}`); +} +arrow.innerHTML = await arrowSvgResponse.text(); +document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'icon', href: './arrow.svg' })); const getShortestDelta = (fromAngle, toAngle) => ((toAngle - fromAngle + 540) % 360) - 180; const normalizeAngle = (angle) => ((angle % 360) + 360) % 360; const normalizeSignedAngle = (angle) => { diff --git a/src/arrow.svg b/src/arrow.svg new file mode 100644 index 0000000..6f43d9f --- /dev/null +++ b/src/arrow.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="arrow-svg" viewBox="0 0 100 100" aria-hidden="true"> + <g class="arrow-shape"> + <polygon class="arrow-head" points="50,8 72,36 28,36" /> + <rect class="arrow-shaft" x="42" y="36" width="16" height="60" /> + </g> +</svg> diff --git a/src/index.html b/src/index.html index 133a37d..72014ae 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,7 @@ <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" /> <input id="self-color-input" name="selfColor" type="color" /> </form> - <div id="default-arrow" style="display: none;" class="arrow">⭡</div> + <div id="default-arrow" style="display: none;" class="arrow"></div> <div id="content"> <div class="panel-actions"> <button id="calibrate-heading-link" class="participants-toggle" type="button">Calibrate North</button> diff --git a/src/style.css b/src/style.css index eca13bf..d8986f0 100644 --- a/src/style.css +++ b/src/style.css @@ -246,22 +246,38 @@ a { top: 50%; left: 50%; translate: -50% -50%; - font-size: min(62vmin, 70dvh); - line-height: 1; + width: min(52vmin, 56dvh); + aspect-ratio: 1; transform: rotate(0deg); transition: transform 160ms ease; user-select: none; pointer-events: none; z-index: 1; - -webkit-text-stroke: 2px rgba(0, 0, 0, 0.95); - text-shadow: - 0 0 1px rgba(0, 0, 0, 0.95), - 0 0 8px rgba(0, 0, 0, 0.35); + color: #ffffff; +} + +.arrow-svg { + display: block; + width: 100%; + height: 100%; + overflow: visible; + filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35)); +} + +.arrow-shape { + fill: currentColor; +} + +.arrow-outline { + fill: none; + stroke: rgba(0, 0, 0, 0.95); + stroke-width: 3; + stroke-linejoin: round; } .arrow-label-anchor { position: absolute; - top: 4.8%; + top: 4%; left: 50%; translate: -50% -50%; width: 0;