luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Added pulsing effect to timeline elements that are still in progress

Browse Source
This commit is contained in:
Luke Else 2023-10-26 13:19:46 +01:00
parent 2e07de0e71
commit 278fc640ce
2 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app.html
View File

@ -133,6 +133,33 @@
.button:hover { .button:hover {
box-shadow: .3em .3em .3em var(--header); box-shadow: .3em .3em .3em var(--header);
} }
@keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 1.5s infinite;
-moz-animation: animationName 1.5s infinite;
-o-animation: animationName 1.5s infinite;
animation: animationName 1.5s infinite;
}
</style> </style>
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

8
src/timeline.svelte
View File

@ -24,7 +24,13 @@
</TimelineOppositeContent> </TimelineOppositeContent>
<TimelineSeparator> <TimelineSeparator>
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} /> {#if item.duration.includes('Present') || !item.duration.includes('-')}
<div class="elementToFadeInAndOut">
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
</div>
{:else}
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
{/if}
<TimelineConnector /> <TimelineConnector />
</TimelineSeparator> </TimelineSeparator>
<TimelineContent> <TimelineContent>