Página Principal: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição Etiqueta: Revertido |
Sem resumo de edição Etiqueta: Revertido |
||
| Linha 22: | Linha 22: | ||
--edda-text-secondary: #6B6478; | --edda-text-secondary: #6B6478; | ||
} | } | ||
/* ===== CONTAINER RESPONSIVO ===== | |||
Usa container queries em vez de media queries: reage ao espaço REAL | |||
disponível para o conteúdo (o que sobra depois da sidebar do MediaWiki | |||
comer parte da tela), não à largura total da janela/celular. */ | |||
.edda-page { container-type: inline-size; container-name: edda; } | |||
/* ===== HERO ===== */ | /* ===== HERO ===== */ | ||
| Linha 90: | Linha 96: | ||
.edda-pill-dot { color: var(--edda-mint); font-size: 11px; flex-shrink: 0; } | .edda-pill-dot { color: var(--edda-mint); font-size: 11px; flex-shrink: 0; } | ||
/* Dispara pelo espaço REAL do container, não pela largura da tela */ | |||
@container edda (max-width: 620px) { | |||
.edda-hero { background-position: 72% center; height: 300px; align-items: flex-start; } | |||
.edda-hero-content { max-width: 100%; padding: 22px; } | |||
.edda-hero-logo { width: 200px; } | |||
} | |||
/* Fallback para navegadores sem suporte a container query (ainda melhor que travado) */ | |||
@media (max-width: 780px) { | @media (max-width: 780px) { | ||
.edda-hero { background-position: 72% center | .edda-hero { background-position: 72% center; } | ||
.edda-hero-content { max-width: 100%; padding: 22px; } | .edda-hero-content { max-width: 100%; padding: 22px; } | ||
.edda-hero-logo { width: 220px; } | .edda-hero-logo { width: 220px; } | ||
| Linha 99: | Linha 112: | ||
.edda-infobar { | .edda-infobar { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | ||
gap: 1px; | gap: 1px; | ||
background: var(--edda-mint-tint-strong); | background: var(--edda-mint-tint-strong); | ||
| Linha 107: | Linha 120: | ||
margin-bottom: 14px; | margin-bottom: 14px; | ||
} | } | ||
.edda-infobar-cell { background: #fff; padding: 12px 14px; } | .edda-infobar-cell { background: #fff; padding: 12px 14px; min-width: 0; } | ||
.edda-infobar-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--edda-text-secondary); margin-bottom: 4px; } | .edda-infobar-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--edda-text-secondary); margin-bottom: 4px; } | ||
.edda-infobar-value { font-size: 12.5px; font-weight: 700; color: var(--edda-text); line-height: 1.35; } | .edda-infobar-value { font-size: 12.5px; font-weight: 700; color: var(--edda-text); line-height: 1.35; overflow-wrap: break-word; } | ||
.edda-infobar-value.mint { color: #2E8F6E; } | .edda-infobar-value.mint { color: #2E8F6E; } | ||
/* ===== BLOCOS BASE ===== */ | /* ===== BLOCOS BASE ===== */ | ||
.wiki-col-wrap { display:grid; grid-template-columns:1fr | .wiki-col-wrap { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-bottom:12px; align-items:start; } | ||
.wiki-block { background:#fff; border:1px solid var(--edda-mint-tint-strong); border-radius:10px; overflow:hidden; margin-bottom:0; } | .wiki-block { background:#fff; border:1px solid var(--edda-mint-tint-strong); border-radius:10px; overflow:hidden; margin-bottom:0; min-width:0; } | ||
.wiki-block-full { background:#fff; border:1px solid var(--edda-mint-tint-strong); border-radius:10px; overflow:hidden; margin-bottom:0; } | .wiki-block-full { background:#fff; border:1px solid var(--edda-mint-tint-strong); border-radius:10px; overflow:hidden; margin-bottom:0; } | ||
.wiki-block-title { background:var(--edda-plum); padding:9px 16px; display:flex; align-items:center; gap:8px; } | .wiki-block-title { background:var(--edda-plum); padding:9px 16px; display:flex; align-items:center; gap:8px; } | ||
.wiki-block-title-text { color:var(--edda-mint-light); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.9px; } | .wiki-block-title-text { color:var(--edda-mint-light); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.9px; } | ||
.wiki-link { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--edda-mint-tint); text-decoration:none; color:var(--edda-text); font-size:13px; transition:color 0.1s,background 0.1s; } | .wiki-link { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--edda-mint-tint); text-decoration:none; color:var(--edda-text); font-size:13px; transition:color 0.1s,background 0.1s; min-width:0; overflow-wrap:break-word; } | ||
.wiki-link:last-child { border-bottom:none; } | .wiki-link:last-child { border-bottom:none; } | ||
.wiki-link:hover { color:#2E8F6E; background:#F2FBF7; } | .wiki-link:hover { color:#2E8F6E; background:#F2FBF7; } | ||
| Linha 129: | Linha 138: | ||
.wiki-list .wiki-link:last-child { border-bottom:none; } | .wiki-list .wiki-link:last-child { border-bottom:none; } | ||
.wiki-grid-2 { display:grid; grid-template-columns:repeat( | /* Colunas fluidas: o navegador decide quantas cabem no espaço REAL disponível */ | ||
.wiki-grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); } | |||
.wiki-grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); } | |||
.wiki-grid-3 { display:grid; grid-template-columns:repeat( | .wiki-grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); } | ||
.wiki-grid-4 { display:grid; grid-template-columns:repeat( | |||
/* ===== COMUNIDADE / ACESSO RÁPIDO (banners com mascote) ===== */ | /* ===== COMUNIDADE / ACESSO RÁPIDO (banners com mascote) ===== */ | ||
.wiki-quick { display:grid; grid-template-columns:repeat( | .wiki-quick { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; margin-bottom:14px; } | ||
.wiki-quick-banner { | .wiki-quick-banner { | ||
display: block; | display: block; | ||
| Linha 153: | Linha 157: | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
height: 150px; | height: clamp(110px, 22cqi, 150px); | ||
object-fit: cover; | object-fit: cover; | ||
object-position: center 32%; | object-position: center 32%; | ||
| Linha 163: | Linha 167: | ||
border-color: var(--edda-mint); | border-color: var(--edda-mint); | ||
box-shadow: 0 6px 16px rgba(94,207,168,0.18); | box-shadow: 0 6px 16px rgba(94,207,168,0.18); | ||
} | } | ||
| Linha 192: | Linha 192: | ||
.edda-banner-sub { color:rgba(255,255,255,0.5); font-size:11.5px; line-height:1.5; } | .edda-banner-sub { color:rgba(255,255,255,0.5); font-size:11.5px; line-height:1.5; } | ||
/* ===== RESPONSIVO ===== */ | /* ===== RESPONSIVO (ajustes finos que sobram além do auto-fit) ===== */ | ||
@ | @container edda (max-width: 480px) { | ||
.wiki- | .wiki-section-desc { display:none; } | ||
} | |||
@media (max-width: 480px) { | |||
.wiki-section-desc { display:none; } | .wiki-section-desc { display:none; } | ||
} | } | ||
</style> | </style> | ||
<!-- Envolve todo o conteúdo em um container: as regras @container acima | |||
reagem ao espaço REAL disponível (após a sidebar do MediaWiki), não | |||
à largura da janela/celular. --> | |||
<div class="edda-page"> | |||
<!-- HERO --> | <!-- HERO --> | ||
| Linha 229: | Linha 229: | ||
<div class="edda-infobar-cell"> | <div class="edda-infobar-cell"> | ||
<div class="edda-infobar-label">Episódio</div> | <div class="edda-infobar-label">Episódio</div> | ||
<div class="edda-infobar-value"> | <div class="edda-infobar-value">Encontro com o Desconhecido +</div> | ||
</div> | </div> | ||
<div class="edda-infobar-cell"> | <div class="edda-infobar-cell"> | ||
| Linha 433: | Linha 433: | ||
<div class="edda-banner-sub">Tudo acontece por aqui — fendas dimensionais, MVPs globais e muito mais!</div> | <div class="edda-banner-sub">Tudo acontece por aqui — fendas dimensionais, MVPs globais e muito mais!</div> | ||
</div> | </div> | ||
</div> | |||
</div> | </div> | ||
</html> | </html> | ||
Edição das 06h24min de 31 de julho de 2026
Comece Aqui
Primeiros passos do jogador novo
Início da Jornada
ROPs & Recompensas
Onde ganhar, gastar e trocar recursos
ROPs & Pontos
PvP & Eventos
Combate competitivo e conteúdo sazonal
PvP & Batalhas
Progressão & Criação
Forje, encante e evolua seu equipamento
Criação & Aprimoramento
Mundo & Conteúdo PvE
Instâncias estruturadas e o mundo aberto de Edda
Conteúdo PvE
Instâncias
7
PvM & Mundos
11