dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

more animations

Browse source
This commit is contained in:
Daniel Bulant 2022-11-19 16:54:12 +01:00
parent 637b7c0f43
commit 34acfec281
3 changed files with 37 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/lib/components/heroPost.svelte
View file

@ -15,7 +15,7 @@
$: dt = DateTime.fromISO(date);
</script>
<a href={path} class="post">
<a href={path} class="post select-none cursor-pointer hover:no-underline transform transition duration-300 active:scale-95 block">
{#if bigThumbnail}
<img src={bigThumbnail} styles="width: 800px; height: 400px;" alt="Thumbnail" class="thumbnail" draggable={false}>
{/if}
@ -38,13 +38,6 @@
</a>
<style>
.post {
cursor: pointer;
user-select: none;
}
a.post:hover {
text-decoration: none;
}
.thumbnail {
border-radius: 5px;
width: 100%;

3
src/lib/components/post.svelte
View file

@ -26,7 +26,7 @@
$: dt = DateTime.fromISO(date);
</script>
<a href={path} class:dark={$darkmode} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
<a href={path} class:dark={$darkmode} class="post transition duration-300 block transform active:scale-95" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
{#if thumbnail}
<img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
{:else}
@ -58,7 +58,6 @@
text-decoration: none;
}
.post {
transition: filter .3s;
cursor: pointer;
user-select: none;
width: 100%;

54
src/lib/components/project.svelte
View file

@ -1,6 +1,6 @@
<script>
import { goatCounter } from "$lib/goatcounter";
import { goto } from '$app/navigation';
import { goto } from "$app/navigation";
export var image; // "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
export var link = "";
export var grayscale = false;
@ -9,28 +9,52 @@
export var crossfadesend = null;
export var crossfadereceive = null;
export var crossfadekey = null;
export var target="_blank";
export var target = "_blank";
export var width;
export var height;
export var name;
function handle(e) {
if(!link) {
if (!link) {
e.preventDefault();
alert("No link available");
} else if(link.startsWith("/")) {
} else if (link.startsWith("/")) {
e.preventDefault();
goto(link);
}
}
</script>
<a href={link || "#"} {target} rel="noopener" data-goatcounter-click="project-{name}" class="full" on:click={handle} use:goatCounter>
<a
href={link || "#"}
{target}
rel="noopener"
data-goatcounter-click="project-{name}"
class="w-full hover:no-underline block transition duration-300 active:scale-95 transform"
on:click={handle}
use:goatCounter
>
<div class="project">
<div class="imgcon">
{#if crossfadesend}
<img out:crossfadesend={{ key: crossfadekey }} in:crossfadereceive={{ key: crossfadekey }} src={image} alt={name} draggable={false} class:grayscale {width} {height}>
<img
out:crossfadesend={{ key: crossfadekey }}
in:crossfadereceive={{ key: crossfadekey }}
src={image}
alt={name}
draggable={false}
class:grayscale
{width}
{height}
/>
{:else}
<img src={image} alt={name} draggable={false} class:grayscale {width} {height}>
<img
src={image}
alt={name}
draggable={false}
class:grayscale
{width}
{height}
/>
{/if}
{#if $$slots.desc}
<div class="desc" class:extradark>
@ -42,24 +66,16 @@
</div>
<h3><slot /></h3>
{#if clickable}
<div class="clickable">
Click to view details
</div>
<div class="clickable">Click to view details</div>
{/if}
</div>
</a>
<style>
a.full:hover {
text-decoration: none;
}
.project {
width: 100%;
margin-bottom: 30px;
}
a.full {
width: 100%;
}
.imgcon {
width: 100%;
border-radius: 10px;
@ -85,7 +101,7 @@
}
} */
.desc.extradark {
background-color: rgba(0,0,0,0.4);
background-color: rgba(0, 0, 0, 0.4);
}
.desc .content {
flex-grow: 1;
@ -94,7 +110,7 @@
width: 100%;
height: auto;
border-radius: 10px;
transition: filter .3s;
transition: filter 0.3s;
filter: blur(0px) grayscale(0);
}
img.grayscale {
@ -106,4 +122,4 @@
.bottom {
color: gray;
}
</style>
</style>