fix(ci): lint do Biome, Next 16.3.8 (RCE em next/og) e transicoes que se remedem
CI / verify (push) Failing after 5m43s
CI / verify (push) Failing after 5m43s
- Biome: formatacao, ordem de imports, max-width duplicado no cabecalho de secao, supressao justificada para nomes de view-transition, ajustes nos scripts de auditoria de SEO - next 16.3.3 -> 16.3.8: GHSA-vcvr-r3jv-pc5j (execucao remota de codigo em next/og ImageResponse, usado nas imagens de compartilhamento) - overrides de brace-expansion (GHSA-qhr7-859c-m2p7, GHSA-6j4f-fj2g-mc7p, GHSA-q2hr-2g5m-vwhr), dependencia de desenvolvimento via jest - visibilidade das cenas le as posicoes a cada quadro e o GSAP remede as passagens quando a pagina muda de altura (fontes, imagens, Experiencia) Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Evandro Fonseca JuniorandClaude Opus 5.5 committed
1 parent
6db10ffa67
commit
4c826e938f
17 files changed
+816
-253
No files matched your search
+66
-16
@@ -290,9 +290,11 @@ textarea {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
/* Largo: título à esquerda, descrição à direita, alinhados pela base (some a faixa vazia ao lado do título). */
|
||||
@container (min-width: 880px) {
|
||||
/* Largo: título à esquerda, descrição à direita, alinhados pela base (some a faixa vazia ao lado do título). */
|
||||
@container (min-width: 880px) {
|
||||
.ds-section-meta {
|
||||
max-width: none;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||
@@ -983,7 +985,11 @@ textarea {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(55% 65% at 78% 38%, rgba(204, 255, 0, 0.11), transparent 70%),
|
||||
radial-gradient(
|
||||
55% 65% at 78% 38%,
|
||||
rgba(204, 255, 0, 0.11),
|
||||
transparent 70%
|
||||
),
|
||||
radial-gradient(40% 50% at 6% 92%, rgba(204, 255, 0, 0.05), transparent 70%);
|
||||
}
|
||||
|
||||
@@ -1007,7 +1013,9 @@ textarea {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle, rgba(244, 242, 237, 0.22) 1px, transparent 1.5px) 0 0 / 22px 22px;
|
||||
background:
|
||||
radial-gradient(circle, rgba(244, 242, 237, 0.22) 1px, transparent 1.5px) 0
|
||||
0 / 22px 22px;
|
||||
mask: radial-gradient(38% 46% at 74% 50%, #000, transparent 75%);
|
||||
transition: opacity 1.2s var(--ease-out);
|
||||
}
|
||||
@@ -1032,11 +1040,20 @@ textarea {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.55) 36%, transparent 62%),
|
||||
linear-gradient(0deg, rgba(10, 10, 10, 0.9), transparent 28%);
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(10, 10, 10, 0.86) 0%,
|
||||
rgba(10, 10, 10, 0.55) 36%,
|
||||
transparent 62%
|
||||
), linear-gradient(0deg, rgba(10, 10, 10, 0.9), transparent 28%);
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
background: linear-gradient(0deg, rgba(10, 10, 10, 0.92) 0 30%, rgba(10, 10, 10, 0.5) 65%, rgba(10, 10, 10, 0.7));
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(10, 10, 10, 0.92) 0 30%,
|
||||
rgba(10, 10, 10, 0.5) 65%,
|
||||
rgba(10, 10, 10, 0.7)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1158,7 +1175,11 @@ textarea {
|
||||
pointer-events: none;
|
||||
/* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena */
|
||||
background: linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 38%);
|
||||
opacity: clamp(0, min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14), 1);
|
||||
opacity: clamp(
|
||||
0,
|
||||
min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14),
|
||||
1
|
||||
);
|
||||
|
||||
& li {
|
||||
--mid: calc((var(--from) + var(--to)) / 2);
|
||||
@@ -1169,7 +1190,16 @@ textarea {
|
||||
letter-spacing: -0.035em;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 40px rgba(10, 10, 10, 0.9);
|
||||
opacity: clamp(0, min((var(--hero-p) - var(--from)) * 14, (var(--to) - var(--hero-p)) * 14), 1);
|
||||
opacity: clamp(
|
||||
0,
|
||||
min(
|
||||
(var(--hero-p) - var(--from)) *
|
||||
14,
|
||||
(var(--to) - var(--hero-p)) *
|
||||
14
|
||||
),
|
||||
1
|
||||
);
|
||||
translate: 0 calc((var(--hero-p) - var(--mid)) * -160px);
|
||||
}
|
||||
|
||||
@@ -1203,7 +1233,8 @@ textarea {
|
||||
|
||||
/* o texto sai de cena enquanto a câmera mergulha: sobe, encolhe e perde o foco */
|
||||
.hero-content {
|
||||
transform: translate3d(0, calc(var(--hero-p) * -16vh), 0) scale(calc(1 - var(--hero-p) * 0.08));
|
||||
transform: translate3d(0, calc(var(--hero-p) * -16vh), 0)
|
||||
scale(calc(1 - var(--hero-p) * 0.08));
|
||||
transform-origin: 0 50%;
|
||||
opacity: calc(1 - var(--hero-p) * 4.2);
|
||||
filter: blur(calc(var(--hero-p) * 18px));
|
||||
@@ -1277,8 +1308,10 @@ html.lenis {
|
||||
color: var(--paper);
|
||||
background:
|
||||
radial-gradient(120% 90% at 100% 0%, var(--slash-dim), transparent 60%),
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 32px,
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 100%,
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100%
|
||||
32px,
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 /
|
||||
32px 100%,
|
||||
var(--ink);
|
||||
|
||||
& .ds-cover-mark {
|
||||
@@ -1486,16 +1519,25 @@ html.lenis {
|
||||
aparecem uma única vez, sem acompanhar cada quadro da rolagem */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* só com as transições ativas (html.lenis): sem o script, o diagrama aparece normalmente */
|
||||
html.lenis .quality-lab:not(.is-drawing) :is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
|
||||
html.lenis .quality-lab:not(.is-drawing)
|
||||
:is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.quality-lab.is-drawing .quality-blueprint :is(.quality-dimensions path, .quality-browser-frame, .quality-wire, .quality-browser-button) {
|
||||
.quality-lab.is-drawing
|
||||
.quality-blueprint
|
||||
:is(
|
||||
.quality-dimensions path,
|
||||
.quality-browser-frame,
|
||||
.quality-wire,
|
||||
.quality-browser-button
|
||||
) {
|
||||
stroke-dasharray: 1800; /* maior que o maior contorno (moldura: ~1600) */
|
||||
animation: quality-draw 1.1s var(--ease-out) both;
|
||||
}
|
||||
|
||||
.quality-lab.is-drawing :is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
|
||||
.quality-lab.is-drawing
|
||||
:is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
|
||||
animation: quality-fade 0.6s var(--ease-out) both;
|
||||
}
|
||||
}
|
||||
@@ -1786,14 +1828,17 @@ html.lenis {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-group(page) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-old(page) {
|
||||
animation: page-out 280ms cubic-bezier(0.7, 0, 0.84, 0) both;
|
||||
}
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-new(page) {
|
||||
animation: page-in 640ms var(--ease-out) 160ms both;
|
||||
}
|
||||
@@ -1815,7 +1860,12 @@ html.lenis {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
::view-transition-old(page),
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-old(page) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-new(page) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user