parzen/indiescience
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

24 mai

Browse source
This commit is contained in:
xxxgogo77 2021-05-24 17:27:53 +02:00
parent 4670bdae73
commit 79f0b0b27f
16 changed files with 831 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
0manifesto.html
View file

@ -16,19 +16,35 @@
<script src="js/application.js"></script>
</head>
<body>
<body class="bodyManifestoPage">
<div class="thoughtsWindows">
<div class="april">
<div class="entête">
<div class="titre"></div>
<div class="date">April 27th 2021</div>
</div>
<div class="texte">After weeks of discomfort and uncertainty about the ins and outs of this project, and what was asked of us as designers, from the Netherlands Food Partnership or the United Nations, and the feeling of a disconnect with reality, I would like to propose a catalog of non-solutions. Through the demonstration of the complexity of the cocoa and chocolate industry, I would also like to question the foundations of the subject on which we were asked to work. The underlying issues; our position as designers, the management of systemic problems by a demand for local solutions (solutions that are demanded by institutions such as the UN with a systemic scope), and what questions this relationship of requesting local and individual solutions in a global system raises.
This catalog will not show any solutions on my part, I want to question and criticize a solutionist system to which design is entirely part.
<div class="thoughtsWindows">
<div class="april">
<div class="entête">
<div class="titre"></div>
<div class="date">April 27th 2021</div>
</div>
<div class="texte">After weeks of discomfort and uncertainty about the ins and outs of this project, and what was asked of us as designers, from the Netherlands Food Partnership or the United Nations, and the feeling of a disconnect with reality, I would like to propose a catalog of non-solutions. Through the demonstration of the complexity of the cocoa and chocolate industry, I would also like to question the foundations of the subject on which we were asked to work. The underlying issues; our position as designers, the management of systemic problems by a demand for local solutions (solutions that are demanded by institutions such as the UN with a systemic scope), and what questions this relationship of requesting local and individual solutions in a global system raises.
This catalog will not show any solutions on my part, I want to question and criticize a solutionist system to which design is entirely part.
</div>
</div>
</div>
</div>
<div class="thoughtsWindows">
<div class="juin">
<div class="entête">
<div class="titre"></div>
<div class="date">May 24th 2021</div>
</div>
<div class="texte">Work in progress...
</div>
</div>
</div>
<div class="menu">
<a href="index.html"><div class=buttonsMenu>home</div></a>
<a href="1beantobar.html"><div class=buttonsMenu>next</div></a>
</div>
</body>
</html>

82
1beantobar.html
View file

