<!DOCTYPE html> <html> <head> <title>Stories</title> <style> /* page css */ div.page { margin: 0px; padding: 0px; font-size: 100%; font-family: Arial, Helvetica, sans-serif; } div.page p:not([class]) { margin-bottom: 1em; margin-top: 1em; } div.page { width: 100%; display: flex; flex-direction: row; } /* sidebar css */ div.sidebar { min-width: 200px; height: calc(100vh - 20px); overflow-y: visible; overflow-x: hidden; scroll-behavior: smooth; } div.sidebar > ol { padding: 4px; } div.sidebar div:first-child { background-color: lightcoral; cursor: pointer; } div.sidebar div[data-hide="true"] { display: none; } div.sidebar dd { margin-left: 1em; padding: 4px; cursor: pointer; border-radius: 4px; margin-bottom: 4px; } div.sidebar dd:nth-child(even) { background-color: lightgray; } div.sidebar dd:nth-child(odd) { background-color: lightblue; } div.sidebar a { color: black; } div.sidebar dd[data-selected] { background-color: green; } /* content css */ div.content { width: 100%; padding: 20px; } </style> <script src="./stories.js"></script> <link rel="stylesheet" href="./main.css" /> </head> <body> <taler-stories id="container"></taler-stories> </body> </html>