basic structure

src/app.ts

@@ -0,0 +1,24 @@
+class App {
+
+    private static contentEntry: string = "content"
+
+    constructor() {
+        this.drawData()
+        this.main()
+    }
+
+    async main(): Promise<void> {
+        
+    }
+
+    async drawData(): Promise<void> {
+        const contentRoot = <HTMLDivElement>document.getElementById(App.contentEntry)
+        const body = new HTMLDivElement()
+        const title = new HTMLHeadingElement()
+        title.innerText = "Hello World"
+        body.appendChild(title)
+        contentRoot.appendChild(body)
+    }
+}
+
+new App();

src/background.ts

@@ -0,0 +1,13 @@
+
+class Background {
+
+    constructor() {
+        this.main();
+    }
+
+    async main(): Promise<void> {
+
+    }
+}
+
+new Background();

src/sass/_content.sass

@@ -0,0 +1,6 @@
+@import mixin
+
+#textbox
+    text-align: left
+    padding: 2rem
+    @include noselect

src/sass/_mixin.sass

@@ -0,0 +1,84 @@
+@import "root"
+
+@mixin respond-to($media)
+	@if $media == handhelds
+		@media only screen and (max-device-width: 40rem)
+			@content
+
+	@else if $media == medium-screens
+		@media only screen and (min-device-width: 40rem)
+			@content
+
+	@else if $media == wide-screens
+		@media only screen and (min-width: 1000px)
+			@content
+
+@mixin partialButton
+	button
+		width: 100% !important
+		height: 100% !important
+		text-align: center !important
+		margin: 0 !important
+
+		@include respond-to(handhelds)
+			font-size: 3rem
+
+		@include respond-to(medium-screens)
+			font-size: 1.5rem
+
+@mixin hoverMe
+	&:hover
+		button
+			color: grey !important
+
+@mixin shadow
+	box-shadow: 0px 0px 30px silver
+
+@mixin noselect
+	-webkit-touch-callout: none
+	-webkit-user-select: none
+	-khtml-user-select: none
+	-moz-user-select: none
+	-ms-user-select: none
+	user-select: none
+	pointer-events: none
+
+@mixin formBasic
+	display: block
+	padding: 2rem
+	background: $background-color-content
+	border-radius: 0.7rem
+	min-height: 20rem
+	margin: auto
+	margin-top: 2rem
+	margin-bottom: 2rem
+	@include shadow
+
+	@include respond-to(handhelds)
+		font-size: 2.5em
+		margin-left: -0.8em
+		margin-right: -0.8em
+		border-radius: 0
+
+	@include respond-to(medium-screens)
+		max-width: 40rem
+
+	@include respond-to(wide-screens)
+		max-width: 40rem
+
+	input
+		@include respond-to(handhelds)
+			font-size: 3rem
+			border-radius: 0.5rem
+
+	.check
+		position: static
+		@include respond-to(handhelds)
+			width: 2rem !important
+			height: 2rem !important
+
+	button
+		@include respond-to(handhelds)
+			font-size: 3rem
+			padding: 1rem
+			border-radius: 1rem

src/sass/_root.sass

@@ -0,0 +1,8 @@
+$main-font: 'Ubuntu', 'Staatliches'
+$main-font-color: white
+$main-font-color-hover: lightgrey
+$main-uschrift-font: 'Ubuntu', Arial
+$seccond-color: lightgrey
+$background-color: rgb(77, 153, 252)
+$background-color-content: rgb(149, 195, 255)
+$logo-image: url('../icons/icon128.png')

src/sass/app.sass

@@ -0,0 +1,42 @@
+@import 'root'
+@import 'mixin'
+@import 'content'
+@import '../../node_modules/bootstrap/scss/bootstrap'
+
+body
+    height: 30rem
+    width: 30rem
+    background-color: $background-color
+    text-align: center
+    margin: auto
+    padding: auto
+    color: $main-font-color
+
+    @include partialButton
+
+h1, h2
+    @include noselect
+
+form
+    @include formBasic
+
+.logo
+    width: 5rem
+    height: auto
+    padding-top: 2rem
+    @include noselect
+
+svg
+    @include noselect
+
+table
+    color: $main-font-color !important
+    
+    th
+        @include noselect
+
+a
+    color: $main-font-color
+
+    &:hover
+        color: $background-color-content