contents generator

generate_single.py

@@ -0,0 +1,30 @@
+from jinja2 import Environment, PackageLoader, select_autoescape
+import json
+import http.server
+import socketserver
+
+
+
+def main():
+
+    with open('contents.json', 'r') as f:
+        contents = json.load(f)
+
+
+    # generate the template
+
+    env = Environment(
+        loader=PackageLoader("postit"),
+        autoescape=select_autoescape()
+    )
+
+
+    template = env.get_template('postit.html')
+    render = template.render(contents=contents)
+
+    with open(f'test/posti.html', 'w') as output:
+        output.write(render)
+
+
+if __name__ == "__main__":
+   main()

katamari/contents.md

@@ -0,0 +1,207 @@
+---
+title: Katamari Fanfic
+credits: Mitsa, Kamo, Erica
+contents:
+    - img: frog.png
+      alt: Frog
+    - hello im the frog today im here on my lily pad ehe
+    - slurp a fly gnam ate it
+
+    - alt: Prince
+      img: prince.jpg
+    - roll rooooollllll
+    - papa should be proud of me
+    - vrooom vroooom
+    - ohh papa can be so scary
+    - he is looking me from the above all the time
+    - everytime papa is sad my whole universe collapses
+
+    - alt: Katamari Ball
+      img: katamari-ball-1.jpg
+    - hello frog
+    - hello frog hello giraffe
+    - hello frog hello giraffe hello lipstick
+    - hello frog hello giraffe hello lipstick hello rubber
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale hello waves
+
+    - alt: Giraffe
+      img: giraffe.png
+    - hello katamari ball
+
+    - alt: King of all Cosmos
+      img: king.png
+    - PRINCEEEEEEEEEEEEEEEEE
+
+    - alt: Prince
+      img: prince.jpg
+    - OMG I cannot fail the king of all Cosmos
+
+    - alt: Frog
+      img: frog.png
+    - What do they do a giraffe and a kettle together?
+
+    - img: cigarette.jpeg
+      alt: Cigarette
+    - they roll a katamari
+
+    - img: joint.jpg
+      alt: Joint
+    - 🙄
+
+    - img: carpet.webp
+      alt: Carpet
+    - this house is sooooo messy
+    - full of random things lying around
+    - bless the king of all Cosmos that takes care of all this chaos
+
+    - alt: King of all Cosmos
+      img: king-pantheon.jpg
+    - YOU HEAR THAT PRINCE?? BLESS ME
+
+    - img: carpet.webp
+      alt: Carpet
+    - NO BLESS ME
+
+    - img: gersande%20panteon.jpg
+      alt: XPUB1
+    - NO BLESS ME
+
+    - img: katamari-ball-2.jpg
+      alt: Katamari Ball
+    - hello book
+    - hello book hello shelves
+    - hello book hello shelves hello supermarket
+    - hello book hello shelves hello supermarket hello street
+    - hello book hello shelves hello supermarket hello street hello car
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello
+
+    - img: pantheon_rome.jpg
+      alt: King of all Cosmos
+    - I'm the SUN, I'm the BOSS, I'm the HOLE of the PANTHEON
+
+    - img: prince-junk.jpg
+      alt: Prince
+    - aaaaaaah more things more things more things more things
+    - a stample, a tampon, a rat, a frog
+    - ohhh a pile of cardsss let's take them all
+    - I am the prince and I'll restore sassy king's mess, my papa's faults
+
+    - img: moon.webp
+      alt: Moon
+    - I feel personally attacked by this katamari ball getting bigger and rounder
+
+    - img: earth.webp
+      alt: Earth
+    - It's not like it seems i can explain
+
+    - img: katamari-ball-3.jpg
+      alt: Katamari Ball
+    - hello moon
+    - hello moon hello earth
+    - hello moon hello earth hello rings of saturn
+    - hello moon hello earth hello rings of saturn hello orbital elements
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba hello mazinga
+
+    - img: queen.webp
+      alt: The Intellectual Katamari Meta Queen
+    - ah this is interesting bc the prince never talks.
+    - so then it could be that he's a ventriloque and the katamari speaks for him
+    - ahhh yes he talks through the katamari, wow so meta!
+    - yes like the katamari has one hidden face
+    - sometimes it's autonomous, other times it's the prince
+    - But what consistence has the katamari? is it crunchy or ??
+    - yes crunchy and porous, so it can attract the grainy items on earth like pieces of sauce
+
+    - img: king.png
+      alt: King of All Cosmos
+    - ARE WE MAKING A PHILOSOPHICAL CLUB OR WHAT?????
+    - ROOOLLL ROOOOLLLL ROOOOLLLLLLLLLL
+
+    - img: queen.webp
+      alt: The Intellectual Katamari Meta Queen
+    - nono.
+    - B🤍U🤍T
+    - maybe we can start one
+    - A💥N💥D
+    - I'm probably gonna be rolled up by katamari as I can see it coming here.
+    - ciao.
+
+    - img: katamari-ball-4.jpg
+      alt: Katamari Ball
+    - hello king
+    - hello king hello queen
+    - hello king hello queen hello prince
+    - hello king hello queen hello prince hello
+
+    - img: king-horror.jpg
+      alt: King of All Cosmos
+    - STOPP STOOOOPP DONT YOU ROLL ON US
+
+    - img: katamari-ball-5.jpg
+      alt: Katamari Ball
+    - Vroooooooooooom vroooooooooooooooooom
+
+    - img: prince.jpg
+      alt: Prince
+    - Papaaaaaaa I cannot control the katamariiiiiii (or maybe I can?)
+    - Oh nooooooooooooooo
+
+    - img: blibli.jpg
+      alt: Blibli
+    - Meow I want a philosophical club
+    - Blibli starts a Federici reading group
+
+    - Credits
+    - A rolling fan faction written by Mitsa Erica and Kamo
+
+    - Context
+    - Katamari Damacy is a videogame designed by Keita Takahashi and published by Namco.
+    - The gameplay consists in rolling on objects and accumulating them in order to make a super big katamari.
+    - The more objects you incorporate, the more big the katamari becomes.
+    - The objective of each level is to reach a certain size with the katamari.
+    - In the game you are the prince , the son of the king of all Kosmos.
+    - The king of all kosmos accidentally destroyed all the stars,
+    - that's why he makes YOU -his son- to work for him and roll katamaris,
+    - that are going to replace the stars
+---