@ -16,51 +16,51 @@
<script src="js/application.js"></script>
</head>
<body>
<body class="bodyManifestoPage">
<div class="object">
<img src="ImgCamille.png"/>
<a href="PageProtocol.jpg"></a>
<p>Harkin-Engel Protocol</p>
</div>
<div class="thoughtsWindows">
<div class="beantobar">
<div class="entête">
<div class="titre">from bean to bar</div>
<div class="date"></div>
</div>
<div class="texte">Chocolate, as finished or semi-finished product, is made from cocoa beans that grow on cocoa trees. The cocoa tree is a tropical species that grows at low altitudes in a hot and humid climate, preferably in regions of the world near the equator. The main countries where cocoa is cultivated are, in order of production size, Côte d'Ivoire, Ghana, Indonesia, Nigeria, Cameroon, Brazil and Equator. More than 80% of the world's cocoa production comes from family farms of less than 5 hectares.
When the cocoa beans are ripe, they are manually removed from the pod. Then the beans are fermented and dried, then washed. It is with this raw material that the manufacture of chocolate begins. The beans are sold to large western industries such as Cargill or Barry Callebaut, who process 70% of the world's cocoa.
The beans are roasted, dehulled, crushed and kneaded. The chocolate is then crystallized and molded or coated. The finished product is packaged and distributed through sales channels.
</div>
</div>
</div>
<div class="object">
<img src="ImgLison.png"/>
<a href="PageLison.pdf"></a>
<p>Packaging</p>
</div>
<div class="thoughtsWindows">
<div class="tonys">
<div class="entête">
<div class="titre">tony's chocolate</div>
<div class="date"></div>
</div>
<div class="texte">Tony's chocolate is a Dutch chocolate brand that claims to be 100% slave free. Indeed, child labor and modern slavery are the curse of the chocolate industry. As in every model of modern agriculture and supply chain this is explain by a pressure not in the middle of the chain leads by profits. Indeed, the cocoa producers are millions of small familial farms, and at the end of the chain, the consumer of chocolate who is also counts by billions. Unfortunately, the cocoa producers don’t sell directly to the consumer but have to trade with big companies who have the weight to make pressure on prices and productivity. And poverty can leads to child labor and modern slavery. Certifications or regulations are not sufficient to ensure an appropriate income for farmers.
<br><i>“On its own, a certification label does not enable farmers to live above the poverty line and provide a decent income for their families.”</i>
<br>Tony’s Chocolate proposes several principles for the companies to act. To invest in farmers cooperatives who will act locally with the farmers and therefore organize a collective force. To pay the farmers more to increase their living income. And to set up a traceability of cocoa, because during the purchase and processing of cocoa beans by western companies, certified and non-certified beans are gathered to produce chocolate.
<br><i>“If you buy a bar of chocolate made with certified cocoa you know that somewhere in the world the equivalent quantity of certified beans was purchased. But they're not necessarily in your bar.”</i>
</div>
</div>
</div>
<div class="object">
<img src="ImgRaphaelle.png"/>
<a href="PageRaphaelle.jpg"></a>
<p>Local Dish</p>
</div>
<div class="object">
<img src="ImgJuli.png"/>
<a href="PageJuli.pdf"></a>
<p>Manioc</p>
</div>
<!-- <div class="object">
<img src="ImgProtocol.png"/>
<a href="PageProtocol.jpg"></a>
</div> -->
<div class=landingPage>
<h1>Chocolate Atlas</h1>
The Chocolate Atlas takes the viewer on a non-liner route through the world of cocoa. Using
the lens of cocoa to magnify the detached consumption of goods on a global base. A melt-inyour-mouth sweet for some and, amongst others, a child-slavery-based business for others. The
reality of food is not singular, which is why the Atlas is organized in an organic spread that can
be accessed at multiple points. Cocoa and its trade route is one of the most fragmented crops of
the world, equaling in increased accountability detachment from the fruit to the bar.
<p>Project Developed
at Design Academy of Eindhoven
<br>Curated and edited
by Lison, Julia, Camille, Raphaelle, Gianmarco</p>
<div class=buttonEnter>enter</div>
</div>
<div class="thoughtsWindows">
<div class="issues">
<div class="entête">
<div class="titre"><a href="https://www.10campaign.com/issues/">10campaign/issues</a></div>
<div class="date"></div>
</div>
<div class="texte">As we have seen, the production chain is very long, both because of the stages of transformation from raw material to consumption, but also because of the many actors involved. Thus actors and stages of transformation are key points that put pressure on the whole chain. Many producers and farms are involved in this massive production which will then be consumed massively, there are two distinct poles (geographical and political) on one side producers and on the other side consumers who in terms of individuals and human beings are much more numerous than the few multinationals which constrain and decide on the whole production. The market is highly inequitable.
</div>
</div>
</div>
<div class="menu">
<a href="index.html"><div class=buttonsMenu>home</div></a>
<a href="0manifesto.html"><div class=buttonsMenu>previous</div></a>
<a href="2harkinengel.html"><div class=buttonsMenu>next</div></a>
</div>
</body>
</html>

80
2harkinengel.html
View file

