From 0e37731b0e2d4cb5ec91c2bb31af8ddb231498ea Mon Sep 17 00:00:00 2001
From: z4yross <z4yross@gmail.com>
Date: Wed, 31 Aug 2022 13:04:57 -0500
Subject: [PATCH 1/4] stylesheet

---
 layouts/shortcodes/p5-iframe.html | 2 ++
 1 file changed, 2 insertions(+)
diff --git a/layouts/shortcodes/p5-iframe.html b/layouts/shortcodes/p5-iframe.html
index 1547b8d2..0c88b9c2 100644
--- a/layouts/shortcodes/p5-iframe.html
+++ b/layouts/shortcodes/p5-iframe.html
@@ -5,6 +5,7 @@
 {{ $lib3 := .Get `lib3` }}
 {{ $lib4 := .Get `lib4` }}
 {{ $lib5 := .Get `lib5` }}
+{{ $stylesheet := .Get `stylesheet` }}
 
 <iframe
   id="{{ strings.TrimSuffix ".js" (path.Base $sketch) }}"
@@ -13,6 +14,7 @@
         <!DOCTYPE html>
         <html>
           <head>
+            <link rel='stylesheet' href={{ $stylesheet }}>
             <script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/{{ default $defver (.Get `ver`) }}/p5.min.js></script>
             <script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/{{ default $defver (.Get `ver`) }}/addons/p5.sound.min.js></script>
             {{ if isset .Params "lib1" }} <script src={{ $lib1 }}></script> {{ end }}

From bc6550c65ac3856ef29ee26b151aea816eb2ac13 Mon Sep 17 00:00:00 2001
From: z4yross <z4yross@gmail.com>
Date: Wed, 31 Aug 2022 14:41:31 -0500
Subject: [PATCH 2/4] margin variables on iframe

---
 layouts/shortcodes/p5-iframe.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/layouts/shortcodes/p5-iframe.html b/layouts/shortcodes/p5-iframe.html
index 0c88b9c2..eb60a175 100644
--- a/layouts/shortcodes/p5-iframe.html
+++ b/layouts/shortcodes/p5-iframe.html
@@ -8,13 +8,17 @@
 {{ $stylesheet := .Get `stylesheet` }}
 
 <iframe
+  marginwidth="{{default 0 (.Get `marginWidth`)}}"
+  marginheight="{{default 0 (.Get `marginHegth`)}}"
+  frameborder="{{default 0 (.Get `frameBorder`)}}"
+  scrolling="{{default no (.Get `scrolling`)}}"
   id="{{ strings.TrimSuffix ".js" (path.Base $sketch) }}"
   style="width:{{ default "800" (.Get `width`) }}px; height:{{ default "600" (.Get `height`) }}px"
   srcdoc="
         <!DOCTYPE html>
         <html>
           <head>
-            <link rel='stylesheet' href={{ $stylesheet }}>
+            {{ if isset .Params "stylesheet" }} <link rel='stylesheet' href={{ $stylesheet }}> {{ end }}
             <script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/{{ default $defver (.Get `ver`) }}/p5.min.js></script>
             <script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/{{ default $defver (.Get `ver`) }}/addons/p5.sound.min.js></script>
             {{ if isset .Params "lib1" }} <script src={{ $lib1 }}></script> {{ end }}

From eecda16fcf5aed537c0d43d93653e98d036b5dbe Mon Sep 17 00:00:00 2001
From: z4yross <z4yross@gmail.com>
Date: Fri, 2 Sep 2022 13:18:56 -0500
Subject: [PATCH 3/4] stylesheet iframe example

---
 content/docs/shortcodes/p5/iframe.md | 10 ++++
 content/sketches/style.js            | 28 ++++++++++
 content/styles/style.css             | 76 ++++++++++++++++++++++++++++
 layouts/shortcodes/p5-iframe.html    |  8 +--
 4 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 content/sketches/style.js
 create mode 100644 content/styles/style.css

