Created
July 6, 2024 18:08
-
-
Save InSuperposition/562281f96fac0114fb6d9367de387cc2 to your computer and use it in GitHub Desktop.
Web starter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *::before, *::after{ | |
| box-sizing: border-box; | |
| } | |
| :root{ | |
| // anchors <html /> to window, prevents "pulling" laout when dragging. | |
| overflow: hidden | |
| } | |
| body { | |
| // enables scrolling, prevents inheriting from :root / <html /> | |
| overflow: auto; | |
| } | |
| :root, body { | |
| // fit html, body elements to window | |
| height: 100%; | |
| width: 100% | |
| // typography | |
| font-size: 16px; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| font-synthesis: none; | |
| line-height: 1.15; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="theme-color" content="#000000" /> | |
| <link rel="stylesheet" type="text/css" href="/base.css"> | |
| <title>App Title</title> | |
| <script src="/src/index.tsx" type="module"></script> | |
| </head> | |
| <body id="root"> | |
| <noscript>You need to enable JavaScript to run this app.</noscript> | |
| <nav data-menu> | |
| <a href="/">Home</a> | |
| <a href="/user">Users</a> | |
| </nav> | |
| <div data-layout-main> | |
| App Content | |
| </div> | |
| <section data-status-bar> | |
| Settings, Notifications, Key mappings etc.. | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| container-name: body; | |
| container-type: size; | |
| --layout-content-top: 40px; | |
| --layout-content-bottom: 25px; | |
| } | |
| [data-layout-content] { | |
| background-color: #4B4B4Ba1; | |
| overflow: auto; | |
| margin-top: var(--layout-content-top); | |
| margin-bottom: var(--layout-content-bottom); | |
| transition: margin-top 1s linear .5s; | |
| } | |
| [data-menu] { | |
| --menu-action-mobile: 50px; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| right: 0px; | |
| height: var(--layout-content-top); | |
| width: 100%; | |
| transition: top 1s linear .5s, | |
| left 1s linear .5s, | |
| right 1s linear .5s, | |
| height 1s linear .5s, | |
| width 1s linear .5s; | |
| } | |
| [data-status-bar] { | |
| position: absolute; | |
| bottom: 0px; | |
| left: 0px; | |
| right: 0px; | |
| height: var(--layout-content-bottom); | |
| } | |
| @container body (max-width: 400px) { | |
| [data-layout-content]{ | |
| margin-top: 0; | |
| } | |
| [data-menu] { | |
| --menu-right-position: 10px; | |
| top: calc(100% - var(--layout-content-top) - var(--menu-action-mobile)); | |
| left: calc(100% - var(--menu-action-mobile) - var(--menu-right-position)); | |
| right: var(--menu-right-position); | |
| width: var(--menu-action-mobile); | |
| height: var(--menu-action-mobile); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment