From aea05c43a773c4204d6704459e765c350397f871 Mon Sep 17 00:00:00 2001
From: lukaszett <mail@lz-a.de>
Date: Sun, 11 Sep 2022 10:33:20 +0200
Subject: [PATCH] add website

---
 Makefile                | 12 ++++++++++--
 dist/website/index.html | 26 ++++++++++++++++++++++++++
 website/site.md         | 32 ++++++++++++++++++++++++++++++++
 website/style.css       |  8 ++++++++
 4 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 dist/website/index.html
 create mode 100644 website/site.md
 create mode 100644 website/style.css

diff --git a/Makefile b/Makefile
index 48df1ce..454f3fa 100644
--- a/Makefile
+++ b/Makefile
@@ -1,2 +1,10 @@
-build:
-	pandoc slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole
+build: slides website
+
+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
diff --git a/dist/website/index.html b/dist/website/index.html
new file mode 100644
index 0000000..de0b60f
--- /dev/null
+++ b/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>
diff --git a/website/site.md b/website/site.md
new file mode 100644
index 0000000..f643fbc
--- /dev/null
+++ b/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>
diff --git a/website/style.css b/website/style.css
new file mode 100644
index 0000000..31ad7f7
--- /dev/null
+++ b/website/style.css
@@ -0,0 +1,8 @@
+html {
+    background-color: #fdf6e3 !important;
+}
+
+footer {
+    text-align: center;
+    margin-top: 3em;
+}