aboutsummaryrefslogtreecommitdiff
path: root/dist
diff options
context:
space:
mode:
Diffstat (limited to 'dist')
-rw-r--r--dist/css/main.css79
-rw-r--r--dist/index.html21
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>