Mudanças entre as edições de "Widget:Changelog"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="news-container">
<div class="changelog-container">
  <!-- Card 1: Fist of Love -->
<div class="changelog-card">
  <div class="news-card">
<div class="card-header">
    <img src="URL_IMG_FIST_OF_LOVE" class="news-image">
<span class="card-date">08/04/2025 - Evento</span>
    <div class="news-info">
</div>
      <span class="news-date">08/04/2025 - Evento</span>
<h2 class="card-title">Fist of Love</h2>
      <h2 class="news-title">Fist of Love</h2>
<p class="card-desc">
      <p class="news-desc">
Participe deste evento temporário de 11 a 24 de abril e enfrente um poderoso herói da Marinha!
        Participe deste evento temporário de 11 a 24 de abril  
</p>
        e enfrente um poderoso herói da Marinha!
<a href="LINK_DO_DISCORD_OU_WIKI" class="card-link" target="_blank">Confira detalhes</a>
      </p>
</div>
      <a href="LINK_DO_DISCORD_OU_WIKI" class="news-link" target="_blank">Confira detalhes</a>
 
    </div>
<div class="changelog-card">
  </div>
<div class="card-header">
 
<span class="card-date">09/04/2025 - Ranqueada</span>
  <!-- Card 2: Ranqueada -->
</div>
  <div class="news-card">
<h2 class="card-title">Nova Temporada</h2>
    <img src="URL_IMG_RANQUEADA" class="news-image">
<p class="card-desc">
    <div class="news-info">
Temporada inicia em 10/04, conquiste medalhas de diamante e um ícone de perfil exclusivo!
      <span class="news-date">09/04/2025 - Ranqueada</span>
</p>
      <h2 class="news-title">Nova Temporada</h2>
<a href="LINK_DO_DISCORD" class="card-link" target="_blank">Veja mais</a>
      <p class="news-desc">
</div>
        Temporada inicia em 10/04, conquiste medalhas de diamante  
 
        e um ícone de perfil exclusivo!
<div class="changelog-card">
      </p>
<div class="card-header">
      <a href="LINK_DO_DISCORD_OU_WIKI" class="news-link" target="_blank">Veja mais</a>
<span class="card-date">09/04/2025 - Informativos</span>
    </div>
</div>
  </div>
<h2 class="card-title">Ajustes Gerais</h2>
 
<p class="card-desc">
  <!-- Card 3: Informativos (se quiser) -->
Saiba sobre a reta final da temporada de records, novas skins, e mudanças de poções de EXP.
  <div class="news-card">
</p>
    <img src="URL_IMG_INFORMATIVOS" class="news-image">
<a href="LINK_DO_DISCORD" class="card-link" target="_blank">Leia mais</a>
    <div class="news-info">
</div>
      <span class="news-date">09/04/2025 - Informativos</span>
 
      <h2 class="news-title">Ajustes gerais</h2>
      <p class="news-desc">
        Saiba sobre a reta final da temporada de records,  
        novas skins, e mudanças de poções de EXP.
      </p>
      <a href="LINK_DO_DISCORD_OU_WIKI" class="news-link" target="_blank">Leia mais</a>
    </div>
  </div>
</div>
</div>


<style>
<style>
.news-container {
.changelog-container {
  display: flex;
display: grid;
  flex-wrap: wrap;
grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* Espaço entre cards */
gap: 10px;
max-height: 500px;
overflow-y: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
.news-card {
 
  flex: 1 1 300px;
@media (max-width: 600px) {
  max-width: 300px;
.changelog-container {
  background: #fff;
grid-template-columns: 1fr;
  border: 1px solid #ddd;
max-height: none;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;  
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
}
.news-image {
  width: 100%;
  height: auto;
  display: block;
}
}
.news-info {
 
  padding: 10px;
.changelog-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
}
}
.news-date {
 
  font-size: 80%;
.card-header {
  color: #888;
margin-bottom: 4px;
}
}
.news-title {
 
  font-size: 100%;
.card-date {
  font-weight: bold;
font-size: 80%;
  margin: 5px 0;
color: #888;
  color: #333;
}
}
.news-desc {
 
  font-size: 90%;
.card-title {
  color: #555;
font-size: 100%;
  margin-bottom: 8px;
margin: 4px 0;
  /* Se quiser truncar texto:
font-weight: bold;
    display: -webkit-box;
color: #333;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  */
}
}
.news-link {
 
  font-size: 90%;
.card-desc {
  color: #007bff;
font-size: 90%;
  text-decoration: none;
color: #555;
  font-weight: bold;
margin-bottom: 8px;
/* truncar texto:
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
*/
}
 
.card-link {
font-size: 90%;
color: #007bff;
text-decoration: none;
font-weight: bold;
}
}
.news-link:hover {
 
  text-decoration: underline;
.card-link:hover {
text-decoration: underline;
}
}
</style>
</style>

Edição das 21h49min de 12 de abril de 2025

08/04/2025 - Evento

Fist of Love

Participe deste evento temporário de 11 a 24 de abril e enfrente um poderoso herói da Marinha!

<a href="LINK_DO_DISCORD_OU_WIKI" class="card-link" target="_blank">Confira detalhes</a>

09/04/2025 - Ranqueada

Nova Temporada

Temporada inicia em 10/04, conquiste medalhas de diamante e um ícone de perfil exclusivo!

<a href="LINK_DO_DISCORD" class="card-link" target="_blank">Veja mais</a>

09/04/2025 - Informativos

Ajustes Gerais

Saiba sobre a reta final da temporada de records, novas skins, e mudanças de poções de EXP.

<a href="LINK_DO_DISCORD" class="card-link" target="_blank">Leia mais</a>

<style> .changelog-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 500px; overflow-y: auto; margin: 0; padding: 0; box-sizing: border-box; }

@media (max-width: 600px) { .changelog-container { grid-template-columns: 1fr; max-height: none; } }

.changelog-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; }

.card-header { margin-bottom: 4px; }

.card-date { font-size: 80%; color: #888; }

.card-title { font-size: 100%; margin: 4px 0; font-weight: bold; color: #333; }

.card-desc { font-size: 90%; color: #555; margin-bottom: 8px; /* truncar texto: 

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  • /

}

.card-link { font-size: 90%; color: #007bff; text-decoration: none; font-weight: bold; }

.card-link:hover { text-decoration: underline; } </style>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Changelog&oldid=30780”