incorporating updates from Joana

web/app/static/styles/custom.css

     --color-gray: #edecec;
     --color-blue: #4f1dff;
     --color-pink: #cc285f;
-    --title-font: "MetaAccanthis"; /* Cmunobi */
+    --title-font: "Compagnon-T"; /* Cmunobi */
     --body-font: "Compagnon";
 
     /*@media screen and (min-width: 320px)*/
 h1, .h1 {
     font-family: var(--title-font) !important;
     font-size: var(--title-fontsize) !important;
-    -webkit-text-stroke-width: 0.01rem;
+    -webkit-text-stroke-width: 0.09rem;
     -webkit-text-stroke-color: black;
-    font-style: italic;
+    letter-spacing: -0.15rem;
 }
 
 a.h1 {
     color: var(--color-lightyellow) !important;
 }
 
+/* overwrite */
+.p-5 {
+    padding: 3.5rem !important;
+}
+
 /* INDEX */
 
 .border, .border-dark {
   box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark)  !important;
 }
 
-button#notes, .action {
-    margin: 1rem 2rem;
+.arrow-back {
+    position: fixed;
+    left: 0;
+    margin: 0.5rem;
+}
+
+.action {
+    margin: 1.5rem 3rem;
     z-index: 999;
     position: fixed;
     top: 0;
     border: none;
  }
 
-button#notes:hover {
+ .action button:hover {
+    color: var(--color-dark)  !important; 
+ }
+
+
+#random-img-page .action button:hover {
+    color: var(--color-whitish)  !important; 
+ }
+
+button#notes, button#notes-operations{
+    position: fixed; 
+    top: 0; 
+    right:0;
+    margin: 0.25rem 0.75rem; 
+    color: var(--color-whitish) !important;
+    background: var(--color-pink) !important;
+    border: 0.1rem solid var(--color-pink) !important;
+    border-radius: 5rem 3rem;
+    height: 2rem;
+    width: 2rem;
+    line-height: 0.1rem;
+}
+
+button#notes:hover, button#notes-operations:hover {
     color: var(--color-dark)  !important;
 }
 
     font-size: var(--body-fontsize-s);
     margin: 0.5rem 1rem;
 }
+.operations {
+    font-size: var(--body-fontsize-s);
+}
 
 .w-6 {
     max-width: 75%;
 
 @media screen and (min-width:0px) and (max-width: 768px) {
 
+/* overwrite */
+.p-5 {
+    padding: 0.5rem !important;
+}
+
+
   /* INDEX SEARCH */
 
   input#inputsearch {
     width: 250px;;
   }
 
+/* RANDOM TITLES */
+
+  .action button {
+    font-size: 1rem;
+ }
+
   /* RANDOM IMAGES */
   #random-img-page .img-fluid:hover {
     transform: none;

web/app/templates/abstracts.html

 
 <div class="action">
   <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ add a random title from dataset;</span>
+  </span>
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
 </div>
 
 <div id="rdn-abstracts">
   <div class="row">
     <div class="col m-5">
-      <p class="h1 text-center">Reading Fragments</p>
-      <!-- The following total reading time is based on the calculation of approx. 43,647,513 words in all the documents divided by 200 as the average reading speed of 200 wpm -->
-      <p class="mt-2 text-center">a <span id="time"></span> minute read out of 218238 minutes reading time</p>
-      <a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
+      <p class="h1 text-center">a Handful of Fragments</p>
+      <span class="info mt-2 text-center" style="display: none;">
+        <!-- The following total reading time is based on the calculation of approx. 43,647,513 words in all the documents divided by 200 as the average reading speed of 200 wpm -->
+        <p class="operations">↪ a <span id="time"></span> minute read out of 218238 minutes reading time</p>
+      </span>
+      <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
     </div>
   </div>
 

web/app/templates/compare.html

 
 <div class="action">
   <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ new display of random records from the dataset;</span>
+  </span>
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
+  <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
 </div>
 
-<a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
-
 <div class="compare mt-5">
 
   {% for result in results %}
     <div class="mt-5 text-center skewY">
 
     {% if result['title'] is defined %}
-    <p class="h1 mb-2">
+    <h1 class="h1 mt-4 mb-2">
       Title:
       {{ result['title'] }}
-    </p>
+    </h1>
     {% endif %}
 
     {% if result['year'] is defined %}

web/app/templates/data.html

 
 {% block content %}
 
-<a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
+<a href="{{ url_for('main.index') }}" class="h1 text-left" title="back to index"> ⇽ </a>
 
-There are a total of {{ total_number }} patents.
+<h1 class="h1 text-center"> There are a total of {{ total_number }} patents.</h1>
+
+<div class="anchordata">
+<a href="#time">temporal focus</a>
+<br>
+<a href="#geo">geographic focus</a>
+</div>
 
 <br><br>
 
   </div>
 </div>
 
+<div id="time">
 <canvas id="chartOfYearFrequency" width="600" height="300"></canvas>
+</div>
+
+<div id="geo">
 <canvas id="chartOfCountryFrequency" width="600" height="300"></canvas>
+</div>
 
 <script type="text/javascript">
   // retrieve variables passed from Python
           display: true,
           text: 'number of patent records for each year'
         },
