Semantic sidenotes for the web—Demo
13 |The 14 | 19 | 26 | 29 | (sidenote: 31 | This is the sidenote. 32 | ) 33 | 34 | collapses inside the text on viewports narrower than 1080 pixels. There the underlined text is clickable and toggles the visibility of the sidenote's content.
35 |Lorem ipsum dolor sit amet, 36 | 37 | 42 | 49 | 52 | (sidenote: 54 | Here's another sidenote. 55 | ) 56 | 57 | adipiscing elit. Morbi orci purus, venenatis a lorem non, rutrum condimentum nibh. Nam tempor, est a laoreet accumsan, nunc elit elementum nunc, sed congue ex massa ut velit. Aenean porta tincidunt blandit. Aliquam pulvinar diam lobortis ligula tempus, in luctus neque ornare. Ut id sem eu erat accumsan vehicula id sit amet mauris. Duis at mauris faucibus, efficitur massa non, lobortis ligula. Donec lacinia pharetra purus vitae aliquet. Morbi ultricies euismod sem sed mattis. Cras vulputate massa vitae turpis interdum sagittis. Morbi at nunc porttitor, fermentum ipsum quis, vulputate dolor. Aliquam pharetra lobortis ligula, quis dapibus ex gravida et. Donec ornare quam sed velit fringilla tempus. Cras varius dapibus arcu id facilisis. Suspendisse leo odio, eleifend non augue posuere, bibendum commodo orci. Curabitur eget dui sodales, efficitur augue eget, interdum est. Nullam consequat risus sit amet lorem eleifend, vitae vestibulum ipsum condimentum.
58 |Mauris vehicula, orci tincidunt luctus feugiat, augue ex finibus libero, id convallis leo turpis at sapien. Nunc sit amet convallis lacus. Integer vitae tortor lorem. Duis scelerisque pretium lacus in elementum. Mauris mattis metus sed tincidunt laoreet. Ut a orci augue. Praesent eu lectus sit amet mi dictum ornare ac eget lacus. Cras vulputate mi non ullamcorper bibendum. Proin sed tincidunt diam, sit amet vehicula dolor. Nulla consectetur sed sapien eget eleifend. Vivamus sollicitudin mauris non mattis blandit. Etiam sollicitudin 59 | 64 | 71 | 74 | (sidenote: 76 | And another one. 77 | ) 78 | 79 | vel feugiat commodo. Etiam ut eros eget nibh egestas lobortis in vitae tellus. Nullam est enim, bibendum ut interdum eu, interdum eu tellus.
80 |Cras 81 | 86 | 93 | 96 | (sidenote: 98 | And yet another one. 99 | ) 100 | sit amet ex ut accumsan. Ut id vehicula turpis. In sem turpis, vulputate eget laoreet et, cursus eu est. Donec tincidunt ornare lorem et pharetra. Sed tempor fermentum lacus rutrum ultrices. Proin at enim aliquam, tempus magna vel, cursus justo. Pellentesque iaculis vestibulum mi gravida facilisis. In hac habitasse platea dictumst. Vivamus faucibus sagittis dolor, at feugiat tortor accumsan ut. Vivamus fringilla sollicitudin tempus. Vestibulum cursus, ex eu egestas pharetra, eros nibh fringilla turpis, consectetur 101 | 106 | 113 | 116 | (sidenote: 118 | Make sure to keep enough space between them, so they don't overlap. 119 | ) 120 | erat turpis id tellus.
121 |Donec ligula nisi, fermentum nec eros vitae, fermentum pharetra ipsum. Phasellus dui eros, lobortis vel hendrerit imperdiet, tempor ut justo. Phasellus vehicula odio nunc, a tempus urna venenatis sed. Vestibulum 122 | 127 | 134 | 137 | (sidenote: 139 | Here's number six. 140 | ) 141 | rutrum rutrum eget ac odio. Aenean non metus et orci accumsan ullamcorper. In nec leo at ante rutrum facilisis ut at erat. Donec quis libero eget lorem placerat pellentesque et ac quam. Sed non cursus eros. Pellentesque sit amet pharetra erat. Maecenas volutpat aliquet quam, non cursus turpis efficitur in. Aenean ut euismod ipsum.
142 |