lootbox/contents.md

@@ -1,20 +0,0 @@
----
-background: white
-folder: lootbox
-margin: 5
-page_height: 297
-page_width: 210
-post_height: 70
-post_width: 70
-title: What is a lottbox
-unit: mm
-contents:
-    - A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.
-    - type: image
-      src: img.png
-    - It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.
-    - But the loot box in its more recent and exploitative version is getting purchased with real money from a player.
-    - The player never knows what is inside of it.
-    - But they know that there is a chance of getting some items that they desire.
-    - Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.
----

lootbox/index.html

@@ -1,650 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta http-equiv="x-ua-compatible" content="ie=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>document</title>
-
-		<style>
-			html,
-			body {
-				margin: 0;
-				font-size: 0;
-				font-family:arial, helvetica, sans-serif;
-			}
-
-			* {
-				box-sizing: border-box;
-			}
-
-
-
-			hr {
-				page-break-after: always;
-				visibility: hidden;
-			}
-
-			table {
-				padding: 0;
-				margin: 5mm;
-				border-collapse: collapse;
-				border: 1px dashed gray;
-			}
-
-			td {
-				border: 1px dashed gray;
-				width: 70mm;
-				height: 70mm;
-				padding: 0;
-				background-color: white;
-			}
-
-			td img {
-				width: 100%;
-				height: 100%;
-				object-fit: contain;
-
-			}
-
-			.cell {
-				font-size: 18px;
-				line-height: 1.6;
-				text-align: center;
-				padding: 5mm;
-			}
-
-			@page { size: auto;  margin: 0mm; }
-		</style>
-	</head>
-	<body>
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">A loot box is a virtual box inside video games that provide a player with collectibles or essential items that make them progress inside the game.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-				<td>
-					
-					<img src="img.png" />
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">It derives from the loot, a bunch of goodies that a player can get as a reward after they conquer-win a super boss or level up.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But the loot box in its more recent and exploitative version is getting purchased with real money from a player.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">The player never knows what is inside of it.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">But they know that there is a chance of getting some items that they desire.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-		<table>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-			<tr>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-				<td>
-					
-
-					<div class="cell">Many times a loot box appear in the gameplay and it disappears quickly in order to be exclusive and make the player buy them without thinking too much.</div>
-
-					
-				</td>
-				
-			</tr>
-			
-		</table>
-		<hr />
-		
-	</body>
-</html>

