From 7f4070fda8b7ffed39f8d9ad93ac5cbd5b571b1a Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Fri, 11 Oct 2024 23:00:41 +0200 Subject: [PATCH] Add some style --- postcss.config.js | 6 ++ src/app.css | 125 ++++++++++++++++++++++++++ src/app.html | 1 + src/lib/assets/github-mark-white.svg | 1 + src/lib/assets/twitter-mark-white.svg | 1 + src/lib/components/NavLink.svelte | 37 ++++++++ src/routes/+layout.svelte | 36 ++++++++ src/routes/+page.svelte | 103 ++++++++++++++++++++- src/routes/about/+page.svelte | 1 + src/routes/play/+page.svelte | 4 + src/routes/play/+page.svlete | 0 static/favicon.png | Bin 1571 -> 0 bytes tailwind.config.ts | 11 +++ 13 files changed, 324 insertions(+), 2 deletions(-) create mode 100644 postcss.config.js create mode 100644 src/app.css create mode 100644 src/lib/assets/github-mark-white.svg create mode 100644 src/lib/assets/twitter-mark-white.svg create mode 100644 src/lib/components/NavLink.svelte create mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/about/+page.svelte create mode 100644 src/routes/play/+page.svelte create mode 100644 src/routes/play/+page.svlete delete mode 100644 static/favicon.png create mode 100644 tailwind.config.ts diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..0f77216 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +}; diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..e0fe217 --- /dev/null +++ b/src/app.css @@ -0,0 +1,125 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root +{ + --font-size : 1vw; +} + +* +{ + color: #F5F5F5; + text-decoration: none; + font-size: var(--font-size, 1vw); + transition: 0.3s; +} + +h1 +{ + font-size: calc(var(--font-size, 1vw) * 2.5); +} + +html +{ + /*background: linear-gradient(45deg, #102eff, #d2379b);*/ + background: linear-gradient(45deg, #b9b9c9, #d2379b); + height: 100vh; +} + +body +{ + display: flex; + height: 100vh; + align-items: center; + flex-direction: column; +} + +.container +{ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + width: 75vw; + height: 75vh; +} + +hr { + height: 1px; + width: 100%; + background-color: #A1674A; + border: none; + +} + +nav +{ + display: flex; + align-self: start; + justify-content: space-around; + align-items: center; + + height: 5vh; + + margin-top: 2vh; + margin-bottom: 2vh; +} + +nav a +{ + margin-right: 2.5vw; + margin-left: 2.5vw; +} + +.nav_delimiter +{ + margin-bottom: 5vh; +} + +form +{ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin-bottom: 10vh; +} + +input +{ + color: #424242; + font-size: 2.5vh; + + width: 20vw; + height: 4.5vh; + + padding: 1vh; + margin: 1.5vh; + + text-align: center; +} + +.bordered +{ + border-radius: 10px; +} + +footer +{ + display: flex; + justify-content: end; + align-items: center; + + position: absolute; + bottom: 0.25vh; + margin-bottom: 0.25vh; + + width: 100vw; + height: 5vh; +} + +footer a { + margin-right: 2vh; +} \ No newline at end of file diff --git a/src/app.html b/src/app.html index 77a5ff5..284c860 100644 --- a/src/app.html +++ b/src/app.html @@ -1,6 +1,7 @@ + Unluckiest diff --git a/src/lib/assets/github-mark-white.svg b/src/lib/assets/github-mark-white.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/src/lib/assets/github-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/twitter-mark-white.svg b/src/lib/assets/twitter-mark-white.svg new file mode 100644 index 0000000..e00c7c0 --- /dev/null +++ b/src/lib/assets/twitter-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte new file mode 100644 index 0000000..b37db96 --- /dev/null +++ b/src/lib/components/NavLink.svelte @@ -0,0 +1,37 @@ + + + + + + + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..940375a --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,36 @@ + + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5982b0a..ec5bf7e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,101 @@ -

Welcome to SvelteKit

-

Visit kit.svelte.dev to read the documentation

+ + + \ No newline at end of file diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..0e74404 --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1 @@ +

It was revealed to me in my dream

\ No newline at end of file diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte new file mode 100644 index 0000000..2492b46 --- /dev/null +++ b/src/routes/play/+page.svelte @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/routes/play/+page.svlete b/src/routes/play/+page.svlete new file mode 100644 index 0000000..e69de29 diff --git a/static/favicon.png b/static/favicon.png deleted file mode 100644 index 825b9e65af7c104cfb07089bb28659393b4f2097..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1571 zcmV+;2Hg3HP)Px)-AP12RCwC$UE6KzI1p6{F2N z1VK2vi|pOpn{~#djwYcWXTI_im_u^TJgMZ4JMOsSj!0ma>B?-(Hr@X&W@|R-$}W@Z zgj#$x=!~7LGqHW?IO8+*oE1MyDp!G=L0#^lUx?;!fXv@l^6SvTnf^ac{5OurzC#ZMYc20lI%HhX816AYVs1T3heS1*WaWH z%;x>)-J}YB5#CLzU@GBR6sXYrD>Vw(Fmt#|JP;+}<#6b63Ike{Fuo!?M{yEffez;| zp!PfsuaC)>h>-AdbnwN13g*1LowNjT5?+lFVd#9$!8Z9HA|$*6dQ8EHLu}U|obW6f z2%uGv?vr=KNq7YYa2Roj;|zooo<)lf=&2yxM@e`kM$CmCR#x>gI>I|*Ubr({5Y^rb zghxQU22N}F51}^yfDSt786oMTc!W&V;d?76)9KXX1 z+6Okem(d}YXmmOiZq$!IPk5t8nnS{%?+vDFz3BevmFNgpIod~R{>@#@5x9zJKEHLHv!gHeK~n)Ld!M8DB|Kfe%~123&Hz1Z(86nU7*G5chmyDe ziV7$pB7pJ=96hpxHv9rCR29%bLOXlKU<_13_M8x)6;P8E1Kz6G<&P?$P^%c!M5`2` zfY2zg;VK5~^>TJGQzc+33-n~gKt{{of8GzUkWmU110IgI0DLxRIM>0US|TsM=L|@F z0Bun8U!cRB7-2apz=y-7*UxOxz@Z0)@QM)9wSGki1AZ38ceG7Q72z5`i;i=J`ILzL z@iUO?SBBG-0cQuo+an4TsLy-g-x;8P4UVwk|D8{W@U1Zi z!M)+jqy@nQ$p?5tsHp-6J304Q={v-B>66$P0IDx&YT(`IcZ~bZfmn11#rXd7<5s}y zBi9eim&zQc0Dk|2>$bs0PnLmDfMP5lcXRY&cvJ=zKxI^f0%-d$tD!`LBf9^jMSYUA zI8U?CWdY@}cRq6{5~y+)#h1!*-HcGW@+gZ4B};0OnC~`xQOyH19z*TA!!BJ%9s0V3F?CAJ{hTd#*tf+ur-W9MOURF-@B77_-OshsY}6 zOXRY=5%C^*26z?l)1=$bz30!so5tfABdSYzO+H=CpV~aaUefmjvfZ3Ttu9W&W3Iu6 zROlh0MFA5h;my}8lB0tAV-Rvc2Zs_CCSJnx@d`**$idgy-iMob4dJWWw|21b4NB=LfsYp0Aeh{Ov)yztQi;eL4y5 zMi>8^SzKqk8~k?UiQK^^-5d8c%bV?$F8%X~czyiaKCI2=UH