diff --git a/content/docs/shortcodes/p5/iframe.md b/content/docs/shortcodes/p5/iframe.md
index 93dbe5a7..fb85b6de 100644
--- a/content/docs/shortcodes/p5/iframe.md
+++ b/content/docs/shortcodes/p5/iframe.md
@@ -44,6 +44,16 @@ Example took from the [p5 examples](https://p5js.org/examples/sound-sound-effect
 
 {{< p5-iframe sketch="/showcase/sketches/sound.js" width="225" height="225" >}}
 
+## Styling
+
+{{< details title="p5-iframe markdown" open=false >}}
+{{< highlight html >}}
+{{</* p5-iframe sketch="/showcase/sketches/style.js" width="225" height="225" stylesheet="/showcase/styles/style.css" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" */>}}
+{{< /highlight >}}
+{{< /details >}}
+
+{{< p5-iframe sketch="/showcase/sketches/style.js" width="225" height="225" stylesheet="/showcase/styles/style.css" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no">}}
+
 # p5-global-iframe
 
 ```html
diff --git a/content/sketches/style.js b/content/sketches/style.js
new file mode 100644
index 00000000..927d6156
--- /dev/null
+++ b/content/sketches/style.js
@@ -0,0 +1,28 @@
+let div;
+let data1;
+let data2;
+let button;
+
+function setup(){
+    createCanvas(255, 255);
+    background(0);
+
+
+    div = createDiv();
+
+    data1 = createInput("");
+    data1.attribute('placeholder', 'test input');
+
+    button = createButton("test button");
+
+    div.class("container");
+
+    div.child(data1);
+    div.child(button);
+
+    div.position(0, 0)
+}
+
+function draw(){
+
+}
\ No newline at end of file
diff --git a/content/styles/style.css b/content/styles/style.css
new file mode 100644
index 00000000..3a77f036
--- /dev/null
+++ b/content/styles/style.css
@@ -0,0 +1,76 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+.container {
+  width: calc(100% - 20px);
+  height: 100%;
+  margin: 0 10px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.container > * {
+  height: 35px;
+  padding: 0;
+  margin-top: 10px;
+  border-radius: 15px;
+  border: none;
+
+  font-family: "Montserrat", sans-serif;
+  font-weight: 800;
+}
+
+.container > *:focus {
+  outline: none;
+}
+
+.container > *::selection {
+  background: hsl(282deg 62% 53%);
+  color: white;
+}
+
+.container > input {
+  padding: 0 10px;
+  text-transform: capitalize;
+  caret-color: hsl(338deg 95% 53%);
+}
+
+.container > button {
+  text-transform: uppercase;
+
+  color: white;
+
+  background-image: linear-gradient(
+    135deg,
+    hsl(282deg 62% 53%) 1%,
+    hsl(288deg 58% 51%) 29%,
+    hsl(294deg 56% 49%) 43%,
+    hsl(300deg 56% 48%) 55%,
+    hsl(306deg 59% 49%) 64%,
+    hsl(312deg 62% 49%) 73%,
+    hsl(316deg 66% 50%) 80%,
+    hsl(321deg 70% 51%) 86%,
+    hsl(325deg 75% 52%) 91%,
+    hsl(328deg 80% 52%) 95%,
+    hsl(332deg 85% 52%) 98%,
+    hsl(335deg 90% 53%) 99%,
+    hsl(338deg 95% 53%) 100%
+  );
+
+  filter: saturate(70%);
+  transition: filter 0.5s linear;
+
+  box-shadow: 2px 2px 1px 0px #762543;
+
+  cursor: pointer;
+}
+
+.container > button:hover {
+  filter: saturate(100%);
+}
+
+.container > button:active {
+  box-shadow: inset 2px 2px 1px 0px #762543;
+}
diff --git a/layouts/shortcodes/p5-iframe.html b/layouts/shortcodes/p5-iframe.html
index eb60a175..2e321667 100644
--- a/layouts/shortcodes/p5-iframe.html
+++ b/layouts/shortcodes/p5-iframe.html
@@ -8,10 +8,10 @@
 {{ $stylesheet := .Get `stylesheet` }}
 
 <iframe
-  marginwidth="{{default 0 (.Get `marginWidth`)}}"
-  marginheight="{{default 0 (.Get `marginHegth`)}}"
-  frameborder="{{default 0 (.Get `frameBorder`)}}"
-  scrolling="{{default no (.Get `scrolling`)}}"
+  marginheight="{{default "10" (.Get `marginHeight`)}}"
+  marginwidth="{{default "10" (.Get `marginWidth`)}}"
+  frameborder="{{default "1" (.Get `frameBorder`)}}"
+  scrolling="{{default "no" (.Get `scrolling`)}}"
   id="{{ strings.TrimSuffix ".js" (path.Base $sketch) }}"
   style="width:{{ default "800" (.Get `width`) }}px; height:{{ default "600" (.Get `height`) }}px"
   srcdoc="

From 9d8dc7d80a709652da5872a09bff6915e1e5fc85 Mon Sep 17 00:00:00 2001
From: z4yross <z4yross@gmail.com>
Date: Fri, 2 Sep 2022 13:36:35 -0500
Subject: [PATCH 4/4] stylesheet iframe example correction

---
 content/styles/style.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/styles/style.css b/content/styles/style.css
index 3a77f036..16c9ff4e 100644
--- a/content/styles/style.css
+++ b/content/styles/style.css
@@ -59,18 +59,18 @@
     hsl(338deg 95% 53%) 100%
   );
 
-  filter: saturate(70%);
-  transition: filter 0.5s linear;
-
   box-shadow: 2px 2px 1px 0px #762543;
-
   cursor: pointer;
+
+  transition: all 0.3s ease;
+  filter: brightness(100%);
 }
 
 .container > button:hover {
-  filter: saturate(100%);
+  filter: brightness(120%);
 }
 
 .container > button:active {
   box-shadow: inset 2px 2px 1px 0px #762543;
+  filter: brightness(90%);
 }