onesentencegames/contents.md

@@ -1,27 +0,0 @@
----
-title: One sentence game ideas
-folder: onesentencegames
-page_width: 210
-page_height: 297
-post_width: 100
-post_height: 100
-margin: 5
-unit: mm
-background: springgreen;
-contents:
-    - type: image
-      src: goose.png
-    - you are in an empty room with 13 doors that are portals to 13 different worlds.
-    - 5 min slow-mo epidemics, visual transmitted
-    - every crisis is a simulation of another crisis / every crisis is a preparation for another crisis
-    - you receive a point for each moving/floating tile on the street you encounter
-    - you sleep and the more you sleep, the more the buildings around the bedroom collapse and the nature starts growing and invading the space
-    - thermoSTATE - The state where no citizen has to feel cold
-    - The same day is looping over and over, the goal is to figure out which decision will make you move on to the next day.
-    - A flat with no floors
-    - type: image
-      src: snake.png
-    - Hello, where are you, what can you see from there?
-    - you give a gift to someone else, that person gives another gift to someone else
-    - you meet a person in a corridor, but you're in a supermarket, in Canada<3:D
----

postit/fitText.js

@@ -0,0 +1,263 @@
+/**
+ * textFit v2.3.1
+ * Previously known as jQuery.textFit
+ * 11/2014 by STRML (strml.github.com)
+ * MIT License
+ *
+ * To use: textFit(document.getElementById('target-div'), options);
+ *
+ * Will make the *text* content inside a container scale to fit the container
+ * The container is required to have a set width and height
+ * Uses binary search to fit text with minimal layout calls.
+ * Version 2.0 does not use jQuery.
+ */
+/*global define:true, document:true, window:true, HTMLElement:true*/
+
+(function (root, factory) {
+	"use strict";
+
+	// UMD shim
+	if (typeof define === "function" && define.amd) {
+		// AMD
+		define([], factory);
+	} else if (typeof exports === "object") {
+		// Node/CommonJS
+		module.exports = factory();
+	} else {
+		// Browser
+		root.textFit = factory();
+	}
+})(typeof global === "object" ? global : this, function () {
+	"use strict";
+
+	var defaultSettings = {
+		alignVert: false, // if true, textFit will align vertically using css tables
+		alignHoriz: false, // if true, textFit will set text-align: center
+		multiLine: false, // if true, textFit will not set white-space: no-wrap
+		detectMultiLine: true, // disable to turn off automatic multi-line sensing
+		minFontSize: 6,
+		maxFontSize: 80,
+		reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance
+		widthOnly: false, // if true, textFit will fit text to element width, regardless of text height
+		alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment
+	};
+
+	return function textFit(els, options) {
+		if (!options) options = {};
+
+		// Extend options.
+		var settings = {};
+		for (var key in defaultSettings) {
+			if (options.hasOwnProperty(key)) {
+				settings[key] = options[key];
+			} else {
+				settings[key] = defaultSettings[key];
+			}
+		}
+
+		// Convert jQuery objects into arrays
+		if (typeof els.toArray === "function") {
+			els = els.toArray();
+		}
+
+		// Support passing a single el
+		var elType = Object.prototype.toString.call(els);
+		if (
+			elType !== "[object Array]" &&
+			elType !== "[object NodeList]" &&
+			elType !== "[object HTMLCollection]"
+		) {
+			els = [els];
+		}
+
+		// Process each el we've passed.
+		for (var i = 0; i < els.length; i++) {
+			processItem(els[i], settings);
+		}
+	};
+
+	/**
+	 * The meat. Given an el, make the text inside it fit its parent.
+	 * @param  {DOMElement} el       Child el.
+	 * @param  {Object} settings     Options for fit.
+	 */
+	function processItem(el, settings) {
+		if (!isElement(el) || (!settings.reProcess && el.getAttribute("textFitted"))) {
+			return false;
+		}
+
+		// Set textFitted attribute so we know this was processed.
+		if (!settings.reProcess) {
+			el.setAttribute("textFitted", 1);
+		}
+
+		var innerSpan, originalHeight, originalHTML, originalWidth;
+		var low, mid, high;
+
+		// Get element data.
+		originalHTML = el.innerHTML;
+		originalWidth = innerWidth(el);
+		originalHeight = innerHeight(el);
+
+		// Don't process if we can't find box dimensions
+		if (!originalWidth || (!settings.widthOnly && !originalHeight)) {
+			if (!settings.widthOnly)
+				throw new Error(
+					"Set a static height and width on the target element " +
+						el.outerHTML +
+						" before using textFit!"
+				);
+			else
+				throw new Error(
+					"Set a static width on the target element " +
+						el.outerHTML +
+						" before using textFit!"
+				);
+		}
+
+		// Add textFitted span inside this container.
+		if (originalHTML.indexOf("textFitted") === -1) {
+			innerSpan = document.createElement("span");
+			innerSpan.className = "textFitted";
+			// Inline block ensure it takes on the size of its contents, even if they are enclosed
+			// in other tags like <p>
+			innerSpan.style["display"] = "inline-block";
+			innerSpan.innerHTML = originalHTML;
+			el.innerHTML = "";
+			el.appendChild(innerSpan);
+		} else {
+			// Reprocessing.
+			innerSpan = el.querySelector("span.textFitted");
+			// Remove vertical align if we're reprocessing.
+			if (hasClass(innerSpan, "textFitAlignVert")) {
+				innerSpan.className = innerSpan.className.replace("textFitAlignVert", "");
+				innerSpan.style["height"] = "";
+				el.className.replace("textFitAlignVertFlex", "");
+			}
+		}
+
+		// Prepare & set alignment
+		if (settings.alignHoriz) {
+			el.style["text-align"] = "center";
+			innerSpan.style["text-align"] = "center";
+		}
+
+		// Check if this string is multiple lines
+		// Not guaranteed to always work if you use wonky line-heights
+		var multiLine = settings.multiLine;
+		if (
+			settings.detectMultiLine &&
+			!multiLine &&
+			innerSpan.getBoundingClientRect().height >=
+				parseInt(window.getComputedStyle(innerSpan)["font-size"], 10) * 2
+		) {
+			multiLine = true;
+		}
+
+		// If we're not treating this as a multiline string, don't let it wrap.
+		if (!multiLine) {
+			el.style["white-space"] = "nowrap";
+		}
+
+		low = settings.minFontSize;
+		high = settings.maxFontSize;
+
+		// Binary search for highest best fit
+		var size = low;
+		while (low <= high) {
+			mid = (high + low) >> 1;
+			innerSpan.style.fontSize = mid + "px";
+			var innerSpanBoundingClientRect = innerSpan.getBoundingClientRect();
+			if (
+				innerSpanBoundingClientRect.width <= originalWidth &&
+				(settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight)
+			) {
+				size = mid;
+				low = mid + 1;
+			} else {
+				high = mid - 1;
+			}
+			// await injection point
+		}
+		// found, updating font if differs:
+		if (innerSpan.style.fontSize != size + "px") innerSpan.style.fontSize = size + "px";
+
+		// Our height is finalized. If we are aligning vertically, set that up.
+		if (settings.alignVert) {
+			addStyleSheet();
+			var height = innerSpan.scrollHeight;
+			if (window.getComputedStyle(el)["position"] === "static") {
+				el.style["position"] = "relative";
+			}
+			if (!hasClass(innerSpan, "textFitAlignVert")) {
+				innerSpan.className = innerSpan.className + " textFitAlignVert";
+			}
+			innerSpan.style["height"] = height + "px";
+			if (settings.alignVertWithFlexbox && !hasClass(el, "textFitAlignVertFlex")) {
+				el.className = el.className + " textFitAlignVertFlex";
+			}
+		}
+	}
+
+	// Calculate height without padding.
+	function innerHeight(el) {
+		var style = window.getComputedStyle(el, null);
+		return (
+			el.getBoundingClientRect().height -
+			parseInt(style.getPropertyValue("padding-top"), 10) -
+			parseInt(style.getPropertyValue("padding-bottom"), 10)
+		);
+	}
+
+	// Calculate width without padding.
+	function innerWidth(el) {
+		var style = window.getComputedStyle(el, null);
+		return (
+			el.getBoundingClientRect().width -
+			parseInt(style.getPropertyValue("padding-left"), 10) -
+			parseInt(style.getPropertyValue("padding-right"), 10)
+		);
+	}
+
+	//Returns true if it is a DOM element
+	function isElement(o) {
+		return typeof HTMLElement === "object"
+			? o instanceof HTMLElement //DOM2
+			: o &&
+					typeof o === "object" &&
+					o !== null &&
+					o.nodeType === 1 &&
+					typeof o.nodeName === "string";
+	}
+
+	function hasClass(element, cls) {
+		return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
+	}
+
+	// Better than a stylesheet dependency
+	function addStyleSheet() {
+		if (document.getElementById("textFitStyleSheet")) return;
+		var style = [
+			".textFitAlignVert{",
+			"position: absolute;",
+			"top: 0; right: 0; bottom: 0; left: 0;",
+			"margin: auto;",
+			"display: flex;",
+			"justify-content: center;",
+			"flex-direction: column;",
+			"}",
+			".textFitAlignVertFlex{",
+			"display: flex;",
+			"}",
+			".textFitAlignVertFlex .textFitAlignVert{",
+			"position: static;",
+			"}",
+		].join("");
+
+		var css = document.createElement("style");
+		css.type = "text/css";
+		css.id = "textFitStyleSheet";
+		css.innerHTML = style;
+		document.body.appendChild(css);
+	}
+});

