je fais du sale (1/2)

minelife

@@ -1 +0,0 @@
-Subproject commit 1621fbcbc0525eb5b3c6ef80525d66c2e388dd68

minelife2/app.js

@@ -0,0 +1,393 @@
+
+async function getCrafts() {
+	
+	const res = await fetch("./data/crafts.json");
+	const data = await res.json();
+	
+	return data;
+};
+
+async function getCollections() {
+	
+	const res = await fetch("./data/collections.json");
+	const data = await res.json();
+	
+	return data;
+};
+
+function updateSelectedCollection (selected = 0) {
+	
+	var previouslySelectedCollection = document.querySelector('#collections nav ul li.selected');
+	
+	if (previouslySelectedCollection != null) {
+	
+		previouslySelectedCollection.classList.remove('selected');
+	}
+	
+	
+	var collections = document.querySelectorAll('#collections nav ul li');
+	
+	console.log(collections);
+	
+	var newlySelectedCollection = collections[selected];
+	
+	console.log(newlySelectedCollection);
+	
+	newlySelectedCollection.classList.add('selected');
+	
+}
+
+async function printCollections (crafts, collections) {
+	
+	var collectionsElt = document.getElementById('collections');
+	var collectionsNavElt = collectionsElt.querySelector('nav ul');
+	
+	collectionsNavElt.innerHTML = '';
+	
+	var cssClass = '';
+	
+	collections.forEach(function (collection, index) {
+		
+		if (collection.items != undefined) {
+			
+			cssClass = '';
+			
+			collectionsNavElt.innerHTML += 
+				'<li' + cssClass + '>' +
+					'<a href="#" ' +
+					   'title="' + collection.name + '" ' + 
+					'>' +
+					
+						'<img src="data/img/' + collection.img + '" ' +
+						     'alt="' + collection.name + '" ' + 
+						'/>' + 
+					'</a>' +
+				'</li>';
+		}
+	});
+	
+	displayCollection(crafts, collections);
+			
+	collectionsElt.querySelectorAll('li').forEach(function (elt, index) {
+		
+		elt.addEventListener('click', function () {
+		
+			console.log(index);
+			
+			displayCollection(crafts, collections, index);
+			
+		});
+		
+	});
+}
+
+async function displayCollection (crafts, collections, collectionId = 0) {
+	
+	updateSelectedCollection(collectionId);
+	
+	itemsListElt = document.querySelector('#collections .items-list');
+	
+	itemsListElt.innerHTML = '';
+	
+	collections[collectionId].items.forEach(function (itemId){
+		
+		itemsListElt.innerHTML +=
+			'<li>' + 
+				'<a href="#" ' +
+				   'onclick="displayRecipe('+ itemId + ', 0)" ' + 
+				   'title="' + crafts[itemId].name + '" ' + 
+				'>' +
+				
+					'<img src="data/img/' + crafts[itemId].img + '" ' +
+						 'alt="' + crafts[itemId].name + '" ' + 
+					'/>' + 
+				'</a>' +
+			'</li>';
+	});
+}
+
+
+async function printItemsList () {
+	
+	crafts = await getCrafts();
+	
+	itemsListElt = document.getElementById('items-list');
+	
+	crafts.forEach(function (item, index) {
+		
+		if (item.recipes != undefined) {
+			
+			itemsListElt.innerHTML += 
+				'<li>' + 
+					'<a href="#" ' +
+					   'onclick="displayRecipe('+ index + ', 0)" ' + 
+					   'title="' + item.name + '" ' + 
+					'>' +
+					
+						'<img src="data/img/' + item.img + '" ' +
+						     'alt="' + item.name + '" ' + 
+						'/>' + 
+					'</a>' +
+				'</li>';
+		}
+	});
+	
+	
+}
+
+
+function padIngredient (nbIngredients, str) {
+	
+	if (nbIngredients <= 1 || 
+	    nbIngredients == 4 || 
+	    nbIngredients == 9 || 
+	    nbIngredients == 16) {
+		
+		return '';
+	
+	} else if (nbIngredients < 4) {
+		
+		return str.repeat(4 - nbIngredients);
+		
+	} else if (nbIngredients < 9) {
+		
+		return str.repeat(9 - nbIngredients);
+	
+	} else if (nbIngredients < 16) {
+		
+		return str.repeat(16 - nbIngredients);
+	
+	} else if (nbIngredients < 25) {
+		
+		return str.repeat(25 - nbIngredients);
+	}
+}
+
+async function displayRecipe (itemId, recipeId = 0, elementId = 'recipe-main', bc_item = null, bc_recipe = null) {
+	
+	crafts = await getCrafts();
+	
+	recipeElt = document.getElementById(elementId);
+	ingredientsElt = recipeElt.querySelector('.ingredients');
+	actionElt = recipeElt.querySelector('.action');
+	resultElt = recipeElt.querySelector('.result');
+	itemNameElt = recipeElt.querySelector('.item-name');
+	otherRecipesElt = recipeElt.querySelector('.other-recipes ul');
+	detailsElt = recipeElt.querySelector('.recipe-details');
+	detailsContentElt = detailsElt.querySelector('div');
+	
+	actionElt.innerHTML = '<a href="#">&nbsp;</a>';
+	resultElt.innerHTML = "&nbsp;";
+	otherRecipesElt.innerHTML = "";
+	detailsContentElt.innerHTML = "";
+	
+	recipeElt.style.visibility = 'visible';
+	detailsElt.style.visibility = 'hidden';
+	
+	itemNameElt.innerHTML = '' + crafts[itemId].name + '';
+	
+	resultElt_content = 
+		'<img src="data/img/' + crafts[itemId].img + '" ' +
+			 'alt="' + crafts[itemId].name + '" ' + 
+			 'title="' + crafts[itemId].name + '" ' + 
+			 '/>';
+	
+	if (elementId == 'recipe-aux' && bc_item != null) {
+		
+		resultElt_content = 
+			'<a href="#" ' + 
+			   'onclick="displayRecipe(' + bc_item + ', ' + bc_recipe +', \'recipe-aux\')" ' + 
+			'>' +
+				resultElt_content + 
+			'</a>';
+	}
+	
+	resultElt.innerHTML = resultElt_content;
+	
+	blackHoleStr = '<li class="ingredient"><img src="data/img/black-hole.png" /></li>';
+	
+	
+	
+	if (crafts[itemId].recipes == undefined) {
+		
+		ingredientsElt.innerHTML = blackHoleStr;
+			
+	
+	} else {
+		
+		recipes = crafts[itemId].recipes;
+			
+		ingredients = recipes[recipeId].ingredients;
+		
+		if (ingredients == undefined) {
+			
+			ingredientsElt.innerHTML = blackHoleStr;
+			
+		} else {
+		
+			ingredientsElt.innerHTML = '';
+			
+			nbIngredients = ingredients.length;
+			
+			ingredientsElt.className = 'ingredients ';
+			
+			if (nbIngredients > 16) {
+					
+				ingredientsElt.className += "grid-25";
+				
+			} else if (nbIngredients > 9) {
+					
+				ingredientsElt.className += "grid-16";
+				
+			} else if (nbIngredients > 4) {
+					
+				ingredientsElt.className += "grid-9";
+				
+			} else if (nbIngredients > 1) {
+					
+				ingredientsElt.className += "grid-4";
+			
+			} else {
+				
+				ingredientsElt.className += "";
+				
+			}
+			
+			var i = 1;
+			
+			console.log(ingredients);
+			
+			ingredients.forEach (function (ingredient) {
+				
+				unit = (ingredient.unit != undefined) ? (' ' + ingredient.unit) : '';
+				
+				qty = (ingredient.qty == undefined) ? '' : '<span class="qty">' + ingredient.qty + '</span>';
+				 
+				title = 
+					(ingredient.qty == undefined) ? 
+						crafts[ingredient.ref].name : (
+						(ingredient.unit == undefined) ?
+							ingredient.qty + ' ' + crafts[ingredient.ref].name : 
+							ingredient.qty + ' ' + ingredient.unit + ' de ' + crafts[ingredient.ref].name
+						);
+							
+				
+				// displayOn = (elementId == 'recipe-main') ? 'recipe-aux' : 'recipe-main';
+				displayOn = 'recipe-aux';
+				
+				if (elementId == 'recipe-aux') {
+					
+					bc_item = itemId;
+					bc_recipe = recipeId;
+				
+				} else {
+					
+					bc_item = null;
+					bc_recipe = null;
+				}
+				
+				ingredientsElt.innerHTML += 
+					'<li class="ingredient">' + 
+						qty + 
+						'<a href="#" ' + 
+						   'onclick="displayRecipe('+ ingredient.ref  + ', 0, \'' + displayOn + '\', '+ bc_item +', '+ bc_recipe + ')"' + 
+						   'title="' + title + '"' + 
+						'>' +
+							'<img src="data/img/' + crafts[ingredient.ref].img + '" ' +
+								 'alt="' + crafts[ingredient.ref].name + '" ' + 
+								 '/>' + 
+						'</a>' + 
+					'</li>';
+					
+				i++;
+			});
+			
+			
+			ingredientsElt.innerHTML += padIngredient(nbIngredients, '<li class="ingredient"></li>');
+		}
+		
+		
+		
+		action = (recipes[recipeId].action == undefined) ? '' : recipes[recipeId].action;
+		
+		if (recipes[recipeId].details != undefined) {
+			
+			actionElt.className += ' has-details';
+		}
+		
+		actionElt.innerHTML = 
+			'<a href="#" ' + 
+			   'onclick="showDetails(\'' + elementId + '\', \'' + recipeId + '\')" ' +
+			'>'+ 
+				action + 
+			'</a>';
+		
+		
+		if ((details = crafts[itemId].recipes[recipeId].details) != undefined) {
+			
+			detailsContentElt.innerHTML = details;
+		}
+		
+		nbRecipes = recipes.length;
+		
+		if (nbRecipes == 1) {
+			
+			if (recipes[0].name != undefined) {
+				
+				otherRecipesElt.innerHTML += 
+					'<li>' +
+						'<strong>' + 
+							recipes[0].name + 
+						'</strong>' +
+					'</li>';
+			
+			}
+			
+		} else if (nbRecipes > 1) {
+			
+			for (i = 0; i < nbRecipes; i++) {
+				
+				otherRecipeName = (recipes[i].name != undefined) ? 
+					recipes[i].name :
+					"recette n°" + (i + 1);
+					
+				if (i == recipeId) {
+					
+					otherRecipesElt.innerHTML += 
+						'<li>' +
+							'<strong>' + 
+								otherRecipeName + 
+							'</strong>' +
+						'</li>';
+					
+				} else {
+					
+					otherRecipesElt.innerHTML += 
+						'<li>' + 
+							'<a href="#" ' +
+								'onclick="displayRecipe(' + itemId + ', ' + i + ', \''+ elementId + '\')">' + 
+								otherRecipeName + 
+							'</a>'
+						'</li>';
+				}
+			}
+		}
+	}
+}
+
+showDetails = function (elementId) {
+	
+	detailsElt = document.querySelector('#' + elementId + ' .recipe-details');
+	detailsElt.style.visibility = "visible";
+}
+
+// printItemsList();
+
+window.addEventListener('load', async function () {
+	
+	const crafts = await getCrafts();
+	
+	const collections = await getCollections();
+	
+	printCollections(crafts, collections);
+});

