From cf2234e7045048073ef9d08050483115b379f798 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Sun, 13 Oct 2024 22:14:58 +0200 Subject: [PATCH] Add play page --- src/app.html | 11 ++++ src/lib/components/NavLink.svelte | 1 - src/routes/+layout.svelte | 9 +-- src/routes/play/+page.svelte | 102 ++++++++++++++++++++++++++++-- src/routes/play/+page.svlete | 0 {src => static/style}/app.css | 12 ++-- static/style/menu.css | 42 ++++++------ 7 files changed, 140 insertions(+), 37 deletions(-) delete mode 100644 src/routes/play/+page.svlete rename {src => static/style}/app.css (92%) diff --git a/src/app.html b/src/app.html index 336f516..1e34ab3 100644 --- a/src/app.html +++ b/src/app.html @@ -3,10 +3,21 @@ Unluckiest + + + + + %sveltekit.head% diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte index 9445026..86545f5 100644 --- a/src/lib/components/NavLink.svelte +++ b/src/lib/components/NavLink.svelte @@ -33,5 +33,4 @@ color: #303633; } - \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e80cc7b..9c3b3b7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,4 @@ + +
+
+ + + +
Rolling a random numbers within range 0-{range}...
+
+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/src/routes/play/+page.svlete b/src/routes/play/+page.svlete deleted file mode 100644 index e69de29..0000000 diff --git a/src/app.css b/static/style/app.css similarity index 92% rename from src/app.css rename to static/style/app.css index 4ea292b..c8a0144 100644 --- a/src/app.css +++ b/static/style/app.css @@ -1,10 +1,6 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - :root { - --font-size : 1vw; + --font-size : 1.25vmax; } * @@ -23,8 +19,6 @@ h1 html { background: linear-gradient(45deg, #b9b9c9, #d2379b); - height: 100vh; - } body @@ -32,8 +26,10 @@ body display: flex; flex-direction: row; - height: 100vh; align-items: center; + justify-content: center; + + height: 98vh; } .container diff --git a/static/style/menu.css b/static/style/menu.css index 353d8b8..c90d9f9 100644 --- a/static/style/menu.css +++ b/static/style/menu.css @@ -1,4 +1,4 @@ -.b-a, .burger:after, .burger:before, .burger { +.burger:after, .burger:before, .burger { transition: all 0.25s; content: ""; position: absolute; @@ -9,22 +9,6 @@ background-color: rgba(255, 255, 255, 0.95); } -.menu-collapsed { - transition: all 0.25s; - position: fixed; - top: 10px; - left: 9px; - height: 36px; - width: 36px; - z-index: 1; - cursor: pointer; -} -.menu-collapsed a { - transition: all 0s; - position: fixed; - left: -9000px; -} - .burger { position: fixed; left: 12px; @@ -39,18 +23,38 @@ top: 8px; } -.b-a-expanded, .menu-expanded .burger:after, .menu-expanded .burger:before { +.menu-expanded .burger:after, .menu-expanded .burger:before { transition: all 0.25s; top: 0px; } +.menu-collapsed { + transition: all 0.25s; + position: fixed; + top: 10px; + left: 9px; + height: 36px; + width: 36px; + z-index: 1; + cursor: pointer; +} + +.menu-collapsed a { + transition: all 0s; + position: fixed; + left: -9000px; +} + .menu-expanded { transition: all 0.25s; text-align: center; line-height: 200px; + height: 100%; width: 100%; + border-radius: 0px; + top: 0; left: 0; background-color: rgba(0, 0, 0, 0.85); @@ -59,6 +63,8 @@ .menu-expanded a { transition: all 0s; position: relative; + width: 100vw; + height: 25vh; left: 0; z-index: 2; }