Last update before using external repo for CSS/JS

.gitignore

@@ -1,3 +1,4 @@
 .sass-cache/
 *.css.map
 .log/
+node_modules/

css/partials/_base.scss

@@ -3,24 +3,29 @@
 
 h1,h2,h3,h4,h5,h6,legend{
     font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
-    font-weight:700;
-    margin-top:0;
 }
 
 h1{
     font-size:175%;
-}
+    margin-bottom: 1em;
+    font-weight:700;
+    text-align: center;
 
     .subtitle{
-    font-size:95%; /* of h1 */
+        font-size:95%;
+        font-weight:700;
+    }
 }
 
 h2{
     font-size:150%;
+    margin-bottom: 1em;
+    font-weight:700;
 }
 
 h3{
     font-size:125%;
+    margin-bottom: 0.5em;
 }
 
 h4{
@@ -75,7 +80,8 @@ p{
 }
 
 b,strong{
-    font-weight:bold}
+    font-weight:bold;
+}
 
 blockquote{
     background-color: #F0F0F0;
@@ -83,19 +89,16 @@ blockquote{
     font-style:italic;
     line-height:24px;
     margin:0px 0px 24px 0px;
-    /* margin-left:24px; */
     padding: 6px 20px;
 }
 
 ul,ol,dl{
     line-height:24px;
     list-style-image:none;
-    /* list-style:none; */
     margin:0px 0px 24px 0px;
     padding:0;
 }
 
-
 td{
     vertical-align:top;
 }
@@ -109,7 +112,6 @@ dd{
 }
 
 /* Inline Code */
-
 code {
     background:#fff;
     border:solid 1px #e1e4e5;
@@ -188,69 +190,6 @@ dl dd{
     margin:0 0 12px 24px;
 }
 
-@media screen and (max-width: 768px){
-    .tablet-hide{
-        display:none;
-    }
-}
-
-@media screen and (max-width: 480px){
-    .mobile-hide{
-        display:none;
-    }
-}
-
-@media screen and (max-width: 768px){
-    #content{
-        margin-left:0;
-    }
-
-    #content #content{
-        padding:1.618em;
-    }
-
-    #content.shift{
-        position:fixed;
-        min-width:100%;
-        left:85%;
-        top:0;
-        height:100%;
-        overflow:hidden;
-    }
-}
-
-@media screen and (min-width: 1400px){
-    #content{
-        background:rgba(0,0,0,0.05);
-    }
-
-    #content{
-        background:#fcfcfc;
-    }
-}
-
-@media screen and (max-width: 768px){
-    #copyright{
-        width:85%;
-        display:none;
-    }
-
-    #copyright.shift{
-        display:block;
-    }
-
-    img{
-        width:100%;
-        height:auto;
-    }
-}
-
-@media screen and (max-width: 480px){
-    #content .sidebar{
-        width:100%;
-    }
-}
-
 .rotate-90{
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
@@ -267,59 +206,6 @@ dl dd{
     transform:rotate(270deg);
 }
 
-#toggle-sidebar,
-#table-of-contents .close-sidebar {
-    display: none;
-}
-
-@media screen and (max-width: 768px) {
-    #table-of-contents {
-        display: none;
-        width: 60%;
-    }
-
-    #table-of-contents h2 a {
-        display: block;
-    }
-
-    #table-of-contents:target {
-        display: block;
-    }
-
-    #copyright, #postamble {
-        display: none;
-    }
-
-    #toggle-sidebar {
-        display: block;
-        margin-bottom: 1.6em;
-        padding: 0.6em;
-        text-align: center;
-    }
-
-    #toggle-sidebar h2 {
-        background-color:#2980B9;
-        width:100%;
-        height:50px;
-        left:0;
-        top:0;
-        color: white;
-        font-size: 100%;
-        line-height: 50px;
-        position:fixed;
-        margin: 0;
-        padding: 0;
-        opacity:0.7;
-    }
-
-    #table-of-contents .close-sidebar {
-        color: rgba(255, 255, 255, 0.3);
-        display: inline-block;
-        margin: 0px 10px 0px 45px;
-        padding: 10px;
-    }
-}
-
 *{
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
@@ -370,6 +256,10 @@ svg:not(:root){
 
 label{
     cursor:pointer;
+    display:block;
+    margin:0 0 0.3125em 0;
+    color:#333;
+    font-size:90%;
 }
 
 legend{
@@ -377,48 +267,34 @@ legend{
     margin-left:-7px;
     padding:0;
     white-space:normal;
+    display:block;
+    width:100%;
+    padding:0;
+    white-space:normal;
+    margin-bottom:24px;
+    font-size:150%;
 }
 
 .nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{
     display:inline;
 }
 
-legend{
-    display:block;
-    width:100%;
-    border:0;
-    padding:0;
-    white-space:normal;
-    margin-bottom:24px;
-    font-size:150%;
-    *margin-left:-7px;
-}
-
-label{
-    display:block;
-    margin:0 0 0.3125em 0;
-    color:#333;
-    font-size:90%;
-}
-
 a{
     color:#2980B9;
     text-decoration:none;
     cursor:pointer;
-}
 
-
+    &:hover{
-a:hover,a:active{
         outline:0;
-}
-
-a:hover{
         color:#3091d1;
     }
 
-a:visited{
+    &:visited{
+        outline:0;
         color:#9B59B6;
     }
+}
+
 
 .left{
     text-align:left;
@@ -443,11 +319,11 @@ hr{
 
 footer{
     color:#999;
-}
 
-footer p{
+    p {
         margin-bottom:12px;
     }
+}
 
 #content img{
     max-width:100%;
@@ -485,6 +361,8 @@ footer p{
     display:inline-block;
 }
 
+
+
 #content .sidebar{
     float:right;
     width:40%;
@@ -493,17 +371,16 @@ footer p{
     padding:24px;
     background:#f3f6f6;
     border:solid 1px #e1e4e5;
-}
 
-#content .sidebar p,#content .sidebar ul,#content .sidebar dl{
+    p, ul, dl{
         font-size:90%;
     }
 
-#content .sidebar .last{
+    .last{
         margin-bottom:0;
     }
 
-#content .sidebar .sidebar-title{
+    .sidebar-title{
         display:block;
         font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
         font-weight:bold;
@@ -513,6 +390,8 @@ footer p{
         margin-bottom:24px;
         font-size:100%;
     }
+}
+
 
 #content .highlighted{
     background:#F1C40F;
@@ -526,6 +405,7 @@ footer p{
     font-size:90%;
 }
 
+
 span[id*='MathJax-Span']{
     color:#404040;
 }
@@ -569,6 +449,7 @@ h2.footnotes{
     /* display: inline; */
 }
 
+
 .todo{
     background-color: #f29f97;
     padding: 0px 4px;

css/partials/_media.scss

@@ -0,0 +1,111 @@
+@media screen and (max-width: 768px){
+    .tablet-hide{
+        display:none;
+    }
+}
+
+@media screen and (max-width: 480px){
+    .mobile-hide{
+        display:none;
+    }
+}
+
+@media screen and (max-width: 768px){
+    #content{
+        margin-left:0;
+    }
+
+    #content #content{
+        padding:1.618em;
+    }
+
+    #content.shift{
+        position:fixed;
+        min-width:100%;
+        left:85%;
+        top:0;
+        height:100%;
+        overflow:hidden;
+    }
+}
+
+@media screen and (min-width: 1400px){
+    #content{
+        background:rgba(0,0,0,0.05);
+    }
+
+    #content{
+        background:#fcfcfc;
+    }
+}
+
+@media screen and (max-width: 768px){
+    #copyright{
+        width:85%;
+        display:none;
+    }
+
+    #copyright.shift{
+        display:block;
+    }
+
+    img{
+        width:100%;
+        height:auto;
+    }
+}
+
+@media screen and (max-width: 480px){
+    #content .sidebar{
+        width:100%;
+    }
+}
+
+
+@media screen and (max-width: 768px) {
+    #table-of-contents {
+        display: none;
+        width: 60%;
+    }
+
+    #table-of-contents h2 a {
+        display: block;
+    }
+
+    #table-of-contents:target {
+        display: block;
+    }
+
+    #copyright, #postamble {
+        display: none;
+    }
+
+    #toggle-sidebar {
+        display: block;
+        margin-bottom: 1.6em;
+        padding: 0.6em;
+        text-align: center;
+    }
+
+    #toggle-sidebar h2 {
+        background-color:#2980B9;
+        width:100%;
+        height:50px;
+        left:0;
+        top:0;
+        color: white;
+        font-size: 100%;
+        line-height: 50px;
+        position:fixed;
+        margin: 0;
+        padding: 0;
+        opacity:0.7;
+    }
+
+    #table-of-contents .close-sidebar {
+        color: rgba(255, 255, 255, 0.3);
+        display: inline-block;
+        margin: 0px 10px 0px 45px;
+        padding: 10px;
+    }
+}

