some hours of responsive css hand-to-hand combat

library/csvparser/varlib.csv

@@ -1,6 +1,6 @@
 Id,Publication,Author,Year,Custodian,Fields,Type,Publishers,License,LicenseShort,Highlights,Comments,Currently borrowed by
 1,The Economics of Anarchism,Anarcho,2012,Varia,"Economics, Anarchism",Zine,theanarchistlibrary.org,Anti-copyright,Anti-copyright,"The labourer retains, even after  he has recieved his wages, a natural right in the thing he has produced",,No one
-2,Identity Politics - An Anthology,The Anarchist Library,,Varia,Identity politics,Zine,Paper Jam Collective,No license mentioned,No license mentioned,,me,Danny
+2,Identity Politics - An Anthology,The Anarchist Library,,Varia,Identity politics,Zine,Paper Jam Collective,No license mentioned,No license mentioned,,Varia,No one
 3,The mythology of work,CrimeThinc.com,,Varia,"Work, Anticapitalism",Zine,CrimeThinc.com,No license mentioned,No license mentioned,,"A selection from 'Work', a 376-page analysis of contemporary capitalism",
 4,Forget Shorter Showers - Why Personal Change Does Not Equal Political Change,Derrick Jensen,2009,Varia,Environmental justice,Zine,,No license mentioned,No license mentioned,Green consumerism isn't enough.,,
 5,Choreo-Graphic-Hypothesis,"<meta-author=""Joana Chicau"";>",2018,Varia,"Live Coding, Choreography",Paperback,Self published: Joana Chicau,Free Art License 1.3,Free Art License,"Theatrical actions are not necessary to the performance, Avoid if at all possible",,
@@ -23,7 +23,7 @@ Id,Publication,Author,Year,Custodian,Fields,Type,Publishers,License,LicenseShort
 23,The Moral of the Xerox,"Florian Cramer, Clara Lobregat Balaguer",2017,Varia,"Piracy, Cultural Appropriation",Zine,Self-published,No license mentioned,No license mentioned,"Printed in diocese of Cologne, Germany on the joyous occasion of the Pluriversale VII: Stealing from the west for the critical parishioners of Akademie der Kunste der Welt",,
 24,Non-Western Anarchisms,Jason Adams,,Varia,Non-Western Anarchisms,Zine,Zaba Books,No license mentioned,No license mentioned,"The purpose of this paper is to help anarchist/anti-authoritarian movements active today to reconceptualise the history and theory of first-wave anarchism on the global level, and to reconsider its relevance to the continuing anarchist project.",,
 33,The immaterial labor union #7: immersive advertisement,Lídia Pereira and Δεριζαματζορ Προμπλεμ ιναυστραλια,,Varia,"labour, Advertisement, immersion, social media",Zine,Self-published,Zine is published under Gnu free documentation license 1.3 unless otherwise specified ,GNU Free Documentation License,,,
-34,The immateriality labor union #10: immateriality,Lídia Pereira and Δεριζαματζορ Προμπλεμ ιναυστραλια,2017,Varia,"Labour, Immateriality",Zine,Self-published,GNU Free Documentation License,GNU Free Documentation License,,,Danny
+34,The immateriality labor union #10: immateriality,Lídia Pereira and Δεριζαματζορ Προμπλεμ ιναυστραλια,2017,Varia,"Labour, Immateriality",Zine,Self-published,GNU Free Documentation License,GNU Free Documentation License,,Varia,No one
 35,The immaterial labor union. Special Issue #1: Homebrew Server Club,Homebrew Server Club,2017,Varia,"Self-Hosting, Servers, DIY",Zine,Self-published,CC-BY-SA,Creative commons,,,
 36,Pervasive labour union. Special issue #2: The Entreprecariat,Silvio Lorusso,2017,Varia,"Entreprecariat, Labour, Precarity",Zine,Self-published,No license mentioned,No license mentioned,,Between April and May 2017 the Zine's name changed from Immaterial Labor Union to Pervasive Labour Union,
 37,'Pervasive labour union #13: Fed Up,Lídia Pereira,2019,Varia,"Labour, DIY, federation",Zine,Self-published,"GNU Free Documentation License 1.3, CC-0, Copyright (C) 2019, Julia Janssen, Peer Production License",GNU Free Documentation License,,,
@@ -53,5 +53,5 @@ Id,Publication,Author,Year,Custodian,Fields,Type,Publishers,License,LicenseShort
 61,Mots de la cage aux ours - woorden uit de berenkuil,Constant,2012,Varia,"words, language, Bruxelles",Softcover,Constant,Copyleft,Copyleft,,,
 62,Snake rituals and switching circuits,Florian Cramer,2009,Danny,"mass communication, personal communication, new media",paperback,Piet Zwart Institute,Creative Commons Attribution-Share Alike 3.0,Creative Commons,The function of a medium is ultimately decided by its users and not by its creators,,
 63,Magium issue 1: On Eating in isolation,Alice Strete,2020,Varia,"food, sharing, personal stories, consumption",zine,Self Published,Free Art License,Free Art License,,,No one
