Browse Source

added how to section, made style changes

master
Cristina Cochior 4 years ago
parent
commit
49bdd73e76
  1. 170
      static/css/main.css
  2. 24
      static/js/mergedjson.json
  3. 109
      templates/layout.html

170
static/css/main.css

@ -1,15 +1,7 @@
@font-face {
font-family: "Euripides";
src: url("fonts/Euripides-SemiBold_web.woff") format("woff"),
url("fonts/Euripides-SemiBold_web.woff2") format("woff2"),
url("fonts/Euripides.otf") format("otf");
}
@font-face {
font-family: "Cirrus";
src: url("fonts/CirrusCumulus.woff") format("woff"),
url("fonts/CirrusCumulus.ttf") format("ttf"),
url("fonts/CirrusCumulus.otf") format("otf");
font-family: "ApfelGrotezk";
src: url("fonts/ApfelGrotezk-Regular.woff") format("woff"),
url("fonts/ApfelGrotezk-Regular.woff2") format("woff2");
}
@font-face {
@ -18,48 +10,39 @@
url("fonts/Coconat-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Kaerukaeru";
src: url("fonts/kaerukaeru-Regular.woff") format("woff"),
url("fonts/kaerukaeru-Regular.woff2") format("woff2"),
url("fonts/kaerukaeru-Regular.otf") format("otf");
}
@font-face {
font-family: "ApfelGrotezk";
src: url("fonts/ApfelGrotezk-Regular.woff") format("woff"),
url("fonts/ApfelGrotezk-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Phili";
src: url("fonts/PhiliItaRus.woff") format("woff"),
url("fonts/PhiliItaRus.ttf") format("ttf");
* {
box-sizing: border-box;
font-family: 'ApfelGrotezk', sans-serif;
}
@font-face {
font-family: "Certegeska";
src: url("fonts/CertegeskaStraight.woff") format("woff"),
url("fonts/CertegeskaStraight.ttf") format("ttf");
*::selection {
background: white;
color: black;
}
* {
box-sizing: border-box;
*::-moz-selection {
background: white;
color: black;
}
body{
margin: 0;
height: 100vh;
font-family: 'Cirrus';
}
a {
text-decoration: none;
color: black;
}
sup#fn54, sup#fn38, sup#fn66 {
word-break: break-all;
}
sup a {
color: white;
}
.main {
background: #a99f8a;
}
@ -81,8 +64,8 @@ a {
background: #8048b7;
overflow-y: scroll;
height: 100vh;
clip-path: ellipse(50% 70% at center center);
-webkit-clip-path: ellipse(49% 70% at center center);
/* clip-path: ellipse(50% 70% at center center); */
/* -webkit-clip-path: ellipse(49% 70% at center center); */
}
.main:after {
@ -112,15 +95,16 @@ li span.nav-button {
display: block;
text-decoration: none;
padding: 0.25em;
font-family: 'Cirrus', sans-serif;
font-family: sans-serif;
float: left;
width: 33.33%;
}
li span.nav-button:hover {
color: #ea4f2b;;
color: #8048b7;
}
.nav-top {
height: 24px;
background: white;
@ -145,11 +129,11 @@ span.librarian-names, span.file-names {
text-decoration: none;
padding: 0.3em;
color: black;
font-family: sans-serif;
font-family: 'ApfelGrotezk', sans-serif;
}
span.librarian-names:hover, span.file-names:hover {
color: white;
color: #8048b7;
cursor: pointer;
}
@ -192,7 +176,6 @@ height: inherit;
#listoffiles{
overflow: hidden;
}
.file-names-container {
@ -216,7 +199,7 @@ height: inherit;
}
/**************/
/* scROLLBARS*/
/* SCROLLBARS*/
/*************/
@ -258,15 +241,15 @@ audio.listed-audio {
object.listed-pdf {
width: 100%;
height: 75vh;
height: 70vh;
}
.methodclicked {
color: #ea4f2b !important;
color: #8048b7 !important;
}
.clicked {
color: white !important;
color: #8048b7 !important;
}
button {
@ -280,6 +263,10 @@ button:hover {
cursor: pointer;
}
button:focus {
outline: none;
}
button#listoffiles {
position: fixed;
left: 46.3%;
@ -309,11 +296,11 @@ button#about:hover {
button#about {
position: fixed;
left: 48.25%;
top: 47%;
background: #f0f0f0;;
left: 47.8%;
top: 45.5%;
background: #f0f0f0;
border-radius: 100%;
padding: 1.6em 0.8em;
padding: 2em 0.9em;
z-index: 3;
}
@ -324,10 +311,10 @@ button#about:hover {
button#reset {
position: fixed;
left: 48.3%;
top: 36%;
left: 47.85%;
top: 35%;
border-radius: 100%;
padding: 1.5em 0.8em;
padding: 2em 1em;
}
button#reset:hover {
@ -337,10 +324,10 @@ button#reset:hover {
button#showall {
position: fixed;
left: 47.8%;
bottom: 34.4%;
left: 47.85%;
bottom: 34.7%;
border-radius: 100%;
padding: 2.1em 0.8em;
padding: 2.05em 0.4em;
}
button#showall:hover {
@ -348,46 +335,91 @@ button#showall:hover {
cursor: pointer;
}
#insert {
button.download {
padding: 0.7em 0.7em;
border-radius: 5px 21px 5px 21px;
}
button.download:hover {
background: #ea4f2b;
}
#intro p, #howto p, #insert p {
line-height: 1.5em;
}
#intro, #howto, #insert {
border-radius: 10px 50px 10px 50px;
overflow-y: scroll;
position: fixed;
display: none;
padding: 1em;
position: fixed;
}
#insert {
left: 20%;
top: 5%;
background: #8048b7;
width: 30%;
height: 90%;
overflow: scroll;
z-index: 1;
}
#intro {
display: none;
padding: 1em;
position: fixed;
left: 25%;
top: 10%;
background: #ea4f2b;
width: 25%;
height: 80%;
overflow: scroll;
z-index: 1;
}
#howto {
display: none;
padding: 1em;
position: fixed;
left: 30%;
top: 15%;
background: #8048b7;
width: 20%;
height: 70%;
overflow: scroll;
z-index: 2;
}
#howto audio {
width: 100%;
}
#closeintro, #closehowto, #closeinsert {
float: right;
cursor: pointer;
position: fixed;
background: black;
padding: 0 0.2em 0.3em 0.2em;
border-radius: 5px 25px 5px 25px;
}
#closeintro:hover, #closehowto:hover, #closeinsert:hover {
background: white;
}
div#closehowto {
margin-left: 14em;
color: #8143b9;
}
div#closeintro {
margin-left: 18.4em;
color: #ec4e1e;
}
div#closeinsert {
margin-left: 22.8em;
color: #8143b9;
}
span.method-label {
text-transform: capitalize;
}
hr {
border-style: ridge;
color: white;
}

