File tree Expand file tree Collapse file tree 1 file changed +49
-0
lines changed
Expand file tree Collapse file tree 1 file changed +49
-0
lines changed Original file line number Diff line number Diff line change 108108 margin : auto ;
109109 gap : 1em ;
110110
111+ @keyframes logo-a {
112+ 0% {
113+ stroke-dasharray : 0 100 ;
114+ }
115+
116+ 20% {
117+ stroke-dasharray : 100 100 ;
118+ }
119+
120+ 100% {
121+ stroke-dasharray : 100 100 ;
122+ }
123+ }
124+
125+ @keyframes logo-b {
126+ 0% {
127+ stroke-dasharray : 0 100 ;
128+ }
129+
130+ 20% {
131+ stroke-dasharray : 0 100 ;
132+ }
133+
134+ 100% {
135+ stroke-dasharray : 100 100 ;
136+ }
137+ }
138+
111139 :global (.logo ) {
112140 /* I'm not sure why this is needed. Maybe because it's another component */
113141 grid-area : 1 / 1 / 1 / 1 ;
114142 width : 3em ;
115143 height : 3em ;
116144 align-self : center ;
145+
146+ stroke : rgb (var (--fg ));
147+ }
148+
149+ :global(.logo .a ) {
150+ stroke-dasharray : 0 100 ;
151+ animation : 1s cubic-bezier (.05 ,.09 ,.23 ,1 ) logo- a forwards ;
152+ animation-delay : 200ms ;
153+ }
154+
155+ :global(.logo .b ) {
156+ stroke-dasharray : 0 100 ;
157+ animation : 1s cubic-bezier (.05 ,.09 ,.23 ,1 ) logo- b forwards ;
158+ animation-delay : 200ms ;
159+ }
160+
161+ @media (prefers-reduced-motion ) {
162+ :global (.logo .a ), :global (.logo .b ) {
163+ animation : none ;
164+ stroke-dasharray : 100 100 ;
165+ }
117166 }
118167
119168 .header {
You can’t perform that action at this time.
0 commit comments