@ -18,8 +18,88 @@
</head>
<body>
<!-- <div class="imageUne"><img id="images" src="harkinengel.jpg"/></div>
<div class="imageDeux"><img id="images" src="signatures.jpg"/></div> -->
<div class="quotes" id="theharkinengel">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte">The Harkin–Engel Protocol is a <mark>public-private agreement</mark> to eliminate the worst forms of child labor (defined according to the International Labour Organization (ILO)'s Convention 182) in the growth and processing of cocoa in Côte d’Ivoire and Ghana. The protocol was a voluntary agreement that partnered governments, the global cocoa industry, cocoa producers, cocoa laborers, non-governmenal organizations. The agreement laid out a series of date-specific actions, including the development of voluntary standards of public certification. The Protocol did not commit the industry to ending all child labor in cocoa production, <mark>only the worst forms of it</mark>. The parties agreed to a six-article plan:
</div>
</div>
<div class="quotes" id="inapril2018">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte">In April 2018, the Cocoa Barometer 2018 report on the $100-billion industry, said this about the child labor situation: <mark>"Not a single company or government is anywhere near reaching the sectorwide objective of the elimination of child labour, and not even near their commitments of a 70% reduction of child labour by 2020".</mark>
</div>
</div>
<div class="quotes" id="theprotocollaidout">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte"><mark>The protocol laid out a non-binding agreement for the cocoa industry to regulate itself without any legal implications</mark>, but Engel threatened to reintroduce legislation if the deadlines were not met. This agreement was one of the first times an American industry was subjected to self-regulation and <mark>one of the first times self-regulation was used to address an international human rights issue</mark>.
</div>
</div>
<div class="quotes" id="in2009">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte">In 2009, cocoa from Côte d'Ivoire and Nigeria was added to a list of products made by forced child labor maintained by the Department of Labor. This listing stemmed from a request by Anti-Slavery International in 2004 to investigate if Ivorian cocoa should be on this list. Executive Order 13126 requires federal contractors who supply products on the list must prove they have made a good faith effort to determine if the products were produced under forced labor. Thus <mark>contractors must prove they have made a good faith effort to determine if cocoa was produced under forced labor</mark>.
</div>
</div>
<div class="personnalText">
<div class="personnalTextHarkinEngel" contenteditable="true">
The protocol was signed in 2001, with the intention that the 6 principles would be implemented by 2005. At that date, the requirements were not met; no certification standard, no change in the price of chocolate to enable cocoa farmers to lift themselves out of poverty. Companies are criticised for implementing the protocol at the lowest cost, without taking action to change the business model of the cocoa industry, which remains dependent on child labour.
Indeed, the protocol is a non-binding agreement, so that the cocoa industry regulates itself without legal implication. Corporate self-regulation is favoured to address a human rights issue.
In 2009, cocoa from the Ivory Coast and Nigeria was added to the list of products produced by child labour. Under Executive Order 13126, federal contractors who supply products on the list must prove that they have made a good faith effort to determine whether the products were produced using forced labour.
With the targets still not met in 2010, a new joint statement was issued: reduce the worst forms of child labour by 70% by 2020. In 2011, the cocoa industry had not completed any of the six articles.
</div>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class=instructions>Modify the page as you wish, move elements, add text, resources... Save the page as a .pdf with <i>Ctrl+P</i> and then add it to the <i>doc</i> so the changes can be add to the page.<br>
<a href="https://docs.google.com/document/d/1Uzot5zwNLJ55anX0coKjFBTPqIJCF352L2P7B_Tq8Us/edit?usp=sharing"><div class="buttonGoogleDoc">doc</div></a>
</div>
<div class="menu">
<a href="index.html"><div class=buttonsMenu>home</div></a>
<a href="1beantobar.html"><div class=buttonsMenu>previous</div></a>
<a href="3livingincome.html"><div class=buttonsMenu>next</div></a>
</div>
</body>
</html>

