feat: css for rendu

This commit is contained in:
Martin Eyben 2024-12-03 22:27:44 +00:00
parent 19047a4635
commit 283cddda78
4 changed files with 73 additions and 19 deletions

View File

@ -1,22 +1,23 @@
.header nav ul { .header nav ul {
display: flex; display: flex;
list-style: none; list-style: none;
} }
.header { .header {
background-color: var(--fg); background-color: var(--fg);
color: var(--bg); color: var(--bg);
margin-bottom: 20px;
} }
.header a { .header a {
color: var(--bg); color: var(--bg);
} }
.header li { .header li {
padding: 2rem 1rem; padding: 2rem 1rem;
} }
.header li:hover { .header li:hover {
background-color: var(--bg); background-color: var(--bg);
color: var(--fg); color: var(--fg);
} }

View File

@ -0,0 +1,29 @@
.list li {
list-style-type: none;
}
.list li {
background: #C1292E;
transition: .2s ease-in-out;
border-radius: 8px;
text-align: center;
min-width: 150px;
}
.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto, 1fr);
width: fit-content;
gap: 10px;
}
.list li a {
display: block;
color: white;
font-weight: bold;
font-size: .9rem;
text-decoration: none;
padding: 8px 13px;
cursor: pointer;
}

View File

@ -1,5 +1,6 @@
<script src="https://kit.fontawesome.com/62d2ff68ea.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/62d2ff68ea.js" crossorigin="anonymous"></script>
<link href="/static/css/colors.css" rel="stylesheet" /> <link href="/static/css/colors.css" rel="stylesheet" />
<link href="/static/css/list.css" rel="stylesheet" />
<link href="/static/css/header.css" rel="stylesheet" /> <link href="/static/css/header.css" rel="stylesheet" />
<link href="/static/css/table.css" rel="stylesheet" /> <link href="/static/css/table.css" rel="stylesheet" />
<link href="/static/css/reset.css" rel="stylesheet" /> <link href="/static/css/reset.css" rel="stylesheet" />

View File

@ -1,28 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> <title>
Liste des modeles Liste des modeles
</title> </title>
<%- include('partials/links.ejs') %> <%- include('partials/links.ejs') %>
</head> </head>
<body> <body>
<%- include('partials/header.ejs') %> <%- include('partials/header.ejs') %>
<a href="/models/fromfan"><p>Liste des modèles proposés par des fans</p></a> <main>
<h2 style="margin-top: 13px;margin-bottom: 13px;">Requêtes prédéfinies</h2>
<a href="/models/bynote"><p>Liste des modèles par note décroissante</p></a>
<a href="javascript:let now = new Date();now.setUTCFullYear(now.getUTCFullYear() - 5);window.location.pathname = '/boxes/from/' + `${now.getUTCFullYear()}-${now.getUTCMonth() + 1}-${now.getUTCDate()}`;"> <ul class="list">
<p>Liste des boites ayant moins de 5 ans</p>
</a>
<a href="/membres/bynbmodels"> <li>
<p>Liste des membres qui ont proposés le plus de modèles</p> <a href="/models/fromfan">
</a> Liste des modèles proposés par des fans
</a>
</li>
<li>
<a href="/models/bynote">
Liste des modèles par note décroissante
</a>
</li>
<li>
<a
href="javascript:let now = new Date();now.setUTCFullYear(now.getUTCFullYear() - 5);window.location.pathname = '/boxes/from/' + `${now.getUTCFullYear()}-${now.getUTCMonth() + 1}-${now.getUTCDate()}`;">
Liste des boites ayant moins de 5 ans
</a>
</li>
<li>
<a href="/membres/bynbmodels">
Liste des membres qui ont proposés le plus de modèles
</a>
</li>
</ul>
</main>
</body> </body>
</html> </html>