dont track dist

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+dist

Makefile

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

dist/website/index.html

@@ -1,26 +0,0 @@
-<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>

slides/slides.md

@@ -1,7 +1,7 @@
 ---
 title: Coding Art!
 subtitle: Workshop für die kritischen Einführungswochen 2022
-author: AG Link für kritische Informatik
+author: AG Link für kritische Informatik, Marie und Lukas
 date: "11. Oktober 2022"
 classoption: "aspectratio=169"
 header-includes:
@@ -14,6 +14,16 @@ header-includes:
 
 - Marie und Lukas 
 - AG Link für kritische Informatik 
+  - **[ag-link.xyz](https://ag-link.xyz)**
+
+## Ablauf
+
+1. -> Einstieg <-
+2. Einführung p5js
+3. Interaktives Tutorial in Kleingruppe
+4. Beispiele generativer Kunst
+5. Eigene Kunst in Kleingruppen
+6. Abschluss
 
 ## Was haben wir heute vor?
 
@@ -34,4 +44,4 @@ header-includes:
 
 ## P5.JS
 
-- **Livedemo!*
+- **Livedemo!**

website/site.md

@@ -1,32 +1,37 @@
---
+---
-
+title: Coding Art - Workshop für die KEW 2022
 ---
 
-# Links
+## Links
 
- - Einstieg
+ - [Interaktives Tutorial](https://openprocessing.org/sketch/1642700)
- - p5-Editor 
+ - [p5-Editor](https://editor.p5js.org)
  - Code-Beispiele
    - Beispiel 1 (Shapes)
    - Beispiel 2 (Color)
    - Beispiel 3 (Interaktion)
+ - [Mehr Informationen über die AG Link](https://ag-link.xyz)
 
-## Weiterführende Links
 
- - p5 Bibliotheksreferenz
+## Editor
- - Interaktive Paramterübersicht
- - Daniel Shiffman
- - OpenProcessing
-
-# Editor
 
 <iframe id="p5.js web editor embed"
     title="p5.js web editor embed"
-    width="800"
+    width="100%"
-    height="600"
+    height="800"
     src="https://editor.p5js.org/">
 </iframe>
 
+## Downloads
+ - [Vortragsslides](slides.pdf)
+
+## Weiterführende Links
+
+ - [p5 Bibliotheksreferenz](https://p5js.org/reference/)
+ - [Interaktive Paramterübersicht](TODO)
+ - [Daniel Shiffman - The Coding Train](https://thecodingtrain.com)
+ - [OpenProcessing](openprocessing.org)
+
 <footer>
-    <a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
+    [Impressum / Datenschutz](https://ag-link.xyz/impressum/)
 </footer>

website/style.css

@@ -1,4 +1,17 @@
+:root {
+    --link-color: #00755e;
+    --visited-color: #00755e;
+}
+
 html {
+    font-family: sans-serif;
+    size: 12px;
+}
+
+body {
+    width: 80%;
+    max-width: 1024px;
+    margin: auto;
     background-color: #fdf6e3 !important;
 }
 
@@ -6,3 +19,20 @@ footer {
     text-align: center;
     margin-top: 3em;
 }
+
+
+a { 
+    text-decoration: none;
+    font-weight: bold; 
+    color: var(--link-color);
+}
+
+h2:after {
+    content: "";
+    background-image: url("https://ag-link.xyz/assets/img/connection.png"); 
+    background-size: contain;
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-left: .3em;
+}