+      animation: {
+        onComplete: () => {
+          delayed = true;
+        },
+        delay: (context) => {
+          let delay = 0;
+          if (context.type === 'data' && context.mode === 'default' && !delayed) {
+            delay = context.dataIndex * 1000 + context.datasetIndex * 100;
+          }
+          return delay;
+          },
+        },
       },
       responsive: true,
       scales: {
       }
     }
   };
-
+  
   Chart.defaults.font.family = 'Compagnon'
   var yearGraph = new Chart(
     document.getElementById('chartOfYearFrequency'),
     config
   );
+
 </script>
 
 <script type="text/javascript">

web/app/templates/images.html

 
 {% block content %}
 
-  <div class="action">
-    <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
-    <!--<button onclick="" title="add one">+</button>-->
-    <button onclick="removeRandomImage()" title="remove">-</button>
-  </div>
+<div class="action">
+  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ new display of random images from dataset;</span>
+  </span>
+  <button  onclick="" title="add one">+</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ add a random image from dataset;</span>
+  </span>
+  <button  onclick="removeRandomImage()"  title="remove one">-</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ remove a random image from page;</span>
+  </span>
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
+  <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left contrast" style="color: var(--color-lightyellow) !important;" title="back to index"> ⇽ </a>
+</div>
 
-  <a href="{{ url_for('main.index') }}" class="h1 text-left contrast" style="color: var(--color-lightyellow) !important;"> ⇽ </a>
 
   <div class="row">
     <div class="col m-5">
-      <p class="h1 text-center contrast">Layering of Images</p>
+      <p class="h1 text-center contrast">a Scattering of Images</p>
     </div>
   </div>
 

web/app/templates/index.html

 {% block content %}
 
 <div class="action">
-  <button id="notes" onclick="hideShowInfo()">ⓘ</button>
+  <button id="notes" onclick="hideShowInfo()">?</button>
+  <!-- 👁 ⓘ ⅈ  ✍  ⁐ -->
 </div>
 
 <div class="index-row button-search random-interferences">
 </div>
 
 <div class="info note-interference" style="display: none;">
-  <p class="code"> // Interferences: Search interferences perform data otherwise. They disrupt ordering and invite unexpected readings.</p>
+  <p class="code"> ↪ Interferences: Search interferences perform data otherwise. They disrupt ordering and invite unexpected readings.</p>
 </div>
 
 <div class="index-row">
 
 <div class="info" style="display: none;">
   <p class="code">
-    // Main search engine sorting code:
+    ↪ Main search engine sorting code:
     solrurl = 'http://' + solr_hostname + ':' + solr_port + '/solr/' + core + '/select?q.op=OR&q=content%3A' + urllib.parse.quote_plus(search) + '&wt=json&sort=' + sort; request = requests.get(solrurl); json = request.json()
   </p>
 </div>
   </div>
 
   <div class="col text-center p-2">
-    <!-- timeline of search term -->
-    <a href="{{ url_for('random.two_random_records') }}">a timeline of inventions</a>
+    <!-- data page -->
+    <a href="{{ url_for('data.main_data') }}">mapping the archive</a>
   </div>
 </div>
 
 <div class="index-row justify-content-center mt-5">
   <div class="col text-center button-search button-hidden-off p-2">
-    <a href="">Hidden in plain sight</a>
+    <a href="">hidden in plain sight</a>
 
       <div class="info" style="display: none;">
-        <p class="code">// Searching for a history of women’s clothing inventors, that is in the archive, but hidden in plain sight.... </p>
+        <p class="code"> ↪ Searching for a history of women’s clothing inventors, that is in the archive, but hidden in plain sight.... </p>
       </div>
   </div>
 
    <div class="col text-center button-search button-hidden-off p-2">
-    <a href="{{ url_for('main.contents') }}">Search as a book</a>
+    <a href="{{ url_for('main.contents') }}">search as a book</a>
 
       <div class="info" style="display: none;">
-        <p class="code">// Find here a table of contents for this digital archive... </p>
+        <p class="code"> ↪ Find here a table of contents for this digital archive... </p>
       </div>
   </div>
 
 
   <div class="col text-center button-search button-hidden-off p-2">
-    <a href="">Off the record</a>
+    <a href="">off the record</a>
 
       <div class="info" style="display: none;">
-        <p class="code">// Some things are all over the patent archive but never made explicit. Off the record presents three artistic works that render these absent-present realities visible... </p>
+        <p class="code"> ↪ Some things are all over the patent archive but never made explicit. Off the record presents three artistic works that render these absent-present realities visible... </p>
       </div>
   </div>
 </div>

web/app/templates/record.html

 
 <div class="action">
   <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ new display of a random record from the dataset;</span>
+  </span>
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
+  <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
 </div>
 
-<a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
-
   {% for result in results %}
   <div class="col text-center mt-2" id="result">
 
     {% if result['title'] is defined %}
