Add affiliations with css styles & js

docs/css/extra.css

@@ -0,0 +1,48 @@
+ /* Style the button that is used to open and close the collapsible content */
+ .collapsible {
+    /* background-color: #eee; */
+    color: rgb(100, 100, 100);
+    cursor: pointer;
+    padding: 8px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 13px;
+    font-weight: 600;
+
+  }
+
+
+  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+  .active, .collapsible:hover {
+    background-color: rgba(204, 204, 204, 0.2);
+  }
+
+  /* Style the collapsible content. Note: hidden by default */
+  .content {
+    font-size: 13px;
+    padding: 0 12px;
+    max-height: 0;
+    transition: max-height 0.2s ease-out;
+    /* display: none; */
+    overflow: hidden;
+    /* background-color: #f1f1f1; */
+  }
+
+  .affiliation {
+    padding: 5px;
+}
+
+.arrow-down {
+  position: relative;
+  display: inline-block;
+  top: -1px;
+  margin-right: 4px;
+  width: 0; 
+  height: 0; 
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+
+  border-top: 6px solid black;
+}

docs/index.md

@@ -1,15 +1,33 @@
-<div style="text-align:center; margin-bottom: 30px;">
+<div style="text-align:center;">
 <img src="./img/icons/Logo_ORFmine.png" width="70%"/>
-<p style="margin-top: 5px">
-Authors: Chris Papadopoulos<sup>1</sup>, Nicolas Chevrollier, Anne Lopes<sup>1</sup>
-</p>
+<div style="margin-top: 5px; margin-bottom: 5px;">
+Chris Papadopoulos<sup>1</sup>, Nicolas Chevrollier<sup>2</sup>, Anne Lopes<sup>1</sup>
 </div>
+</div>
+
+<div type="button" class="collapsible"><span class="arrow-down"></span>Affiliations</div>
+<div class="content">
+    <div class="affiliation">
+        <div>
+            <sup>1</sup> Université Paris-Saclay, CEA, CNRS, Institute for Integrative Biology of the Cell (I2BC), 91198, Gif-sur-Yvette, France, <a href=mailto:[email protected]>[email protected]</a>, 
+            <a href=mailto:[email protected]>[email protected]</a>.
+        </div>
+        <div style="margin-top: 6px;">
+            <sup>2</sup> Independent bio-informatician, Paris, France, <a href=mailto:[email protected]>[email protected]</a>.
+        </div>
+    </div>
+
+
+</div>
+
+<div style="margin-top: 30px;"></div>
 
 Recent studies attribute a new role to the noncoding genome in
 the production of novel peptides. The widespread transcription
 of noncoding regions and the pervasive translation of the resulting
 RNAs offer a vast reservoir of novel peptides to the organisms.
 
+
 ORFmine is an open-source package that aims at extracting, annotating,
 and characterizing the fold potential and the structural properties of
 all Open Reading Frames (ORF) encoded in a genome (including coding and
@@ -20,7 +38,7 @@ application).
 
 
 
-<br><br>
+<br>
 [ ![](./img/icons/Logo_ORFtrack.png){ width=30% }](./orftrack_description.md) <br>
 
 ORFtrack searches for all possible ORFs longer than 60 nucleotides in the six frames of an input
@@ -33,7 +51,7 @@ In addition, their amino acid and/or nucleotide sequences can be extracted
 in a FASTA file (for more details, see the complete 
 documentation of ORFtrack).
 
-<br><br>
+<br>
 [![](./img/icons/Logo_ORFold.png){ width=30% }](./Objective_orfold.md) <br>
 
 ORFold probes the fold potential and the disorder and aggregation 
@@ -51,7 +69,7 @@ properties along a genome in a genome viewer
 documentation of ORFold).
 
 
-<br><br><br>
+<br>
 #### References
 
 1. Bitard-Feildel, T. & Callebaut, I. HCAtk and pyHCA: A Toolkit and Python API for the Hydrophobic Cluster Analysis of Protein Sequences. bioRxiv 249995 (2018).

docs/js/extra.js

@@ -0,0 +1,14 @@
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+        content.style.maxHeight = null;
+      } else {
+        content.style.maxHeight = content.scrollHeight + "px";
+      } 
+  });
+} 

mkdocs.yml

@@ -39,3 +39,5 @@ markdown_extensions:
 use_directory_urls: false
 extra_css:
     - css/extra.css
+extra_javascript:
+    - js/extra.js