import { media } from "./observer.svelte";

let name = 'world';

</script>

<h1>

<a href="https://github.com/EricRovell/svelte-media-observer">

svelte-media-observer

</a>

</h1>

<h2>

Change the size of viewport of the browser or system theme to see the effect.

</h2>

{#if $media.small}

<p>The viewport is small</p>

{:else}

<p>The viewport is medium</p>

{/if}

{#if $media.dark}

<p>The current theme is dark</p>

{:else}

<p>The current theme is light</p>

{/if}

<style>

h2 {

font-size: 16px;

}

p {

padding: 0.5em;

border: 1px solid gray;

border-radius: 3px;