-    <p class="h1 mb-2">
+    <h1 class="h1 mt-5 mb-2 p-5">
       Title:
       {{ result['title'] }}
-    </p>
+    </h1>
     {% endif %}
 
     {% if result['year'] is defined %}

web/app/templates/titles.html

 
 <div class="action">
   <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ new display of random titles from dataset;</span>
+  </span>
   <button  onclick="addRandomTitle()" title="add one">+</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ add a random title from dataset;</span>
+  </span>
   <button  onclick="removeRandomTitle()"  title="remove one">-</button>
+  <span class="info" style="display: none;">
+    <span class="operations">↝ remove a random title from page;</span>
+  </span>
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
+  <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
 </div>
 
 <div class="row">
   <div class="col m-5">
-    <a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
     <p class="h1 text-center">Poetics of Titles</p>
   </div>
 </div>

web/content/TOC.md

-# Table of Contents
+<div class="action">
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
+  <a href="/" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
+</div>
 
-This website is the home of “Performing Patterns Otherwise.” It is an archive, a website and an experimental electronic book that binds search, archive and writing in one publication. The landing page navigates the publication according to the conventions of a search engine, foregrounding search. The table of content offers a way of navigating that foregrounds texts, which is more in line with the conventions of book making. The  table of content reveals a logic of zooming in, from the general search to more specific configurations of the relationships between search, content, ordering and sense-making.
+<h1 class="mt-5"> Table of Content</h1>
+<span class="info" style="display: none;">
+    <span class="code">↪ This website is the home of “Performing Patterns Otherwise.” It is an archive, a website and an experimental electronic book that binds search, archive and writing in one publication. The landing page navigates the publication according to the conventions of a search engine, foregrounding search. The table of content offers a way of navigating that foregrounds texts, which is more in line with the conventions of book making. The  table of content reveals a logic of zooming in, from the general search to more specific configurations of the relationships between search, content, ordering and sense-making.</span>
+</span>
 
-[Frontmatter](link "frontmatter")
+<br/>
+
+### Frontmatter
+<span class="info" style="display: none;">
+    <span class="code">↪ add intro text to frontmatter here...</span>
+</span>
 
 - [Publisher: Mattering Press](frontmatter/#publisher "links to frontmatter section publisher")
 - [Copyright](frontmatter/#copyright "links to frontmatter section copyright")
 - [Partners](frontmatter/#partner "links to frontmatter section partners")
 - [Contributors](frontmatter/#contributor "links to frontmatter section contributors")
 
-[Foreword](foreword "links to foreword")
+### Foreword
+<span class="info" style="display: none;">
+    <span class="code">↪ add intro text to foreword here...</span>
+</span>
+
+### Section 1: Searching the archive
+<span class="info" style="display: none;">
+    <span class="code">↪ Main search via keywords...</span>
+</span>
 
-[Section 1: Searching the archive](index.html "links to landingpage")
+### Section 2: Search Interventions
+<span class="info" style="display: none;">
+    <span class="code">↪ Interventions are a mode of search, they disrupt ordering and invite unexpected readings....</span>
+</span>
 
-[Section 2: Search Interventions](interventions "links to interventions page")
 - [A poetics of titles](interventions/#titles "links to interventions section poetics of titles")
 - [A handful of fragments](interventions/#fragments "links to interventions section handful of fragments")
 - [A scattering of images](interventions/#scattering "links to interventions section scattering of images")
 - [A timeline of inverntions](interventions/#timeline "links to interventions section timeline of inverntions)
 
 
-[Section 3: Hidden in plain sight](hidden "links to hidden page")
+###  Section 3: Hidden in plain sight
+<span class="info" style="display: none;">
+    <span class="code">↪ Searching for a history of women’s clothing inventors, that is in the archive, but hidden in plain sight....</span>
+</span>
+
 - [Expanding citizens](hidden/#expanding "links to hidden section expanding citizens")
 - [Secret citizens](hidden/#secret "links to hidden section secret")
 - [Pissing & leaking citizens](hidden/#pissing "links to hidden section pissing & leaking citizens")
 - [Self-defending citizens](hidden/#self-defending "links to hidden section self-defending citizens")
 - [Surviving citizens](hidden/#surviving "links to hidden section surviving citizens")
 
-[Section 4: Off the record](offrecord "links to off the record page")
+### Section 4: Off the record
+<span class="info" style="display: none;">
+    <span class="code">↪ Some things are all over the patent archive but never made explicit. Off the record presents three artistic works that render these absent-present realities visible...</span>
+</span>
 
 - [Sewing labour](offrecord/#sewinglabour "links to off section sewing labour")
 - [Performing gender](offrecord/#performinggender "links to off section performing gender")
 - [Colonial traces](offrecord/#colonialtraces "links to off section colonial traces")
 
-[Section 5: Making of](making "links to off the making of page")
+###  Section 5: Making of
+<span class="info" style="display: none;">
+    <span class="code">↪ A series of essays from the makers on the research, methods, tools developed...</span>
+</span>
 
 - [On making search-engine book](making/#search-engine-book "links to making section making search-engine book")
 - [On interface design](making/#interface "links to making section interface design")