Skip to content

Commit 6c9e903

Browse files
petrsvihlikclaude
andcommitted
Add animated gradient to sidebar separator line
Replaces the static grey gradient with a shifting blue→orange→blue animation using the site's primary/secondary colours. Loops every 6s. Closes #12 (gradient separator item). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 621fe93 commit 6c9e903

1 file changed

Lines changed: 15 additions & 2 deletions

File tree

input/assets/scss/components/_sidebar.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@
5454
}
5555
}
5656

57+
@keyframes sidebar-gradient {
58+
0% { background-position: 0% 0%; }
59+
50% { background-position: 0% 100%; }
60+
100% { background-position: 0% 0%; }
61+
}
62+
5763
@include breakpoint-sm {
5864
.sidebar {
5965
width: 42%;
@@ -62,8 +68,15 @@
6268
padding: 30px 20px 0;
6369

6470
&:after {
65-
background: $color-gray-border;
66-
background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-background 100%);
71+
background: linear-gradient(
72+
to bottom,
73+
$color-primary,
74+
$color-secondary,
75+
$color-primary,
76+
$color-gray-border
77+
);
78+
background-size: 100% 300%;
79+
animation: sidebar-gradient 6s ease infinite;
6780
position: absolute;
6881
content: "";
6982
width: 1px;

0 commit comments

Comments
 (0)