diff options
Diffstat (limited to 'dist')
| -rw-r--r-- | dist/css/main.css | 79 | ||||
| -rw-r--r-- | dist/index.html | 21 |
2 files changed, 84 insertions, 16 deletions
diff --git a/dist/css/main.css b/dist/css/main.css new file mode 100644 index 00000000..2b5cbee0 --- /dev/null +++ b/dist/css/main.css @@ -0,0 +1,79 @@ +/* #region --- Base */ + +* { + /* best practice for application */ + box-sizing: border-box; + /* To allow flex/grid box to shrink smaller than content. + see: https://stackoverflow.com/a/36247448/686724 */ + min-width: 0; + min-height: 0; + /* layout normalization */ + margin: 0; + padding: 0; +} + +html, +body { + height: 100%; + font-size: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + /* make sure the canvas is the browser window */ +} + +html { + overflow: hidden; + /* prevent the browser 'bounce' (but will prevent screen scroll as well)*/ +} + +/* #endregion --- Base */ + +div.hello { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + padding: .5rem .5rem; + border: solid 1px #dedede; + color: #888; + font-size: 1.rem; +} + +counter-button { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + border: solid 1px hsl(210, 78%, 37%); + border-radius: 5px; + background: hsl(210, 90%, 76%); + padding: .875rem 3rem; + font-size: 1.5rem; +} + +counter-button:active { + background: hsl(210, 90%, 84%); +} + +counter-result { + border: solid 1px #dedede; + font-size: 1.5rem; + padding: 1.5rem 1rem; +} + +backend-ping { + position: absolute; + top: 1rem; + right: 1rem; + border-radius: 3rem; + width: 1rem; + height: 1rem; + background-color: hsl(217, 100%, 50%); + transition: scale .125s; +} + +backend-ping.on { + scale: 1.25; + background-color: hsl(120, 100%, 32%); +}
\ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 47f32451..c57eabc8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,22 +1,11 @@ <!DOCTYPE html> <html> - <style> - html, - body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - } - - body { - display: flex; - align-items: center; - justify-content: center; - } - </style> + <link rel="stylesheet" href="css/main.css"> <script src="js/app-bundle.js"></script> <body> - <h1>Cool Stuff!!!</h1> + <div class="hello">Click for Hello</div> + <counter-button>ADD</counter-button> + <counter-result>.</counter-result> + <backend-ping class="server"></backend-ping> </body> </html> |