fix sidenote collisions
This commit is contained in:
parent
8d51cab348
commit
3c7732f1f4
@ -1,4 +1,5 @@
|
|||||||
<script context="module">
|
<script context="module">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import { formatDate } from './datefmt.js';
|
import { formatDate } from './datefmt.js';
|
||||||
import { makeSlug } from '$lib/slug.js';
|
import { makeSlug } from '$lib/slug.js';
|
||||||
import Link from './Link.svelte';
|
import Link from './Link.svelte';
|
||||||
@ -7,6 +8,25 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export let title, date;
|
export let title, date;
|
||||||
|
|
||||||
|
// deal with sidenote collisions
|
||||||
|
onMount(async () => {
|
||||||
|
const minNoteGap = 15;
|
||||||
|
let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
|
||||||
|
var prev = 0;
|
||||||
|
for (var i=0; i < sidenotes.length; i++) {
|
||||||
|
let note = sidenotes[i];
|
||||||
|
let {y, height} = note.getBoundingClientRect();
|
||||||
|
y += window.scrollY; // getBoundingClientRect is relative to viewport
|
||||||
|
if (y < prev + minNoteGap) {
|
||||||
|
note.style.top = `${prev + minNoteGap}px`;
|
||||||
|
prev = prev + minNoteGap + height;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
prev = y + height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Imagining A Passwordless Future
|
title: Imagining A Passwordless Future
|
||||||
description: Can replace passwords with something more user-friendly?
|
description: Can we replace passwords with something more user-friendly?
|
||||||
date: 2021-04-30
|
date: 2021-04-30
|
||||||
---
|
---
|
||||||
<script>
|
<script>
|
||||||
@ -30,4 +30,4 @@ and I doubt they'll be going anywhere any time soon.
|
|||||||
|
|
||||||
I really hate passwords.
|
I really hate passwords.
|
||||||
|
|
||||||
I use them, of course, because I can't not. And I use a password manager, because to my mind that's the current best compromise between being secure and absolutely losing your mind, but it still isn't great. Sometimes my password manager bugs out and refuses to auto-fill the password box, so I have to go hunt it down and copy-paste it in.<Sidenote>If I'm lucky. If I'm unlucky, the site will have disabled pasting into password inputs because "security," and I'm stuck having to type in a 16-character string of gibberish on a mobile phone, because that's how life is.</Sidenote> Other times I'll create a password, the password manager will happily file it away, and then I'll discover that it didn't meet the site's requirements, because my auto-generated gibberish string didn't include the *right* special characters, and now I have the wrong password saved.
|
I use them, of course, because I can't not. And I use a password manager, because to my mind that's the current best compromise between being secure and absolutely losing your mind, but it still isn't great. Sometimes my password manager bugs out and refuses to auto-fill the password box, so I have to go hunt it down and copy-paste it in.<Sidenote>If I'm lucky. If I'm unlucky, the site will have disabled pasting into password inputs because "security," and I'm stuck having to type in a 16-character string of gibberish on a mobile phone, because that's how life is.</Sidenote> Other times I'll create a password, the password manager will happily file it away, and then I'll discover that it didn't meet the site's requirements,<Sidenote>Another test</Sidenote> because my auto-generated gibberish string didn't include the *right* special characters, and now I have the wrong password saved.
|
Loading…
x
Reference in New Issue
Block a user