aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Externalize picture and front cover paths

This commit is contained in:
Leni Aniva 2024-09-17 16:06:42 -05:00
parent e41d5b2136
commit 6a0198f6c6
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/content/metadata.json
View File

@ -3,7 +3,7 @@
"blogName": "Cirno's Blog",
"frontDescription": "This is a very long description.",
"frontCover": "/favicon.svg",
"avatar": "/favicon.svg",
"picture": "/favicon.svg",
"links": {
"github": "https://github.com",
"email": "cirno@gensokyo.jp",

18
src/routes/+page.svelte
View File

@ -16,8 +16,6 @@
const { name, Content } = data;
import metadata from '$content/metadata.json';
const pathFrontCover = metadata.frontCover;
const pathAvatar = metadata.avatar;
const iconMap: Map<string, string> = {
"bitbucket": "fa-brands fa-bitbucket",
"discord": "fa-brands fa-discord",
@ -39,7 +37,7 @@
<div
id="background"
style="opacity: {1 - progress}; background-image: url('{pathFrontCover}')"
style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
>
</div>
@ -80,8 +78,7 @@
</div>
</div>
<div id="avatar">
<img id="avatar-img" src={pathAvatar} alt={metadata.name} />
<img id="avatar-img" src={metadata.picture} alt={metadata.name} />
</div>
</div>
</div>
@ -152,14 +149,17 @@
line-height: 0;
display: inline-block;
margin: 5px;
border: 4px solid rgba(100,100,100,0.4);
border-radius: 50%;
margin-right: auto;
border: 4px solid theme('colors.eucalyptus.500');
border-radius: 50%;
aspect-ratio: 1;
width: 20vh;
@apply ml-auto mr-0;
}
#avatar-img {
width: 20vh;
height: 20vh;
min-height: 100%;
min-width: 100%;
object-fit: cover;
border-radius: 50%;
}
#bio-core {