WL:Таймлайн: различия между версиями

Материал из Space Station 14 Вики
Нет описания правки
Нет описания правки
Строка 13: Строка 13:


/* Timeline header */
/* Timeline header */
.timeline .header {
.timeline.header {
     font-size: 1.2em;
     font-size: 1.2em;
     font-weight: bold;
     font-weight: bold;
Строка 22: Строка 22:


/* Timeline entry */
/* Timeline entry */
.timeline .entry {
.timeline.entry {
     margin: 16px 0;
     margin: 16px 0;
     padding-left: 20px;
     padding-left: 20px;
Строка 29: Строка 29:


/* Entry dot */
/* Entry dot */
.timeline .entry::before {
.timeline.entry::before {
     content: "";
     content: "";
     position: absolute;
     position: absolute;
Строка 41: Строка 41:


/* Entry date */
/* Entry date */
.timeline .date {
.timeline.date {
     font-weight: bold;
     font-weight: bold;
     color: #36c;
     color: #36c;
Строка 47: Строка 47:


/* Entry content */
/* Entry content */
.timeline .event {
.timeline.event {
     margin-top: 4px;
     margin-top: 4px;
}
}


.timeline .description {
.timeline.description {
     color: #54595d;
     color: #54595d;
     font-size: 0.95em;
     font-size: 0.95em;
     margin-top: 4px;
     margin-top: 4px;
    line-height: 1.6;
}
/* Entry dot */
.timeline.entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #36c;
    border-radius: 50%;
}
}


/* Era marker */
/* Era marker */
.timeline .era {
.timeline.era {
     background-color: #eaecf0;
     background-color: #eaecf0;
     padding: 8px;
     padding: 8px;
Строка 64: Строка 78:
     font-weight: bold;
     font-weight: bold;
     color: #202122;
     color: #202122;
    border-left: 3px solid #36c;
}
}
</style>
</style>
Строка 70: Строка 85:


<div class="timeline">
<div class="timeline">
     <div class="header">Game Universe Timeline</div>
     <div class="timeline header">Game Universe Timeline</div>
      
      
     <div class="era">Ancient Era</div>
     <div class="timeline era">Ancient Era</div>
      
      
     <div class="entry">
     <div class="timeline entry">
         <div class="date">Year 0</div>
         <div class="timeline date">Year 0</div>
         <div class="event">The Great Awakening</div>
         <div class="timeline event">The Great Awakening</div>
         <div class="description">The first conscious beings emerge from the primordial chaos, marking the beginning of recorded history.</div>
         <div class="timeline description">The first conscious beings emerge from the primordial chaos, marking the beginning of recorded history.</div>
     </div>
     </div>
      
      
     <div class="entry">
     <div class="timeline entry">
         <div class="date">Year 372</div>
         <div class="timeline date">Year 372</div>
         <div class="event">Formation of the First Kingdom</div>
         <div class="timeline event">Formation of the First Kingdom</div>
         <div class="description">The scattered tribes unite under a single banner, establishing the foundations of civilization.</div>
         <div class="timeline description">The scattered tribes unite under a single banner, establishing the foundations of civilization.</div>
     </div>
     </div>
      
      
     <div class="era">Classical Era</div>
     <div class="timeline era">Classical Era</div>
      
      
     <div class="entry">
     <div class="timeline entry">
         <div class="date">Year 1000</div>
         <div class="timeline date">Year 1000</div>
         <div class="event">The Age of Magic</div>
         <div class="timeline event">The Age of Magic</div>
         <div class="description">Discovery of arcane arts transforms society, leading to rapid technological and cultural advancement.</div>
         <div class="timeline description">Discovery of arcane arts transforms society, leading to rapid technological and cultural advancement.</div>
     </div>
     </div>
      
      
     <div class="entry">
     <div class="timeline entry">
         <div class="date">Year 1247</div>
         <div class="timeline date">Year 1247</div>
         <div class="event">The Great War</div>
         <div class="timeline event">The Great War</div>
         <div class="description">A devastating conflict between magical factions reshapes the political landscape.</div>
         <div class="timeline description">A devastating conflict between magical factions reshapes the political landscape.</div>
    </div>
   
    <div class="era">Modern Era</div>
   
    <div class="entry">
        <div class="date">Year 2000</div>
        <div class="event">The Convergence</div>
        <div class="description">Technology and magic merge, ushering in an unprecedented age of progress and discovery.</div>
     </div>
     </div>
</div>
</div>

Версия от 22:46, 13 ноября 2024

<!DOCTYPE html> <html> <head> <style> /* Timeline container */ .timeline { 

   border: 1px solid #a2a9b1;
   background-color: #f8f9fa;
   padding: 12px;
   margin: 16px 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

}

/* Timeline header */ .timeline.header { 

   font-size: 1.2em;
   font-weight: bold;
   border-bottom: 1px solid #a2a9b1;
   margin-bottom: 12px;
   padding-bottom: 8px;

}

/* Timeline entry */ .timeline.entry { 

   margin: 16px 0;
   padding-left: 20px;
   position: relative;

}

/* Entry dot */ .timeline.entry::before { 

   content: "";
   position: absolute;
   left: 0;
   top: 6px;
   height: 8px;
   width: 8px;
   background: #36c;
   border-radius: 50%;

}

/* Entry date */ .timeline.date { 

   font-weight: bold;
   color: #36c;

}

/* Entry content */ .timeline.event { 

   margin-top: 4px;

}

.timeline.description { 

   color: #54595d;
   font-size: 0.95em;
   margin-top: 4px;
   line-height: 1.6;

}

/* Entry dot */ .timeline.entry::before { 

   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 10px;
   height: 10px;
   background-color: #36c;
   border-radius: 50%;

}

/* Era marker */ .timeline.era { 

   background-color: #eaecf0;
   padding: 8px;
   margin: 16px -12px;
   font-weight: bold;
   color: #202122;
   border-left: 3px solid #36c;

} </style> </head> <body>

Game Universe Timeline
Ancient Era
Year 0
The Great Awakening
The first conscious beings emerge from the primordial chaos, marking the beginning of recorded history.
Year 372
Formation of the First Kingdom
The scattered tribes unite under a single banner, establishing the foundations of civilization.
Classical Era
Year 1000
The Age of Magic
Discovery of arcane arts transforms society, leading to rapid technological and cultural advancement.
Year 1247
The Great War
A devastating conflict between magical factions reshapes the political landscape.

</body> </html>

Источник — https://station14.ru/index.php?title=WL:Таймлайн&oldid=56459