-64,Networks of One's Own 2: three takes on taking care,"Varia, Constant and Colm O’Neill",2019,Danny,"Software, internet, taking care, homebrew",paperback,Varia,Copyleft,Copyleft,Networks Of One’s Own is a periodic para-nodal publication that is itself collectively within a network.,,Danny
+64,Networks of One's Own 2: three takes on taking care,"Varia, Constant and Colm O’Neill",2019,Varia,"Software, internet, taking care, homebrew",paperback,Varia,Copyleft,Copyleft,Networks Of One’s Own is a periodic para-nodal publication that is itself collectively within a network.,,No one
 65,My Hard-Drive Died Along With My Heart ,Thomas Walsklaar,2016,Varia,"Hard-drives, Data, Loss, Trust, Technology, collection, materiality, obsolescence, preservation, progress, writing ",paperback,Self Published, No License Mentioned,No License Mentioned,,"We always seem to be looking for a new technical solution for knowledge and information storage. We hope there is one magical, final solution, one that will solve every issu But easy solutions create their own problems. The perceived view of the stable nature of digital information differs from reality. There are many points of failure, like old physical formats, lost or non functional machines, companies that go bankrupt, file formats with no support in the future, or changing user licenses. It seems that the more technical the technology gets, the more problems it creates.",No one

library/static/css/bookmark.css

@@ -14,3 +14,10 @@
 #pastevents:hover{
 	z-index: 1;
 }
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+	#upcomingevents,#pastevents  {
+		position:absolute;
+		width: 15%;
+		height: auto;
+	}
+}

library/static/css/dropdown.css

@@ -56,12 +56,12 @@
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
   .dropdown-content button {
-      font-size: 1.6em;
+      font-size: 0.7em;
   }
   .container > button {
-      font-size: 1.6em;
+      font-size: 0.7em;
   }
-  .dropdown > button {
+  .dropdown > button  {
-      font-size: 1.6em;
+      font-size: 0.7em;
   }
 }

library/static/css/style.css

