lila-network/games
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add cards to layout
All checks were successful
ci/woodpecker/push/netlify Pipeline was successful
Details

Browse source
This commit is contained in:
Adora Laura Kalb 2023-08-25 09:01:09 +02:00
parent b715251f8e
commit 89ad2affbb
Signed by: adoralaura
GPG key ID: 7A4552166FC8C056
2 changed files with 46 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
index.html
View file

@ -9,25 +9,31 @@
<link rel='stylesheet' type='text/css' media='screen' href='/static/style.css'> <link rel='stylesheet' type='text/css' media='screen' href='/static/style.css'>
<link rel="preload" href="/static/open-sans-v35-latin-regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/open-sans-v35-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<script src='/static/main.js' defer></script> <script src='/static/main.js' defer></script>
<meta http-equiv="refresh" content="30"/> <!-- <meta http-equiv="refresh" content="30"/> -->
</head> </head>
<body onload="javascript:populatePage()"> <body onload="javascript:populatePage()">
<h1>LiLa Games 💜</h1> <h1>LiLa Games 💜</h1>
<div id="gamelist"> <div id="gamelist" class="flex">
</div> </div>
<p>For Info about getting whitelisted or for the password please ping <p class="info-text">
For Info about getting whitelisted or for the password please ping
@lauralani on Discord or <a class="info" href="https://social.lila.network/@lauralani"> @lauralani on Discord or <a class="info" href="https://social.lila.network/@lauralani">
@lauralani@lila.network</a> on Fediverse <3 </p> @lauralani@lila.network
</a> on Fediverse &lt;3
</p>
<template id="game-template"> <template id="game-template">
<h2><i id="game-name"></i> <img id="game-badge" class="status-image" src=""></img></h2>
<div class="game-card"> <div class="game-card">
<p>URL: <i class="info monospace" id="game-url"></i></p> <h2><i id="game-name"></i></h2>
<p>Password needed? <i class="info" id="game-password"></i></p> <img id="game-badge" class="status-image" src=""></img>
<p>Whitelist? <i class="info" id="game-whitelist"></i></p>
<div class="game-body">
<p class="line">URL: <i class="info monospace" id="game-url"></i></p>
<p class="line">Password needed? <i class="info" id="game-password"></i></p>
<p class="line">Whitelist? <i class="info" id="game-whitelist"></i></p>
</div>
</div> </div>
</template> </template>

49
static/style.css
View file

@ -28,22 +28,22 @@ body {
src: url('/static/open-sans-v35-latin-regular.woff2') format('woff2'); src: url('/static/open-sans-v35-latin-regular.woff2') format('woff2');
} }
h1, h1 {
h2, color: #b846f6;
h3 { text-align: center;
margin-left: 15px; border-bottom: 1px solid #b846f6;
color: #94b4da; margin: 0 15% 70px;
} }
h1 { h2 {
color: #94b4da;
margin: 5px;
text-align: center; text-align: center;
border-bottom: 1px solid white;
margin: 0px 15%;
} }
.status-image { .status-image {
position: relative; display: block;
bottom: -3px; margin: 5px auto;
} }
body i { body i {
@ -55,12 +55,18 @@ body i {
color: aqua; color: aqua;
} }
.game-card p { .line {
margin: 2px 0; margin: 2px 0;
} }
.game-body {
margin: 0 20px 10px;
text-align: center;
}
.game-card { .game-card {
margin: 0 20px; width: calc(20em - 2px);
margin-bottom: 30px;
} }
@media (max-width: 650px) { @media (max-width: 650px) {
@ -68,15 +74,13 @@ body i {
font-size: 1em; font-size: 1em;
} }
.status-image {
display: block;
margin-left: 6px;
margin-top: 5px;
}
h2 { h2 {
margin-bottom: 7px; margin-bottom: 7px;
} }
.game-card {
margin: auto;
}
} }
.red { .red {
@ -85,4 +89,13 @@ body i {
.green { .green {
color: greenyellow; color: greenyellow;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.info-text {
padding: 0 2em;
} }