Les tailles sont proportionnelles au viewport
This commit is contained in:
parent
057285717b
commit
f79250216b
@ -5,58 +5,54 @@
|
|||||||
--special: #c09f80;
|
--special: #c09f80;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 2fr 1fr 5fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
font-family: "ubuntu", sans-serif;
|
font-family: "ubuntu", sans-serif;
|
||||||
font-size: 200%;
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 7vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 90%;
|
font-size: 6vh;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
margin-bottom: 8vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider {
|
.slider { overflow: hidden;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-track {
|
.slide-track {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 50px;
|
gap: 3vw;
|
||||||
animation: scroll 40s linear infinite;
|
animation: scroll 40s linear infinite;
|
||||||
width: 750%; /* Pas bô, mais on va faire avec en attendant... */
|
width: 3000vh; /* Pas bô, mais on va faire avec en attendant... */
|
||||||
}
|
}
|
||||||
|
|
||||||
.room {
|
.room {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: var(--bg-dark);
|
background: var(--bg-dark);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: 1vw;
|
||||||
border-color: var(--bg-dark);
|
border-color: var(--bg-dark);
|
||||||
border-radius: 10px;
|
border-radius: 3vw;
|
||||||
padding: 10px;
|
padding: 2vw;
|
||||||
color: var(--bg);
|
color: var(--bg);
|
||||||
|
font-size: 8vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scroll {
|
@keyframes scroll {
|
||||||
0% { transform: translateX(0); }
|
0% { transform: translateX(0); }
|
||||||
100% { transform: translateX(calc(-250px * 7)); }
|
100% { transform: translateX(calc(-25vw * 7)); }
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 10px;
|
margin-top: 10vh;
|
||||||
font-size: 50%;
|
font-size: 4vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -7,46 +7,44 @@
|
|||||||
<meta name="viewport" content="width=300, initial-scale=1" />
|
<meta name="viewport" content="width=300, initial-scale=1" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<h1><b>Salles disponibles</b></h1>
|
||||||
<h1><b>Salles disponibles</b></h1>
|
<h2>{{ depts_str }}</h2>
|
||||||
<h2>{{ depts_str }}</h2>
|
<div class="slider">
|
||||||
<div class="slider">
|
<div class="slide-track">
|
||||||
<div class="slide-track">
|
{% if favs: %}
|
||||||
{% if favs: %}
|
<!-- Afficher les favoris -->
|
||||||
<!-- Afficher les favoris -->
|
<!-- Deux fois pour que l'animation boucle -->
|
||||||
<!-- Deux fois pour que l'animation boucle -->
|
{% for i in range(2) : %}
|
||||||
{% for i in range(2) : %}
|
{% if favs_free_rooms|length > 0 : %}
|
||||||
{% if favs_free_rooms|length > 0 : %}
|
{% for room in favs_free_rooms : %}
|
||||||
{% for room in favs_free_rooms : %}
|
<div class="room">
|
||||||
<div class="room">
|
<b>{{ room.name }}</b> {% if DEBUG :%}( {{ room.id }} ){% endif %}
|
||||||
<b>{{ room.name }}</b> {% if DEBUG :%}( {{ room.id }} ){% endif %}
|
{% if not(room.noend) : %}
|
||||||
{% if not(room.noend) : %}
|
<p class=details>Jusqu'à {{ frooms_disp[room.name]["end"] }}</p>
|
||||||
<p class=details>Jusqu'à {{ frooms_disp[room.name]["end"] }}</p>
|
{% endif %}
|
||||||
{% endif %}
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% else %}
|
||||||
{% else %}
|
<!-- Si les favoris ne sont pas définis, afficher les salles classiques -->
|
||||||
<!-- Si les favoris ne sont pas définis, afficher les salles classiques -->
|
{% for i in range(2):%}
|
||||||
{% for i in range(2):%}
|
{% if free_rooms|length>0 %}
|
||||||
{% if free_rooms|length>0 %}
|
{% for room in free_rooms: %}
|
||||||
{% for room in free_rooms: %}
|
<div class="room">
|
||||||
<div class="room">
|
<b>{{ room.name }}</b> {% if DEBUG : %}( {{ room.id }} ){% endif %}
|
||||||
<b>{{ room.name }}</b> {% if DEBUG : %}( {{ room.id }} ){% endif %}
|
{% if not room.noend : %}
|
||||||
{% if not room.noend : %}
|
<p class=details>Jusqu'à {{ frooms_disp[room.name]["end"] }}</p>
|
||||||
<p class=details>Jusqu'à {{ frooms_disp[room.name]["end"] }}</p>
|
{% endif %}
|
||||||
{% endif %}
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endif %}
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
</div>
|
||||||
Propulsé par UniSquat : <a href="https://unisquat.alwaysdata.net">https://unisquat.alwaysdata.net</a>
|
<footer>
|
||||||
</footer>
|
Propulsé par UniSquat : <a href="https://unisquat.alwaysdata.net">https://unisquat.alwaysdata.net</a>
|
||||||
</main>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user