Add basic styles

test/slides/chapter1.de.md

@@ -10,7 +10,7 @@ Wirklich auf den Punkt!
 
 @content
 * Stichpunkt 1
-* Stichpunkt 2
-* Stichpunkt 3
-* Stichpunkt 4
+* ^in Stichpunkt 2
+* ^in Stichpunkt 3
+* ^in In Stichpunkt 4 ... <strong>geht es hübsch weiter</strong>
 

test/slides/chapter2.de.md

@@ -1,10 +1,4 @@
 @slide(layout=titlepage)
 
 @title
-Wirklich auf den Punkt!
-
-@content
-* Stichpunkt 1
-* Stichpunkt 2
-* Stichpunkt 3
-* Stichpunkt 4
+Ende

test/styles/style.css

@@ -0,0 +1,50 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-size: 16pt;
+}
+
+h1 {
+  font-size: 2.4rem;
+}
+
+.fragment {
+  opacity: 0;
+  transition: .3s opacity ease-in-out;
+}
+
+.fragment.visible {
+  opacity: 1;
+}
+
+@media screen {
+  body {
+    background: black;
+    margin: 0;
+    padding: 0;
+  }
+
+  section {
+    display: contents;
+  }
+
+  article {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: white;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  article:target {
+    display: flex;
+  }
+}

test/styles/style.scss

@@ -1,33 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-@media screen {
-
-  body {
-    background: black;
-    margin: 0;
-    padding: 0;
-  }
-
-  section {
-    display: contents;
-  }
-
-  article {
-	display: none;
-    background: white;
-    position: absolute;
-    border: 1px solid red;
-  }
-
-  article:target {
-    display: block;
-  }
-}