Mudanças entre as edições de "Widget:Gurren"
m |
|||
| Linha 4: | Linha 4: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 0.25em; | gap: 0.25em; | ||
/* | /* distância mínima entre cards */ | ||
} | } | ||
.social-card { | .social-card { | ||
position: relative; | |||
/* | width: 100%; | ||
/* 1 por linha no desktop */ | |||
/* | height: 3em; | ||
/* menos alto */ | |||
margin: 0.25em 0; | margin: 0.25em 0; | ||
border-radius: 0.75em; | border-radius: 0.75em; | ||
overflow: hidden; | overflow: hidden; | ||
cursor: pointer; | cursor: pointer; | ||
transition: transform | transition: transform .2s, box-shadow .2s; | ||
background: | background-size: cover; | ||
background-position: center; | |||
} | } | ||
| Linha 26: | Linha 26: | ||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
background-color: | background-color: rgba(0, 0, 0, 0.3); | ||
mix-blend-mode: multiply; | mix-blend-mode: multiply; | ||
pointer-events: none; | pointer-events: none; | ||
transition: background-color | transition: background-color .2s; | ||
} | } | ||
.social-card:hover { | .social-card:hover { | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: 0 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
} | } | ||
.social-card:hover::before { | .social-card:hover::before { | ||
background-color: | background-color: rgba(0, 0, 0, 0.5); | ||
} | } | ||
| Linha 45: | Linha 45: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: 0 1em; | |||
height: 100%; | height: 100%; | ||
color: #fff; | color: #fff; | ||
} | } | ||
.social-icon { | .social-icon { | ||
width: 1. | width: 1.5em; | ||
height: 1. | height: 1.5em; | ||
margin-right: 0. | margin-right: 0.5em; | ||
} | } | ||
.social-name { | .social-name { | ||
font-size: | font-size: 1em; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
/* | /* backgrounds individuais */ | ||
.social-card.discord { | .social-card.discord { | ||
/ | background-image: url('https://i.imgur.com/3ON2kVj.gif'); | ||
} | } | ||
.social-card.instagram { | .social-card.instagram { | ||
/ | background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); | ||
} | } | ||
.social-card.facebook { | .social-card.facebook { | ||
/ | background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); | ||
} | } | ||
.social-card.tiktok { | .social-card.tiktok { | ||
/ | background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); | ||
} | } | ||
/* MOBILE: 2 por linha | /* MOBILE (≤600px): 2 cards por linha, ainda mais finos */ | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.social-card { | .social-card { | ||
width: calc(50% - 0.25em); | |||
height: 2.5em; | |||
margin: 0.125em 0; | |||
margin: 0.125em; | |||
} | } | ||
} | } | ||
Edição das 10h38min de 24 de abril de 2025
<style> .social-cards { display: flex; flex-wrap: wrap; gap: 0.25em; /* distância mínima entre cards */ }
.social-card { position: relative; width: 100%; /* 1 por linha no desktop */ height: 3em; /* menos alto */ margin: 0.25em 0; border-radius: 0.75em; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; background-size: cover; background-position: center; }
.social-card::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.3); mix-blend-mode: multiply; pointer-events: none; transition: background-color .2s; }
.social-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.social-card:hover::before { background-color: rgba(0, 0, 0, 0.5); }
.social-card-content { position: relative; display: flex; align-items: center; padding: 0 1em; height: 100%; color: #fff; }
.social-icon { width: 1.5em; height: 1.5em; margin-right: 0.5em; }
.social-name { font-size: 1em; font-weight: bold; }
/* backgrounds individuais */ .social-card.discord { background-image: url('https://i.imgur.com/3ON2kVj.gif'); }
.social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); }
.social-card.facebook { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); }
.social-card.tiktok { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); }
/* MOBILE (≤600px): 2 cards por linha, ainda mais finos */ @media (max-width: 600px) { .social-card { width: calc(50% - 0.25em); height: 2.5em; margin: 0.125em 0; } } </style>