RenaiApp/src/renderer/App.svelte

<script>
import Button from 'atoms/Button.svelte';
import Divide from 'molecules/Divide.svelte';
import api from 'services/api';

let text = 'tach';

function handleClick() {
  api.sendCredentials({ name: '1', password: '2' });
}
</script>

<style>
:root {
  --color-white: #fff;
  --color-black: #000;

  --color-background: #242424;
  --color-foreground: #3a3a3a;
  --color-foreground-light: #696969;
  --color-accent: #454585;
  --color-accent-light: #6969ac;

  --color-text: var(--color-white);

  font-family: sans-serif;
}

:global(*) {
  box-sizing: border-box;
  overflow: hidden;
}

:global(html) {
  width: 100vw;
  height: 100vh;
}

:global(body) {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-background);
}

main {
  width: 100%;
  height: 100%;
}
</style>

<main>
  <Divide>
    <div slot="1">
      <h1>Hello World</h1>
      <p>{ text }</p>
      <Button on:click="{handleClick}">test-inhalt</Button>
    </div>
    <div slot="2">
      <Divide mode="v">
        <div slot="1">
          <Divide></Divide>
        </div>
        <div slot="2">
          <Divide></Divide>
        </div>
      </Divide>
    </div>
  </Divide>
</main>