From 11d62ee01516b1046a51d575e4eb6659ecdc0d3f Mon Sep 17 00:00:00 2001 From: gennyble Date: Sat, 17 Jun 2023 22:11:16 -0500 Subject: MVP display --- index.html | 40 +++++++++++++++++++++++++++++++++++++ script.js | 0 style.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..35f18ef --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + Wednesdayle + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..78686f8 --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; +} + +main { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#game-area { + margin: 0 auto; + padding: 2rem; + width: 32rem; + aspect-ratio: 1 / 1; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; +} + +#game-area div { + border: 2px solid black; +} + +/* +wey +asdn + +*/ +#keyboard { + padding-bottom: 2rem; +} + +#row0, +#row1 { + display: flex; + flex-direction: row; + justify-content: center; + gap: 0.5rem; + margin: 0.5rem 0; +} + +button { + border: 1px solid salmon; + border-radius: 0.2rem; + width: 10vw; + height: 10vw; +} + +@media (max-width: 40rem) { + + /* Modile target */ + #game-area { + width: 75vw; + } +} + +@media (min-width: 40rem) { + /* Desktop target */ +} \ No newline at end of file -- cgit 1.4.1-3-g733a5