Skip to content

Commit

Permalink
feat: prettier timeline for large screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@SidonieBouthors
SidonieBouthors committed Nov 27, 2023
1 parent 9411a0d commit 9b36336
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 3 deletions.
131 changes: 130 additions & 1 deletion assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
--dark-blue: #126378;
--dark-green: #6d8317;
--background: #000000;
--tl-hour-height: 55px;
}
body {
margin: 0;
Expand Down Expand Up @@ -733,12 +734,140 @@ main{
max-width: min(50ch, 85%);
}

.timeline {
.timeline2 {
border : none;
width: 85vw;
margin: 2em;
}

.timeline {
display: none;
}

@media (min-width:60rem) {

.timeline2 {
display: none;
}

.timeline {
display: flex;
margin: 1.5em;
}

.timeline-day {
display: flex;
flex-direction: column;
gap: 10px;
}

.tl-day {
writing-mode: vertical-rl;
text-orientation: upright;
text-align: center;
padding: 1em;
margin: 0 1em;
}

.tl-day-sat {
height: calc(7 * var(--tl-hour-height) - 5px);
border-right: solid var(--pink);
}

.tl-day-sun {

height: calc(19 * var(--tl-hour-height) - 5px);
border-right: solid var(--blue);
}

.timeline-hours {
margin-right: 1em;
}

.tl-hour {
padding-top: .5em;
height: var(--tl-hour-height);
}

.timeline-games {
display: grid;
grid-auto-rows: var(--tl-hour-height);
grid-auto-columns: 1fr;
grid-template-areas:
"acceuil acceuil acceuil acceuil acceuil acceuil"
"mariokart valorant echecs . hades celeste"
"mariokart valorant echecs triviapoly hades celeste"
"mariokart valorant echecs triviapoly hades celeste"
"mariokart valorant babyfoot . hades celeste"
"lol overcooked babyfoot . hades celeste"
"lol overcooked babyfoot . hades celeste"
"lol smashbros jass . hades celeste"
"lol smashbros jass . hades celeste"
". smashbros jass . hades celeste"
"hearthstone smashbros jass . hades celeste"
"hearthstone smashbros jass . hades celeste"
". . . . hades celeste"
"slapshot . . . hades celeste"
"slapshot starcraft . . hades celeste"
"pokemonshowdown starcraft . . hades celeste"
". starcraft . altar hades celeste"
"geoguessr startcraft streetfighter altar hades celeste"
"minecraft startcraft streetfighter altar hades celeste"
". . . altar hades celeste"
"overwatch osu smashbros2 altar hades celeste"
"overwatch minimetro smashbros2 altar hades celeste"
"overwatch minimetro . . . ."
"jeumystere jeumystere jeumystere jeumystere jeumystere jeumystere"
"remiseprix remiseprix remiseprix remiseprix remiseprix remiseprix"
"fin fin fin fin fin fin";
}

.tl-game {
/*writing-mode: vertical-rl;
text-orientation: upright;
text-align: center;*/
padding: .4em .3em;
}

.tl-game-pink {
background-color: var(--pink);
}
.tl-game-blue {
background-color: var(--blue);
}
.tl-game-green {
background-color: var(--green);
}

.tl-acceuil { grid-area: acceuil; }
.tl-mariokart { grid-area: mariokart; }
.tl-valorant { grid-area: valorant; }
.tl-echecs { grid-area: echecs; }
.tl-triviapoly { grid-area: triviapoly; }
.tl-hades { grid-area: hades; }
.tl-celeste { grid-area: celeste; }
.tl-babyfoot { grid-area: babyfoot; }
.tl-lol { grid-area: lol; }
.tl-overcooked { grid-area: overcooked; }
.tl-smashbros { grid-area: smashbros; }
.tl-smashbros2 { grid-area: smashbros2; }
.tl-jass { grid-area: jass; }
.tl-hearthstone { grid-area: hearthstone; }
.tl-slapshot { grid-area: slapshot; }
.tl-pokemonshowdown { grid-area: pokemonshowdown; }
.tl-geoguessr { grid-area: geoguessr; }
.tl-minecraft { grid-area: minecraft; }
.tl-overwatch { grid-area: overwatch; }
.tl-jeumystere { grid-area: jeumystere; }
.tl-remiseprix { grid-area: remiseprix; }
.tl-fin { grid-area: fin; }
.tl-starcraft { grid-area: starcraft; }
.tl-osu { grid-area: osu; }
.tl-minimetro { grid-area: minimetro; }
.tl-streetfighter { grid-area: streetfighter; }
.tl-altar { grid-area: altar; }
}


/* Règlement
********************************************/
Expand Down
67 changes: 65 additions & 2 deletions infos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,8 +213,71 @@ <h2>Tournois</h2>
<br> <br>
Les <span class="highlight-blue">plannings des tournois provisoires</span> sont disponibles ci-dessous! Ceux-ci sont encore susceptibles de changer dans les jours qui viennent...
</p>
<iframe class="timeline" height="270" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQrEBO1EtGne7xjH2exQuuKVR3XQh2Vw4F7L3wuLuczTvm7lq83CzngFqN74olftvx7Ht0_77-HFUWZ/pubhtml?gid=1032861965&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
<iframe class="timeline" height="300" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQrEBO1EtGne7xjH2exQuuKVR3XQh2Vw4F7L3wuLuczTvm7lq83CzngFqN74olftvx7Ht0_77-HFUWZ/pubhtml?gid=742227990&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
<div class="timeline">
<div class="timeline-day">
<div class="tl-day tl-day-sat">Samedi</div>
<div class="tl-day tl-day-sun">Dimanche</div>
</div>
<div class="timeline-hours">
<div class="tl-hour tl-saturday">17h</div>
<div class="tl-hour tl-saturday">18h</div>
<div class="tl-hour tl-saturday">19h</div>
<div class="tl-hour tl-saturday">20h</div>
<div class="tl-hour tl-saturday">21h</div>
<div class="tl-hour tl-saturday">22h</div>
<div class="tl-hour tl-saturday">23h</div>
<div class="tl-hour tl-sunday">00h</div>
<div class="tl-hour tl-sunday">01h</div>
<div class="tl-hour tl-sunday">02h</div>
<div class="tl-hour tl-sunday">03h</div>
<div class="tl-hour tl-sunday">04h</div>
<div class="tl-hour tl-sunday">05h</div>
<div class="tl-hour tl-sunday">06h</div>
<div class="tl-hour tl-sunday">07h</div>
<div class="tl-hour tl-sunday">08h</div>
<div class="tl-hour tl-sunday">09h</div>
<div class="tl-hour tl-sunday">10h</div>
<div class="tl-hour tl-sunday">11h</div>
<div class="tl-hour tl-sunday">12h</div>
<div class="tl-hour tl-sunday">13h</div>
<div class="tl-hour tl-sunday">14h</div>
<div class="tl-hour tl-sunday">15h</div>
<div class="tl-hour tl-sunday">16h</div>
<div class="tl-hour tl-sunday">17h</div>
<div class="tl-hour tl-sunday">18h</div>
</div>
<div class="timeline-games">
<div class="tl-game tl-game-pink tl-acceuil">Acceuil</div>
<div class="tl-game tl-game-blue tl-mariokart">Mario Kart 8DX</div>
<div class="tl-game tl-game-pink tl-lol">League of Legends</div>
<div class="tl-game tl-game-blue tl-hearthstone">Hearthstone</div>
<div class="tl-game tl-game-green tl-valorant">Valorant</div>
<div class="tl-game tl-game-blue tl-overcooked">Overcooked 2</div>
<div class="tl-game tl-game-green tl-smashbros">Super Smash Bros Ultimate 1v1</div>
<div class="tl-game tl-game-pink tl-smashbros2">Super Smash Bros Ultimate 2v2</div>
<div class="tl-game tl-game-pink tl-babyfoot">Babyfoot</div>
<div class="tl-game tl-game-blue tl-jass">Jass</div>
<div class="tl-game tl-game-pink tl-triviapoly">TriviaPoly</div>
<div class="tl-game tl-game-blue tl-hades">Hades</div>
<div class="tl-game tl-game-green tl-celeste">Celeste</div>
<div class="tl-game tl-game-blue tl-slapshot">Slapshot</div>
<div class="tl-game tl-game-green tl-pokemonshowdown">Pokémon Showdown</div>
<div class="tl-game tl-game-blue tl-geoguessr">Geoguessr</div>
<div class="tl-game tl-game-green tl-minecraft">Minecraft</div>
<div class="tl-game tl-game-pink tl-overwatch">Overwatch 2</div>
<div class="tl-game tl-game-pink tl-starcraft">Starcraft 2</div>
<div class="tl-game tl-game-blue tl-osu">OSU</div>
<div class="tl-game tl-game-green tl-minimetro">Mini Metro</div>
<div class="tl-game tl-game-blue tl-streetfighter">Street<br> Fighter 6</div>
<div class="tl-game tl-game-green tl-altar">Altar</div>
<div class="tl-game tl-game-blue tl-jeumystere">Jeu Mystère</div>
<div class="tl-game tl-game-green tl-remiseprix">Remise des prix</div>
<div class="tl-game tl-game-pink tl-fin">Fin de la LAN</div>
</div>
</div>

<iframe class="timeline2" height="270" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQrEBO1EtGne7xjH2exQuuKVR3XQh2Vw4F7L3wuLuczTvm7lq83CzngFqN74olftvx7Ht0_77-HFUWZ/pubhtml?gid=1032861965&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
<iframe class="timeline2" height="300" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQrEBO1EtGne7xjH2exQuuKVR3XQh2Vw4F7L3wuLuczTvm7lq83CzngFqN74olftvx7Ht0_77-HFUWZ/pubhtml?gid=742227990&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
</section>

<section class="planning planning-anim">
Expand Down

0 comments on commit 9b36336

Please sign in to comment.