|
|
| Ligne 1 : |
Ligne 1 : |
| <style> | | <timeline> |
| .timeline-wrapper {
| | # All measures are in pixels |
| position: relative;
| |
| width: 100%;
| |
| max-width: 1600px;
| |
| margin: 0 auto;
| |
| }
| |
| .timeline {
| |
| position: relative;
| |
| height: 100px;
| |
| background: #FFFFFF;
| |
| border: 5px solid #000;
| |
| margin: 120px 0 220px 0;
| |
| box-shadow: 0 8px 24px rgba(0,0,0,0.18);
| |
| }
| |
| .segment {
| |
| position: absolute;
| |
| top: 0;
| |
| height: 100%;
| |
| cursor: pointer;
| |
| transition: filter 0.2s ease;
| |
| }
| |
| .segment:hover {
| |
| filter: brightness(1.38);
| |
| }
| |
| .tick {
| |
| position: absolute;
| |
| top: -50px;
| |
| transform: translateX(-50%) rotate(-90deg);
| |
| font-weight: bold;
| |
| font-size: 1.18rem;
| |
| color: #000;
| |
| white-space: nowrap;
| |
| text-align: right;
| |
| }
| |
| .tick-extreme {
| |
| top: -120px;
| |
| }
| |
| .event-label {
| |
| position: absolute;
| |
| bottom: -250px;
| |
| width: 450px;
| |
| left: 50%;
| |
| transform: translateX(-50%) rotate(-90deg);
| |
| font-size: 1.08rem;
| |
| font-weight: 600;
| |
| color: #222;
| |
| line-height: 1.4;
| |
| letter-spacing: 0.4px;
| |
| white-space: nowrap;
| |
| text-align: right;
| |
| }
| |
| </style>
| |
|
| |
|
| <div class="timeline-wrapper">
| | ImageSize = width:160 height:550 |
| <div class="timeline"> | | PlotArea = left:50 right:0 bottom:10 top:10 |
| | AlignBars = justify |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" | | DateFormat = yyyy |
| style="left: 0%; width: 2%; background: #83e7be;" title="Signature du Traité d’El Dorado"></a>
| | Period = from:1917 till:1991 |
| <div class="event-label" style="left: 1%;">Signature du Traité d’El Dorado</div>
| | TimeAxis = orientation:vertical |
| | ScaleMajor = unit:year increment:5 start:1920 |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | # there is no automatic collision detection, |
| style="left: 16%; width: 2%; background: white;" title="-49 à -35"></a>
| | # so shift texts up or down manually to avoid overlap |
| <div class="event-label" style="left: 17%;">-49 à -35</div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
| | Define $dx = 25 # shift text to right side of bar |
| style="left: 2%; width: 28%; background: #F59787;" title="Bataille du Royaume Céleste"></a>
| |
| <div class="event-label" style="left: 16%;">Bataille du Royaume Céleste</div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | PlotData= |
| style="left: 4%; width: 2%; background: #FA5050;" title="Massacre de la forge"></a>
| | bar:Leaders color:red width:25 mark:(line,white) align:left fontsize:S |
| <div class="event-label" style="left: 5%;">Massacre de la forge</div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | from:start till:1924 shift:($dx,15) text:Vladimir~Ilyich~[[Special:MyLanguage/Lenin|Lenin]] |
| style="left: 6%; width: 2%; background: #F57C64;" title="Invasion de Nocturna"></a>
| | from:1924 till:1953 shift:($dx,5) text:[[Special:MyLanguage/Stalin|Josef~Stalin]] |
| <div class="event-label" style="left: 7%;">Invasion de Nocturna</div>
| | from:1953 till:1964 shift:($dx,5) text:Nikita~[[Special:MyLanguage/Khrushchev|Khrushchev]] |
| | | from:1964 till:1982 shift:($dx,5) text:Leonid~[[Special:MyLanguage/Brezhnev|Brezhnev]] |
| <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
| | from:1982 till:1984 shift:($dx,-12) text:Yuri~[[Special:MyLanguage/Andropov|Andropov]] |
| style="left: 70%; width: 30%; background: #FA5050;" title="Deuxième guerre de l'Abîme"></a>
| | from:1984 till:1985 shift:($dx,4) text:Konstantin~[[Special:MyLanguage/Chernenko|Chernenko]] fontsize:XS |
| <div class="event-label" style="left: 85%;">Deuxième guerre de l'Abîme</div>
| | from:1985 till:end shift:($dx,10) text:Mikhail~[[Special:MyLanguage/Gorbachev|Gorbachev]] |
| | | </timeline> |
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| |
| style="left: 70%; width: 2%; background: #F59787;" title="Bataille de Riddermark"></a>
| |
| <div class="event-label" style="left: 71%;">Bataille de Riddermark</div>
| |
| | |
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| |
| style="left: 92%; width: 2%; background: #F59787;" title="Dernier carré de Primordia"></a>
| |
| <div class="event-label" style="left: 93%;">Dernier carré de Primordia</div>
| |
| | |
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| |
| style="left: 94%; width: 2%; background: white;" title="-4 à 0"></a>
| |
| <div class="event-label" style="left: 95%;">-4 à 0</div>
| |
| | |
| <div class="tick tick-extreme" style="left: 0%;">An -50</div>
| |
| <div class="tick" style="left: 2%;">-49</div>
| |
| <div class="tick" style="left: 4%;">-48</div>
| |
| <div class="tick" style="left: 6%;">-47</div>
| |
| <div class="tick" style="left: 30%;">-35</div>
| |
| <div class="tick" style="left: 70%;">-15</div>
| |
| <div class="tick tick-extreme" style="left: 100%;">An 0</div>
| |
| <div class="tick" style="left: 92%;">-4</div>
| |
| | |
| </div> | |
| </div> | |