postit/resize.js

@@ -0,0 +1,21 @@
+function checkOverflow(el) {
+	var curOverflow = el.style.overflow;
+
+	if (!curOverflow || curOverflow === "visible") el.style.overflow = "hidden";
+
+	var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
+
+	el.style.overflow = curOverflow;
+
+	return isOverflowing;
+}
+
+elements = document.querySelectorAll(".post-it");
+
+Array.from(elements).forEach((element) => {
+	if (checkOverflow(element)) {
+		console.log("Overflow, resize");
+		console.log(element.innerHTML);
+		textFit(element);
+	}
+});

postit/scrape.py

@@ -0,0 +1,7 @@
+from search import search
+import json
+
+results = search('loot box')
+
+with open('results.json', 'w') as file:
+    file.write(json.dumps(results))

postit/search.py

@@ -0,0 +1,35 @@
+from bs4 import BeautifulSoup
+from selenium import webdriver
+from selenium.webdriver.firefox.options import Options
+
+def search(query):
+    open('geckodriver.log', 'w').close() #Clear Log File
+
+    options = Options()
+    options.headless = True
+    driver = webdriver.Firefox(options=options, executable_path = '/usr/local/bin/geckodriver')
+    driver.get(f'https://duckduckgo.com/{query}&iar=news&ia=news')
+    html = driver.page_source
+
+    soup = BeautifulSoup(html, 'html.parser')
+    results = []
+    
+    if soup.find_all(class_="no-results t-m") == []:
+        
+        print(f'{len(soup.find_all(class_="result"))} results' )
+        for i in range(len(soup.find_all(class_="result"))):
+            result = {}
+
+            result["title"] = soup.find_all(class_="result__a")[i].get_text()
+            try:
+                result['domain'] = soup.find_all(class_="result__url")[i]['href']
+                result['description'] = soup.find_all(class_="result__snippet")[i].get_text()
+            except IndexError:
+                result['domain'] = ''
+                result['description'] = ''
+            results.append(result)
+  
+        return results
+
+    else:
+        return None

