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

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

View file

@ -9,25 +9,31 @@
<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>
<script src='/static/main.js' defer></script>
<meta http-equiv="refresh" content="30"/>
<!-- <meta http-equiv="refresh" content="30"/> -->
</head>
<body onload="javascript:populatePage()">
<h1>LiLa Games 💜</h1>
<div id="gamelist">
<div id="gamelist" class="flex">
</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@lila.network</a> on Fediverse <3 </p>
@lauralani@lila.network
</a> on Fediverse &lt;3
</p>
<template id="game-template">
<h2><i id="game-name"></i> <img id="game-badge" class="status-image" src=""></img></h2>
<div class="game-card">
<p>URL: <i class="info monospace" id="game-url"></i></p>
<p>Password needed? <i class="info" id="game-password"></i></p>
<p>Whitelist? <i class="info" id="game-whitelist"></i></p>
<h2><i id="game-name"></i></h2>
<img id="game-badge" class="status-image" src=""></img>
<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>
</template>

View file

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