4 changed files with 76 additions and 50 deletions
+ 21
- 4
web/app/static/js/main.js
View File
| @@ -10,10 +10,27 @@ | |||
| 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'; | |||
| } | |||
| } | |||
| } | |||
+ 37
- 25
web/app/static/styles/custom.css
View File
| @@ -63,11 +63,11 @@ | |||
| :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"; | |||
| @@ -75,6 +75,7 @@ | |||
| --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; | |||
| } | |||
| @@ -101,7 +102,7 @@ h1, .h1 { | |||
| 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 { | |||
| @@ -150,6 +151,7 @@ input#inputsearch, select#searchopt, select#sort, input#submit { | |||
| border: none !important; | |||
| border-radius: 0.25rem !important; | |||
| margin: 0.25rem; | |||
| padding-bottom: 0.35rem; | |||
| } | |||
| select#searchopt{ | |||
| @@ -164,30 +166,35 @@ input#submit:hover { | |||
| 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 { | |||
| @@ -212,29 +219,30 @@ input#submit:hover { | |||
| } | |||
| .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; | |||
| } | |||
| @@ -289,6 +297,7 @@ p.about-text { | |||
| flex-wrap: wrap; | |||
| justify-content: space-evenly; | |||
| flex-direction: row; | |||
| align-items: center; | |||
| } | |||
| /* SEARCH */ | |||
| @@ -487,7 +496,7 @@ canvas > * { | |||
| } | |||
| .text li { | |||
| } | |||
| code { | |||
| @@ -500,7 +509,7 @@ p code { | |||
| margin: 1rem 0rem !important; | |||
| } | |||
| img + em { | |||
| img + em { | |||
| text-align: center; | |||
| font-size: .8rem; | |||
| } | |||
| @@ -510,16 +519,19 @@ img + em { | |||
| @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 */ | |||
+ 1
- 1
web/app/templates/abstracts.html
View File
| @@ -5,7 +5,7 @@ | |||
| <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> | |||
+ 17
- 20
web/app/templates/index.html
View File
| @@ -2,12 +2,12 @@ | |||
| {% 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> | |||
| @@ -24,16 +24,13 @@ | |||
| </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> | |||
| @@ -42,7 +39,7 @@ | |||
| <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> | |||
| @@ -55,7 +52,7 @@ | |||
| </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> | |||
| @@ -74,27 +71,27 @@ | |||
| <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> | |||
| @@ -102,8 +99,8 @@ | |||
| {% 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> | |||
Loading…