postit/selectElements.js

@@ -0,0 +1,4 @@
+elements = document.querySelectorAll("td");
+console.log(elements);
+
+textFit(elements);

postit/templates/postit.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Post it</title>
+		<link rel="stylesheet" href="postit.css" />
+
+		<script src="/postit/fitText.js"></script>
+		<script src="/postit/resize.js" defer></script>
+	</head>
+	<body>
+		<div class="container">
+			{% for content in contents %} {% for i in range(12)%}
+			<div class="post-it">
+				{%if content['img'] %}
+				<img src="{{content['img']}}" alt="{{content['description']}}" />
+				<figcaption>{{content['description']}}</figcaption>
+				{%else%}
+				<h2 class="title">{{content['title']}}</h2>
+				<p class="description">{{content['description']}}</p>
+				{%endif%}
+			</div>
+			{%endfor%} {% endfor %}
+		</div>
+	</body>
+</html>

postit/templates/table.html

@@ -4,7 +4,10 @@
 		<meta charset="utf-8" />
 		<meta http-equiv="x-ua-compatible" content="ie=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>document</title>
+		<title>{{page['title']}}</title>
+
+		<script src="/postit/fitText.js"></script>
+		<script src="/postit/selectElements.js" defer></script>
 
 		<style>
 			html,
