update the website page

- Single page with references to INRIA's home.
- Responsive design.

website/lightblue.css

@@ -1,15 +1,3 @@
-/****************************************************************************
- *                                                                          *
- * contented3 - An open source xhtml/css website template by Contented      *
- * Designs.  You're free to modify it and use it for any purpose without    *
- * cost or obligation. We'd prefer that you leave the link to our website   *
- * in the footer but it's not required.                                     *
- *                                                                          *
- * If you have comments or questions, please contact us at                  *
- * http://www.ContentedDesigns.com. Thanks!                                 *
- *                                                                          *
- ***************************************************************************/
-
 * {
     padding:0px;
     margin:0px;
@@ -21,32 +9,36 @@ html {
 body {
     color: #333333;
     font-family:Arial, sans-serif;
-    font-size:0.83em;
 
-    background-image:url("fronde.png");
+    background:url("fronde.png");
+    background-image:url("eo_logo_fronde.svg");
     background-repeat:no-repeat;
-    background-position:bottom left;
+    background-position:bottom right;
 }
 
-#alt {
-    float:left;
-    width:20%;
-    text-align:center;
-    margin-right:5%;
+.logo {
+    font-family: 'Comfortaa', cursive;
+    font-style:normal;
+    font-weight:400;
 }
 
-.shortcuts {
-    text-align:left;
-    clear:both;
+.logo_eo {
+    font-family: 'Comfortaa', cursive;
+    font-style:normal;
+    font-weight:700;
 }
 
-.shortcuts p {
-    margin-top:2em;
-    margin-bottom:0em;
+pre {
+    display:inline;
+    /* overflow-wrap:break-word; */
+    white-space: pre-wrap;
 }
 
-.shortcuts ul {
-    margin-top:0em;
+.command {
+    background-color:#333;
+    color:lightgrey;
+    padding:0.3em;
+    margin:0.2em;
 }
 
 ul.badges {
@@ -59,17 +51,80 @@ ul.badges li {
     margin-top:0.5em;
 }
 
-#menu {
-    padding:0.5em;
+#alt {
+    font-size:small;
+    float:left;
+    width:20%;
+    max-width:40ch;
+    height:100%;
+    text-align:center;
+    margin-right:5%;
+    background-color:#3771c8;
+    color:#aef;
+    position:fixed;
+    top:0;
+    left:0;
+    overflow-y:auto;
 }
 
+#toc {
+    /* background-color:#222; */
+    /* padding: 0.01em 0.5em 0.1em 0.5em; */
+}
+
+
 #main {
     float:right;
-    width:75%;
+    width:78%;
+}
+
+#slogan {
+    text-align:center;
+    font-size:small;
+    font-weight:normal;
+    font-style:italic;
+    padding:1em;
+    /* padding:18px 0px 0px 50px; */
+    /* float:left; */
+    /* margin:0px 0px 10px 0px; */
+}
+
+nav {
+    text-align:left;
+    clear:both;
+}
+
+nav p {
+    margin-top:2em;
+    margin-bottom:0em;
+}
+
+nav ul {
+    margin-top:0em;
+}
+
+nav#menu {
+    padding:0.5em;
+    /* height:100%; */
+}
+
+nav a {
+    color: white;
+    font-weight: normal;
+    text-decoration: none;
+    outline:none;
+}
+
+nav a:hover {
+    color: white;
+    font-weight: normal;
+    text-decoration: underline;
 }
 
 blockquote {
     padding-left:1em;
+    border-left: 2px solid blue;
+    color:gray;
 }
 
 table.examples {
@@ -77,7 +132,7 @@ table.examples {
 }
 
 ul.publications em {
-    font-width:bold;
+    font-weight:bold;
     color:#f0f;
 }
 
@@ -85,14 +140,17 @@ h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
 fieldset, address { margin:0.75em 0;}
 
 h1 {
-    font-size:1.67em;
-    border-bottom:thin solid lightgray;
+    font-size:2em;
+    border-bottom:3px solid #3771c8;
     margin-top:2em;
 }
 
-h2 {font-size:1.39em;}
+h2 {
+    font-size:1.39em;
+    border-bottom:thin solid #eee;
+}
 
-h3 {font-size:1.2em;}
+h3 {font-size:1.1em;}
 
 h4 {font-size:1em;}
 
@@ -125,6 +183,24 @@ a:hover {
     text-decoration: underline;
 }
 
+.excerpt {
+    font-size: 1.3em;
+    background-color:#3771c8;
+    color:white;
+    padding:1em;
+    border: thin solid black;
+    display:block;
+    margin:1em;
+}
+
+.excerpt em {
+    font-weight: bold;
+}
+
+.excerpt a {
+    color:white;
+    text-decoration:underline;
+}
 
 #appendix {
     background:url("Purine_Nucleoside_Phosphorylase_small.jpg");
@@ -141,17 +217,6 @@ a:hover {
     float:left;
 }
 
-#slogan {
-    color: #88f;
-    /*background-color:#FFFFFF;*/
-    font-size:small;
-    font-weight:normal;
-    font-style:italic;
-    padding:18px 0px 0px 50px;
-    float:left;
-    margin:0px 0px 10px 0px;
-}
-
 ul#login {
     margin:0px;
     padding:0px;
@@ -263,6 +328,7 @@ ul#menu a.selected:visited { background: #3366CC; color: #FFFFFF; }
     margin:1em;
     padding:5px;
     border:thin solid #eee;
+    background-color:white;
 }
 
 .legend {
@@ -270,8 +336,117 @@ ul#menu a.selected:visited { background: #3366CC; color: #FFFFFF; }
     font-size:80%;
 }
 
