suzan 2 years ago
commit fa9aacd384

@ -46,6 +46,11 @@
new CircleType(ups[i]).radius(160);
}
var downs = document.querySelectorAll(".down");
for (let i = 0; i < downs.length; i++) {
new CircleType(downs[i]).dir(-1).radius(160);
}
</script>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 MiB

@ -9,6 +9,7 @@
position: relative;
border-radius: 100%;
text-align: center;
break-inside: avoid;
}
.card > img {
width: calc(100% - 8mm - 8mm);
@ -22,8 +23,15 @@ p {
position: absolute;
margin: 2mm;
width: 100%;
font-family: "Trickster";
}
p.down {
bottom:0;
}
@font-face {
font-family: "Trickster";
src:
url("trickster-COLRv1.otf") format("opentype");
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -5,7 +5,7 @@
<meta charset="utf-8">
<script src="paged.js/paged.polyfill.js"></script>
<link href="paged.js/pagedjs.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="print_style.css">
</head>
<body>
<div id="contenteo">{{ content }}</div>

@ -12,7 +12,7 @@ all_html = ""
all_md = ""
html=[]
folders = glob("content/*")
folders = glob("./*")
print(folders)
for folder in folders:
@ -27,14 +27,9 @@ for folder in folders:
file = file.replace(" ", "\ ")
print(file)
# html_file = file.replace(".md", ".html")
# pandoc_cmd = "pandoc -s -c style.css -f markdown -t html " + file + " -o " + html_file
# os.system(pandoc_cmd)
# print("standalone html files saved!")
pandoc2 = "pandoc -f markdown -t html " + file
html_data = subprocess.run(pandoc2, capture_output=True, text=True).stdout
print("html_data: ", html_data)
# pandoc2 = "pandoc -f markdown -t html " + file
# html_data = subprocess.run(pandoc2, capture_output=True, text=True).stdout
# print("html_data: ", html_data)
# #editing the html before creatings the main file
# # filename = os.path.basename(file)
@ -46,24 +41,30 @@ for folder in folders:
# # and then collect all that content into a variable called "all_html"
# # add this content to all_html
# all_html = all_html + html_data
html.append(html_data)
# html.append(html_data)
md_data = open(file).read()
all_md += "\n"+md_data
#create md and use pandoc to convert to html
output = open("booklet.md", "w")
#create booklet.md
output = open("00-booklet/booklet.md", "w")
output.write(all_md)
output.close()
# pandoc_md = "pandoc -s --toc -c style.css -f markdown -t html booklet.md -o booklet.html"
# os.system(pandoc_md)
print("booklet md files saved!")
env = jinja2.Environment(loader=jinja2.FileSystemLoader("."))
# use pandoc to convert booklet.md to html
pandoc_command = "pandoc --toc -f markdown -t html 00-booklet/booklet.md"
#html_data = subprocess.run(pandoc_command, capture_output=True, text=True).stdout
html_data = subprocess.check_output(pandoc_command, shell=True, text=True,encoding="utf-8")
print("html has been generated!")
#print("html data!", html_data)
#html to template environment
env = jinja2.Environment(loader=jinja2.FileSystemLoader("00-booklet"))
template = env.get_template("booklet.template.html")
booklet_html = template.render(content=html)
booklet_html = template.render(content=html_data)
print("this is the html: ", booklet_html)
output = open("booklet.html", "w")
output = open("00-booklet/booklet.html", "w")
output.write(booklet_html)
output.close()
print("booklet html files saved!")

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.93 343.57"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#000;stroke-miterlimit:10;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="87.21" y1="0.44" x2="30.34" y2="65.23"/><line class="cls-1" x1="51.15" y1="281.26" x2="30.34" y2="65.23"/><line class="cls-1" x1="87.21" y1="0.44" x2="169.73" y2="43.38"/><line class="cls-1" x1="187.76" y1="273.78" x2="169.73" y2="43.38"/><line class="cls-1" x1="51.15" y1="281.26" x2="128.47" y2="341.74"/><line class="cls-1" x1="187.76" y1="273.78" x2="128.47" y2="341.74"/><line class="cls-1" x1="30.34" y1="65.23" x2="71.26" y2="78.06"/><line class="cls-1" x1="87.21" y1="0.44" x2="71.26" y2="78.06"/><line class="cls-1" x1="125.35" y1="66.69" x2="169.73" y2="43.38"/><line class="cls-1" x1="87.21" y1="0.44" x2="125.35" y2="66.69"/><line class="cls-1" x1="71.26" y1="78.06" x2="125.35" y2="66.69"/><line class="cls-1" x1="51.15" y1="281.26" x2="98.3" y2="292.75"/><line class="cls-1" x1="187.76" y1="273.78" x2="147.54" y2="294.31"/><line class="cls-1" x1="71.26" y1="78.06" x2="98.3" y2="292.75"/><line class="cls-1" x1="125.35" y1="66.69" x2="147.54" y2="294.31"/><line class="cls-1" x1="98.3" y1="292.75" x2="147.54" y2="294.31"/><line class="cls-1" x1="51.15" y1="281.26" x2="94.47" y2="262.29"/><line class="cls-1" x1="187.76" y1="273.78" x2="147.54" y2="262.29"/><line class="cls-1" x1="94.69" y1="262.37" x2="147.25" y2="262.37"/><line class="cls-1" x1="30.34" y1="65.23" x2="79.23" y2="49.99"/><line class="cls-1" x1="169.73" y1="43.38" x2="112.83" y2="44.95"/><line class="cls-1" x1="79.23" y1="49.99" x2="112.83" y2="44.95"/><line class="cls-1" x1="98.3" y1="292.75" x2="128.47" y2="341.74"/><line class="cls-1" x1="147.54" y1="294.31" x2="128.47" y2="341.74"/><line class="cls-1" x1="207.7" y1="198.91" x2="254.88" y2="160.13"/><line class="cls-1" x1="254.88" y1="160.13" x2="274.43" y2="204.55"/><line class="cls-1" x1="207.7" y1="198.91" x2="234.52" y2="210.01"/><line class="cls-1" x1="254.88" y1="160.13" x2="234.52" y2="210.01"/><line class="cls-1" x1="274.43" y1="204.55" x2="251.18" y2="211.43"/><line class="cls-1" x1="254.88" y1="160.13" x2="251.18" y2="211.43"/><line class="cls-1" x1="207.7" y1="198.91" x2="187.86" y2="309.38"/><line class="cls-1" x1="216.99" y1="343.15" x2="187.86" y2="309.38"/><line class="cls-1" x1="234.52" y1="210.01" x2="215.37" y2="317.75"/><line class="cls-1" x1="251.18" y1="211.43" x2="234.52" y2="210.01"/><line class="cls-1" x1="274.43" y1="204.55" x2="261.03" y2="314.81"/><line class="cls-1" x1="216.99" y1="343.15" x2="261.03" y2="314.81"/><line class="cls-1" x1="236.11" y1="320.97" x2="251.18" y2="211.43"/><line class="cls-1" x1="261.03" y1="314.81" x2="236.11" y2="320.97"/><line class="cls-1" x1="215.37" y1="317.75" x2="187.86" y2="309.38"/><line class="cls-1" x1="236.11" y1="320.97" x2="215.37" y2="317.75"/><line class="cls-1" x1="216.99" y1="343.15" x2="215.37" y2="317.75"/><line class="cls-1" x1="236.11" y1="320.97" x2="216.99" y2="343.15"/><line class="cls-1" x1="207.7" y1="198.91" x2="239.76" y2="197.18"/><line class="cls-1" x1="274.43" y1="204.55" x2="252.47" y2="199.99"/><line class="cls-1" x1="239.76" y1="197.18" x2="252.47" y2="199.99"/><line class="cls-1" x1="187.86" y1="309.38" x2="217.12" y2="307.89"/><line class="cls-1" x1="261.03" y1="314.81" x2="237.82" y2="308.55"/><line class="cls-1" x1="217.12" y1="307.89" x2="237.82" y2="308.55"/><polygon class="cls-1" points="212.21 39.25 194.93 38.02 184.12 51.54 179.96 34.73 163.75 28.63 178.45 19.48 179.25 2.17 192.5 13.33 209.2 8.74 202.68 24.79 212.21 39.25"/><polygon class="cls-1" points="219.22 65.69 224.8 64.03 226.6 58.49 229.9 63.29 235.72 63.29 232.18 67.91 233.98 73.45 228.49 71.51 223.78 74.93 223.93 69.11 219.22 65.69"/><polygon class="cls-2" points="207.02 156.49 200.23 155.33 195.42 160.26 194.43 153.44 188.25 150.39 194.43 147.34 195.43 140.52 200.23 145.46 207.02 144.3 203.81 150.39 207.02 156.49"/><polygon class="cls-2" points="252.61 102.26 253.44 113.9 263.5 119.82 252.68 124.2 250.16 135.6 242.65 126.67 231.04 127.79 237.21 117.89 232.55 107.19 243.88 110 252.61 102.26"/><polygon class="cls-1" points="19.9 220.43 13.11 219.27 8.29 224.2 7.31 217.38 1.13 214.33 7.31 211.28 8.3 204.46 13.11 209.4 19.9 208.24 16.69 214.33 19.9 220.43"/><polygon class="cls-2" points="44.21 272.76 38.01 282.64 42.64 293.36 31.32 290.51 22.56 298.22 21.77 286.58 11.73 280.63 22.56 276.28 25.11 264.89 32.6 273.85 44.21 272.76"/></g></g></svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -13,10 +13,10 @@
<script>
console.log("hey there");
function preload(){
img=loadImage('wheel-of-fortune')
img=loadImage('wheel.svg')
}
function setup() {
createCanvas(windowWidth, windowHeight);
createCanvas(windowWidth/2, windowHeight/2);
button = createButton("spin the wheel!");
button.position(windowWidth/2-250, windowHeight/2);
button.mousePressed(spin);
@ -34,10 +34,10 @@ function card(){
console.log("hey pop up here");
}
function draw() {
background(220);
// background(220);
imageMode(CENTER);
angleMode(DEGREES);
translate (windowWidth/2, windowHeight/2);
translate (windowWidth/4, windowHeight/4);
rotate(currentSpinning);
image (img,0,0,200,200);
currentSpinning = currentSpinning+10;
@ -65,4 +65,8 @@ function draw() {
<br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune you will find at https://issue.xpub.nl/20/wheel.
After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to thankful of an answer to that question by looking at it and the tiny film simultaneously.</p>
</div>
<img class="top-left-corner" src="crystals.svg">
</body>

@ -5,16 +5,15 @@ html {
html::before { /* Add a pseudo-element to the html element */
content: "";
position: fixed;
top: 0;
left: 0;
width: 200vw;
height: 200vh;
top: -50vh;
left: -50vw;
right: 0;
bottom: 0;
z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
background: url(bg-images/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 200%;
/* Add animation properties */
-webkit-animation: spin 100s linear infinite;
@ -42,6 +41,20 @@ html {
}
}
.top-left-corner{
position: fixed;
top: 0px;
left: 0px;
transform: translate(-50%,-50%);
width: 50vw;
filter: hue-rotate(180deg);
}
main{
text-align: center;
}
h2 {
text-align: center;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 72 KiB

Loading…
Cancel
Save