<!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>Baloons</title>
        <style>
			.container {
                position: relative;
                font-family: sans-serif;
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				font-size: 1.5rem;
				list-style: none;
			}

			.baloon {
				display: inline-flex;
                flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 250px;
				height: 250px;
				padding: 25px;
				text-align: center;
				margin: 8px;
				border-radius: 50%;
				transform: rotate(0);
				transition: transform 2s ease-out;
			}

			.baloon:hover {
				transition: transform 1s ease-in;
				transform: rotate(360deg);
			}
            
            .title {
                font-weight: bold;
                color: currentColor!important;
            }
            
            .title a {
                text-decoration: none;
                color: currentColor;
            }
            
            a {
                color: currentColor;
                text-decoration: none;
            }
            
		</style>
	</head>
	<body>
		<ul class="container">
			%for project in projects:            
            <% 
            import random
            color = "%03x" % random.randint(0xEEE, 0xFFF) 
            %>                  
			<li class="baloon" style="border: 50px solid #${color}">
					<p class="title">[https://hub.xpub.nl/soupboat/~kamo/projects/${project['slug']}/ ${project['title']}]</p>
					<p>${project['description']}</p>
			</li>
			%endfor
        </ul>
	</body>
</html>