24
static/js/mergedjson.json

@ -163,13 +163,6 @@
]
},{
"method": "copied",
"debrisname": "crystal_radio_advertisement.png",
"debrispath": "COPIED/debris.copied.collaboration_is/debris.copied.references.collaboration_is.crystal_radio_advertisement.png",
"librarian": [
"Cyberspace"
]
},{
"method": "copied",
"debrisname": "estherleslie-liquidcrystals_thescienceandartofafluidform-reaktionbooks(2016).pdf",
"debrispath": "COPIED/debris.copied.collaboration_is/debris.copied.references.collaboration_is.estherleslie-liquidcrystals_thescienceandartofafluidform-reaktionbooks(2016).pdf",
"librarian": [
@ -1105,8 +1098,8 @@
]
},{
"method": "found",
"debrisname": "jeremiah_day_workshop_using_simone_forti_techniques.JPG",
"debrispath": "FOUND/debris.found.look/debris.found.look.jeremiah_day_workshop_using_simone_forti_techniques.JPG",
"debrisname": "jeremiah_day_workshop_using_simone_forti_techniques.jpg",
"debrispath": "FOUND/debris.found.look/debris.found.look.jeremiah_day_workshop_using_simone_forti_techniques.jpg",
"librarian": [
"Amy",
"Jeremiah",
@ -2083,7 +2076,7 @@
},{
"method": "gift",
"debrisname": "screen_studies_Joan_Jonas,_Left_Side_Right_Side_2015.jpg",
"debrispath": "GIFT/debris.gift.asking/debris.gift.asking.laura/debris.gift.asking.laura.screen_studies_images/asking.laura_screen_studies_Joan_Jonas,_Left_Side_Right_Side_2015.jpg",
"debrispath": "GIFT/debris.gift.asking/debris.gift.asking.laura/debris.gift.asking.laura.screen_studies_images/debris.gift.asking.laura_screen_studies_Joan_Jonas,_Left_Side_Right_Side_2015.jpg",
"librarian": [
"Laura"
]
@ -2851,7 +2844,7 @@
]
},{
"method": "repurposed",
"debrisname": "moon.pdf",
"debrisname": "ecstatic_speech.moon.pdf",
"debrispath": "REPURPOSED/debris.repurposed.ecstatic_speech/debris.repurposed.ecstatic_speech.moon.pdf",
"librarian": [
"Emma",
@ -2918,7 +2911,7 @@
]
},{
"method": "repurposed",
"debrisname": "script.pdf",
"debrisname": "memory_as_palimpsest.script.pdf",
"debrispath": "REPURPOSED/debris.repurposed.memory_as_palimpsest/debris.repurposed.memory_as_palimpsest.script.pdf",
"librarian": [
"Amy",
@ -3149,4 +3142,11 @@
"librarian": [
"Amy"
]
},{
"method": "bought",
"debrisname": "180712_hp_agreementconditions_2018_2019_amypickles.pdf",
"debrispath": "BOUGHT/180712_hp_agreementconditions_2018_2019_amypickles.pdf",
"librarian": [
"WDKA"
]
}]

