Naaturel/unluckiest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add some style

Browse Source
This commit is contained in:
Laurent
2024-10-11 23:00:41 +02:00
parent d505530c1c
commit 7f4070fda8
13 changed files with 324 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};

125
src/app.css Normal file
View File

@@ -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;
}

1
src/app.html
View File

@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>Unluckiest</title>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

1
src/lib/assets/github-mark-white.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 960 B

1
src/lib/assets/twitter-mark-white.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

37
src/lib/components/NavLink.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script>
export let link = ""
</script>
<a class="bordered" href={link}>
<slot/>
</a>
<style>
a
{
color: #303633;
display: flex;
justify-content: center;
align-items: center;
padding: 1vh 2vh;
width: var(--width, fit-content);
height: var(--height, 3vh);
text-decoration: var(--text-decoration, none);
margin-top: var(--margin-top, 0vh);
}
a:hover
{
transform: scale(1.1);
color: #f1ecec;
}
</style>

36
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,36 @@
<script>
import '../app.css';
import github_mark from '$lib/assets/github-mark-white.svg';
import twitter_mark from '$lib/assets/twitter-mark-white.svg';
import NavLink from "$lib/components/NavLink.svelte";
</script>
<nav>
<NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
<NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
<NavLink --background-color="#f1ecec" link="/about">About</NavLink>
</nav>
<hr/>
<div class="container">
<slot></slot>
</div>
<footer>
<a href="https://github.com/naaturel">
<img
src={github_mark}
height="30"
width="30"
alt="Github mark"/>
</a>
<a href="https://twitter.com/naaturel_">
<img
src="{twitter_mark}"
height="30"
width="30"
alt="Twitter mark"/>
</a>
</footer>

103
src/routes/+page.svelte
View File

@@ -1,2 +1,101 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<ul class="leaderboard">
<li class="item">
<div class="name"><img src="" alt=""/> Player 1</div><div class="score">0 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 2</div><div class="score">1 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 3</div><div class="score">2 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 4</div><div class="score">3 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 5</div><div class="score">4 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 6</div><div class="score">5 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 7</div><div class="score">6 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 8</div><div class="score">7 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 9</div><div class="score">8 pts.</div>
</li>
<li class="item">
<div class="name"><img src="" alt=""/> Player 10</div><div class="score">9 pts.</div>
</li>
</ul>
<style>
.leaderboard
{
display: flex;
flex-direction: column;
width: 60vw;
height: 65vh;
padding: 0 2vw 2vw 2vw;
overflow: scroll;
overflow-x: hidden;
}
.leaderboard::-webkit-scrollbar {
display: none;
}
li
{
display: flex;
justify-content: space-around;
padding: 1.25vh;
margin: 1.5vh;
border: 2px solid #A1674A;
border-radius: 10px;
background-color: #f1ecec;
box-shadow: 0 0 10px #343232;
}
li:hover
{
transform: scale(1.075);
color: #424242;
background-color: #F5F5F5;
}
.name, .score
{
color: black;
margin-left: 3vh;
}
.name
{
flex-grow: 100;
border-right: 1px solid #A1674A;
}
.score
{
flex-grow: 20;
text-align: center;
}
</style>

1
src/routes/about/+page.svelte Normal file
View File

@@ -0,0 +1 @@
<p>It was revealed to me in my dream</p>

4
src/routes/play/+page.svelte Normal file
View File

@@ -0,0 +1,4 @@
<form>
<input/>
<button>Let's roll</button>
</form>

0
src/routes/play/+page.svlete Normal file
View File

BIN
static/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

11
tailwind.config.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { Config } from 'tailwindcss';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
} as Config;