diff --git a/docs/README.md b/docs/README.md
index f65b90b..e5509fd 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,43 +1,48 @@
# [p5.genzine](https://munusshih.github.io/p5.genzine/)
-p5.(gen)Zine is a free and friendly library created by [Munus Shih](https://munusshih.com) and [Iley Cao](https://www.ileycao.com/) for anyone curious about creative code and zine-making. It utilizes the p5.js library to experiment with collaborative zine-coding, forking, remixing and explore what generative coded zine can do to contribute to community building.
+p5.(gen)Zine is an open-sourced and friendly library created by [Munus Shih](https://munusshih.com) and [Iley Cao](https://www.ileycao.com/) for anyone curious about creative code and zine-making.
-See the [Quick start](intro/quickstart.md) guide for more details.
-
-**CURRENT STATUS**: `v1.2` is in beta. Please feel free to send issues or pull request us!
-
-## Documentation / Tutorials
-- You can play with [this interactive documentation]() in OpenProcessing (not finished!)
-- You can find the recording of a workshop we taught at 2022's Virtual Creative Coding Festival [here](https://www.youtube.com/watch?v=lAQc3Ij3O8k&ab_channel=ProcessingFoundation).
+
-```link-preview
-https://www.youtube.com/watch?v=lAQc3Ij3O8k&ab_channel=ProcessingFoundation
-```
+It utilizes the p5.js library to experiment with collaborative zine-coding, forking, remixing and explore what generative coded zine can do to contribute to community building.
-- [This is the link](https://docs.google.com/presentation/d/1EJhxkK4Y07TfD7r6gUuXITqdYWmzFHE_BbPqNvFViuM/edit?usp=sharing) to our slides we used to teach `function` and `p5.gen(zine)` at POWRPLNT.
-- [There is the link](https://docs.google.com/presentation/d/1VEQN4Ro4POYxDtKL6aLBGOjlln6rnFerCH_ebJS2VUE/edit?usp=sharing) to the talk that Munus gave at 2023's Open Source Art Contributor's Conference.
+**CURRENT STATUS**: `v1.2` is in beta. Please feel free to send issues or pull request us!
-## Next Step
+## Getting Started
+
-Some of the functions we are thinking of adding includes
-- an `all` namespacing function, etc. `all.pageNumbers()`
-- more typography functions, etc. `columns()`, `border()`, `gutter()`
-- a more accessible way of rendering the canvas
-- save `styles()`, a hierarchy-based way of writing code, etc. `h1, h2`
-- add more helper functions, etc.`setFillStroke()`
-- making it mobile friendly (currently jsPDF doesn't support mobile download)
-- different way to flip through the zine
-- more detailed printSettings: `paper`, `borderline`, `highres`, `mp4 export`
+Easily import the p5.js and p5.genzine library and start making your own zine!
+```HTML
+
+
+
+```
+We will put the below starter code below in our `sketch.js` so we have something in our code.
+
+```Javascript
+const zine = {
+ title: "Insert Title Here",
+ author: "Your Beautiful Name",
+ description: "Your first p5.genzine!"
+}
+
+function setupPage() {
+// This replaces the old p5 setup()
+}
+
+function drawPage() {
+// This replaces the old p5 draw()
+}
+```
-## You Can Help ❤️
+See the [Quick start](intro/quickstart.md) guide for more details.
-- By making a zine out of this and we can link them here :)
-- Use them in your class, workshops or just simply sharing!
-- Think of creative ways of using this library!
-- Write tutorial/documentation on ur exp using this library
-- issues or pull request us on how to enhance/fix the code
+## Other Tutorials & Resources
-## License
+
-It is a open source project with [MIT license](https://github.com/munusshih/p5.genzine/blob/main/license).
+- You can play with [this interactive documentation]() in OpenProcessing (not finished!)
+- You can find the recording of a workshop we taught at 2022's Virtual Creative Coding Festival [here](https://www.youtube.com/watch?v=lAQc3Ij3O8k&ab_channel=ProcessingFoundation).
+- [This is the link](https://docs.google.com/presentation/d/1EJhxkK4Y07TfD7r6gUuXITqdYWmzFHE_BbPqNvFViuM/edit?usp=sharing) to our slides we used to teach `function` and `p5.gen(zine)` at POWRPLNT.
+- [There is the link](https://docs.google.com/presentation/d/1VEQN4Ro4POYxDtKL6aLBGOjlln6rnFerCH_ebJS2VUE/edit?usp=sharing) to the talk that Munus gave at 2023's Open Source Art Contributor's Conference.
\ No newline at end of file
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 235b56b..653d560 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -2,23 +2,22 @@
- 🎉 Introduction
- [Homepage]()
+ - [Quick Start](intro/quickstart.md)
- [Example/Gallery](intro/example.md)
- - [Motivation](intro/motivation.md)
+ - [About](intro/about.md)
- ✍️ Getting Started
- - [Quick Start](intro/quickstart.md)
- - [Installation](learn/installation.md)
+ - [Forking & Remix](learn/fork-remix.md)
- [Basic Functions](learn/basic.md)
- [Interactivity](learn/interact.md)
- - [Randomize & Generative](learn/random.md)
+ - [Export & Print](learn/export.md)
- 📚 Further References
- [Custom Functions](learn/custom.md)
- - [System & Accessibility](learn/custom.md)
+ - [System & Templates](learn/system.md)
- [Multiplayer](learn/multi.md)
- - [Forking & Remixing](learn/multi.md)
- [Next Step](learn/next-step.md)
-- 💻 Code
+
diff --git a/docs/img/export.gif b/docs/img/export.gif
new file mode 100644
index 0000000..74b1265
Binary files /dev/null and b/docs/img/export.gif differ
diff --git a/docs/img/p5-genzine.gif b/docs/img/p5-genzine.gif
new file mode 100644
index 0000000..e2ab2f6
Binary files /dev/null and b/docs/img/p5-genzine.gif differ
diff --git a/docs/img/previews.gif b/docs/img/previews.gif
new file mode 100644
index 0000000..5c4ec52
Binary files /dev/null and b/docs/img/previews.gif differ
diff --git a/docs/img/workshop.gif b/docs/img/workshop.gif
new file mode 100644
index 0000000..3bd0ace
Binary files /dev/null and b/docs/img/workshop.gif differ
diff --git a/docs/index.html b/docs/index.html
index 72fb519..bb19e1a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,8 +10,6 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-
@@ -21,7 +19,7 @@
window.$docsify = {
name: 'p5.genzine',
repo: 'munusshih/p5.genzine',
- coverpage: true,
+ //coverpage: true,
el: '#main',
search: 'auto', // default
diff --git a/docs/intro/about.md b/docs/intro/about.md
new file mode 100644
index 0000000..1211414
--- /dev/null
+++ b/docs/intro/about.md
@@ -0,0 +1,26 @@
+# About
+
+## Next Step
+
+Some of the functions we are thinking of adding includes
+- an `all` namespacing function, etc. `all.pageNumbers()`
+- more typography functions, etc. `columns()`, `border()`, `gutter()`
+- a more accessible way of rendering the canvas
+- save `styles()`, a hierarchy-based way of writing code, etc. `h1, h2`
+- add more helper functions, etc.`setFillStroke()`
+- making it mobile friendly (currently jsPDF doesn't support mobile download)
+- different way to flip through the zine
+- more detailed printSettings: `paper`, `borderline`, `highres`, `mp4 export`
+
+
+## You Can Help ❤️
+
+- By making a zine out of this and we can link them here :)
+- Use them in your class, workshops or just simply sharing!
+- Think of creative ways of using this library!
+- Write tutorial/documentation on ur exp using this library
+- issues or pull request us on how to enhance/fix the code
+
+## License
+
+It is a open source project with [MIT license](https://github.com/munusshih/p5.genzine/blob/main/license).
\ No newline at end of file
diff --git a/docs/main.css b/docs/main.css
index d2ba346..c8dfd73 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -865,4 +865,7 @@ code .token {
min-height: 1.5rem;
position: relative;
left: auto;
+}
+.fab.light-green{
+ background: var(--theme-color, #42b983)!important;
}
\ No newline at end of file
diff --git a/docs/p5.(gen)zine.js b/docs/p5.(gen)zine.js
index 37a3685..144aaac 100644
--- a/docs/p5.(gen)zine.js
+++ b/docs/p5.(gen)zine.js
@@ -1130,7 +1130,7 @@ function drawBorder() {
push();
preSet();
- clear();
+ // clear();
image(cover, width / 2 - aWidth/2, gap, aWidth, aHeight);
image(one, width / 2 - aWidth, gap+(aHeight + gap), aWidth*2, aHeight);