105
3livingincome.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>cocoatlas</title>
<meta name="description" content="test">
<meta name="keywords" content="chocolate, cocoa">
<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/application.js"></script>
</head>
<body>
<!-- <div class="imageUne"><img id="images" src="harkinengel.jpg"/></div>
<div class="imageDeux"><img id="images" src="signatures.jpg"/></div> -->
<div class="quotes" id="theharkinengel">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte">The Harkin–Engel Protocol is a <mark>public-private agreement</mark> to eliminate the worst forms of child labor (defined according to the International Labour Organization (ILO)'s Convention 182) in the growth and processing of cocoa in Côte d’Ivoire and Ghana. The protocol was a voluntary agreement that partnered governments, the global cocoa industry, cocoa producers, cocoa laborers, non-governmenal organizations. The agreement laid out a series of date-specific actions, including the development of voluntary standards of public certification. The Protocol did not commit the industry to ending all child labor in cocoa production, <mark>only the worst forms of it</mark>. The parties agreed to a six-article plan:
</div>
</div>
<div class="quotes" id="inapril2018">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte">In April 2018, the Cocoa Barometer 2018 report on the $100-billion industry, said this about the child labor situation: <mark>"Not a single company or government is anywhere near reaching the sectorwide objective of the elimination of child labour, and not even near their commitments of a 70% reduction of child labour by 2020".</mark>
</div>
</div>
<div class="quotes" id="theprotocollaidout">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte"><mark>The protocol laid out a non-binding agreement for the cocoa industry to regulate itself without any legal implications</mark>, but Engel threatened to reintroduce legislation if the deadlines were not met. This agreement was one of the first times an American industry was subjected to self-regulation and <mark>one of the first times self-regulation was used to address an international human rights issue</mark>.
</div>
</div>
<div class="quotes" id="in2009">
<div class="entête">
<div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
<div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
</div>
<div class="texte">In 2009, cocoa from Côte d'Ivoire and Nigeria was added to a list of products made by forced child labor maintained by the Department of Labor. This listing stemmed from a request by Anti-Slavery International in 2004 to investigate if Ivorian cocoa should be on this list. Executive Order 13126 requires federal contractors who supply products on the list must prove they have made a good faith effort to determine if the products were produced under forced labor. Thus <mark>contractors must prove they have made a good faith effort to determine if cocoa was produced under forced labor</mark>.
</div>
</div>
<div class="personnalText">
<div class="personnalTextHarkinEngel" contenteditable="true">
The protocol was signed in 2001, with the intention that the 6 principles would be implemented by 2005. At that date, the requirements were not met; no certification standard, no change in the price of chocolate to enable cocoa farmers to lift themselves out of poverty. Companies are criticised for implementing the protocol at the lowest cost, without taking action to change the business model of the cocoa industry, which remains dependent on child labour.
Indeed, the protocol is a non-binding agreement, so that the cocoa industry regulates itself without legal implication. Corporate self-regulation is favoured to address a human rights issue.
In 2009, cocoa from the Ivory Coast and Nigeria was added to the list of products produced by child labour. Under Executive Order 13126, federal contractors who supply products on the list must prove that they have made a good faith effort to determine whether the products were produced using forced labour.
With the targets still not met in 2010, a new joint statement was issued: reduce the worst forms of child labour by 70% by 2020. In 2011, the cocoa industry had not completed any of the six articles.
</div>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class="wholeBoxEditable">
<div class="zoneDragBoxEditable"></div>
<textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
</div>
<div class=instructions>Modify the page as you wish, move elements, add text, resources... Save the page as a .pdf with <i>Ctrl+P</i> and then add it to the <i>doc</i> so the changes can be add to the page.<br>
<a href="https://docs.google.com/document/d/1CVcHVUmgiY5km7YVyS2ZZTxXAWepIoNlxzAISipJ8NQ/edit?usp=sharing"><div class="buttonGoogleDoc">doc</div></a>
</div>
<div class="menu">
<a href="index.html"><div class=buttonsMenu>home</div></a>
<a href="2harkinengel.html"><div class=buttonsMenu>previous</div></a>
<a href=""><div class=buttonsMenu>next</div></a>
</div>
</body>
</html>

BIN
ImgChocolateBar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 469 KiB

BIN
ImgChocolatePlanet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
ImgWholeEarthCatalog.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 335 KiB

BIN
bgthoughts.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 348 KiB

BIN
harkinengel.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 110 KiB

16
index.html
View file

