vielle.dev / site-archive
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add animation to sidebar entry and exit*

*chromium only currently

afterlifepro bb9759f5 f629e4d8

+47
+47
src/components/navigation/Sidebar.astro
··· 49 49 background-color: #00000080; 50 50 backdrop-filter: blur(15px); 51 51 } 52 + 53 + /* animations */ 54 + --popover-animation-timing: 0.2s; 55 + @media (prefers-reduced-motion: reduce) { 56 + --popover-animation-timing: 0; 57 + } 58 + --popover-animation-easing: ease-in-out; 59 + 60 + transition: 61 + translate var(--popover-animation-timing, 0.2s) 62 + var(--popover-animation-easing, linear) allow-discrete, 63 + overlay var(--popover-animation-timing, 0.2s) 64 + var(--popover-animation-easing, linear) allow-discrete, 65 + display var(--popover-animation-timing, 0.2s) 66 + var(--popover-animation-easing, linear) allow-discrete; 67 + 68 + /* exit */ 69 + translate: 100% 0; 70 + /* base */ 71 + &:popover-open { 72 + translate: 0 0; 73 + /* enter */ 74 + @starting-style { 75 + translate: 100% 0; 76 + } 77 + } 78 + 79 + &::backdrop { 80 + transition: 81 + display var(--popover-animation-timing) 82 + var(--popover-animation-easing, linear) allow-discrete, 83 + overlay var(--popover-animation-timing, 0.2s) 84 + var(--popover-animation-easing, linear) allow-discrete, 85 + opacity var(--popover-animation-timing) 86 + var(--popover-animation-easing, linear) allow-discrete; 87 + 88 + /* exit */ 89 + opacity: 0; 90 + } 91 + /* base */ 92 + &:popover-open::backdrop { 93 + opacity: 1; 94 + /* enter */ 95 + @starting-style { 96 + opacity: 0; 97 + } 98 + } 52 99 } 53 100 </style>