-#ohloh_stats {
-    text-align:left;
-    font-weight:normal;
-    font-style:italic;
+.collapsible {
+    background-color: #eee;
+    color:#36C;
+    cursor: pointer;
+    padding: 0.2em;
+    /* width: 100%; */
+    border: thin solid #ccc;
+    text-align: left;
+    outline: none;
+    font-size: small;
+    margin-left:2em;
 }
+
+.active, .collapsible:hover {
+    background-color: #ddd;
+    color:#03C;
+    /* text-decoration: underline; */
+}
+
+.collapsible:after {
+    content: "\002B  ";
+    font-weight: bold;
+    float: left;
+    margin-left: 5px;
+}
+
+.active:after {
+    content: "\2212  ";
+}
+
+.details {
+    padding: 0 18px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f5f5f5;
+    border: thin solid #ccc;
+    margin-left:2em;
+}
+
+figure {
+    text-align:center;
+    padding:1em;
+    border:thin solid lightgray;
+    box-shadow: 5px 10px 18px #ddd;
+    max-width: 60%;
+    margin-left:20%
+}
+
+figure img {
+}
+
+figcaption {
+    font-size: small;
+    max-width: 90%;
+    margin-left:5%;
+}
+
+
+@media only screen and (max-width: 800px) {
+    #alt {
+        clear:left;
+        width:100%;
+        max-width:100%;
+        height:auto;
+        text-align:left;
+        position:relative;
+    }
+
+    #shortcuts {
+        margin-left:30%;
+    }
+
+    #toc_header {
+        width:100%;
+        display:block;
+    }
+
+    #toc ol {
+        counter-reset: LIST-ITEMS 0;
+    }
+
+    .toc_section:before
+    {
+        float:left;
+        content: counter( LIST-ITEMS ) ".";
+        counter-increment: LIST-ITEMS;
+    }
+    .toc_section {
+        display:inline-block;
+        vertical-align:top;
+        *display:list-item;
+    }
+
+    #main {
+        clear:left;
+        width:95%;
+        margin-left:2%;
+        margin-right:2%;
+    }
+    #main > p {
+        text-align:justify;
+    }
+
+    pre {
+        text-align:left;
+    }
+
+    figure {
+        max-width:80%;
+        margin-left:5%;
+    }
+}
+