@ -19,9 +19,9 @@
<body class="home">
<div class="object">
<img src="ImgProtocol.png"/>
<img src="ImgChocolateBar.png"/>
<a href="2harkinengel.html"></a>
<p>Harkin-Engel Protocol</p>
<p>harkin-engel Protocol</p>
</div>
<div class="object">
@ -43,13 +43,19 @@
</div>
<div class="object">
<img src="Img0Camille.jpg"/>
<img src="ImgWholeEarthCatalog.png"/>
<a href="0manifesto.html"></a>
<p>0. thoughts</p>
<p>thoughts</p>
</div>
<div class="object">
<img src="ImgChocolatePlanet.png"/>
<a href="1beantobar.html"></a>
<p>whole chain</p>
</div>
<div class="menu">
<a href="landingPage.html"><div class=buttonAboutus>about us</div></a>
<a href="landingPage.html"><div class=buttonsMenu>about us</div></a>
</div>
<!-- <div class=landingPage>

23
js/application.js
View file

@ -14,6 +14,29 @@ $(document).ready(function(){
}
});
$(".quotes, #images").draggable({
start: function(){
$(".quotes, #images").css({"z-index": 0});
$(this).css({"z-index": 100});
}
});
$(".wholeBoxEditable").draggable();
// $(".personnalText").draggable({
// start: function(){
// $(".personnalText").css({"z-index": 0});
// $(this).css({"z-index": 100});
// }
// });
$(".personnalText").draggable()
.click(function() {
$(this).draggable( {disabled: false});
}).dblclick(function() {
$(this).draggable({ disabled: true });
});
function nombre(value){
return Math.floor(Math.random() * value);
}

BIN
outlinebg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
signatures.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

303
styles.css
View file

