new additions from Joana

web/app/static/js/main.js

 
 function hideShowInfo(){
       var iDiv = document.querySelectorAll('.info'), i;
-  for (i = 0; i < iDiv.length; ++i) {
-     if ( iDiv[i].style.display == 'none') {
-        iDiv[i].style.display = 'initial'; }
-     else { iDiv[i].style.display = 'none'; }
+      for (i = 0; i < iDiv.length; ++i) {
+      if ( iDiv[i].style.display == 'none') {
+        iDiv[i].style.display = 'initial';
+        document.querySelector('#notes-operations').style.boxShadow = 'inset 0.1rem 0.1rem 0.5rem var(--color-pink)';
+      }
+      else { iDiv[i].style.display = 'none';
+      document.querySelector('#notes-operations').style.boxShadow = 'initial';
+    }
+  }
+}
+
+function toggleMenu(){
+      var iDiv = document.querySelectorAll('.interferences'), i;
+      for (i = 0; i < iDiv.length; ++i) {
+      if ( iDiv[i].style.display == 'none') {
+        iDiv[i].style.display = 'flex';
+        document.querySelector('#interfere').style.boxShadow = '0.25rem 0.25rem 0.5rem var(--color-dark)';
+      }
+      else { iDiv[i].style.display = 'none';
+      document.querySelector('#interfere').style.boxShadow = 'initial';
+    }
   }
 }
 

web/app/static/styles/custom.css

 
 :root {
     --color-dark: #0c2039;
-    --color-whitish: #fbf9ff;
+    --color-whitish: #fcfbff;
     --color-lightyellow: #ffff99;
     --color-gray: #edecec;
     --color-blue: #4f1dff;
-    --color-pink: #cc285f;
+    --color-pink: #c00041;
     --title-font: "Compagnon-T"; /* Cmunobi */
     --body-font: "Compagnon";
 
     --title-fontsize: calc(2rem + 1.5vw) !important;
     --body-fontsize: calc(14px + 6 * (100vw - 320px) / 1600) !important;
     --button-fontsize: calc(16px + 6 * (100vw - 320px) / 1600) !important;
+    --button-fontsize-s: calc(14px + 6 * (100vw - 320px) / 1600) !important;
     --body-fontsize-s: calc(11px + 6 * (100vw - 320px) / 1600) !important;
 }
 
     font-size: var(--title-fontsize) !important;
     -webkit-text-stroke-width: 0.08rem;
     -webkit-text-stroke-color: black;
-    letter-spacing: -0.15rem;
+    letter-spacing: -0.05rem;
 }
 
 a.h1 {
     border: none !important;
     border-radius: 0.25rem !important;
     margin: 0.25rem;
+    padding-bottom: 0.35rem;
 }
 
 select#searchopt{
    box-shadow: 0.25rem 0.25rem 0.5rem var(--color-lightyellow)  !important;
 }
 
-.button-search  a, .button-search input, .button-search  select {
-  font-size:  var(--button-fontsize) !important;
+.button-search  a, .button-search input, .button-search  select, .button-search  button {
+  font-size:  var(--button-fontsize);
   text-decoration: none;
   border-radius: 0.25rem;
   padding: 0.25rem 0.5rem;
+  border: 0px;
 }
 
 .random-interferences a {
+  font-size: var(--button-fontsize-s);
   color: var(--color-dark)  !important;
   background:  var(--color-lightyellow);
+  padding-bottom: 0.45rem;
 }
 
 .random-interferences  a:hover {
-  box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark)  !important;
+  box-shadow: inset 0.25rem 0.25rem 0.5rem var(--color-gray) !important;
 }
 
-.button-hidden-off a {
+.button-hidden-off a, .button-hidden-off button {
   color: var(--color-dark)  !important;
   background:  var(--color-gray);
   text-decoration: none;
+  padding-bottom: 0.5rem;
 }
 
-.button-hidden-off a:hover {
+.button-hidden-off a:hover, .button-hidden-off button:hover {
   box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark)  !important;
+  text-shadow: 1px 1px 10px var(--color-lightyellow);
 }
 
 .arrow-back {
  }
 
  .action button:hover {
-    color: var(--color-dark)  !important; 
+    color: var(--color-dark)  !important;
  }
 
 
 #random-img-page .action button:hover {
-    color: var(--color-whitish)  !important; 
+    color: var(--color-whitish)  !important;
  }
 
-button#notes, button#notes-operations{
-    position: fixed; 
-    top: 0; 
+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;
+    margin: 0.25rem 0.75rem;
+    font-size: 2rem;
+    color: var(--color-pink);
+    background: transparent;
+    border: 0.1rem solid var(--color-pink);
     border-radius: 5rem 3rem;
     height: 2rem;
     width: 2rem;
     line-height: 0.1rem;
 }
 
-button#notes:hover, button#notes-operations:hover {
+button#notes-operations:hover {
     color: var(--color-dark)  !important;
 }
 
     flex-wrap: wrap;
     justify-content: space-evenly;
     flex-direction: row;
