lukaszett/Coding_Art_KEW_22
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add slides / website

Browse source
This commit is contained in:
Lukas Z 2022-10-07 14:36:27 +02:00
parent f4ae47a532
commit 067c91b624
5 changed files with 121 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

BIN
dist/slides.pdf vendored Normal file
View file

Binary file not shown.

70
dist/website/index.html vendored Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Coding Art - Workshop für die KEW 2022</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<header id="title-block-header">
<h1 class="title">Coding Art - Workshop für die KEW 2022</h1>
</header>
<h2 id="ergebnisse-des-workshops">Ergebnisse des Workshops</h2>
<p><em>Hier ist noch nichts… wenn ihr mögt, können wir im Anschluss an
den Workshop eure Ergebnisse hier “ausstellen”!</em></p>
<h2 id="links">Links</h2>
<ul>
<li><a href="https://openprocessing.org/sketch/1642700">Interaktives
Tutorial</a></li>
<li><a href="https://editor.p5js.org">p5-Editor</a></li>
<li><a href="https://bmoren.github.io/p5js-cheat-sheet/">p5-Cheatsheet
mit vielen wichtigen Kommandos auf einen Blick</a></li>
<li>Code-Beispiele
<ul>
<li>Beispiel 1 (Shapes)</li>
<li>Beispiel 2 (Color)</li>
<li>Beispiel 3 (Interaktion)</li>
</ul></li>
<li><a href="https://ag-link.xyz">Mehr Informationen über die AG
Link</a></li>
</ul>
<h2 id="editor">Editor</h2>
<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="100%" height="700" src="https://editor.p5js.org/">
</iframe>
<h2 id="downloads">Downloads</h2>
<ul>
<li><a href="slides.pdf">Vortragsslides</a></li>
</ul>
<h2 id="weiterführende-links">Weiterführende Links</h2>
<ul>
<li><a href="https://p5js.org/reference/">p5
Bibliotheksreferenz</a><br />
Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js
bereitstellt.</li>
<li><a href="TODO">Interaktive Paramterübersicht</a></li>
<li><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
Train</a><br />
Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
sympathische Art und Weise vorgestellt werden.</li>
<li><a href="openprocessing.org">OpenProcessing</a><br />
Erkundet Tausende Beispiele von p5js-Sketches</li>
</ul>
<footer>
<a href="https://ag-link.xyz/impressum/">Impressum / Datenschutz</a>
</footer>
</body>
</html>

BIN
dist/website/slides.pdf vendored Normal file
View file

Binary file not shown.

51
dist/website/style.css vendored Normal file
View file

@ -0,0 +1,51 @@
: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;
}
footer {
text-align: center;
margin-top: 4em;
padding-bottom: 1em;
}
a {
text-decoration: none;
font-weight: bold;
color: var(--link-color);
}
h2 {
margin-top: 1.5em;
}
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;
}
li {
padding: 0.5em 0 0 0;
}
li li {
padding: 0;
}