css/partials/_reset.scss

@@ -0,0 +1,35 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote {
+  &:before, &:after {
+    content: '';
+    content: none; } }
+
+q {
+  &:before, &:after {
+    content: '';
+    content: none; } }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }

css/partials/_toc.scss

@@ -55,6 +55,10 @@
 
     }
 
+    .close-sidebar {
+        display: none;
+    }
+
     header {
         height:32px;
         display:inline-block;
@@ -194,3 +198,7 @@ ul.nav li.active a {
 ul.nav > li.active > a {
     color: black !important;
 }
+
+#toggle-sidebar {
+    display: none;
+}

css/style.scss

@@ -1,3 +1,5 @@
+@import 'partials/_reset.scss';
+
 @import 'partials/_base.scss';
 @import 'partials/_nagivation.scss';
 @import 'partials/_toc.scss';
@@ -11,3 +13,5 @@
 @import 'partials/_tables.scss';
 @import 'partials/_video.scss';
 @import 'partials/_details.scss';
+
+@import 'partials/_media.scss';

index.html

@@ -3,7 +3,7 @@
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
-<!-- 2020-11-25 mer. 19:37 -->
+<!-- 2020-11-25 mer. 23:14 -->
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <title>Research Pages</title>
 <meta name="generator" content="Org mode" />
@@ -27,12 +27,12 @@
 Welcome to my research pages.
 </p>
 
-<div id="outline-container-org5a3e5b2" class="outline-2">
+<div id="outline-container-orga0077ce" class="outline-2">
-<h2 id="org5a3e5b2"><span class="section-number-2">1</span> Papers</h2>
+<h2 id="orga0077ce"><span class="section-number-2">1</span> Papers</h2>
 <div class="outline-text-2" id="text-1">
 </div>
-<div id="outline-container-org79a96d3" class="outline-3">
+<div id="outline-container-org1486a58" class="outline-3">
-<h3 id="org79a96d3"><span class="section-number-3">1.1</span> Conference Papers</h3>
+<h3 id="org1486a58"><span class="section-number-3">1.1</span> Conference Papers</h3>
 <div class="outline-text-3" id="text-1-1">
 <ul class="org-ul">
 <li>Dehaeze, T., Mattenet, M. M., &amp; Collette, C., <b>Sample Stabilization For Tomography Experiments In Presence Of Large Plant Uncertainty</b>, In MEDSI&rsquo;18 (pp. 153–157) (2018). Geneva, Switzerland: JACoW Publishing. (<a href="dehaeze18_sampl_stabil_for_tomog_exper/index.html">link</a>)</li>
@@ -42,8 +42,8 @@ Welcome to my research pages.
 </div>
 </div>
 
-<div id="outline-container-orge31870c" class="outline-3">
+<div id="outline-container-org21a9770" class="outline-3">
-<h3 id="orge31870c"><span class="section-number-3">1.2</span> Journal Papers</h3>
+<h3 id="org21a9770"><span class="section-number-3">1.2</span> Journal Papers</h3>
 <div class="outline-text-3" id="text-1-2">
 <ul class="org-ul">
 <li>Verma, M., Dehaeze, T., Zhao, G., Watchi, J., &amp; Collette, C., <b>Virtual sensor fusion for high precision control, Mechanical Systems and Signal Processing</b>, 150, 107241 (2020). <a href="http://dx.doi.org/10.1016/j.ymssp.2020.107241">http://dx.doi.org/10.1016/j.ymssp.2020.107241</a> (<a href="personnal-papers/verma20_virtual_sensor_fusion_high_precis_contr.pdf">pdf</a>)</li>
@@ -53,12 +53,12 @@ Welcome to my research pages.
 </div>
 </div>
 
-<div id="outline-container-orgd925c44" class="outline-2">
+<div id="outline-container-org0e758e7" class="outline-2">
-<h2 id="orgd925c44"><span class="section-number-2">2</span> Useful Pages / Tutorials</h2>
+<h2 id="org0e758e7"><span class="section-number-2">2</span> Useful Pages / Tutorials</h2>
 <div class="outline-text-2" id="text-2">
 </div>
-<div id="outline-container-org2616838" class="outline-3">
+<div id="outline-container-org7ed3d0d" class="outline-3">
-<h3 id="org2616838"><span class="section-number-3">2.1</span> General Mechatronics</h3>
+<h3 id="org7ed3d0d"><span class="section-number-3">2.1</span> General Mechatronics</h3>
 <div class="outline-text-3" id="text-2-1">
 <p>
 <a href="spectral-analysis/index.html">Spectral Analysis</a>
@@ -87,8 +87,8 @@ Several types of linear filters (low pass, high pass, notch, lead, etc.) are pre
 </div>
 </div>
 
-<div id="outline-container-orga9aa3f4" class="outline-3">
+<div id="outline-container-orge56442e" class="outline-3">
-<h3 id="orga9aa3f4"><span class="section-number-3">2.2</span> System Modeling using Simscape</h3>
+<h3 id="orge56442e"><span class="section-number-3">2.2</span> System Modeling using Simscape</h3>
 <div class="outline-text-3" id="text-2-2">
 <p>
 <a href="simscape-fem/index.html">Finite Element Models with Simscape</a>
@@ -113,12 +113,12 @@ In order to start the simulation at equilibrium, few measured can be employed th
 </div>
 </div>
 
-<div id="outline-container-org7453b59" class="outline-2">
+<div id="outline-container-orga14208b" class="outline-2">
-<h2 id="org7453b59"><span class="section-number-2">3</span> Test Benches / Experiments</h2>
+<h2 id="orga14208b"><span class="section-number-2">3</span> Test Benches / Experiments</h2>
 <div class="outline-text-2" id="text-3">
 </div>
-<div id="outline-container-org8fd0e03" class="outline-3">
+<div id="outline-container-org556c41d" class="outline-3">
-<h3 id="org8fd0e03"><span class="section-number-3">3.1</span> Intrumentation Related</h3>
+<h3 id="org556c41d"><span class="section-number-3">3.1</span> Intrumentation Related</h3>
 <div class="outline-text-3" id="text-3-1">
 <p>
 <a href="test-bench-piezo-amplifiers/index.html">Voltage Amplifiers for Piezoelectric Actuators</a>
@@ -142,8 +142,8 @@ Its noise characteristics as well as non-linearities are measured.
 </div>
 </div>
 
-<div id="outline-container-orga0dd828" class="outline-3">
+<div id="outline-container-orge2137aa" class="outline-3">
-<h3 id="orga0dd828"><span class="section-number-3">3.2</span> Amplified Piezoelecric Actuator</h3>
+<h3 id="orge2137aa"><span class="section-number-3">3.2</span> Amplified Piezoelecric Actuator</h3>
 <div class="outline-text-3" id="text-3-2">
 <p>
 <a href="test-bench-apa/index.html">Amplified Piezoelectric Actuator - Test bench and Finite Element Model</a>
@@ -189,8 +189,8 @@ The goal is to form a <i>super sensor</i> that has better noise characteristics
 </div>
 </div>
 
-<div id="outline-container-org168ad14" class="outline-2">
+<div id="outline-container-org5684564" class="outline-2">
-<h2 id="org168ad14"><span class="section-number-2">4</span> PhD Project - Nano Active Stabilization System</h2>
+<h2 id="org5684564"><span class="section-number-2">4</span> PhD Project - Nano Active Stabilization System</h2>
 <div class="outline-text-2" id="text-4">
 <p>
 <a href="nass-report-2020/index.html">NASS - Report 2020</a>
@@ -241,8 +241,8 @@ First experimental results are presented.
 </div>
 </div>
 
-<div id="outline-container-org1a371c7" class="outline-2">
+<div id="outline-container-orga42c1ae" class="outline-2">
-<h2 id="org1a371c7"><span class="section-number-2">5</span> Notes</h2>
+<h2 id="orga42c1ae"><span class="section-number-2">5</span> Notes</h2>
 <div class="outline-text-2" id="text-5">
 <ul class="org-ul">
 <li><a href="euspen_2020_notes/notes.html">EUSPEN - 2020 - Notes</a></li>
@@ -250,8 +250,8 @@ First experimental results are presented.
 </div>
 </div>
 
-<div id="outline-container-orgddde21b" class="outline-2">
+<div id="outline-container-orgc63715d" class="outline-2">
-<h2 id="orgddde21b"><span class="section-number-2">6</span> Lectures</h2>
+<h2 id="orgc63715d"><span class="section-number-2">6</span> Lectures</h2>
 <div class="outline-text-2" id="text-6">
 <ul class="org-ul">
 <li><a href="lecture-h-infinity/index.html">H-Infinity - Robust Control</a></li>

index.org

@@ -30,11 +30,11 @@ Then add a new submodule with the updated url.
 
 * Update CSS and JS                                                 :noexport:
 #+begin_src bash :results none
-  cd js && cat jquery.min.js jquery.stickytableheaders.min.js bootstrap.min.js readtheorg.js > script.js
+  npm run js
 #+end_src
 
 #+begin_src bash :results none
-  sass css/style.scss css/style.css
+  npm run scss
 #+end_src
 
 * Papers

js/readtheorg.js

@@ -1,4 +1,4 @@
-$(function() {
+$( document ).ready(function() {
     $('.note').before("<p class='admonition-title note'>Note</p>");
     $('.seealso').before("<p class='admonition-title seealso'>See also</p>");
     $('.definition').before("<p class='admonition-title definition'>Definition</p>");
@@ -11,6 +11,7 @@ $(function() {
     $('.warning').before("<p class='admonition-title warning'>Warning</p>");
 });
 
+
 $( document ).ready(function() {
 
     // Shift nav in mobile when clicking the menu.
@@ -30,6 +31,7 @@ $( document ).ready(function() {
     $("table.docutils:not(.field-list)").wrap("<div class='wy-table-responsive'></div>");
 });
 
+
 $( document ).ready(function() {
     $('#text-table-of-contents ul').first().addClass('nav');
                                         // ScrollSpy also requires that we use

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "research-home-page",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "browser-sync": "^2.26.13",
+    "sass": "^1.29.0"
+  },
+  "scripts": {
+    "watch": "sass --watch css/style.scss css/style.css",
+    "scss": "sass css/style.scss css/style.css",
+    "js": "cd js && cat jquery.min.js jquery.stickytableheaders.min.js bootstrap.min.js readtheorg.js > script.js",
+    "start": "browser-sync start --server --files \"css/*.css, js/*.js\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.tdehaeze.xyz/tdehaeze/research-home-page.git"
+  },
+  "keywords": [],
+  "author": "Dehaeze Thomas",
+  "license": "MIT"
+}