minelife2/assets/fonts/Comic_Neue/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The Comic Neue Project Authors (https://github.com/crozynski/comicneue)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

minelife2/assets/fonts/Gloria_Hallelujah/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

minelife2/assets/fonts/Patrick_Hand/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2012 Patrick Wagesreiter (mail@patrickwagesreiter.at)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

minelife2/assets/themes/boris/styles.css

@@ -0,0 +1,499 @@
+:root {
+	
+	--item-size: 32px;
+	
+	--marron: hsl(350, 20%, 25%);
+	--marron-medium: hsl(30, 50%, 50%);
+	--marron-clair: hsl(30, 70%, 66%);
+	--marron-transparent: hsla(350, 20%, 25%, 0.80);
+	--blanc: hsl(0, 100%, 100%);
+	--noir: hsl(0, 100%, 0%);
+	--vert-pomme: hsl(100, 70%, 90%);
+}
+
+
+
+@font-face {
+	font-family: 'Comic Neue';
+	src: url("../../fonts/Comic_Neue/ComicNeue-Regular.ttf") format('truetype');
+}
+
+@font-face {
+	font-family: 'Comic Neue';
+	src: url("../../fonts/Comic_Neue/ComicNeue-Bold.ttf") format('truetype');
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: 'Patrick Hand';
+	src: url("../../fonts/Patrick_Hand/PatrickHand-Regular.ttf") format('truetype');
+}
+@font-face {
+	font-family: 'MinecraftFifty';
+	src: url("../../fonts/MinecraftFifty-Solid.otf") format('opentype');
+}
+
+body {
+	
+	font-family: 'Comic Neue', fantasy;
+}
+
+h1 {
+	font-family: 'MinecraftFifty', 'Comic Neue', fantasy;
+}
+
+#usp {
+	font-family: 'Patrick Hand', fantasy;
+}
+
+q:after {
+	
+	content: " »";
+}
+
+q:before {
+	
+	content: "« ";
+}
+
+body > footer {
+	
+	margin-top: 10rem;
+	display: flex;
+	justify-content: center;
+}
+
+body > footer blockquote {
+	
+	font-family: cursive;
+	font-size: 1.5rem;
+	color: hsl(30, 15%, 90%);
+}
+
+body > footer blockquote cite {
+	
+	display: block;
+	text-align: right;
+	margin-top: 0.5rem;
+}
+
+body > footer blockquote cite:before {
+	
+	content: "― ";
+}
+
+iframe {
+	
+	max-width: 100%;
+}
+
+.recipe-name:before {
+	
+	content: "« ";
+}
+
+.recipe-name:after {
+	
+	content: " »";
+}
+
+
+main {
+
+	display: flex;
+	width: 100%;
+	flex-wrap: wrap;
+}
+
+#recipe-main,
+#recipe-aux {
+	
+	visibility: hidden;
+}
+
+@media screen and (max-width: 39.999rem) {
+	
+	main {
+	
+		flex-direction: column;
+	}
+	
+	#recipe-main {
+		
+		order: 1;
+	}
+	
+	#recipe-aux {
+		
+		order: 2;
+	}
+	
+	#collections {
+		
+		order: 3;
+	}
+}
+
+@media screen and (min-width: 40rem) {
+	
+	.recipe {
+	
+		width: 48%;
+		padding: 0% 2% 0% 0%;
+	}
+	
+	#collections {
+	
+		width: 100%;
+		padding: 0% 0% 0% 2%;
+	}
+}
+
+@media screen and (min-width: 60rem) {
+	
+	.recipe {
+	
+		width: 31.333%;
+		padding: 0% 2% 0% 0%;
+	}
+	
+	#collections {
+	
+		width: 31.334%;
+		padding: 0% 0% 0% 2%;
+	}
+}
+
+
+
+
+.recipe > .recipe-signature {
+	
+	display: flex;
+	align-items: center;
+}
+
+
+@keyframes blinking {
+	0% {
+	
+		text-shadow: 0 0  0px transparent;
+	}
+	
+	50% {
+	
+		text-shadow: 0 0  5px var(--vert-pomme), 
+					 0 0 10px var(--vert-pomme), 
+					 0 0 15px var(--vert-pomme), 
+					 0 0 20px var(--vert-pomme), 
+					 0 0 25px var(--vert-pomme);
+	}
+	
+	100% {
+	
+		text-shadow: 0 0  0px transparent;
+	}
+}
+
+.recipe .action {
+	
+	padding: 0 2rem;
+	text-align: center;
+}
+
+.recipe .action a, 
+.recipe .action a:visited {
+	
+	text-decoration: none;
+	color: var(--noir);
+	background-color: var(--blanc);
+	transition: text-shadow 0.666s;
+}
+
+.recipe .action.has-details a, 
+.recipe .action.has-details a:visited {
+
+	animation: blinking 3s infinite;
+}
+
+.recipe .action:hover a, 
+.recipe .action:hover a:before {
+
+}
+
+.recipe .action *:before {
+	
+	content: "⇒";
+	display: block;
+	font-size: 2rem;
+	font-weight: bolder; 
+}
+
+.recipe .ingredients {
+	
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: grid;
+	grid-gap: 0;
+	border: 2px solid var(--marron);
+}
+
+
+.recipe .ingredients.grid-4 {
+	
+	grid-template-columns: 50% 50%;
+	max-width: calc(2 * (var(--item-size) + 24px + 4px * 2));
+
+}
+
+.recipe .ingredients.grid-9 {
+	
+	grid-template-columns: 33.333% 33.333% 33.333%;
+	max-width: calc(3 * (var(--item-size) + 24px + 4px * 2));
+
+}
+
+.recipe .ingredients.grid-16 {
+	
+	grid-template-columns: 25% 25% 25% 25%;
+	max-width: calc(4 * (var(--item-size) + 24px + 4px * 2));
+
+}
+
+.recipe .ingredients.grid-25 {
+	
+	grid-template-columns: 20% 20% 20% 20% 20%;
+	max-width: calc(5 * (var(--item-size) + 24px + 4px * 2));
+
+}
+
+
+
+
+
+
+
+
+.result {
+
+	border: 4px solid var(--marron);
+}
+
+
+
+
+
+#items-list, 
+.items-list, 
+#collections nav ul {
+
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+#collections nav {
+	
+	display: flex;
+}
+
+#collections nav ul {
+	
+	margin-bottom: 1rem;
+	border: 0.25rem solid var(--marron);
+	border-radius: 1rem;
+	overflow: hidden;
+}
+
+#collections nav ul li.selected {
+
+	background-color: var(--marron-clair);
+}
+
+/*
+#collections nav ul li {
+	
+	border-left: 0.5rem solid var(--marron);
+	border-right: 0.5rem solid var(--marron);
+	margin: 0;
+	padding: 0;
+}
+
+
+#collections nav ul li:first-child {
+	
+	border-left: 0;
+}
+
+#collections nav ul li:last-child {
+	
+	border-right: 0;
+}
+*/
+
+.recipe .ingredients .ingredient, 
+#items-list li, 
+.items-list li {
+	
+	border: 2px solid var(--marron);
+	margin: 0;
+	padding: 0;
+}
+
+
+#items-list li, 
+.items-list li, 
+#collections nav ul li {
+
+	height: 48px;
+	width: 48px;
+	
+}
+
+.recipe .ingredients .ingredient a, 
+#items-list li a, 
+.items-list li a, 
+#collections nav ul li a {
+
+	z-index: 10;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.recipe .ingredients .ingredient:hover a, 
+#items-list li:hover a,
+.items-list li:hover a, 
+#collections nav ul li:hover a {
+	
+	background-color: var(--marron-clair); 
+}
+
+.recipe .ingredients .ingredient:hover a {
+
+	border: 2px solid var(--marron-medium); 
+}
+
+
+.recipe .ingredients .ingredient, 
+.recipe .result, 
+#items-list li, 
+#collections nav ul li {
+	
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+
+
+
+
+
+.recipe .ingredients .ingredient {
+}
+
+.recipe .ingredients .ingredient img {
+
+	flex-basis: var(--item-size);
+	flex-grow: 0;
+}
+
+.recipe .ingredients .ingredient .qty {
+	
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	z-index: 100;
+	font-weight: bold;
+	font-size: 1.25rem;
+	background-color: var(--marron-transparent);
+	color: var(--blanc);
+	padding-left: 0.375rem;
+	padding-right: 0.125rem;
+	padding-top: 0.25rem;
+	border-top-left-radius: 0.33em;
+}
+
+
+.recipe .ingredients .ingredient, 
+.recipe .result {
+
+	height: 64px;
+	width: 64px;
+	
+}
+
+.other-recipes ul {
+
+  list-style: none;
+  padding: 0;
+    padding-top: 0px;
+  margin: 0;
+  display: flex;
+}
+
+.other-recipes ul {
+
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	height: 2.5rem;
+	padding-top: 1rem;
+	width: auto;
+	width: auto;
+	overflow-y: hidden;
+	overflow-x: visible;
+	flex-wrap: nowrap;
+}
+
+.other-recipes li {
+	
+	margin: 0;
+	margin-right: 0.5rem;
+	padding: 0;
+	display: inline;
+	flex-basis: auto;
+	flex-shrink: 0;
+}
+
+.other-recipes li > * {
+
+	width: 2rem;
+	text-align: center;
+	height: 2rem;
+	display: inline;
+	
+	padding: 0.25rem 0.5em;
+	
+	border-radius: 1rem;
+	text-decoration: none;
+	border-width: 2px;
+	border-style: solid;
+	
+	
+	border-color: var(--marron);
+	background-color: var(--blanc);
+	color: var(--marron);
+
+}
+
+.other-recipes li *:not(a) {
+	
+	border-color: var(--marron);
+	color: var(--blanc);
+	background-color: var(--marron);
+
+}
+	
+.recipe-details {
+	
+	visibility: hidden;
+}

minelife2/data/collections.json

@@ -0,0 +1,75 @@
+[
+	
+	{
+		"name": "habitat",
+		"img": "carpenter.png", 
+		"items": [
+			4, 
+			0, 
+			1, 
+			12, 
+			7, 
+			11, 
+			13, 
+			58
+		]
+	} 
+	
+	,{
+		"name": "culture",
+		"img": "farmer.png", 
+		"items": [
+			28, 
+			36, 
+			57, 
+			56, 
+			42,
+			43, 
+			3, 
+			59, 
+			35, 
+			49, 
+			86
+		]
+	}
+	
+	,{
+		"name": "cuisine",
+		"img": "chef.png", 
+		"items": [
+			33, 
+			17, 
+			44, 
+			87
+		]
+	} 
+	
+	,{
+		"name": "vêtement",
+		"img": "sewing.png", 
+		"items": [
+			54
+		]
+	} 
+	
+	,{
+		"name": "soin",
+		"img": "arm-plaster.png", 
+		"items": [
+			101, 
+			83, 
+			67,
+			68, 
+			69, 
+			70, 
+			71, 
+			72, 
+			73, 
+			74, 
+			75, 
+			77, 
+			100
+			
+		]
+	} 
+]