Release ForgeFlow 0.8.4 interactive illustrations
This commit is contained in:
NuklearRabbit
@@ -3205,6 +3205,197 @@ select:focus {
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.visual-page-header {
|
||||
min-height: 142px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 20px 22px;
|
||||
border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
|
||||
border-radius: 16px;
|
||||
background:
|
||||
linear-gradient(
|
||||
105deg,
|
||||
var(--surface-1) 0 52%,
|
||||
color-mix(in srgb, var(--primary-soft) 62%, var(--surface-1))
|
||||
),
|
||||
var(--surface-1);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.project-illustration {
|
||||
--tilt-x: 0deg;
|
||||
--tilt-y: 0deg;
|
||||
width: 238px;
|
||||
height: 128px;
|
||||
position: relative;
|
||||
flex: 0 0 238px;
|
||||
perspective: 700px;
|
||||
cursor: crosshair;
|
||||
isolation: isolate;
|
||||
}
|
||||
.project-illustration svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
|
||||
filter: drop-shadow(0 16px 24px rgba(10, 20, 48, 0.2));
|
||||
transition: transform 140ms ease-out;
|
||||
}
|
||||
.illustration-glow {
|
||||
width: 150px;
|
||||
height: 85px;
|
||||
position: absolute;
|
||||
inset: 24px auto auto 49px;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--primary) 24%, transparent);
|
||||
filter: blur(24px);
|
||||
animation: illustration-breathe 4.8s ease-in-out infinite;
|
||||
}
|
||||
.project-illustration .orbit {
|
||||
fill: none;
|
||||
stroke: color-mix(in srgb, var(--primary) 48%, var(--line));
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 4 7;
|
||||
}
|
||||
.project-illustration .orbit-b {
|
||||
stroke: color-mix(in srgb, var(--success) 48%, var(--line));
|
||||
}
|
||||
.illustration-core rect {
|
||||
fill: color-mix(in srgb, var(--surface-1) 86%, var(--primary));
|
||||
stroke: color-mix(in srgb, var(--primary) 58%, var(--line));
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
.illustration-core path {
|
||||
fill: none;
|
||||
stroke: var(--text-muted);
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.illustration-core circle {
|
||||
fill: var(--success);
|
||||
animation: illustration-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
.illustration-node {
|
||||
animation: illustration-float 4s ease-in-out infinite;
|
||||
}
|
||||
.illustration-node circle {
|
||||
fill: var(--surface-1);
|
||||
stroke: var(--primary);
|
||||
stroke-width: 2;
|
||||
}
|
||||
.illustration-node path {
|
||||
fill: none;
|
||||
stroke: var(--primary);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.illustration-node.node-b {
|
||||
animation-delay: -1.4s;
|
||||
}
|
||||
.illustration-node.node-c {
|
||||
animation-delay: -2.7s;
|
||||
}
|
||||
.illustration-node.node-c circle {
|
||||
fill: var(--warning);
|
||||
stroke: color-mix(in srgb, var(--warning) 55%, var(--surface-1));
|
||||
}
|
||||
.project-illustration .signal {
|
||||
fill: var(--primary);
|
||||
}
|
||||
.project-illustration .signal-a {
|
||||
offset-path: path("M32 92 C72 20 190 18 230 82");
|
||||
animation: signal-travel 3.6s linear infinite;
|
||||
}
|
||||
.project-illustration .signal-b {
|
||||
fill: var(--success);
|
||||
offset-path: path("M42 116 C98 150 190 136 222 60");
|
||||
animation: signal-travel 4.4s -2s linear infinite;
|
||||
}
|
||||
.illustration-label {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 3px;
|
||||
z-index: 2;
|
||||
color: var(--text-faint);
|
||||
font: 650 9px var(--font-mono);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.project-illustration.repo {
|
||||
width: 150px;
|
||||
height: 82px;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 43%;
|
||||
z-index: 0;
|
||||
margin: 0;
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
}
|
||||
.project-illustration.repo .illustration-label {
|
||||
display: none;
|
||||
}
|
||||
.illustrated-repo-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.illustrated-repo-header > :not(.project-illustration) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes signal-travel {
|
||||
to {
|
||||
offset-distance: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes illustration-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
@keyframes illustration-breathe {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.55;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.95;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@keyframes illustration-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.55;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="light"] .visual-page-header {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 74% 20%,
|
||||
rgba(102, 82, 235, 0.12),
|
||||
transparent 28%
|
||||
),
|
||||
linear-gradient(
|
||||
105deg,
|
||||
rgba(255, 255, 255, 0.96) 0 52%,
|
||||
rgba(229, 239, 255, 0.94)
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
@@ -3214,6 +3405,9 @@ select:focus {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
.project-illustration svg {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
@@ -3227,4 +3421,11 @@ select:focus {
|
||||
.summary-grid {
|
||||
gap: 8px;
|
||||
}
|
||||
.project-illustration {
|
||||
width: 190px;
|
||||
flex-basis: 190px;
|
||||
}
|
||||
.project-illustration.repo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user