+    align-items: center;
 }
 
 /* SEARCH */
 }
 
 .text li {
-    
+
 }
 
 code {
     margin: 1rem 0rem !important;
 }
 
-img + em { 
+img + em {
     text-align: center;
     font-size: .8rem;
 }
 
 @media screen and (min-width:0px) and (max-width: 768px) {
 
-/* overwrite */
-.p-5 {
-    padding: 0.5rem !important;
-}
+  /* overwrite */
+  .p-5 {
+      padding: 0.5rem !important;
+  }
 
+  .arrow-back {
+    margin: -1rem 0.5rem;
+  }
 
   /* INDEX SEARCH */
 
   input#inputsearch {
-    width: 250px;;
+    width: 250px;
   }
 
 /* RANDOM TITLES */

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 class="operations">↝ add a random abstract from dataset;</span>
   </span>
   <button id="notes-operations" onclick="hideShowInfo()">?</button>
 </div>

web/app/templates/index.html

 
 {% block content %}
 
-<div class="action">
-  <button id="notes" onclick="hideShowInfo()">?</button>
+<div class="">
+  <button id="notes-operations" onclick="hideShowInfo()">?</button>
   <!-- 👁 ⓘ ⅈ  ✍  ⁐ -->
 </div>
 
-<div class="index-row button-search random-interferences mt-5">
+<div class="index-row button-search random-interferences mt-5 interferences" style="display: none;">
   <div class="col text-center p-2">
     <!-- random titles -->
     <a href="{{ url_for('interferences.ten_random_titles') }}">a poetics of titles</a>
   </div>
 </div>
 
-<div class="info note-interference" style="display: none;">
-  <p class="code"> ↪ The search interface breaks with the unspoken conventions of search engines, offering different entry points to the patent archive.</p>
-</div>
 
 <div class="index-row">
   <div class="col text-center m-5">
     <p class="h1">Performing Patents Otherwise</p>
-    <div class="info" style="display: none;">
-      <p class="code">
-        Archival conversations with 320,000 clothing inventions
+    <div>
+      <p>
+        <i>An experimental book querying two hundred years of clothing inventions</i>
       </p>
     </div>
   </div>
 <div class="row justify-content-center mt-3">
   <div class="col-sm-10 text-center button-search">
     <form action="{{ url_for('search.basic_search') }}" method="POST">
-      <input type="text" name="query" id="inputsearch" placeholder="search for a patent record...">
+      <input type="text" name="query" id="inputsearch" placeholder="type to perform a search...">
       <input type="submit" id="submit" value="search">
     </form>
   </div>
   </p>
 </div>
 
-<div class="index-row button-search random-interferences mt-5">
+<div class="index-row button-search random-interferences mt-5 interferences" style="display: none;">
   <div class="col text-center p-2">
     <!-- random record -->
     <a href="{{ url_for('interferences.random_record') }}">a random entry</a>
 
 <div class="index-row justify-content-center mt-5">
   <div class="col text-center button-search button-hidden-off p-2">
-    <a href="{{ url_for('conversations.index') }}">archival conversations</a>
+    <a href="{{ url_for('main.frontmatter') }}">about</a>
 
       <div class="info" style="display: none;">
-        <p class="code"> ↪ Archival conversations bring relational aspects of the archive to the fore that computational search cannot capture.</p>
+        <p class="code"> ↪ meet the team behind the project</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') }}">contents</a>
 
       <div class="info" style="display: none;">
-        <p class="code"> ↪ <i>Performing Patents Otherwise</i> is a website is a book is a website has a table of content.</p>
+        <p class="code"> ↪ discover essays, archival conversations & the making of</p>
       </div>
   </div>
 
 
-  <div class="col text-center button-search button-hidden-off p-2 mb-5">
-    <a href="{{ url_for('making.index') }}">making of</a>
+  <div class="col text-center button-search button-hidden-off p-2">
+    <button id="interfere" onclick="toggleMenu()">search interferences</button>
 
       <div class="info" style="display: none;">
-        <p class="code"> ↪ Reflections on tools and methods from the makers of <i>Performing Patents Otherwise</i>.</p>
+        <p class="code"> ↪ reveal serendipitous ways into the archive</p>
       </div>
   </div>
 </div>
 {% endblock %}
 
 {% block footer %}
-<footer class="footer mt-5 py-3 bg-light">
-  <div class="container">
+<footer class="footer p-3">
+  <div class="container info" style="display: none" >
       <span class="text-muted">© 2023 Julien McHardy & Kat Jungnickel, chapters by respective authors. Licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)</a> license.</span>
       <span class="text-muted">Data from the <a href="https://www.politicsofpatents.org/">Politics of Patents</a> research project hosted at Goldsmiths, University of London, and funded by the European Research Council under the European Union’s Horizon 2020 research and innovation programme (#819458).</span>
    </div>