DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Große Fotos (.collage-photo) bekommen einen echten Polarlicht-Rahmen

Browse Source 
Bisher war der Rahmen ein statischer, matter Ring + ein starrer Farb-
Überzug - jetzt "atmet" der Glanz (box-shadow pulsiert langsam zwischen
schmal/dezent und breit/hell, siehe @keyframes collage-aurora-glow) und
ein zusätzlicher, langsam wandernder Lichtschimmer läuft über jedes Foto
(reuse von @keyframes btn-shimmer). Läuft über die --frame-Variable, wirkt
also automatisch in jeder Rahmenfarbe (frame-silver/lila/gold/rot/
tuerkis), nicht nur silber. Pausiert bei Hover (dann übernimmt der
stärkere Hover-Glow) und wird bei prefers-reduced-motion abgeschaltet.
This commit is contained in:
DogFatherGit
2026-08-01 15:18:11 +02:00
parent cfe55ebe6c
commit 9719d81dfb
1 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+49 -2
View File
@@ -670,21 +670,50 @@ footer.site-footer {
border-radius: 10px;
overflow: hidden;
background: repeating-linear-gradient(135deg, #e8ebee, #e8ebee 10px, #f6f7f9 10px, #f6f7f9 20px);
/* Statt eines starren, matten Rahmens: ein "atmender" Polarlicht-Glanz,
der langsam heller/dunkler und weiter/enger pulsiert (siehe
@keyframes collage-aurora-glow unten). Box-shadow wird von
overflow:hidden NICHT beschnitten, deshalb bleibt der Glanz auch am
Rand sichtbar, obwohl das Foto selbst innen sauber zugeschnitten ist. */
box-shadow:
0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
0 0 0 4px rgba(0, 0, 0, .55),
0 0 26px color-mix(in srgb, var(--frame) 22%, transparent),
0 14px 34px rgba(0, 0, 0, .45);
transition: box-shadow .3s ease, transform .3s ease;
animation: collage-aurora-glow 5s ease-in-out infinite;
transition: transform .3s ease;
}
@keyframes collage-aurora-glow {
0%, 100% {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
0 0 0 4px rgba(0, 0, 0, .55),
0 0 26px color-mix(in srgb, var(--frame) 30%, transparent),
0 0 46px color-mix(in srgb, var(--frame) 12%, transparent),
0 14px 34px rgba(0, 0, 0, .45);
}
50% {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--frame) 95%, transparent),
0 0 0 4px rgba(0, 0, 0, .55),
0 0 46px color-mix(in srgb, var(--frame) 62%, transparent),
0 0 80px color-mix(in srgb, var(--frame) 32%, transparent),
0 14px 34px rgba(0, 0, 0, .45);
}
}
.collage-photo:hover {
transform: translateY(-3px);
animation-play-state: paused;
box-shadow:
0 0 0 2px var(--frame),
0 0 0 4px rgba(0, 0, 0, .55),
0 0 38px color-mix(in srgb, var(--frame) 38%, transparent),
0 0 46px color-mix(in srgb, var(--frame) 55%, transparent),
0 0 80px color-mix(in srgb, var(--frame) 30%, transparent),
0 18px 42px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) {
.collage-photo { animation: none; }
}
/* Farbvarianten für Abwechslung */
.frame-silver { --frame: #c7ccd1; }
.frame-lila { --frame: var(--accent-2); }
@@ -706,6 +735,24 @@ footer.site-footer {
mix-blend-mode: overlay;
pointer-events: none;
}
/* Zusätzlicher, langsam wandernder Lichtschimmer in der Rahmenfarbe —
dieselbe Machart wie beim Bewerben-Knopf/den Buttons, nur sehr dezent,
damit das Foto selbst gut lesbar bleibt. */
.collage-photo::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--frame) 65%, white 35%) 50%, transparent 60%);
background-size: 240% 100%;
mix-blend-mode: overlay;
opacity: .55;
animation: btn-shimmer 7s linear infinite;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.collage-photo::before { animation: none; }
}
.collage-photo .img-placeholder {
position: absolute;
inset: 0;