@ -32,44 +32,47 @@ html {
overflow: hidden;
}
.home {
margin: 0;
padding: 0;
background: black;
background-image: url(background.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
background: black;
}
.home {
margin: 0;
padding: 0;
background: black;
background-image: url(outlinebg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
.menu {
font-family: Helvetica;
font-size: 9pt;
font-weight: normal;
position: fixed;
top: 3px;
right: 3px;
}
.menu .buttonAboutus {
.menu .buttonsMenu {
background: black;
color: white;
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 3vw;
border-radius: 1vw;
border-color: white;
padding: 0.5vw 1vw 0.5vw 1vw;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
cursor: pointer;
}
.menu .buttonAboutus:hover {
.menu .buttonsMenu:hover {
background: white;
color: black;
}
@ -155,28 +158,41 @@ body {
}
.object:nth-child(1) {
left: 69%;
top: 34%;
left: 26%;
top: 74%;
}
.object:nth-child(2) {
left: 22%;
top: 24%;
left: 49%;
top: 32%;
}
.object:nth-child(3) {
left: 38%;
top: 54%;
left: 75%;
top: 31%;
}
.object:nth-child(4) {
left: 30%;
top: 25%;
left: 63%;
top: 30%;
}
.object:nth-child(5) {
left: 56%;
top: 66%;
left: 32%;
top: 88%;
}
.bodyManifestoPage {
margin: 0;
padding: 0;
background: black;
background-image: url(bgthoughts.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
.april {
@ -187,6 +203,58 @@ body {
overflow: hidden;
}
.april .texte {
font-family: HelveticaOblique;
}
.juin {
width: 20%;
position: absolute;
top: 10vw;
left: 10vw;
overflow: hidden;
}
.juin .texte {
font-family: HelveticaOblique;
}
.beantobar {
width: 25%;
position: absolute;
top: 18vw;
left: 5vw;
overflow: hidden;
}
.tonys {
width: 35%;
position: absolute;
top: 3vw;
left: 33vw;
overflow: hidden;
}
.issues {
width: 50%;
position: absolute;
top: 35vw;
right: 5vw;
overflow: hidden;
}
.issues a:link {
color: white;
}
.issues a:visited {
color: white;
}
.issues a:active {
color: #9900ff;
}
.thoughtsWindows {
font-family: Helvetica;
font-size: 11pt;
@ -201,19 +269,198 @@ body {
border-style: solid;
color: white;
padding: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.thoughtsWindows .entête .titre {
text-align: left;
width: 50%;
}
.thoughtsWindows .entête .date {
text-align: right;
width: 50%;
}
.thoughtsWindows .texte {
font-family: HelveticaOblique;
background: white;
padding: 20px;
}
.quotes {
width: 40%;
position: absolute;
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
cursor: move;
}
.quotes:hover .entête {
opacity: 1;
}
.quotes .entête {
text-transform: uppercase;
font-size: 10pt;
background: black;
border-width: 1px;
border-style: solid;
color: white;
padding: 3px;
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.quotes .entête .titre {
text-align: left;
font-family: HelveticaOblique;
width: 50%;
}
.quotes .entête .linksource {
text-align: right;
width: 50%;
}
.quotes .texte {
background: white;
padding: 3px;
}
.quotes mark {
background-color: #9900ff;
color: white;
padding: 1px 6px 1px 6px;
}
.quotes a:link {
color: white;
}
.quotes a:visited {
color: white;
}
.quotes a:active {
color: #9900ff;
}
#inapril2018 {
top: 5vw;
right: 13vw;
}
#theharkinengel {
top: 7vw;
left: 10vw;
}
#theprotocollaidout {
top: 20vw;
left: 2vw;
}
#in2009 {
top: 15vw;
right: 4vw;
}
.personnalText {
position: absolute;
font-family: HelveticaOblique;
font-size: 11pt;
font-weight: normal;
color: white;
cursor: move;
padding: 2px;
left: 20vw;
top: 33vw;
}
.personnalText:hover {
border-width: 1px;
border-style: dashed;
border-color: white;
border-radius: 0.5vw;
}
.personnalText .personnalTextHarkinEngel {
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
column-gap: 20px;
width: 60vw;
}
.wholeBoxEditable {
position: absolute;
display: block;
width: 15vw;
top: 36vw;
right: 9px;
}
.wholeBoxEditable .zoneDragBoxEditable {
height: 15px;
width: 100%;
cursor: move;
}
.wholeBoxEditable .boxEditable {
border-width: 1px;
border-style: dashed;
border-color: white;
border-radius: 0.5vw;
position: absolute;
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
color: #9900ff;
background: black;
margin: 2px;
width: 100%;
}
.instructions {
display: block;
width: 15vw;
bottom: 8px;
right: 5px;
font-family: Helvetica;
font-size: 9pt;
font-weight: normal;
position: fixed;
border-width: 1px;
border-style: solid;
border-color: #9900ff;
background: black;
margin: 2px;
color: white;
padding: 5px;
}
.instructions .buttonGoogleDoc {
display: inline-table;
background: #9900ff;
color: white;
border-width: 1px;
border-style: solid;
border-radius: 1vw;
border-color: #9900ff;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
margin: 10px 40% 2px 40%;
cursor: pointer;
color: white;
}
.instructions .buttonGoogleDoc:hover {
background: white;
color: #9900ff;
border-color: white;
}
/*# sourceMappingURL=styles.css.map */

2
styles.css.map
View file

File diff suppressed because one or more lines are too long

287
styles.scss
View file

@ -32,20 +32,9 @@
// src: url('fonts/MigraItalic-ExtralightItalic.otf') format('opentype');
// }
html{
height: 100%;
overflow: hidden;
}
$cuteviolet: rgb(153, 0, 255);
.home{
margin: 0;
padding: 0;
background: black;
background-image: url(background.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
html{
height: 100%;
overflow: hidden;
}
@ -56,20 +45,38 @@ body{
background: black;
}
// home page
.home{
margin: 0;
padding: 0;
background: black;
background-image: url(outlinebg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
.menu {
font-family: Helvetica;
font-size: 9pt;
font-weight: normal;
position: fixed;
top: 3px;
right: 3px;
.buttonAboutus{
.buttonsMenu{
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius:3vw;
border-radius:1vw;
border-color: white;
padding: 0.5vw 1vw 0.5vw 1vw;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
cursor: pointer;
&:hover {
@ -120,6 +127,7 @@ body{
}
// landing page
.landingPage {
position: absolute;
padding: 2vw 10vw 0 10vw;
@ -167,6 +175,22 @@ body{
left: random(90) + % ;
top: random(90) + % ;
}
}
// pages thoughts
.bodyManifestoPage{
margin: 0;
padding: 0;
background: black;
background-image: url(bgthoughts.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
.april{
@ -175,6 +199,56 @@ body{
top: 20vw;
right: 20vw;
overflow: hidden;
.texte{
font-family: HelveticaOblique;
}
}
.juin{
width: 20%;
position: absolute;
top: 10vw;
left: 10vw;
overflow: hidden;
.texte{
font-family: HelveticaOblique;
}
}
.beantobar{
width: 25%;
position: absolute;
top: 18vw;
left: 5vw;
overflow: hidden;
}
.tonys{
width: 35%;
position: absolute;
top: 3vw;
left: 33vw;
overflow: hidden;
}
.issues{
width: 50%;
position: absolute;
top: 35vw;
right: 5vw;
overflow: hidden;
a:link{
color: white;
}
a:visited{
color: white;
}
a:active{
color: $cuteviolet;
}
}
.thoughtsWindows{
@ -191,24 +265,201 @@ body{
border-style: solid;
color: white;
padding: 3px;
display: flex;
.titre{
text-align: left;
width: 50%;
}
.date{
text-align: right;
width: 50%;
}
}
.texte{
font-family: HelveticaOblique;
background: white;
padding: 20px;
}
}
// pages draggeable
.quotes{
width: 40%;
position: absolute;
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
cursor: move;
&:hover .entête{
opacity: 1;
}
.entête{
text-transform: uppercase;
font-size: 10pt;
background: black;
border-width: 1px;
border-style: solid;
color: white;
padding: 3px;
opacity: 0;
display: flex;
.titre{
text-align: left;
font-family: HelveticaOblique;
width: 50%;
}
.linksource{
text-align: right;
width: 50%;
}
}
.texte{
background: white;
padding: 3px;
}
mark{
background-color: $cuteviolet;
color: white;
padding: 1px 6px 1px 6px;
}
a:link{
color: white;
}
a:visited{
color: white;
}
a:active{
color: $cuteviolet;
}
}
#inapril2018{
top: 5vw;
right: 13vw;
}
#theharkinengel{
top: 7vw;
left: 10vw;
}
#theprotocollaidout{
top: 20vw;
left: 2vw;
}
#in2009{
top: 15vw;
right: 4vw;
}
.personnalText{
position: absolute;
font-family: HelveticaOblique;
font-size: 11pt;
font-weight: normal;
color: white;
cursor: move;
padding: 2px;
left: 20vw;
top: 33vw;
&:hover{
border-width: 1px;
border-style: dashed;
border-color: white;
border-radius: 0.5vw;
}
.personnalTextHarkinEngel{
column-count: 3;
column-gap: 20px;
width: 60vw;
}
}
.wholeBoxEditable{
position: absolute;
display: block;
width: 15vw;
top: 36vw;
right: 9px;
.zoneDragBoxEditable{
height: 15px;
width: 100%;
cursor: move;
}
.boxEditable{
border-width: 1px;
border-style: dashed;
border-color: white;
border-radius: 0.5vw;
position: absolute;
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
color: $cuteviolet;
background: black;
margin: 2px;
width: 100%;
}
}
.instructions{
display: block;
width: 15vw;
bottom: 8px;
right: 5px;
font-family: Helvetica;
font-size: 9pt;
font-weight: normal;
position: fixed;
border-width: 1px;
border-style: solid;
border-color: $cuteviolet;
// border-radius: 0.5vw;
background: black;
margin: 2px;
color: white;
padding: 5px;
.buttonGoogleDoc{
display: inline-table;
background: $cuteviolet;
color: white;
border-width: 1px;
border-style: solid;
border-radius:1vw;
border-color: $cuteviolet;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
margin: 10px 40% 2px 40%;
cursor: pointer;
color: white;
&:hover {
background: white;
color: $cuteviolet;
border-color: white;
}
}
}
// stuffs
@media screen and (min-width: 1000px) {