add button component and some basic styling

src/main.ts

@@ -8,8 +8,8 @@ function createWindow() {
 
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    height: 600,
-    width: 800,
+    height: 900,
+    width: 1600,
     webPreferences: {
       nodeIntegration: false,
     },

src/renderer.ts

@@ -2,7 +2,7 @@
 // be executed in the renderer process for that window.
 // All of the Node.js APIs are available in this process.
 
-import App from './renderer/view/App.svelte';
+import App from './renderer/App.svelte';
 
 (() =>
   new App({

src/renderer/App.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Button from 'atoms/Button.svelte';
+
+  let text = 'tach';
+</script>
+
+<style>
+  :root {
+    --color-white: #fff;
+    --color-black: #000;
+
+    --color-background: #242424;
+    --color-foreground: #3a3a3a;
+    --color-accent: #454585;
+    --color-accent-light: #6969ac;
+
+    --color-text: var(--color-white);
+  }
+
+  :global(*) {
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    padding: 0;
+    margin: 0;
+    color: var(--color-text);
+    background-color: var(--color-background);
+  }
+</style>
+
+<main>
+  <h1>Hello World</h1>
+  <p>{ text }</p>
+  <Button>inhalt</Button>
+</main>

src/renderer/components/1-atoms/Button.svelte

@@ -0,0 +1,15 @@
+<button class="button">
+  <slot></slot>
+</button>
+
+<style>
+  .button {
+    border: none;
+    color: var(--color-text);
+    background: var(--color-accent);
+  }
+
+  .button:focus {
+    outline-color: var(--color-accent-light);
+  }
+</style>

src/renderer/view/App.svelte

@@ -1,14 +0,0 @@
-<main>
-  <h1>Hello World</h1>
-  <p>{ text }</p>
-</main>
-
-<script>
-  let text = 'tach';
-</script>
-
-<style>
-  h1 {
-    text-transform: uppercase;
-  }
-</style>

webpack.main.config.js

@@ -8,7 +8,5 @@ module.exports = {
   module: {
     rules: require('./webpack.rules'),
   },
-  resolve: {
-    extensions: ['.js', '.ts', '.html'],
-  },
+  resolve: require('./webpack.resolve'),
 };

webpack.renderer.config.js

@@ -3,4 +3,5 @@ module.exports = {
   module: {
     rules: require('./webpack.rules'),
   },
+  resolve: require('./webpack.resolve'),
 };

webpack.resolve.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  extensions: ['.js', '.ts', '.svelte'],
+  alias: {
+    atoms: path.resolve(__dirname, 'src/renderer/components/1-atoms'),
+    molecules: path.resolve(__dirname, 'src/renderer/components/2-molecules'),
+  },
+};