109
templates/layout.html

@ -6,8 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Library</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Almendra&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Palanquin&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/highlight.js') }}"></script>
@ -152,9 +150,12 @@ function getCookie(name) {
var category = null;
for (var i = 0; i < test.length; ++i) {
var item = test[i];
// console.log(item.debrisname);
if(item.debrisname.includes(thefile)){
ledocument = item.debrispath;
lelibrarian = item.librarian;
methodstring = item.method;
var librarianstring = lelibrarian.join(', ');
var extension = ledocument.replace(/^.*\./, '');
// var classname = ledocument.substring(ledocument.lastIndexOf('/')+1);
// classname = classname.substr(0, classname.lastIndexOf('.')) || classname;
@ -173,23 +174,16 @@ function getCookie(name) {
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
}
else if (extension=="pdf") {
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
}
else if (extension=="epub") {
$(".name-elements").append("<li>"+ledocument+"</li>");
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
}
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
}
else if ((extension=="mov") || (extension=="mp4")) {
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
}
else if ((extension=="odt") || (extension=="docx")) {
// something for odt and docx
$(".name-elements").append("<li>"+ledocument+"</li>");
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
};
};
category = item.method;
@ -217,7 +211,8 @@ var flag = true;
var extension = ledocument.replace(/^.*\./, '');
var classname = ledocument;
lelibrarian = item.librarian;
methodstring = item.method;
var librarianstring = lelibrarian.join(', ');
// check or unchecked checkbox if classname in array
var checkboite;
@ -230,23 +225,16 @@ var flag = true;
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
}
else if (extension=="pdf") {
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
}
else if (extension=="epub") {
$(".name-elements").append("<li>"+ledocument+"</li>");
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
}
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
}
else if ((extension=="mov") || (extension=="mp4")) {
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video><br><span class='librarians-label'>Librarian(s): "+lelibrarian+"</span><br><a href='/files/"+ledocument+"' download><button>Download file</button></a></li>");
}
else if ((extension=="odt") || (extension=="docx")) {
// something for odt and docx
$(".name-elements").append("<li>"+ledocument+"</li>");
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video><br><br><span class='librarians-label'><b>Librarian(s):</b> "+librarianstring+"</span><br><span class='method-label'><b>Method:</b> "+methodstring+"</span><br><br><a href='/files/"+ledocument+"' download><button class='download'>Download file</button></a></li>");
};
};
category = item.method;
@ -561,8 +549,75 @@ var flag = true;
<!-- HOW TO -->
<div id="howto">
<div id="closehowto">x</div>
<h1>how to</h1>
<p>this text will follow soon</p>
<h1>how to use</h1>
<p>This interface performing as an online library of debris is made out of necessity for spaces and modes of organisation that are other to archetypal libraries. You will not be able to find an item by name or author, but only through the relations which made the entry into the collection possible. As it is important for a multiplicity of forms of organisation to exist, knowledge organised into a system made by organised people also organised by a system, (capitalist, neoliberal, colonial, surveillance state, take your choice) it is also paramount to recognise the multiplicity of kinds of labour, and positioning, which lead to references being added to a collection. Each contributor to the library, a Librarian, has done their own work of collecting through their research and has reached the material they contributed to the library through a Method.</p>
<p>This text will tell you a few things about ways in which you can navigate this collection.</p>
<p>Where L stands for <i>Librarian</i>, M for <i>Method</i> and a Set is a <i>Collection</i>:</p>
<p>L's are all the first names at the top left side of your screen.<br>
M's are the three words on the top and the three words at the bottom of your screen.<br>
∪ is a union of sets.<br>
∩ is an intersection of sets.<br>
\ is a substraction of sets.</p>
<p><b>L1 :</b> If you click on one L, you see what they contributed to the library.</p>
<p><b>L1 ∪ L2 ∪ ... ∪ Ln :</b> If you click on more L's, you see what items each of them added to the library side by side.</p>
<p><b>L1 ∩ M1 :</b> If you click on one librarian and a method, you will see what the librarian contributed to the collection through that particular way.</p>
<p><b>(L1 ∪ L2 ∪ L3 ∪ ... ∪ Ln) ∩ M1 :</b> If you click on many librarians and one method, you will see a collection of files that were obtained by the library through that particular method by all the selected librarians together.</p>
<p><b>(L1 ∪ L2 ∪ L3 ∪ ... ∪ Ln) ∩ (M1 ∪ M2 ∪ ... ∪ Mn) :</b> If you click on many librarians and many methods, it will do the same as above and keep adding new collections for every new method added.</p>
<p><b>(L1 ∪ L2 ∪ ... ∪ Ln) \ L1 or (M1 ∪ M2 ∪ ... Mn) \ M1 :</b> You can unclick both librarians and methods.</p>
<p>We hope you enjoy your time here.</p>
<h3>audio works</h3>
<p>After putting together this collection and setting paths which you can use to traverse it, we invited three artists to share their experience of being among the files in a sonic work: Martin Gugger, Arvand Pourabbasi and Simnikiwe Buhlungu. You can listen to them below.</p>
<p>Martin Gugger is a french artist who likes to experiment with language(s) and the beauty that can result from misunderstandings and double entendres. When he doesn't sing cheerful lyrics on hardcore techno in festivals with his band Salut c'est cool, he likes to perform and plays with multimedia installations in which he is confronted with his own failures and difficulties to grasp certain simple situations. His clumsy body enters into a loop until it becomes absurd, but it's endearing and somehow conforting to see him try to succeed.</p>
<audio controls>
<source src="{{ url_for('static', filename='audioworks/superflies.wav') }}" type="audio/wav">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<p>Arvand Pourabbasi is an artist, architect, educator, and maker. He is a co-founder of WORKNOT! Arvand is a co-editor and facilitator in Sarmad, a platform dedicated to politics of image. He is also a co-founder and co-curator of Neverland Cinema, a weekly neighbourhood screening program focused on situated cinematography. His work has been presented in Venice Biennale of Architecture, Sharjah Architecture Triennial, Tehran Architecture Biennale, Showroom MAMA, Witte de With Center for Contemporary Art, Architecture Banal, among more. Arvand holds a Masters degree in Interior Architecture (INSIDE) from Koninklijke Academie van Beeldende Kunst in Den Haag; and he has been a recipient of Talent Development grant from Stimuleringsfonds (2019-2020). Arvand is currently teaching at Willem de Kooning Academie, Rotterdam, and formerly tutored at Koninklijke Academie van Beeldende Kunst, Den Haag.</p>
<audio controls>
<source src="{{ url_for('static', filename='audioworks/Arvand.mp3') }}" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<p>Simnikiwe Buhlungu (1995) is an artist from Johannesburg, South Africa, and currently based in Amsterdam, Netherlands. Recent projects include Bergen Assembly: Actually, The Dead Are Not Dead, Bergen, Norway, 2019, and Collective Intimacies - Notes to Self: Intimate 1 , mural project, The Showroom, London, UK, 2019. She obtained her BA(FA) degree from the University of the Witwatersrand, Johannesburg (2017) and currently based in Amsterdam, Netherlands at the Rijksakademie van Beeldende Kunsten (2020 - 2022). Interested in knowledge production, how it is produced - and by whom – its dissemination and its nuances as an ecology, she uses her practices to wrestle between these questions and their inexhaustible potential answers. Lately, she enjoys listening to gospel music and has been thinking about combo organs.</p>
<audio controls>
<source src="{{ url_for('static', filename='audioworks/Berlin_To_Berlin.mp3') }}" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<h3>copyright notice</h3>
<p>Some of the text, images, graphics, audio and video clips on this website are protected by copyright law, where the copyright is owned by third parties. <i>author</i> is making the third-party material available to you under the fair use doctrine. Fair use permits only certain limited uses of the material.</p>
<p>You may use the website and its material only for your personal, educational and scholarly use. If you wish to distribute or make any of it available to others, or to use it for any purpose other than your personal, educational and scholarly use, you must obtain any required permission from the copyright holder.</p>
<p>If you are the copyright holder and would like to take down any of the files, please contact us at amymaypickles@gmail.com.</p>
<p>We want to recognise the labour of writing and publishing, and encourage those who can invest in knowledge do so through the purchase of a book. As the publishing house Minor Compositions write in their Open Access Statement, one can think of buying physical copies not as the purchase of commodities, but as a form of support or solidarity for an approach to knowledge production and engaged research (particularly when purchasing directly from the publisher).<sup><a href="#fn65" id="ref65">1</a></sup> We are strongly intonating on the word particularly, and would like to add that on all accounts do not make a purchase through amazon. This company accounts for 40% of “online retail sales in the e-commerce market stream”, controls 75% of all online marketplace salesiiand engages in predatory pricing to obliterate competing sellers.<sup><a href="#fn66" id="ref66">2</a></sup> What will we be learning when one ultra aggressive, north american company is the sole distributor of our curricula? Our library is made as an extension of access and a nudge towards reconfiguring outdated syllabi.</p>
<hr>
<sup id="fn65">1. Harney, S. & Moten F. (2018) The Undercommons: Fugitive Planning & Black Study. <a href="#ref65" title="Jump back to footnote 1 in the text."></a></sup><br>
<sup id="fn66">2. https://www.medianama.com/2020/08/223-takeaways-jeff-bezos-antitrust-hearing/<a href="#ref66" title="Jump back to footnote 2 in the text."></a></sup><br>
</div>
<!-- -->

Loading…
Cancel
Save