work on site

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;
+}