Mudanças entre as edições de "Widget:Gurren"
| Linha 3: | Linha 3: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 0. | gap: 0.25em; | ||
/* espaçamento mínimo entre cards */ | |||
} | } | ||
.social-card { | .social-card { | ||
flex: 1 1 100%; | flex: 1 1 100%; | ||
/* ocupa 100% da coluna no desktop */ | |||
aspect-ratio: 5 / 1; | aspect-ratio: 5 / 1; | ||
margin: 0. | /* proporção padrão */ | ||
margin: 0.25em 0; | |||
/* espaçamento vertical */ | |||
border-radius: 0.75em; | border-radius: 0.75em; | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
cursor: pointer; | cursor: pointer; | ||
transition: transform 0.2s | transition: transform 0.2s, box-shadow 0.2s; | ||
background: var(--bg-url) center/cover no-repeat; | background: var(--bg-url) center/cover no-repeat; | ||
} | } | ||
| Linha 25: | Linha 29: | ||
mix-blend-mode: multiply; | mix-blend-mode: multiply; | ||
pointer-events: none; | pointer-events: none; | ||
transition: background-color 0.2s | transition: background-color 0.2s; | ||
} | } | ||
| Linha 42: | Linha 46: | ||
align-items: center; | align-items: center; | ||
justify-content: flex-start; | justify-content: flex-start; | ||
/* esquerda */ | |||
height: 100%; | height: 100%; | ||
padding: 0 1em; | padding: 0 1em; | ||
| Linha 58: | Linha 63: | ||
} | } | ||
/* | /* classes para cada rede (mantém seus fundos e overlays) */ | ||
.social-card.discord { | .social-card.discord { | ||
/* ... */ | |||
} | } | ||
.social-card.instagram { | .social-card.instagram { | ||
/* ... */ | |||
} | } | ||
.social-card.facebook { | .social-card.facebook { | ||
/* ... */ | |||
} | } | ||
.social-card.tiktok { | .social-card.tiktok { | ||
/* ... */ | |||
} | } | ||
/* | /* MOBILE: 2 por linha e cards mais “baixos” */ | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.social-card { | .social-card { | ||
flex: 1 1 calc(50% - 0. | flex: 1 1 calc(50% - 0.25em); | ||
aspect-ratio: | /* duas colunas */ | ||
aspect-ratio: 6 / 1; | |||
/* mais fino */ | /* mais fino */ | ||
margin: 0.125em; | |||
/* reduz um pouco o gap */ | |||
} | } | ||
} | } | ||
| Linha 100: | Linha 100: | ||
</div> | </div> | ||
</a> | </a> | ||
<a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener"> | <a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener"> | ||
<div class="social-card-content"> | <div class="social-card-content"> | ||
| Linha 107: | Linha 106: | ||
</div> | </div> | ||
</a> | </a> | ||
<a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener"> | <a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener"> | ||
<div class="social-card-content"> | <div class="social-card-content"> | ||
| Linha 114: | Linha 112: | ||
</div> | </div> | ||
</a> | </a> | ||
<a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener"> | <a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener"> | ||
<div class="social-card-content"> | <div class="social-card-content"> | ||
Edição das 10h35min de 24 de abril de 2025
<style> .social-cards { display: flex; flex-wrap: wrap; gap: 0.25em; /* espaçamento mínimo entre cards */ }
.social-card { flex: 1 1 100%; /* ocupa 100% da coluna no desktop */ aspect-ratio: 5 / 1; /* proporção padrão */ margin: 0.25em 0; /* espaçamento vertical */ border-radius: 0.75em; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; background: var(--bg-url) center/cover no-repeat; }
.social-card::before { content: ""; position: absolute; inset: 0; background-color: var(--overlay, rgba(0, 0, 0, 0.4)); mix-blend-mode: multiply; pointer-events: none; transition: background-color 0.2s; }
.social-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }
.social-card:hover::before { background-color: var(--overlay-hover, rgba(0, 0, 0, 0.6)); }
.social-card-content { position: relative; display: flex; align-items: center; justify-content: flex-start; /* esquerda */ height: 100%; padding: 0 1em; color: #fff; }
.social-icon { width: 1.8em; height: 1.8em; margin-right: 0.75em; }
.social-name { font-size: 1.1em; font-weight: bold; }
/* classes para cada rede (mantém seus fundos e overlays) */ .social-card.discord { /* ... */ }
.social-card.instagram { /* ... */ }
.social-card.facebook { /* ... */ }
.social-card.tiktok { /* ... */ }
/* MOBILE: 2 por linha e cards mais “baixos” */ @media (max-width: 600px) { .social-card { flex: 1 1 calc(50% - 0.25em); /* duas colunas */ aspect-ratio: 6 / 1; /* mais fino */ margin: 0.125em; /* reduz um pouco o gap */ } } </style>