| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>app-sk demo</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <script type="text/javascript" charset="utf-8"> |
| // This bit of script loads the custom elements v1 polyfill, but only if required. |
| if (!window.customElements) { |
| var newScript = document.createElement('script'); |
| newScript.src = |
| 'https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.0.8/custom-elements.min.js'; |
| document.write(newScript.outerHTML); |
| } |
| </script> |
| </head> |
| <body class="body-sk"> |
| <app-sk> |
| <header> |
| <h1>app-sk Demo</h1> |
| <div class="spacer"></div> |
| <login-sk></login-sk> |
| <theme-chooser-sk></theme-chooser-sk> |
| </header> |
| <!-- W3 Schools suggests the aside content could be a side bar. |
| So that's what we do with it.--> |
| <aside> |
| <h2>This is the side bar</h2> |
| <ul class="no-decorate"> |
| <li>Do you like items?</li> |
| <li>We have items</li> |
| <li>and <a href="skia.org">links to places</a></li> |
| <li><create-icon-sk></create-icon-sk> Icons too!</li> |
| </ul> |
| |
| <h2>Hopefully the side bar handles really wide text well.</h2> |
| </aside> |
| |
| <main> |
| <h1>The main content!</h1> |
| This is the main reason you are here. |
| <br /> |
| |
| <img class="small-image" src="https://i.redd.it/o1bum7xjoi8y.gif" /> |
| |
| <h2>Lots of text to test scrolling</h2> |
| <div class="narrow"> |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do |
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim |
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| aliquip ex ea commodo consequat. Duis aute irure dolor in |
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla |
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| culpa qui officia deserunt mollit anim id est laborum. |
| </p> |
| </div> |
| </main> |
| |
| <footer><error-toast-sk></error-toast-sk></footer> |
| </app-sk> |
| </body> |
| </html> |
