add website

Makefile

@@ -1,2 +1,10 @@
-build:
+build: slides website
-	pandoc slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole
+
+slides:
+	pandoc slides/slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole
+
+website:
+	pandoc website/site.md -o dist/website/index.html
+
+qrcode:
+	qrencode -t PNG -s 5 -o imgs/menti.png https://www.menti.com/9w1aj8bb8o

dist/website/index.html

@@ -0,0 +1,26 @@
+<p>–</p>
+<hr />
+<h1 id="links">Links</h1>
+<ul>
+<li>Einstieg</li>
+<li>p5-Editor</li>
+<li>Code-Beispiele
+<ul>
+<li>Beispiel 1 (Shapes)</li>
+<li>Beispiel 2 (Color)</li>
+<li>Beispiel 3 (Interaktion)</li>
+</ul></li>
+</ul>
+<h2 id="weiterführende-links">Weiterführende Links</h2>
+<ul>
+<li>p5 Bibliotheksreferenz</li>
+<li>Interaktive Paramterübersicht</li>
+<li>Daniel Shiffman</li>
+<li>OpenProcessing</li>
+</ul>
+<h1 id="editor">Editor</h1>
+<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="800" height="600" src="https://editor.p5js.org/">
+</iframe>
+<footer>
+<a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
+</footer>

website/site.md

@@ -0,0 +1,32 @@
+--
+
+---
+
+# Links
+
+ - Einstieg
+ - p5-Editor 
+ - Code-Beispiele
+   - Beispiel 1 (Shapes)
+   - Beispiel 2 (Color)
+   - Beispiel 3 (Interaktion)
+
+## Weiterführende Links
+
+ - p5 Bibliotheksreferenz
+ - Interaktive Paramterübersicht
+ - Daniel Shiffman
+ - OpenProcessing
+
+# Editor
+
+<iframe id="p5.js web editor embed"
+    title="p5.js web editor embed"
+    width="800"
+    height="600"
+    src="https://editor.p5js.org/">
+</iframe>
+
+<footer>
+    <a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
+</footer>

website/style.css

@@ -0,0 +1,8 @@
+html {
+    background-color: #fdf6e3 !important;
+}
+
+footer {
+    text-align: center;
+    margin-top: 3em;
+}