First post

Hello and welcome to my new website!

I built this website using Sveltekit using mdsvex for Markdown processing.

It was suprisingly difficult to get post listing to work and metadata extract to work automatically, but I managed to do it with help from sveltekit-mdvsex-blog.

You can find the source code in my github repository.

Some neat stuff I’ve used to create this website

Frosted Glass

background-color: rgba(255,255,255,0.8);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);

@-moz-document url-prefix() {
    header {
        background-color: rgb(255,255,255);
    }
}

Note: The frosted glass effect is not supported by firefox as background-filter is not avaiable. Thus, I remove all opacity for Firefox so it looks comparable to my desired design.

fontsource

I used fontsource instead of traditional methods to load in fonts.

Command to install a font

npm add @fontsource/lato

In the script section of my svelte file

import "@fontsource/lato"

And then directly into my css file

font-family: "Lato"

iconify

I used iconify for all icons and logos.

In the script section of my svelte file

import Icon from '@iconify/svelte';

and then, any icon I want from their icon sets, directly as a svelte component

<Icon icon="akar-icons:sun-fill" />