@@ -1,6 +1,8 @@
 html, body {
   margin: 0;
   font-family: Garamond, serif;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }
 
 body:after {
@@ -27,9 +29,6 @@ body:after {
 #varia {
   line-height: 1.03em;
   position: relative;
-  top: 15%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   color: #FFFFFF;
   text-shadow: 2px 2px #8B5B7F;
   font-size: 52px;
@@ -72,7 +71,6 @@ body:after {
 }
 
 #publication {
-  max-width: 640px;
 	margin-top: 3em;
 }
 
@@ -89,9 +87,11 @@ body:after {
 .event {
   margin: 0 1em 1em;
   max-width: calc(90% - 3em);
+  min-width: calc(90% - 3em);
   margin-top: 3em;
   padding: 6px;
-  display: block;
+  display: inline-block;
+  float: left;
   border: 3px solid black;
   background-color: #f1f1f1;
   border-spacing: 0;
@@ -114,7 +114,6 @@ table {
   border: 3px solid black;
   background-color: #f1f1f1;
   border-spacing: 0;
-  border-collapse: collapse;
 }
 
 tr {
@@ -136,7 +135,6 @@ td {
 
 .tdimage > img {
   width: 100%;
-  height: 100%;
 }
 
 .error{
@@ -148,7 +146,12 @@ a:hover { text-decoration: none; }
 a:active { text-decoration: none; }
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
-  td {
+  #varia {
-      font-size: 1.6em;
+    text-align: left;
+    max-width: 70%;
+  }
+  .event {
+    max-width: 90%;
+    margin: 3em 1em 1em 1em;
   }
 }

library/static/css/upload.css

@@ -58,3 +58,8 @@ fieldset{
   padding-top: 0em;
   padding-left: 0em;
 }
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
+  #uploadform {
+      max-width: 100%;
+  }
+}

library/static/js/script.js

@@ -22,7 +22,7 @@ const cloud = document.querySelector('#cloud');
 
 function update() {
   if (window.screen.availWidth > 400 && window.screen.availHeight > 400 ) {
-    cloud.style.boxShadow = boxShadows(15);
+    cloud.style.boxShadow = boxShadows(30);
   }
   else {
     document.body.style.backgroundImage = "linear-gradient(to bottom right, white, #F52D75)";

library/templates/base.html

@@ -2,6 +2,7 @@
 <html lang='en'>
 <head>
 	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>varia library zone</title>
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css')}}">
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dropdown.css')}}">

library/templates/pastevents.html

@@ -11,7 +11,6 @@
   <div class="event">
     <h2>{{ eventtitle }}</h2>
     {{ text[0]|safe }}
-    <hr>
     <p>For those interested to learn more on the topics of this read and repair event the physical library at varia offers the following books:</p>
     <ul>
       {% for link, booktitle in text[1].items() %}

library/templates/publication.html

@@ -7,81 +7,83 @@
     <button id="Year" class="dropbtn">Year</button>
   </div>
 </div>
-<table id="publication">
+<div id="publication">
-  <tbody>
+  <table>
-    {%if fullpublication["Image"]%}
+    <tbody>
-    <tr>
+      {%if fullpublication["Image"]%}
-      <td colspan="2" class="tdimage">
+      <tr>
-        <img src="{{ url_for('static', filename='images/image-{0}.jpg'.format(publicationID))}}" alt="">
+        <td colspan="2" class="tdimage">
-      </td>
+          <img src="{{ url_for('static', filename='images/image-{0}.jpg'.format(publicationID))}}" alt="">
-    </tr>
+        </td>
-    {% endif %}
+      </tr>
-    <tr>
+      {% endif %}
-      <td>Title of publication</td>
+      <tr>
-      <td>{{ fullpublication["Title"] }}</td>
+        <td>Title of publication</td>
-    </tr>
+        <td>{{ fullpublication["Title"] }}</td>
-    <tr>
+      </tr>
-      <td>Author/Editor</td>
+      <tr>
-      <td>{{ fullpublication["Author"] }}</td>
+        <td>Author/Editor</td>
-    </tr>
+        <td>{{ fullpublication["Author"] }}</td>
-    <tr>
+      </tr>
-      <td>Year</td>
+      <tr>
-      <td>{{ fullpublication["Year"] }}</td>
+        <td>Year</td>
-    </tr>
+        <td>{{ fullpublication["Year"] }}</td>
-    <tr>
+      </tr>
-      <td>Custodian</td>
+      <tr>
-      <td>{{ fullpublication["Custodian"] }}</td>
+        <td>Custodian</td>
-    </tr>
+        <td>{{ fullpublication["Custodian"] }}</td>
-    <tr>
+      </tr>
-      <td>Fields</td>
+      <tr>
-      <td>{{ fullpublication["Fields"] }}</td>
+        <td>Fields</td>
-    </tr>
+        <td>{{ fullpublication["Fields"] }}</td>
-    <tr>
+      </tr>
-      <td>Type of publication</td>
+      <tr>
-      <td>{{ fullpublication["Type"] }}</td>
+        <td>Type of publication</td>
-    </tr>
+        <td>{{ fullpublication["Type"] }}</td>
-    <tr>
+      </tr>
-      <td>Publishers</td>
+      <tr>
-      <td>{{ fullpublication["Publishers"] }}</td>
+        <td>Publishers</td>
-    </tr>
+        <td>{{ fullpublication["Publishers"] }}</td>
-    <tr>
+      </tr>
-      <td>License</td>
+      <tr>
-      <td>{{ fullpublication["License"] }}</td>
+        <td>License</td>
-    </tr>
+        <td>{{ fullpublication["License"] }}</td>
-    <tr>
+      </tr>
-      <td>Highlights</td>
+      <tr>
-      <td><p>{{ fullpublication["Highlights"] }}</p></td>
+        <td>Highlights</td>
-    </tr>
+        <td><p>{{ fullpublication["Highlights"] }}</p></td>
-    <tr>
+      </tr>
-      <td>Comments</td>
+      <tr>
-      <td><p>{{ fullpublication["Comments"] }}</p></td>
+        <td>Comments</td>
-    </tr>
+        <td><p>{{ fullpublication["Comments"] }}</p></td>
-    <tr>
+      </tr>
-      <td>Currently borrowed by:</td>
+      <tr>
-      <td><p>{{ fullpublication["Borrowed"] }}</p></td>
+        <td>Currently borrowed by:</td>
-    </tr>
+        <td><p>{{ fullpublication["Borrowed"] }}</p></td>
-    <tr>
+      </tr>
-      <td colspan="2">
+      <tr>
-        <form class="borrow" method="POST" action="/{{ publicationID }}">
+        <td colspan="2">
-          {{ borrowform.csrf_token }}
+          <form class="borrow" method="POST" action="/{{ publicationID }}">
-          <fieldset class="borrowform-field">
+            {{ borrowform.csrf_token }}
+            <fieldset class="borrowform-field">
               {{ borrowform.borrowed.label }}
               {{ borrowform.borrowed }}
               {% for message in borrowform.borrowed.errors %}
-               <div class="error">{{ message }}</div>
+              <div class="error">{{ message }}</div>
               {% endfor %}
-          </fieldset>
+            </fieldset>
-          <fieldset class="borrowform-field">
+            <fieldset class="borrowform-field">
               {{ borrowform.secret.label }}
               {{ borrowform.secret }}
               {% for message in borrowform.secret.errors %}
-               <div class="error">{{ message }}</div>
+              <div class="error">{{ message }}</div>
               {% endfor %}
-          </fieldset>
+            </fieldset>
-          {{ borrowform.submit }}
+            {{ borrowform.submit }}
-        <form>
+            <form>
-      </td>
+            </td>
-    </tr>
+          </tr>
-  </tbody>
+        </tbody>
-</table>
+      </table>
-{% endblock %}
+    </div>
+    {% endblock %}