@@ -33,6 +36,7 @@
 			}
 
 			td {
+				position: relative;
 				border: 1px dashed gray;
 				width: {{page['post_width']}}mm;
 				height: {{page['post_height']}}mm;
@@ -44,11 +48,17 @@
 				width: 100%;
 				height: 100%;
 				object-fit: contain;
+			}
 
+			td .caption {
+				position: absolute;
+				top: 0;
+				left: 0;
+				font-size: 12px;
+				background-color: white;
 			}
 
 			.cell {
-				font-size: 18px;
 				line-height: 1.6;
 				text-align: center;
 				padding: 5mm;
@@ -64,9 +74,9 @@
 			<tr>
 				{%for col in range(page['cols'])%}
 				<td>
-					{%if content['type'] %}
+					{%if content['img'] %}
-					<img src="{{content['src']}}" />
+					<img src="{{content['img']}}" />
-
+					<div class="caption">{{content['alt']}}</div>
 					{%else%}
 
 					<div class="cell">{{content}}</div>

setup.py

@@ -9,5 +9,7 @@ setup(
     install_requires=[
         'Jinja2',
         'python-frontmatter',
+        'selenium',
+        'BeautifulSoup4'
     ],
 )

test/contents.md

@@ -0,0 +1,207 @@
+---
+title: Katamari Fanfic
+credits: Mitsa, Kamo, Erica
+contents:
+    - img: frog.png
+      alt: Frog
+    - hello im the frog today im here on my lily pad ehe
+    - slurp a fly gnam ate it
+
+    - alt: Prince
+      img: prince.jpg
+    - roll rooooollllll
+    - papa should be proud of me
+    - vrooom vroooom
+    - ohh papa can be so scary
+    - he is looking me from the above all the time
+    - everytime papa is sad my whole universe collapses
+
+    - alt: Katamari Ball
+      img: katamari-ball-1.jpg
+    - hello frog
+    - hello frog hello giraffe
+    - hello frog hello giraffe hello lipstick
+    - hello frog hello giraffe hello lipstick hello rubber
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale
+    - hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale hello waves
+
+    - alt: Giraffe
+      img: giraffe.png
+    - hello katamari ball
+
+    - alt: King of all Cosmos
+      img: king.png
+    - PRINCEEEEEEEEEEEEEEEEE
+
+    - alt: Prince
+      img: prince.jpg
+    - OMG I cannot fail the king of all Cosmos
+
+    - alt: Frog
+      img: frog.png
+    - What do they do a giraffe and a kettle together?
+
+    - img: cigarette.jpeg
+      alt: Cigarette
+    - they roll a katamari
+
+    - img: joint.jpg
+      alt: Joint
+    - 🙄
+
+    - img: carpet.webp
+      alt: Carpet
+    - this house is sooooo messy
+    - full of random things lying around
+    - bless the king of all Cosmos that takes care of all this chaos
+
+    - alt: King of all Cosmos
+      img: king-pantheon.jpg
+    - YOU HEAR THAT PRINCE?? BLESS ME
+
+    - img: carpet.webp
+      alt: Carpet
+    - NO BLESS ME
+
+    - img: gersande%20panteon.jpg
+      alt: XPUB1
+    - NO BLESS ME
+
+    - img: katamari-ball-2.jpg
+      alt: Katamari Ball
+    - hello book
+    - hello book hello shelves
+    - hello book hello shelves hello supermarket
+    - hello book hello shelves hello supermarket hello street
+    - hello book hello shelves hello supermarket hello street hello car
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children
+    - hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello
+
+    - img: pantheon_rome.jpg
+      alt: King of all Cosmos
+    - I'm the SUN, I'm the BOSS, I'm the HOLE of the PANTHEON
+
+    - img: prince-junk.jpg
+      alt: Prince
+    - aaaaaaah more things more things more things more things
+    - a stample, a tampon, a rat, a frog
+    - ohhh a pile of cardsss let's take them all
+    - I am the prince and I'll restore sassy king's mess, my papa's faults
+
+    - img: moon.webp
+      alt: Moon
+    - I feel personally attacked by this katamari ball getting bigger and rounder
+
+    - img: earth.webp
+      alt: Earth
+    - It's not like it seems i can explain
+
+    - img: katamari-ball-3.jpg
+      alt: Katamari Ball
+    - hello moon
+    - hello moon hello earth
+    - hello moon hello earth hello rings of saturn
+    - hello moon hello earth hello rings of saturn hello orbital elements
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba
+    - hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba hello mazinga
+
+    - img: queen.webp
+      alt: The Intellectual Katamari Meta Queen
+    - ah this is interesting bc the prince never talks.
+    - so then it could be that he's a ventriloque and the katamari speaks for him
+    - ahhh yes he talks through the katamari, wow so meta!
+    - yes like the katamari has one hidden face
+    - sometimes it's autonomous, other times it's the prince
+    - But what consistence has the katamari? is it crunchy or ??
+    - yes crunchy and porous, so it can attract the grainy items on earth like pieces of sauce
+
+    - img: king.png
+      alt: King of All Cosmos
+    - ARE WE MAKING A PHILOSOPHICAL CLUB OR WHAT?????
+    - ROOOLLL ROOOOLLLL ROOOOLLLLLLLLLL
+
+    - img: queen.webp
+      alt: The Intellectual Katamari Meta Queen
+    - nono.
+    - B🤍U🤍T
+    - maybe we can start one
+    - A💥N💥D
+    - I'm probably gonna be rolled up by katamari as I can see it coming here.
+    - ciao.
+
+    - img: katamari-ball-4.jpg
+      alt: Katamari Ball
+    - hello king
+    - hello king hello queen
+    - hello king hello queen hello prince
+    - hello king hello queen hello prince hello
+
+    - img: king-horror.jpg
+      alt: King of All Cosmos
+    - STOPP STOOOOPP DONT YOU ROLL ON US
+
+    - img: katamari-ball-5.jpg
+      alt: Katamari Ball
+    - Vroooooooooooom vroooooooooooooooooom
+
+    - img: prince.jpg
+      alt: Prince
+    - Papaaaaaaa I cannot control the katamariiiiiii (or maybe I can?)
+    - Oh nooooooooooooooo
+
+    - img: blibli.jpg
+      alt: Blibli
+    - Meow I want a philosophical club
+    - Blibli starts a Federici reading group
+
+    - Credits
+    - A rolling fan faction written by Mitsa Erica and Kamo
+
+    - Context
+    - Katamari Damacy is a videogame designed by Keita Takahashi and published by Namco.
+    - The gameplay consists in rolling on objects and accumulating them in order to make a super big katamari.
+    - The more objects you incorporate, the more big the katamari becomes.
+    - The objective of each level is to reach a certain size with the katamari.
+    - In the game you are the prince , the son of the king of all Kosmos.
+    - The king of all kosmos accidentally destroyed all the stars,
+    - that's why he makes YOU -his son- to work for him and roll katamaris,
+    - that are going to replace the stars
+---

test/postit.css

@@ -0,0 +1,71 @@
+@page {
+	size: A3;
+	margin: 5mm;
+}
+
+html,
+body {
+	margin: 0;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.container {
+	font-size: 0;
+}
+
+.post-it {
+	position: relative;
+	vertical-align: middle;
+	display: inline-block;
+	width: 90mm;
+	height: 90mm;
+	border: 1px solid #ddd;
+	margin: 0;
+	font-family: Arial, Helvetica, sans-serif;
+	line-height: 1.4;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	z-index: 50;
+}
+
+.title {
+	font-size: 18px;
+	text-align: center;
+	margin: 4mm;
+	color: #aaa;
+}
+
+.description {
+	display: inline-block;
+	margin: 4mm;
+	font-size: 24px;
+}
+
+figcaption {
+	background-color: white;
+	font-size: 18px;
+	text-align: center;
+	display: inline-block;
+	position: absolute;
+	left: 50%;
+	bottom: 4mm;
+	transform: translate(-50%, 0);
+	z-index: 100;
+}
+
+a {
+	color: #ddd;
+	font-size: 12px;
+}