Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stylesheet injection on iframe #8

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Stylesheet injection on iframe #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e37731
stylesheet
z4yross Aug 31, 2022
bc6550c
margin variables on iframe
z4yross Aug 31, 2022
eecda16
stylesheet iframe example
z4yross Sep 2, 2022
9d8dc7d
stylesheet iframe example correction
z4yross Sep 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions content/docs/shortcodes/p5/iframe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 28 additions & 0 deletions content/sketches/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(){

}
76 changes: 76 additions & 0 deletions content/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%
);

box-shadow: 2px 2px 1px 0px #762543;
cursor: pointer;

transition: all 0.3s ease;
filter: brightness(100%);
}

.container > button:hover {
filter: brightness(120%);
}

.container > button:active {
box-shadow: inset 2px 2px 1px 0px #762543;
filter: brightness(90%);
}
6 changes: 6 additions & 0 deletions layouts/shortcodes/p5-iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,20 @@
{{ $lib3 := .Get `lib3` }}
{{ $lib4 := .Get `lib4` }}
{{ $lib5 := .Get `lib5` }}
{{ $stylesheet := .Get `stylesheet` }}

<iframe
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="
<!DOCTYPE html>
<html>
<head>
{{ 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 }}
Expand Down