<html> <head> <link rel="stylesheet" href="./out/base.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> --> <script src="./ipsum.js"></script> <script> const l = new LoremIpsum(); window.prip = (i = 12) => window.document.write(l.paragraph(i)); window.lo = (i = 32) => l.paragraph(i); const createStyle = (link) => { let e = document.createElement("link"); e.type = "text/css"; e.rel = "stylesheet"; e.media = "screen,print"; e.href = link; return e; } const light = "./out/light.css"; const dark = "./out/dark.css" let active; function applyStyleSheet(d = false) { let n = createStyle(d ? dark : light); if (n === active) return; if (active) active.remove(); document.head.appendChild(n); active = n; } applyStyleSheet(false); let isLight = true; function switchStyle() { applyStyleSheet(isLight); isLight = !isLight; } window.$ = document.querySelector.bind(document); let match = window.matchMedia("prefers-color-scheme: dark"); match.addListener((ev) => { applyStyleSheet(ev.matches) }) </script> <style> /* :root { --primary: blue; --on-primary: white; } */ .parent { display: flex; flex-wrap: wrap; } .child { flex: 1 0 21%; margin: 20px; height: 100px; } .prev { margin-left: auto; margin-right: auto; max-width: 40rem; } .content { margin: 0 2rem; } </style> </head> <body> <button style="position: fixed; top: 10px; left: 10px; z-index: 100;" onclick="switchStyle()">Switch</button> <div class="content"> <div class="margin prev"> <div class="parent"> <div class="child elv-1"></div> <div class="child elv-2"></div> <div class="child elv-3"></div> <div class="child elv-4"></div> <div class="child elv-6"></div> <div class="child elv-8"></div> <div class="child elv-9"></div> <div class="child elv-12"></div> <div class="child elv-16"></div> <div class="child elv-24"></div> </div> </div> <div class="margin prev"> <button class="btn">Hallo Welt</button> <button class="btn btn-primary">Hallo Welt</button> <button class="btn fab">+</button> </div> <div class="margin prev"> <button class="btn" onclick="$('#modal1').classList.toggle('modal-hidden')">Open Modal</button> <div id="modal1" class="modal modal-hidden"> <div class="modal-title">Title</div> <div id="modal1_content" class="modal-content"> <script> prip(80) </script> </div> <div class="modal-action"> <button onclick="$('#modal1_content').innerHTML += lo(32)">Save</button> <button id="modal1_close" onclick="$('#modal1').classList.toggle('modal-hidden')">Close</button> </div> </div> </div> <div class="margin prev"> <form> <div class="input-group"> <label>Name</label> <input type="text" placeholder="Name" /> </div> <div class="input-group"> <label>Name</label> <input type="text" placeholder="Name" /> </div> <input class="inp" type="text" placeholder="Name" /> <input class="inp" type="text" placeholder="Name2" value="Test01" /> <input class="inp" type="text" placeholder="Name" disabled /> <select class="inp"> <option>Opt1</option> <option>Opt2</option> <option>Opt3</option> <option>Opt4</option> </select> </form> </div> <div class="margin prev"> <button onclick="$('#ul1').classList.toggle('list-divider')">Toggle Divider</button> <ul id="ul1" class="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div class="margin prev"> <ul class="list list-divider list-clickable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div class="margin prev"> <div class="header"> <span>I1</span> <span>I2</span> <div class="header-icon-button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> </div> </div> </div> </body> </html>