comment the code ! color cookie ! home css

postit/generate.py

@@ -1,8 +1,23 @@
-from flask import Blueprint, render_template
+from flask import Blueprint, render_template, request
 import json
 from . import dump
 
-index = ['intro','what-is-a-loot-box', 'crosswords', 'one-sentence-game-ideas', 'nim', 'mimic', 'unfinished-thoughts', 'the-leader', 'connect-less', 'xquisite', 'katamari', 'life-hacks', 'karaoke', 'outro']
+index = [
+    "intro",
+    "what-is-a-loot-box",
+    "crosswords",
+    "one-sentence-game-ideas",
+    "nim",
+    "mimic",
+    "unfinished-thoughts",
+    "the-leader",
+    "connect-less",
+    "xquisite",
+    "katamari",
+    "life-hacks",
+    "karaoke",
+    "outro",
+]
 
 
 bp = Blueprint(
@@ -14,20 +29,25 @@ bp = Blueprint(
 
 @bp.route("/")
 def blocks():
+
+    color = request.cookies.get("color", "purple")
+
     # temporary, eventually we will dump contents only when they are updated in git (git hooks + git pull ?)
     dump.dump(index)
 
     with open("postit/contents.json", "r") as f:
         contributions = json.load(f)
 
-    return render_template("postit.html", contributions=contributions)
+    return render_template("postit.html", contributions=contributions, color=color)
 
 
 @bp.route("/<slug>")
 def block(slug=None):
+
+    color = request.cookies.get("color", "purple")
+
     dump.dump([slug])
     with open("postit/contents.json", "r") as f:
         contributions = json.load(f)
 
-    
+    return render_template("postit.html", contributions=contributions, color=color)
-    return render_template("postit.html", contributions=contributions)

postit/static/contents

@@ -1 +1 @@
-Subproject commit 2cba1055408e68e7a617300f7020c5a4ef85478c
+Subproject commit 9616b7250840e1ff3fb4edff1cfa49f70da5447a

postit/static/css/contents.css

@@ -74,10 +74,6 @@
 	font-size: 24px;
 }
 
-.connect-less figcaption {
-	display: none;
-}
-
 .crosswords .info {
 	position: absolute;
 	font-size: 21px;
@@ -128,7 +124,6 @@
 
 .nw {
 	white-space: initial;
-
 }
 
 .ne {

postit/static/css/home.css

@@ -33,11 +33,11 @@ ol {
 button#color {
 	position: absolute;
 	right: 32px;
-	top: 48px;
+	top: 52px;
 	display: inline-block;
-	width: 48px;
+	width: 24px;
 	height: 24px;
-	border-radius: 24px;
+	border-radius: 0;
 	border: none;
 	background-color: var(--alt-bg);
 }

postit/static/js/color.js

@@ -1,8 +1,26 @@
+// I really don't like this code but it's ok for now...
+
+let main = true;
+
 // Set a reference in the localStorage with the main color
 window.addEventListener("load", () => {
-	var style = getComputedStyle(document.body);
+	color = getCookie("color");
-	currentColor = style.getPropertyValue("--color");
+
-	setCookie("color", currentColor, 7);
+	if (color == "purple" || color == "") {
+		document.documentElement.style.setProperty("--color", "var(--purple)");
+		document.documentElement.style.setProperty("--background", "var(--purple-bg)");
+		document.documentElement.style.setProperty("--alt", "var(--orange)");
+		document.documentElement.style.setProperty("--alt-bg", "var(--orange-bg)");
+		setCookie("color", "purple", 7);
+		main = true;
+	} else {
+		document.documentElement.style.setProperty("--color", "var(--orange)");
+		document.documentElement.style.setProperty("--background", "var(--orange-bg)");
+		document.documentElement.style.setProperty("--alt", "var(--purple)");
+		document.documentElement.style.setProperty("--alt-bg", "var(--purple-bg)");
+		setCookie("color", "orange", 7);
+		main = false;
+	}
 });
 
 // Toggle color button
@@ -26,6 +44,7 @@ function toggleColor() {
 	document.documentElement.style.setProperty("--alt", currentColor);
 	document.documentElement.style.setProperty("--alt-bg", currentBg);
 
-	// set a reference in the localStorage
+	// set a reference in a cookie to share it with the generator page
-	setCookie("color", altColor, 7);
+	main = !main;
+	setCookie("color", main ? "purple" : "orange", 7);
 }

postit/templates/postit.html

@@ -6,34 +6,64 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Post it</title>
 
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}">
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
 
 		<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
 		<script src="{{url_for('static', filename='js/bleed.js')}}"></script>
 	</head>
+	<style>
+		:root {
+			--color: var(--{{color}});
+			--background: var(--{{color}}-bg);
+		}
+	</style>
 	<body>
+		{%for contribution, contents in contributions.items()%} {% for content in contents %}
+		<!-- Parsing postit -->
+		<div
+			class="post-it {{contribution}} 
+			{% if content['card'] %} leader-card {%endif%}"
+		>
+			<!-- post-it with pic attribute are graphics that follow the color scheme! -->
+			<!-- there is a version that matches the color in a folder with the name of the color -->
+			<!-- ex: a purple cover in the intro contribution will be something like /intro/purple/cover.jpg -->
+			<!-- ex: the same cover in the orange version will be in /intro/orange/cover.jpg -->
+			<!-- in order to make it works, the files need to share the same name! -->
+			{%if content['pic'] %} 
+			<img 
+				src="{{url_for('static', filename='contents/' + contribution + '/' + color + '/' + content['pic'] )}}" 
+				{% if content["alt"] %}
+				alt="{{content['alt']}}" 
+				{% endif %} 
+				/> 
 				
-		{%for contribution, contents in contributions.items()%}
+			{% if content["alt"] %}
-
+			<figcaption>{{content['alt']}}</figcaption>
-		{% for content in contents %}
+			{% endif %} 
 			
-		<div class="post-it {{contribution}} {% if content['card'] %} leader-card {%endif%}">
+			<!-- post-it with img attribute it's a image that doesn't follow the color scheme -->
-			{%if content['img'] %}
+			{%elif content['img'] %} 
 			<img 	
 				src="{{url_for('static', filename='contents/' + contribution + '/' + content['img'] )}}" 
-				{% if content["alt"] %}alt="{{content['alt']}}"{% endif %}
-				data-image="{{url_for('static', filename='contents/' + contribution + '/' + content['img'] )}}"
-			/>
 				{% if content["alt"] %}
-				<figcaption>{{content['description']}}</figcaption>
+				alt="{{content['alt']}}" {% endif %} 
+				/> 
+			
+			{% if content["alt"]%}
+			<figcaption>{{content['alt']}}</figcaption>
 			{% endif %} 
-			{%elif content['card']%}
 			
+			
+
+			<!-- post-it with card attribute are the card for The Leader game -->
+			{%elif content['card']%}
 			<div class="card">{{content['card']}}</div>
 
-			<blockquote class="quote">{{content['quote']}} <span class="leader">The&nbsp;Leader</span></blockquote>
+			<blockquote class="quote">
+				{{content['quote']}} <span class="leader">The&nbsp;Leader</span>
+			</blockquote>
 			<dl>
 				<dt class="row-bg"><span>Motivation</span></dt>
 				<dd class="row-bg"><span>{{content['motivation']}}</span></dd>
@@ -48,9 +78,15 @@
 				<dd><span>{{content['positivity']}}</span></dd>
 			</dl>
 
+			<!-- post-it with definition attribute are for the crossword game  -->
+			<!-- we use the same template both for the definitions and the imaginary grid cells -->
+			<!-- for the cells the definition attribute is a space charachter, so it's invisible but present eh eh -->
+			<!-- templates ecology -->
 			{%elif content['definition']%}
 
-			<div class="info">{{content['start']}} <span class="category">{{content['category']}}</span></div>
+			<div class="info">
+				{{content['start']}} <span class="category">{{content['category']}}</span>
+			</div>
 
 			<p class="description {% if content['definition']|length > 200 %} long-text {%endif%}">
 				{{content['definition']}}
@@ -64,6 +100,8 @@
 				></span>
 			</footer>
 
+			<!-- mimic colophon, with a nice code style -->
+			<!-- not really a reusable module sorry aha -->
 			{%elif content['type'] == 'mimic-colophon'%}
 
 			<div class="description">
@@ -85,25 +123,29 @@
 				></span>
 			</footer>
 
+			<!-- postit with cardinal directions are for corner layout -->
+			<!-- you can set the contents at:  -->
+			<!-- top left (nw) -->
+			<!-- top right (ne) -->
+			<!-- bottom left (sw) -->
+			<!-- bottom right (se) -->
+			<!-- used in the nim dialogue and in some other 1 word post-its -->
 			{%elif 'nw' in content or 'ne' in content or 'se' in content or 'sw' in content%}
 
-			<p class="description dialogue 
+			<p
-					{%if content['nw']%}nw{%endif%}
+				class="description dialogue {%if content['nw']%}nw{%endif%} {%if content['ne']%}ne{%endif%}"
-					{%if content['ne']%}ne{%endif%}
+			>
-			">
+				{%if content['ne']%}{{content['ne']}}{%endif%} {%if
-			{%if content['ne']%}{{content['ne']}}{%endif%}
+				content['nw']%}{{content['nw']}}{%endif%}
-			{%if content['nw']%}{{content['nw']}}{%endif%}			
 			</p>
 
-			<p class="description dialogue
+			<p
-					{%if content['sw']%}sw{%endif%}			
+				class="description dialogue {%if content['sw']%}sw{%endif%} {%if content['se']%}se{%endif%}"
-					{%if content['se']%}se{%endif%}		
+			>
-			">
+				{%if content['se']%}{{content['se']}}{%endif%} {%if
-			{%if content['se']%}{{content['se']}}{%endif%}
+				content['sw']%}{{content['sw']}}{%endif%}
-			{%if content['sw']%}{{content['sw']}}{%endif%}			
 			</p>
 
-
 			<footer>
 				<h2 class="title">{{content['title']}}</h2>
 				<span
@@ -112,8 +154,9 @@
 				></span>
 			</footer>
 
-			{%else%}
 
+			<!-- standard text postit -->
+			{%else%}
 
 			<p class="description {% if content['description']|length > 200 %} long-text {%endif%}">
 				{{content['description']}}