Add mathjax SCSS

.gitignore

@@ -1,3 +1,263 @@
 node_modules
 .log
 .auctex-auto
+
+## Core latex/pdflatex auxiliary files:
+*.aux
+*.lof
+*.log
+*.lot
+*.fls
+*.out
+*.toc
+*.fmt
+*.fot
+*.cb
+*.cb2
+.*.lb
+
+## Intermediate documents:
+*.dvi
+*.xdv
+*-converted-to.*
+# these rules might exclude image files for figures etc.
+# *.ps
+# *.eps
+# *.pdf
+
+## Generated if empty string is given at "Please type another file name for output:"
+.pdf
+
+## Bibliography auxiliary files (bibtex/biblatex/biber):
+*.bbl
+*.bcf
+*.blg
+*-blx.aux
+*-blx.bib
+*.run.xml
+
+## Build tool auxiliary files:
+*.fdb_latexmk
+*.synctex
+*.synctex(busy)
+*.synctex.gz
+*.synctex.gz(busy)
+*.pdfsync
+
+## Build tool directories for auxiliary files
+# latexrun
+latex.out/
+
+## Auxiliary and intermediate files from other packages:
+# algorithms
+*.alg
+*.loa
+
+# achemso
+acs-*.bib
+
+# amsthm
+*.thm
+
+# beamer
+*.nav
+*.pre
+*.snm
+*.vrb
+
+# changes
+*.soc
+
+# comment
+*.cut
+
+# cprotect
+*.cpt
+
+# elsarticle (documentclass of Elsevier journals)
+*.spl
+
+# endnotes
+*.ent
+
+# fixme
+*.lox
+
+# feynmf/feynmp
+*.mf
+*.mp
+*.t[1-9]
+*.t[1-9][0-9]
+*.tfm
+
+#(r)(e)ledmac/(r)(e)ledpar
+*.end
+*.?end
+*.[1-9]
+*.[1-9][0-9]
+*.[1-9][0-9][0-9]
+*.[1-9]R
+*.[1-9][0-9]R
+*.[1-9][0-9][0-9]R
+*.eledsec[1-9]
+*.eledsec[1-9]R
+*.eledsec[1-9][0-9]
+*.eledsec[1-9][0-9]R
+*.eledsec[1-9][0-9][0-9]
+*.eledsec[1-9][0-9][0-9]R
+
+# glossaries
+*.acn
+*.acr
+*.glg
+*.glo
+*.gls
+*.glsdefs
+
+# gnuplottex
+*-gnuplottex-*
+
+# gregoriotex
+*.gaux
+*.gtex
+
+# htlatex
+*.4ct
+*.4tc
+*.idv
+*.lg
+*.trc
+*.xref
+
+# hyperref
+*.brf
+
+# knitr
+*-concordance.tex
+# TODO Comment the next line if you want to keep your tikz graphics files
+*.tikz
+*-tikzDictionary
+
+# listings
+*.lol
+
+# makeidx
+*.idx
+*.ilg
+*.ind
+*.ist
+
+# minitoc
+*.maf
+*.mlf
+*.mlt
+*.mtc[0-9]*
+*.slf[0-9]*
+*.slt[0-9]*
+*.stc[0-9]*
+
+# minted
+_minted*
+*.pyg
+
+# morewrites
+*.mw
+
+# nomencl
+*.nlg
+*.nlo
+*.nls
+
+# pax
+*.pax
+
+# pdfpcnotes
+*.pdfpc
+
+# sagetex
+*.sagetex.sage
+*.sagetex.py
+*.sagetex.scmd
+
+# scrwfile
+*.wrt
+
+# sympy
+*.sout
+*.sympy
+sympy-plots-for-*.tex/
+
+# pdfcomment
+*.upa
+*.upb
+
+# pythontex
+*.pytxcode
+pythontex-files-*/
+
+# tcolorbox
+*.listing
+
+# thmtools
+*.loe
+
+# TikZ & PGF
+*.dpth
+*.md5
+*.auxlock
+
+# todonotes
+*.tdo
+
+# vhistory
+*.hst
+*.ver
+
+# easy-todo
+*.lod
+
+# xcolor
+*.xcp
+
+# xmpincl
+*.xmpi
+
+# xindy
+*.xdy
+
+# xypic precompiled matrices
+*.xyc
+
+# endfloat
+*.ttt
+*.fff
+
+# Latexian
+TSWLatexianTemp*
+
+## Editors:
+# WinEdt
+*.bak
+*.sav
+
+# Texpad
+.texpadtmp
+
+# LyX
+*.lyx~
+
+# Kile
+*.backup
+
+# KBibTeX
+*~[0-9]*
+
+# auto folder when using emacs and auctex
+./auto/*
+*.el
+
+# expex forward references with \gathertags
+*-tags.tex
+
+# standalone packages
+*.sta

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 6
+}

dist/script.js

@@ -1,7 +1,11 @@
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-// var $ = require('jquery');
+"use strict";
-// window.$ = $;
+
-// require('bootstrap');
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 // Blocks
 docReady(function () {
@@ -9,62 +13,119 @@ docReady(function() {
     "seealso": "See also",
     "definition": "Definition",
     "exampl": "Example",
+    "exercice": "Exercice",
     "question": "Question",
     "summary": "Summary",
+    "note": "Note",
+    "answer": "Answer",
     "hint": "Hint",
     "important": "Important",
     "caution": "Caution",
     "warning": "Warning"
-    }
+  };
+
   for (var className in boxesNames) {
-        let boxes = document.querySelectorAll('div.' + className)
+    var boxes = document.querySelectorAll('div.' + className);
 
-        for (let box of boxes) {
+    var _iterator = _createForOfIteratorHelper(boxes),
-            let boxTitle = document.createElement('p')
+        _step;
-            boxTitle.className = "admonition-title " + className
-            boxTitle.textContent = boxesNames[className]
 
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var box = _step.value;
+        var boxTitle = document.createElement('p');
+        boxTitle.className = "admonition-title " + className;
+        boxTitle.textContent = boxesNames[className];
         box.parentNode.insertBefore(boxTitle, box);
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
-});
+  }
+}); // Copy Source Block
 
-// Copy Source Block
 docReady(function () {
-    let srcContainers = document.querySelectorAll('pre.src')
+  var srcContainers = document.querySelectorAll('pre.src');
 
-    for (let srcContrainer of srcContainers) {
+  function copyClickFunction() {
-        let boxCopy = document.createElement('div')
+    var boxCopy = this; // Create a clone the node to not affect the original one
-        boxCopy.className = "src-copy"
-        boxCopy.textContent = "Copy"
 
-        boxCopy.onclick = function() {
+    var nodeClone = boxCopy.parentNode.cloneNode(true); // Remove Line Numbers and Copy Button
-            // Create a clone the node to not affect the original one
+
-            let nodeClone = this.parentNode.cloneNode(true)
+    var linenumNodes = nodeClone.querySelectorAll('.linenr,.src-copy');
 
-            // Remove Line Numbers and Copy Button
-            let linenumNodes = nodeClone.querySelectorAll('.linenr,.src-copy')
     for (var i = linenumNodes.length - 1; i >= 0; --i) {
-                nodeClone.removeChild(linenumNodes[i])
+      nodeClone.removeChild(linenumNodes[i]);
-            }
+    } // Copy the filetered content to the clipboard
 
-            // Copy the filetered content to the clipboard
+
-            let srcText = nodeClone.textContent
+    var srcText = nodeClone.textContent;
     navigator.clipboard.writeText(srcText).then(function () {
-                boxCopy.textContent = "Copied"
+      boxCopy.textContent = "Copied";
-                boxCopy.classList.add("src-copied")
+      boxCopy.classList.add("src-copied");
       setTimeout(function () {
-                    boxCopy.textContent = "Copy"
+        boxCopy.textContent = "Copy";
-                    boxCopy.classList.remove("src-copied")
+        boxCopy.classList.remove("src-copied");
       }, 2000);
     });
   }
 
+  var _iterator2 = _createForOfIteratorHelper(srcContainers),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var srcContrainer = _step2.value;
+      var boxCopy = document.createElement('div');
+      boxCopy.className = "src-copy";
+      boxCopy.textContent = "Copy";
+      boxCopy.onclick = copyClickFunction;
       srcContrainer.prepend(boxCopy);
     }
-});
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+}); // Wrap Images and Tables
+
+docReady(function () {
+  var wrap_elements = document.querySelectorAll('[float=wrap-right]');
+
+  var _iterator3 = _createForOfIteratorHelper(wrap_elements),
+      _step3;
+
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var wrap_el = _step3.value;
+      wrap_el.closest('.figure').classList.add('wrap-right');
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+
+  wrap_elements = document.querySelectorAll('[float=wrap-left]');
+
+  var _iterator4 = _createForOfIteratorHelper(wrap_elements),
+      _step4;
+
+  try {
+    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+      var _wrap_el = _step4.value;
+
+      _wrap_el.closest('.figure').classList.add('wrap-left');
+    }
+  } catch (err) {
+    _iterator4.e(err);
+  } finally {
+    _iterator4.f();
+  }
+}); // Equivalent of Jquery $.ready
 
-// Equivalent of Jquery $.ready
 function docReady(fn) {
   // see if DOM is already available
   if (document.readyState === "complete" || document.readyState === "interactive") {
@@ -73,9 +134,46 @@ function docReady(fn) {
   } else {
     document.addEventListener("DOMContentLoaded", fn);
   }
-}
+} // Load Jquery
 
-// function collapse_toc_elements_on_click (nav_li_a){
+
+var scr = document.createElement('script'),
+    head = document.head || document.getElementsByTagName('head')[0];
+scr.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
+scr.async = false; // optionally
+
+head.insertBefore(scr, head.firstChild); // Load Bootstrap.js
+
+var scr = document.createElement('script'),
+    head = document.head || document.getElementsByTagName('head')[0];
+scr.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js';
+scr.async = false; // optionally
+
+head.insertBefore(scr, head.firstChild); // After it is loaded
+
+scr.addEventListener('load', function () {
+  $(document).ready(function () {
+    $('#text-table-of-contents ul').first().addClass('nav'); // ScrollSpy also requires that we use
+    // a Bootstrap nav component.
+
+    $('body').scrollspy({
+      target: '#text-table-of-contents'
+    }); // set the height of tableOfContents
+
+    var $postamble = $('#postamble');
+    var $tableOfContents = $('#table-of-contents');
+    $tableOfContents.css({
+      paddingBottom: $postamble.outerHeight()
+    }); // add TOC button
+
+    var toggleSidebar = $('<div id="toggle-sidebar"><a href="#table-of-contents"><h2>Table of Contents</h2></a></div>');
+    $('#content').prepend(toggleSidebar); // add close button when sidebar showed in mobile screen
+
+    var closeBtn = $('<a class="close-sidebar" href="#">Close</a>');
+    var tocTitle = $('#table-of-contents').find('h2');
+    tocTitle.append(closeBtn);
+  });
+}); // function collapse_toc_elements_on_click (nav_li_a){
 //     /*
 //       When an `a' element in the TOC is clicked, its parent
 //       `li' element's active attribute is toggled.  This causes
@@ -85,7 +183,6 @@ function docReady(fn) {
 //     */
 //     $(nav_li_a).parent().toggleClass("active");
 // }
-
 // $( document ).ready(function() {
 //     // When the document is loaded and ready, bind the
 //     // function `collapse_toc_elements_on_click' to the
@@ -94,9 +191,7 @@ function docReady(fn) {
 //         collapse_toc_elements_on_click(this);
 //     });
 // });
-
 // $( document ).ready(function() {
-
 //     // Shift nav in mobile when clicking the menu.
 //     $(document).on('click', "[data-toggle='wy-nav-top']", function() {
 //       $("[data-toggle='wy-nav-shift']").toggleClass("shift");
@@ -113,31 +208,23 @@ function docReady(fn) {
 //     // Make tables responsive
 //     $("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
 //                                         // a Bootstrap nav component.
 //     $('body').scrollspy({target: '#text-table-of-contents'});
-
-//     // DON'T add sticky table headers (Fix issue #69?)
-//     // $('table').stickyTableHeaders();
-
 //     // set the height of tableOfContents
 //     var $postamble = $('#postamble');
 //     var $tableOfContents = $('#table-of-contents');
 //     $tableOfContents.css({paddingBottom: $postamble.outerHeight()});
-
 //     // add TOC button
 //     var toggleSidebar = $('<div id="toggle-sidebar"><a href="#table-of-contents"><h2>Table of Contents</h2></a></div>');
 //     $('#content').prepend(toggleSidebar);
-
 //     // add close button when sidebar showed in mobile screen
 //     var closeBtn = $('<a class="close-sidebar" href="#">Close</a>');
 //     var tocTitle = $('#table-of-contents').find('h2');
 //     tocTitle.append(closeBtn);
 // });
-
 // window.SphinxRtdTheme = (function (jquery) {
 //     var stickyNav = (function () {
 //         var navBar,

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-27 ven. 10:51 -->
+<!-- 2021-01-01 ven. 18:02 -->
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <title>Test File for the Org Mode Theme</title>
 <meta name="generator" content="Org mode" />
@@ -33,78 +33,87 @@
 <h2>Table of Contents</h2>
 <div id="text-table-of-contents">
 <ul>
-<li><a href="#org65663e9">1. Basics</a>
+<li><a href="#org7014271">1. Basics</a>
 <ul>
-<li><a href="#org2dd87aa">1.1. Normal Markup</a></li>
+<li><a href="#org97b4c42">1.1. Normal Markup</a></li>
-<li><a href="#org6faaea2">1.2. Links to Footnotes</a></li>
+<li><a href="#org9c439bb">1.2. Links to Footnotes</a></li>
-<li><a href="#org95213c0">1.3. Lists</a></li>
+<li><a href="#org5c6f78b">1.3. Lists</a></li>
-<li><a href="#orgb8626a0">1.4. Links</a></li>
+<li><a href="#orgc246141">1.4. Links</a></li>
-<li><a href="#org89b7577">1.5. Maths</a></li>
+<li><a href="#org825bee1">1.5. Maths</a></li>
-<li><a href="#orgd589837">1.6. Verse, Quote</a></li>
+<li><a href="#org3dc7d62">1.6. Verse, Quote</a></li>
-<li><a href="#org94d4483">1.7. Aside</a></li>
+<li><a href="#org92b59d7">1.7. Aside</a></li>
-<li><a href="#org9c694d9">1.8. Inline Task</a></li>
+<li><a href="#org5fbc0cc">1.8. Inline Task</a></li>
 </ul>
 </li>
-<li><a href="#org99de171">2. Headlines</a>
+<li><a href="#org61247ae">2. Headlines</a>
 <ul>
-<li><a href="#org174ebf8">2.1. Second level Headline with tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="_home">@home</span>&#xa0;<span class="_work">@work</span></span></a>
+<li><a href="#org2800f57">2.1. Second level Headline with tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="_home">@home</span>&#xa0;<span class="_work">@work</span></span></a>
 <ul>
-<li><a href="#orgc04f3a4">2.1.1. Third level Headline</a>
+<li><a href="#org59616e6">2.1.1. Third level Headline</a>
 <ul>
-<li><a href="#org85943d7">2.1.1.1. Fourth level Headline</a></li>
+<li><a href="#orgcf25cd5">2.1.1.1. Fourth level Headline</a></li>
 </ul>
 </li>
-<li><a href="#org3745941">2.1.2. Third level Headline</a>
+<li><a href="#org4fe724d">2.1.2. Third level Headline</a>
 <ul>
-<li><a href="#org6fa548d">2.1.2.1. Fourth level Headline</a></li>
+<li><a href="#org3da2744">2.1.2.1. Fourth level Headline</a></li>
 </ul>
 </li>
 </ul>
 </li>
-<li><a href="#org2bf6a3b">2.2. <span class="todo TODO">TODO</span> Second level Headline with Schedule</a></li>
+<li><a href="#orgdbf1be0">2.2. <span class="todo TODO">TODO</span> Second level Headline with Schedule</a></li>
-<li><a href="#org7d99384">2.3. <span class="priority">[B]</span> Second level Headline with a priority</a></li>
+<li><a href="#org81aed22">2.3. <span class="priority">[B]</span> Second level Headline with a priority</a></li>
-<li><a href="#orgd18a6f3">2.4. <span class="todo TODO">TODO</span> <span class="priority">[C]</span> Second level Headline with TODO State</a></li>
+<li><a href="#orgcaff5be">2.4. <span class="todo TODO">TODO</span> <span class="priority">[C]</span> Second level Headline with TODO State</a></li>
-<li><a href="#org97e6766">2.5. <span class="done DONE">DONE</span> <span class="priority">[A]</span> Second level Headline with DONE State</a>
+<li><a href="#orge771128">2.5. <span class="done DONE">DONE</span> <span class="priority">[A]</span> Second level Headline with DONE State</a>
 <ul>
-<li><a href="#org29ca5d5">2.5.1. <span class="todo WAIT">WAIT</span> Third level Headline with DONE State</a></li>
+<li><a href="#org1d2ac98">2.5.1. <span class="todo WAIT">WAIT</span> Third level Headline with DONE State</a></li>
 </ul>
 </li>
 </ul>
 </li>
-<li><a href="#org7602b57">3. Blocks</a></li>
+<li><a href="#org0700f2c">3. Blocks</a></li>
-<li><a href="#org79f5e97">4. Source Blocks</a>
+<li><a href="#org52bc0f1">4. Source Blocks</a>
 <ul>
-<li><a href="#org545c7e9">4.1. Figures</a></li>
+<li><a href="#org1433439">4.1. Figures</a></li>
-<li><a href="#orgdb2b817">4.2. Table Result</a></li>
+<li><a href="#org30f94fc">4.2. Table Result</a></li>
-<li><a href="#orge5bf18a">4.3. Inline Results</a></li>
+<li><a href="#orgcf6c4a6">4.3. Inline Results</a></li>
-<li><a href="#org4c7b2e7">4.4. Caption and Reference</a></li>
+<li><a href="#org7d4d88d">4.4. Caption and Reference</a></li>
-<li><a href="#org0e93278">4.5. Source Blocks with Line Numbers</a></li>
+<li><a href="#orge2781b6">4.5. Source Blocks with Line Numbers</a></li>
 </ul>
 </li>
-<li><a href="#orgc48bfa7">5. Images</a></li>
+<li><a href="#org8a3ead7">5. Images</a>
-<li><a href="#org274e18e">6. Tables</a></li>
+<ul>
-<li><a href="#org919b242">7. Details</a></li>
+<li><a href="#org8835bb6">5.1. Normal Image</a></li>
-<li><a href="#org5408d5c">8. Videos</a></li>
+<li><a href="#org5086e4d">5.2. Wrap Image</a></li>
-<li><a href="#orgda216d4">9. Bibliography</a></li>
+<li><a href="#org85b8338">5.3. Sub Images</a></li>
+</ul>
+</li>
+<li><a href="#orga6ee689">6. Tables</a></li>
+<li><a href="#orgd557e64">7. Details</a></li>
+<li><a href="#orga01f957">8. Videos</a></li>
 </ul>
 </div>
 </div>
 
-<div id="outline-container-org65663e9" class="outline-2">
+<div id="outline-container-org7014271" class="outline-2">
-<h2 id="org65663e9"><span class="section-number-2">1</span> Basics</h2>
+<h2 id="org7014271"><span class="section-number-2">1</span> Basics</h2>
 <div class="outline-text-2" id="text-1">
 </div>
-<div id="outline-container-org2dd87aa" class="outline-3">
+<div id="outline-container-org97b4c42" class="outline-3">
-<h3 id="org2dd87aa"><span class="section-number-3">1.1</span> Normal Markup</h3>
+<h3 id="org97b4c42"><span class="section-number-3">1.1</span> Normal Markup</h3>
 <div class="outline-text-3" id="text-1-1">
 <p>
 You can make words <b>bold</b>, <i>italic</i>, <span class="underline">underlined</span>, <code>verbatim</code> and <code>code</code>, and, if you must, <del>strike-through</del>.
 </p>
+
+<p>
+Here is some inline code Matlab code: <code class="src src-matlab">[K,CL,gamma] = mixsyn(G,W1,[],W3);</code>.
+</p>
 </div>
 </div>
 
-<div id="outline-container-org6faaea2" class="outline-3">
+<div id="outline-container-org9c439bb" class="outline-3">
-<h3 id="org6faaea2"><span class="section-number-3">1.2</span> Links to Footnotes</h3>
+<h3 id="org9c439bb"><span class="section-number-3">1.2</span> Links to Footnotes</h3>
 <div class="outline-text-3" id="text-1-2">
 <p>
 A link to a footnote<sup><a id="fnr.1" class="footref" href="#fn.1">1</a></sup> and to another footnote<sup><a id="fnr.2" class="footref" href="#fn.2">2</a></sup>.
@@ -112,8 +121,8 @@ A link to a footnote<sup><a id="fnr.1" class="footref" href="#fn.1">1</a></sup>
 </div>
 </div>
 
-<div id="outline-container-org95213c0" class="outline-3">
+<div id="outline-container-org5c6f78b" class="outline-3">
-<h3 id="org95213c0"><span class="section-number-3">1.3</span> Lists</h3>
+<h3 id="org5c6f78b"><span class="section-number-3">1.3</span> Lists</h3>
 <div class="outline-text-3" id="text-1-3">
 <p>
 <b>Unordered List</b>:
@@ -190,26 +199,26 @@ maximus lorem quis accumsan vehicula.</dd>
 </div>
 </div>
 
-<div id="outline-container-orgb8626a0" class="outline-3">
+<div id="outline-container-orgc246141" class="outline-3">
-<h3 id="orgb8626a0"><span class="section-number-3">1.4</span> Links</h3>
+<h3 id="orgc246141"><span class="section-number-3">1.4</span> Links</h3>
 <div class="outline-text-3" id="text-1-4">
 <p>
 Here is a list of links to:
 </p>
 <ul class="org-ul">
-<li>Figure <a href="#orgb76855b">3</a></li>
+<li>Figure <a href="#org3abb6bf">3</a></li>
-<li>Table <a href="#org16fb0d3">2</a></li>
+<li>Table <a href="#org9305eb4">3</a></li>
-<li>Listing <a href="#org2b85768">1</a></li>
+<li>Listing <a href="#orgbe446ed">1</a></li>
 <li>Specific <a href="#coderef-test" class="coderef" onmouseover="CodeHighlightOn(this, 'coderef-test');" onmouseout="CodeHighlightOff(this, 'coderef-test');">line of code</a></li>
 <li>Equation \eqref{eq:numbered}</li>
-<li>Section <a href="#orgf2189e4">2</a></li>
+<li>Section <a href="#orgd3bff47">2</a></li>
 <li>Bibliographic Reference <a href="#citeproc_bib_item_1">[1]</a>, and <a href="#citeproc_bib_item_1">[1]</a>–<a href="#citeproc_bib_item_3">[3]</a></li>
 </ul>
 </div>
 </div>
 
-<div id="outline-container-org89b7577" class="outline-3">
+<div id="outline-container-org825bee1" class="outline-3">
-<h3 id="org89b7577"><span class="section-number-3">1.5</span> Maths</h3>
+<h3 id="org825bee1"><span class="section-number-3">1.5</span> Maths</h3>
 <div class="outline-text-3" id="text-1-5">
 <p>
 Here is some inline mathematics: \(z = 2\).
@@ -237,8 +246,8 @@ Using the <code>align</code> environment Equations \eqref{eq:align_1} and \eqref
 </div>
 </div>
 
-<div id="outline-container-orgd589837" class="outline-3">
+<div id="outline-container-org3dc7d62" class="outline-3">
-<h3 id="orgd589837"><span class="section-number-3">1.6</span> Verse, Quote</h3>
+<h3 id="org3dc7d62"><span class="section-number-3">1.6</span> Verse, Quote</h3>
 <div class="outline-text-3" id="text-1-6">
 <p>
 Below is a verse.
@@ -270,14 +279,14 @@ Nearly everything is really interesting if you go into it deeply enough.
 </div>
 </div>
 
-<div id="outline-container-org94d4483" class="outline-3">
+<div id="outline-container-org92b59d7" class="outline-3">
-<h3 id="org94d4483"><span class="section-number-3">1.7</span> Aside</h3>
+<h3 id="org92b59d7"><span class="section-number-3">1.7</span> Aside</h3>
 <div class="outline-text-3" id="text-1-7">
 <p>
 An aside block can be used as shown below.
 </p>
 
-<div class="aside" id="orgfa9f090">
+<div class="aside" id="org80ae6e0">
 <p>
 This is a note about the text using the <code>aside</code> environment.
 This can be as long as wanted
@@ -291,8 +300,8 @@ Cras elementum ex vel orci congue porttitor. Vestibulum scelerisque gravida matt
 </div>
 </div>
 
-<div id="outline-container-org9c694d9" class="outline-3">
+<div id="outline-container-org5fbc0cc" class="outline-3">
-<h3 id="org9c694d9"><span class="section-number-3">1.8</span> Inline Task</h3>
+<h3 id="org5fbc0cc"><span class="section-number-3">1.8</span> Inline Task</h3>
 <div class="outline-text-3" id="text-1-8">
 <p>
 Some text.
@@ -310,24 +319,24 @@ Some text.
 </div>
 </div>
 
-<div id="outline-container-org99de171" class="outline-2">
+<div id="outline-container-org61247ae" class="outline-2">
-<h2 id="org99de171"><span class="section-number-2">2</span> Headlines</h2>
+<h2 id="org61247ae"><span class="section-number-2">2</span> Headlines</h2>
 <div class="outline-text-2" id="text-2">
 <p>
-<a id="orgf2189e4"></a>
+<a id="orgd3bff47"></a>
 </p>
 </div>
 
-<div id="outline-container-org174ebf8" class="outline-3">
+<div id="outline-container-org2800f57" class="outline-3">
-<h3 id="org174ebf8"><span class="section-number-3">2.1</span> Second level Headline with tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="_home">@home</span>&#xa0;<span class="_work">@work</span></span></h3>
+<h3 id="org2800f57"><span class="section-number-3">2.1</span> Second level Headline with tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="_home">@home</span>&#xa0;<span class="_work">@work</span></span></h3>
 <div class="outline-text-3" id="text-2-1">
 </div>
-<div id="outline-container-orgc04f3a4" class="outline-4">
+<div id="outline-container-org59616e6" class="outline-4">
-<h4 id="orgc04f3a4"><span class="section-number-4">2.1.1</span> Third level Headline</h4>
+<h4 id="org59616e6"><span class="section-number-4">2.1.1</span> Third level Headline</h4>
 <div class="outline-text-4" id="text-2-1-1">
 </div>
-<div id="outline-container-org85943d7" class="outline-5">
+<div id="outline-container-orgcf25cd5" class="outline-5">
-<h5 id="org85943d7"><span class="section-number-5">2.1.1.1</span> Fourth level Headline</h5>
+<h5 id="orgcf25cd5"><span class="section-number-5">2.1.1.1</span> Fourth level Headline</h5>
 <div class="outline-text-5" id="text-2-1-1-1">
 <p>
 Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna. Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean sollicitudin nibh enim, sed pulvinar massa iaculis sit amet. Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo. Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae suscipit quam consequat a. Phasellus feugiat congue sapien commodo cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
@@ -336,12 +345,12 @@ Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placera
 </div>
 </div>
 
-<div id="outline-container-org3745941" class="outline-4">
+<div id="outline-container-org4fe724d" class="outline-4">
-<h4 id="org3745941"><span class="section-number-4">2.1.2</span> Third level Headline</h4>
+<h4 id="org4fe724d"><span class="section-number-4">2.1.2</span> Third level Headline</h4>
 <div class="outline-text-4" id="text-2-1-2">
 </div>
-<div id="outline-container-org6fa548d" class="outline-5">
+<div id="outline-container-org3da2744" class="outline-5">
-<h5 id="org6fa548d"><span class="section-number-5">2.1.2.1</span> Fourth level Headline</h5>
+<h5 id="org3da2744"><span class="section-number-5">2.1.2.1</span> Fourth level Headline</h5>
 <div class="outline-text-5" id="text-2-1-2-1">
 <p>
 Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna. Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean sollicitudin nibh enim, sed pulvinar massa iaculis sit amet. Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo. Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae suscipit quam consequat a. Phasellus feugiat congue sapien commodo cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
@@ -351,8 +360,8 @@ Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placera
 </div>
 </div>
 
-<div id="outline-container-org2bf6a3b" class="outline-3">
+<div id="outline-container-orgdbf1be0" class="outline-3">
-<h3 id="org2bf6a3b"><span class="section-number-3">2.2</span> <span class="todo TODO">TODO</span> Second level Headline with Schedule</h3>
+<h3 id="orgdbf1be0"><span class="section-number-3">2.2</span> <span class="todo TODO">TODO</span> Second level Headline with Schedule</h3>
 <div class="outline-text-3" id="text-2-2">
 <p><span class="timestamp-wrapper"><span class="timestamp-kwd">SCHEDULED:</span> <span class="timestamp">&lt;2020-11-26 jeu.&gt;</span></span></p>
 
@@ -362,8 +371,8 @@ Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placera
 </div>
 </div>
 
-<div id="outline-container-org7d99384" class="outline-3">
+<div id="outline-container-org81aed22" class="outline-3">
-<h3 id="org7d99384"><span class="section-number-3">2.3</span> <span class="priority">[B]</span> Second level Headline with a priority</h3>
+<h3 id="org81aed22"><span class="section-number-3">2.3</span> <span class="priority">[B]</span> Second level Headline with a priority</h3>
 <div class="outline-text-3" id="text-2-3">
 <p>
 Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna.
@@ -371,8 +380,8 @@ Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placera
 </div>
 </div>
 
-<div id="outline-container-orgd18a6f3" class="outline-3">
+<div id="outline-container-orgcaff5be" class="outline-3">
-<h3 id="orgd18a6f3"><span class="section-number-3">2.4</span> <span class="todo TODO">TODO</span> <span class="priority">[C]</span> Second level Headline with TODO State</h3>
+<h3 id="orgcaff5be"><span class="section-number-3">2.4</span> <span class="todo TODO">TODO</span> <span class="priority">[C]</span> Second level Headline with TODO State</h3>
 <div class="outline-text-3" id="text-2-4">
 <p>
 Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo.
@@ -380,8 +389,8 @@ Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra
 </div>
 </div>
 
-<div id="outline-container-org97e6766" class="outline-3">
+<div id="outline-container-orge771128" class="outline-3">
-<h3 id="org97e6766"><span class="section-number-3">2.5</span> <span class="done DONE">DONE</span> <span class="priority">[A]</span> Second level Headline with DONE State</h3>
+<h3 id="orge771128"><span class="section-number-3">2.5</span> <span class="done DONE">DONE</span> <span class="priority">[A]</span> Second level Headline with DONE State</h3>
 <div class="outline-text-3" id="text-2-5">
 <p><span class="timestamp-wrapper"><span class="timestamp-kwd">CLOSED:</span> <span class="timestamp">[2020-11-26 jeu. 18:53]</span></span></p>
 <p>
@@ -389,8 +398,8 @@ Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae sus
 </p>
 </div>
 
-<div id="outline-container-org29ca5d5" class="outline-4">
+<div id="outline-container-org1d2ac98" class="outline-4">
-<h4 id="org29ca5d5"><span class="section-number-4">2.5.1</span> <span class="todo WAIT">WAIT</span> Third level Headline with DONE State</h4>
+<h4 id="org1d2ac98"><span class="section-number-4">2.5.1</span> <span class="todo WAIT">WAIT</span> Third level Headline with DONE State</h4>
 <div class="outline-text-4" id="text-2-5-1">
 <p><span class="timestamp-wrapper"><span class="timestamp-kwd">CLOSED:</span> <span class="timestamp">[2020-11-26 jeu. 18:53]</span></span></p>
 <p>
@@ -401,66 +410,87 @@ Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean so
 </div>
 </div>
 
-<div id="outline-container-org7602b57" class="outline-2">
+<div id="outline-container-org0700f2c" class="outline-2">
-<h2 id="org7602b57"><span class="section-number-2">3</span> Blocks</h2>
+<h2 id="org0700f2c"><span class="section-number-2">3</span> Blocks</h2>
 <div class="outline-text-2" id="text-3">
-<div class="seealso" id="org5073077">
+<div class="seealso" id="org798b518">
 <p>
 <code>seealso</code> block.
 </p>
 
 </div>
 
-<div class="hint" id="orgd31ea7f">
+<div class="hint" id="org5863890">
 <p>
 <code>hint</code> block.
 </p>
 
 </div>
 
-<div class="definition" id="orgc4cfd73">
+<div class="definition" id="org84e56ec">
 <p>
 <code>definition</code> block.
 </p>
 
 </div>
 
-<div class="exampl" id="orgc37c321">
+<div class="important" id="org1b29ba3">
-<p>
-<code>exampl</code> block.
-</p>
-
-</div>
-
-<div class="question" id="orgd20db05">
-<p>
-<code>question</code> block.
-</p>
-
-</div>
-
-<div class="summary" id="orgd3837a9">
-<p>
-<code>summary</code> block.
-</p>
-
-</div>
-
-<div class="important" id="orga264a31">
 <p>
 <code>important</code> block.
 </p>
 
 </div>
 
-<div class="caution" id="org84faa5c">
+<div class="exampl" id="orgdd4d3a3">
+<p>
+<code>exampl</code> block.
+</p>
+
+</div>
+
+<div class="exercice" id="orgbfcd181">
+<p>
+<code>exercice</code> block.
+</p>
+
+</div>
+
+<div class="question" id="org12c558a">
+<p>
+<code>question</code> block.
+</p>
+
+</div>
+
+<div class="answer" id="orga95ba73">
+<p>
+<code>answer</code> block.
+</p>
+
+</div>
+
+<div class="summary" id="orgdce4082">
+<p>
+<code>summary</code> block.
+</p>
+
+</div>
+
+<div class="note" id="orgb487591">
+<p>
+<code>note</code> block.
+</p>
+
+</div>
+
+<div class="caution" id="org3effa05">
 <p>
 <code>caution</code> block.
 </p>
 
 </div>
 
-<div class="warning" id="org8f2e0f1">
+<div class="warning" id="orgd88a9f9">
 <p>
 <code>warning</code> block.
 </p>
@@ -469,12 +499,12 @@ Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean so
 </div>
 </div>
 
-<div id="outline-container-org79f5e97" class="outline-2">
+<div id="outline-container-org52bc0f1" class="outline-2">
-<h2 id="org79f5e97"><span class="section-number-2">4</span> Source Blocks</h2>
+<h2 id="org52bc0f1"><span class="section-number-2">4</span> Source Blocks</h2>
 <div class="outline-text-2" id="text-4">
 </div>
-<div id="outline-container-org545c7e9" class="outline-3">
+<div id="outline-container-org1433439" class="outline-3">
-<h3 id="org545c7e9"><span class="section-number-3">4.1</span> Figures</h3>
+<h3 id="org1433439"><span class="section-number-3">4.1</span> Figures</h3>
 <div class="outline-text-3" id="text-4-1">
 <div class="org-src-container">
 <pre class="src src-matlab">t = 0<span class="org-type">:</span>0.01<span class="org-type">:</span>5; <span class="org-comment">% Time [s]</span>
@@ -490,7 +520,7 @@ xlabel(<span class="org-string">'Time [s]'</span>); ylabel(<span class="org-stri
 </div>
 
 
-<div id="org8c9fa3a" class="figure">
+<div id="org1745269" class="figure">
 <p><img src="figs/matlab_fig_example.png" alt="matlab_fig_example.png" />
 </p>
 <p><span class="figure-number">Figure 1: </span>Matlab Figure</p>
@@ -498,8 +528,8 @@ xlabel(<span class="org-string">'Time [s]'</span>); ylabel(<span class="org-stri
 </div>
 </div>
 
-<div id="outline-container-orgdb2b817" class="outline-3">
+<div id="outline-container-org30f94fc" class="outline-3">
-<h3 id="orgdb2b817"><span class="section-number-3">4.2</span> Table Result</h3>
+<h3 id="org30f94fc"><span class="section-number-3">4.2</span> Table Result</h3>
 <div class="outline-text-3" id="text-4-2">
 <div class="org-src-container">
 <pre class="src src-matlab">x = 1<span class="org-type">:</span>10;
@@ -507,7 +537,7 @@ y = x<span class="org-type">.^</span>2;
 </pre>
 </div>
 
-<table id="org6f4cd18" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<table id="orgd67f5c3" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
 <caption class="t-above"><span class="table-number">Table 1:</span> Table caption</caption>
 
 <colgroup>
@@ -576,8 +606,8 @@ y = x<span class="org-type">.^</span>2;
 </div>
 </div>
 
-<div id="outline-container-orge5bf18a" class="outline-3">
+<div id="outline-container-orgcf6c4a6" class="outline-3">
-<h3 id="orge5bf18a"><span class="section-number-3">4.3</span> Inline Results</h3>
+<h3 id="orgcf6c4a6"><span class="section-number-3">4.3</span> Inline Results</h3>
 <div class="outline-text-3" id="text-4-3">
 <p>
 Results can be automatically outputed as shown below.
@@ -606,35 +636,35 @@ y =
 </div>
 </div>
 
-<div id="outline-container-org4c7b2e7" class="outline-3">
+<div id="outline-container-org7d4d88d" class="outline-3">
-<h3 id="org4c7b2e7"><span class="section-number-3">4.4</span> Caption and Reference</h3>
+<h3 id="org7d4d88d"><span class="section-number-3">4.4</span> Caption and Reference</h3>
 <div class="outline-text-3" id="text-4-4">
 <p>
 Captions can be added to code blocks.
-Moreover, we can link to specific bode blocks (Listing <a href="#org2b85768">1</a> or <a href="#org1629eb7">2</a>).
+Moreover, we can link to specific bode blocks (Listing <a href="#orgbe446ed">1</a> or <a href="#orga6e057f">2</a>).
 </p>
 
 <div class="org-src-container">
-<label class="org-src-name"><span class="listing-number">Listing 1: </span>Code to produce a nice contour plot</label><pre class="src src-matlab" id="org2b85768"><span class="org-type">figure</span>;
+<label class="org-src-name"><span class="listing-number">Listing 1: </span>Code to produce a nice contour plot</label><pre class="src src-matlab" id="orgbe446ed"><span class="org-type">figure</span>;
 [X,Y,Z] = peaks;
 contour(X,Y,Z,20)
 </pre>
 </div>
 
 
-<div id="org340b96b" class="figure">
+<div id="orgeb9b28c" class="figure">
 <p><img src="figs/matlab_logo.png" alt="matlab_logo.png" />
 </p>
 <p><span class="figure-number">Figure 2: </span>Obtained Contour Plot</p>
 </div>
 
 <div class="org-src-container">
-<label class="org-src-name"><span class="listing-number">Listing 2: </span>Code to compute the Singular Value Decomposition</label><pre class="src src-matlab" id="org1629eb7">A = [1 2; 3 4; 5 6; 7 8]
+<label class="org-src-name"><span class="listing-number">Listing 2: </span>Code to compute the Singular Value Decomposition</label><pre class="src src-matlab" id="orga6e057f">A = [1 2; 3 4; 5 6; 7 8]
 [U,S,V] = svd(A)
 </pre>
 </div>
 
-<pre class="example" id="org1b7dfb5">
+<pre class="example" id="org06e18f5">
 A = [1 2; 3 4; 5 6; 7 8]
 A =
      1     2
@@ -659,11 +689,11 @@ V =
 </div>
 </div>
 
-<div id="outline-container-org0e93278" class="outline-3">
+<div id="outline-container-orge2781b6" class="outline-3">
-<h3 id="org0e93278"><span class="section-number-3">4.5</span> Source Blocks with Line Numbers</h3>
+<h3 id="orge2781b6"><span class="section-number-3">4.5</span> Source Blocks with Line Numbers</h3>
 <div class="outline-text-3" id="text-4-5">
 <p>
-The Listing <a href="#orgdf6c073">3</a> has line numbers as the <code>-n</code> option was used.
+The Listing <a href="#orga9a125b">3</a> has line numbers as the <code>-n</code> option was used.
 </p>
 
 <p>
@@ -672,7 +702,7 @@ For instance, the code used to specify the wanted the vertical label is on line
 </p>
 
 <div class="org-src-container">
-<label class="org-src-name"><span class="listing-number">Listing 3: </span>Specify Labels</label><pre class="src src-matlab" id="orgdf6c073"><span class="linenr">1: </span><span class="org-type">figure</span>;
+<label class="org-src-name"><span class="listing-number">Listing 3: </span>Specify Labels</label><pre class="src src-matlab" id="orga9a125b"><span class="linenr">1: </span><span class="org-type">figure</span>;
 <span class="linenr">2: </span>plot(t, x)
 <span class="linenr">3: </span>xlabel(<span class="org-string">'Time [s]'</span>);
 <span id="coderef-test" class="coderef-off"><span class="linenr">4: </span>ylabel(<span class="org-string">'Output [V]'</span>);</span>
@@ -693,15 +723,19 @@ Numbering can be continued by using <code>+n</code> option as shown below.
 </div>
 </div>
 
-<div id="outline-container-orgc48bfa7" class="outline-2">
+<div id="outline-container-org8a3ead7" class="outline-2">
-<h2 id="orgc48bfa7"><span class="section-number-2">5</span> Images</h2>
+<h2 id="org8a3ead7"><span class="section-number-2">5</span> Images</h2>
 <div class="outline-text-2" id="text-5">
+</div>
+<div id="outline-container-org8835bb6" class="outline-3">
+<h3 id="org8835bb6"><span class="section-number-3">5.1</span> Normal Image</h3>
+<div class="outline-text-3" id="text-5-1">
 <p>
-Figure <a href="#orgb76855b">3</a> shows the results of the Tikz code of listing <a href="#orgf90fb61">4</a>.
+Figure <a href="#org3abb6bf">3</a> shows the results of the Tikz code of listing <a href="#orgafafc64">4</a>.
 </p>
 
 <div class="org-src-container">
-<label class="org-src-name"><span class="listing-number">Listing 4: </span>Tikz code that is used to generate Figure <a href="#orgb76855b">3</a></label><pre class="src src-latex" id="orgf90fb61"><span class="org-font-latex-sedate"><span class="org-keyword">\begin</span></span>{<span class="org-function-name">tikzpicture</span>}
+<label class="org-src-name"><span class="listing-number">Listing 4: </span>Tikz code that is used to generate Figure <a href="#org3abb6bf">3</a></label><pre class="src src-latex" id="orgafafc64"><span class="org-font-latex-sedate"><span class="org-keyword">\begin</span></span>{<span class="org-function-name">tikzpicture</span>}
 
   <span class="org-comment">% Blocs</span>
   <span class="org-font-latex-sedate">\node</span>[block={2.0cm}{2.0cm}] (P) {<span class="org-font-latex-math">$P$</span>};
@@ -724,23 +758,110 @@ Figure <a href="#orgb76855b">3</a> shows the results of the Tikz code of listing
 </div>
 
 
-<div id="orgb76855b" class="figure">
+<div id="org3abb6bf" class="figure">
 <p><img src="figs/general_control_names.png" alt="general_control_names.png" />
 </p>
 <p><span class="figure-number">Figure 3: </span>General Control Configuration</p>
 </div>
+
+<div class="org-src-container">
+<pre class="src src-md">#+name: fig:general_control_names
+#+caption: General Control Configuration
+[[file:figs/general_control_names.png]]
+</pre>
+</div>
 </div>
 </div>
 
-<div id="outline-container-org274e18e" class="outline-2">
+<div id="outline-container-org5086e4d" class="outline-3">
-<h2 id="org274e18e"><span class="section-number-2">6</span> Tables</h2>
+<h3 id="org5086e4d"><span class="section-number-3">5.2</span> Wrap Image</h3>
-<div class="outline-text-2" id="text-6">
+<div class="outline-text-3" id="text-5-2">
+
+<div id="orge1b2b7f" class="figure">
+<p><img src="figs/general_control_names.png" alt="general_control_names.png" float="wrap-right" />
+</p>
+<p><span class="figure-number">Figure 4: </span>General Control Configuration</p>
+</div>
+
 <p>
-Table <a href="#org16fb0d3">2</a> shows a table with some mathematics inside.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non semper turpis. Proin tristique ipsum at mauris viverra efficitur. Maecenas semper urna vitae hendrerit consectetur. Vivamus id odio et lectus pretium hendrerit ac in libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque gravida, nibh vitae euismod mollis, dolor justo hendrerit mauris, sed dapibus velit magna ut purus. Mauris sagittis ligula in ante congue, vel rhoncus velit rutrum. In pulvinar elit nibh, a sodales enim iaculis sed. Maecenas et eleifend libero, vel congue urna. Praesent sit amet ornare lacus, nec maximus lectus.
 </p>
 
-<table id="org16fb0d3" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<p>
-<caption class="t-above"><span class="table-number">Table 2:</span> A Simple table with included math</caption>
+Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae molestie mi. Ut sodales euismod mauris, vitae finibus orci sagittis a. Quisque fringilla ante mi, vel aliquet est mollis in. Nam rutrum, nibh vitae tincidunt ultrices, quam urna efficitur ipsum, eget tristique lorem purus vitae metus. Maecenas dictum varius eros. Sed aliquam quis tortor in ultricies. Suspendisse imperdiet, mi eget mattis porta, felis quam gravida mi, malesuada venenatis dui dui a libero. Duis in lorem eget elit fermentum accumsan. Cras consequat eros vehicula, laoreet neque nec, tincidunt odio. Phasellus eu arcu lacus. Aliquam vel sollicitudin ipsum, sed iaculis risus. In pulvinar purus libero, quis vestibulum ex lacinia vel. Ut imperdiet ut erat non vulputate.
+</p>
+
+<div class="org-src-container">
+<pre class="src src-md">#+name: fig:general_control_names
+#+caption: General Control Configuration
+#+attr_html: :float wrap-left
+#+attr_latex: :float wrap
+[[file:figs/general_control_names.png]]
+</pre>
+</div>
+
+
+<div id="org114f7f4" class="figure">
+<p><img src="figs/general_control_names.png" alt="general_control_names.png" float="wrap-left" />
+</p>
+<p><span class="figure-number">Figure 5: </span>General Control Configuration</p>
+</div>
+
+<p>
+Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae molestie mi. Ut sodales euismod mauris, vitae finibus orci sagittis a. Quisque fringilla ante mi, vel aliquet est mollis in. Nam rutrum, nibh vitae tincidunt ultrices, quam urna efficitur ipsum, eget tristique lorem purus vitae metus. Maecenas dictum varius eros. Sed aliquam quis tortor in ultricies. Suspendisse imperdiet, mi eget mattis porta, felis quam gravida mi, malesuada venenatis dui dui a libero. Duis in lorem eget elit fermentum accumsan. Cras consequat eros vehicula, laoreet neque nec, tincidunt odio. Phasellus eu arcu lacus. Aliquam vel sollicitudin ipsum, sed iaculis risus. In pulvinar purus libero, quis vestibulum ex lacinia vel. Ut imperdiet ut erat non vulputate.
+</p>
+</div>
+</div>
+
+<div id="outline-container-org85b8338" class="outline-3">
+<h3 id="org85b8338"><span class="section-number-3">5.3</span> Sub Images</h3>
+<div class="outline-text-3" id="text-5-3">
+<p>
+Link to subfigure <a href="#org6234953">2</a>.
+</p>
+
+<div class="org-src-container">
+<pre class="src src-md">#+name: fig:subfigure
+#+caption: Subfigure Caption
+#+attr_latex: :environment subfigure :width 0.49\linewidth :align c
+| file:figs/general_control_names.png                | file:figs/general_control_names.png                |
+| &lt;&lt;fig:general_control_names_1&gt;&gt; sub figure caption | &lt;&lt;fig:general_control_names_2&gt;&gt; sub figure caption |
+</pre>
+</div>
+
+<table id="org1772772" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<caption class="t-above"><span class="table-number">Table 2:</span> Subfigure Caption</caption>
+
+<colgroup>
+<col  class="org-left" />
+
+<col  class="org-left" />
+</colgroup>
+<tbody>
+<tr>
+<td class="org-left"><img src="figs/general_control_names.png" alt="general_control_names.png" /></td>
+<td class="org-left"><img src="figs/general_control_names.png" alt="general_control_names.png" /></td>
+</tr>
+
+<tr>
+<td class="org-left"><a id="org6234953"></a> sub figure caption</td>
+<td class="org-left"><a id="org3026a33"></a> sub figure caption</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</div>
+
+<div id="outline-container-orga6ee689" class="outline-2">
+<h2 id="orga6ee689"><span class="section-number-2">6</span> Tables</h2>
+<div class="outline-text-2" id="text-6">
+<p>
+Table <a href="#org9305eb4">3</a> shows a table with some mathematics inside.
+</p>
+
+<table id="org9305eb4" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<caption class="t-above"><span class="table-number">Table 3:</span> A Simple table with included math</caption>
 
 <colgroup>
 <col  class="org-right" />
@@ -794,11 +915,216 @@ Table <a href="#org16fb0d3">2</a> shows a table with some mathematics inside.
 </tr>
 </tbody>
 </table>
+
+<table id="orgf729723" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<caption class="t-above"><span class="table-number">Table 4:</span> Table without Head</caption>
+
+<colgroup>
+<col  class="org-left" />
+
+<col  class="org-right" />
+
+<col  class="org-right" />
+
+<col  class="org-right" />
+
+<col  class="org-right" />
+
+<col  class="org-right" />
+</colgroup>
+<tbody>
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-right"><b>1</b></td>
+<td class="org-right"><b>2</b></td>
+<td class="org-right"><b>3</b></td>
+<td class="org-right"><b>4</b></td>
+<td class="org-right"><b>5</b></td>
+</tr>
+
+<tr>
+<td class="org-left"><b>1</b></td>
+<td class="org-right">1</td>
+<td class="org-right">2</td>
+<td class="org-right">3</td>
+<td class="org-right">4</td>
+<td class="org-right">5</td>
+</tr>
+
+<tr>
+<td class="org-left"><b>2</b></td>
+<td class="org-right">2</td>
+<td class="org-right">4</td>
+<td class="org-right">6</td>
+<td class="org-right">8</td>
+<td class="org-right">10</td>
+</tr>
+
+<tr>
+<td class="org-left"><b>3</b></td>
+<td class="org-right">3</td>
+<td class="org-right">6</td>
+<td class="org-right">9</td>
+<td class="org-right">12</td>
+<td class="org-right">15</td>
+</tr>
+
+<tr>
+<td class="org-left"><b>4</b></td>
+<td class="org-right">4</td>
+<td class="org-right">8</td>
+<td class="org-right">12</td>
+<td class="org-right">16</td>
+<td class="org-right">20</td>
+</tr>
+
+<tr>
+<td class="org-left"><b>5</b></td>
+<td class="org-right">5</td>
+<td class="org-right">10</td>
+<td class="org-right">15</td>
+<td class="org-right">20</td>
+<td class="org-right">25</td>
+</tr>
+</tbody>
+</table>
+
+<table id="org88492a0" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<caption class="t-above"><span class="table-number">Table 5:</span> Table with multiples groups</caption>
+
+<colgroup>
+<col  class="org-left" />
+
+<col  class="org-center" />
+
+<col  class="org-center" />
+
+<col  class="org-center" />
+</colgroup>
+<thead>
+<tr>
+<th scope="col" class="org-left">&#xa0;</th>
+<th scope="col" class="org-center"><b>Classical Control</b></th>
+<th scope="col" class="org-center"><b>Modern Control</b></th>
+<th scope="col" class="org-center"><b>Robust Control</b></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="org-left"><b>Date</b></td>
+<td class="org-center">1930-</td>
+<td class="org-center">1960-</td>
+<td class="org-center">1980-</td>
+</tr>
+</tbody>
+<tbody>
+<tr>
+<td class="org-left"><b>Tools</b></td>
+<td class="org-center">Transfer Functions</td>
+<td class="org-center">State Space formulation</td>
+<td class="org-center">Disk margin</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Nyquist Plots</td>
+<td class="org-center">Riccati Equations</td>
+<td class="org-center">Systems and Signals Norms (\(\mathcal{H}_\infty\), \(\mathcal{H}_2\) Norms)</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Bode Plots</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">Closed Loop Transfer Functions</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Phase and Gain margins</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">Weighting Functions</td>
+</tr>
+</tbody>
+<tbody>
+<tr>
+<td class="org-left"><b>Control Architectures</b></td>
+<td class="org-center">Proportional, Integral, Derivative</td>
+<td class="org-center">Full State Feedback</td>
+<td class="org-center">General Control Configuration</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Leads, Lags</td>
+<td class="org-center">LQR, LQG</td>
+<td class="org-center">&#xa0;</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">Kalman Filters</td>
+<td class="org-center">&#xa0;</td>
+</tr>
+</tbody>
+<tbody>
+<tr>
+<td class="org-left"><b>Advantages</b></td>
+<td class="org-center">Study Stability</td>
+<td class="org-center">Automatic Synthesis</td>
+<td class="org-center">Automatic Synthesis</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Simple</td>
+<td class="org-center">MIMO</td>
+<td class="org-center">MIMO</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Natural</td>
+<td class="org-center">Optimization Problem</td>
+<td class="org-center">Optimization Problem</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">Guaranteed Robustness</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">&#xa0;</td>
+<td class="org-center">Easy specification of performances</td>
+</tr>
+</tbody>
+<tbody>
+<tr>
+<td class="org-left"><b>Disadvantages</b></td>
+<td class="org-center">Manual Method</td>
+<td class="org-center">No Guaranteed Robustness</td>
+<td class="org-center">Required knowledge of specific tools</td>
+</tr>
+
+<tr>
+<td class="org-left">&#xa0;</td>
+<td class="org-center">Only SISO</td>
+<td class="org-center">Difficult Rejection of Perturbations</td>
+<td class="org-center">Need a reasonably good model of the system</td>
+</tr>
+</tbody>
+</table>
 </div>
 </div>
 
-<div id="outline-container-org919b242" class="outline-2">
+<div id="outline-container-orgd557e64" class="outline-2">
-<h2 id="org919b242"><span class="section-number-2">7</span> Details</h2>
+<h2 id="orgd557e64"><span class="section-number-2">7</span> Details</h2>
 <div class="outline-text-2" id="text-7">
 <p>
 Below is some content hidden until you click the bar.
@@ -809,8 +1135,8 @@ Below is some content hidden until you click the bar.
 Almost anything can be put here for instance this table below.
 </p>
 
-<table id="orgcd47368" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
+<table id="orgae9702c" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
-<caption class="t-above"><span class="table-number">Table 3:</span> A Simple table with included math</caption>
+<caption class="t-above"><span class="table-number">Table 6:</span> A Simple table with included math</caption>
 
 <colgroup>
 <col  class="org-right" />
@@ -877,7 +1203,7 @@ It is approximately <b>12,742 km</b>
 </p>
 </details>
 
-<div class="question" id="org8e2b4ce">
+<div class="question" id="org0df6eb1">
 <p>
 What is the approximate diameter of the earth?
 </p>
@@ -892,8 +1218,8 @@ It is approximately <b>12,742 km</b>
 </div>
 </div>
 
-<div id="outline-container-org5408d5c" class="outline-2">
+<div id="outline-container-orga01f957" class="outline-2">
-<h2 id="org5408d5c"><span class="section-number-2">8</span> Videos</h2>
+<h2 id="orga01f957"><span class="section-number-2">8</span> Videos</h2>
 <div class="outline-text-2" id="text-8">
 <p>
 <div class="yt"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/SzA2YODtgK4" frameborder="0" allowfullscreen></iframe></div>
@@ -901,12 +1227,6 @@ It is approximately <b>12,742 km</b>
 </div>
 </div>
 
-<div id="outline-container-orgda216d4" class="outline-2">
-<h2 id="orgda216d4"><span class="section-number-2">9</span> Bibliography</h2>
-<div class="outline-text-2" id="text-9">
-<p>
-
-</p>
 
 <style>.csl-left-margin{float: left; padding-right: 0em;} .csl-right-inline{margin: 0 0 0 1.7999999999999998em;}</style><h2 class='citeproc-org-bib-h2'>Bibliography</h2>
 <div class="csl-bib-body">
@@ -920,14 +1240,12 @@ It is approximately <b>12,742 km</b>
     <div class="csl-left-margin">[3]</div><div class="csl-right-inline">C. Dominik, <i>The Org Mode 7 Reference Manual-Organize your life with GNU Emacs</i>. Network Theory Ltd., 2010.</div>
   </div>
 </div>
-</div>
-</div>
 <div id="footnotes">
 <h2 class="footnotes">Footnotes</h2>
 <div id="text-footnotes">
 
 <div class="footdef"><sup><a id="fn.1" class="footnum" href="#fnr.1">1</a></sup> <div class="footpara"><p class="footpara">
-A long foot note. Lorem ipsum dolor sit amet, consectetur adipiscing elit. With a reference to Figure <a href="#orgb76855b">3</a>.
+A long foot note. Lorem ipsum dolor sit amet, consectetur adipiscing elit. With a reference to Figure <a href="#org3abb6bf">3</a>.
 </p></div></div>
 
 <div class="footdef"><sup><a id="fn.2" class="footnum" href="#fnr.2">2</a></sup> <div class="footpara"><p class="footpara">
@@ -939,7 +1257,7 @@ An other footnote.
 </div></div>
 <div id="postamble" class="status">
 <p class="author">Author: Dehaeze Thomas</p>
-<p class="date">Created: 2020-11-27 ven. 10:51</p>
+<p class="date">Created: 2021-01-01 ven. 18:02</p>
 </div>
 </body>
 </html>

index.org

@@ -15,13 +15,15 @@
 #+HTML_HEAD: <link rel="stylesheet" type="text/css" href="dist/style.css"/>
 #+HTML_HEAD: <script type="text/javascript" src="dist/script.js"></script>
 
-# #+HTML_HEAD: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+#+LaTeX_CLASS: scrreprt
+#+LaTeX_HEADER_EXTRA: \input{preamble.tex}
+#+LaTeX_HEADER_EXTRA: \addbibresource{ref.bib}
 
-#+HTML_MATHJAX: align: center tagside: right font: TeX
-
-#+BIBLIOGRAPHY: ref.bib
 #+CSL_STYLE: ieee.csl
 
+#+BIND: org-latex-default-table-environment "tabular"
+#+BIND: org-latex-tables-booktabs nil
+
 #+PROPERTY: header-args:matlab  :session *MATLAB*
 #+PROPERTY: header-args:matlab+ :comments org
 #+PROPERTY: header-args:matlab+ :results none
@@ -50,6 +52,8 @@
 ** Normal Markup
 You can make words *bold*, /italic/, _underlined_, =verbatim= and ~code~, and, if you must, +strike-through+.
 
+Here is some inline code Matlab code: src_matlab[:exports code]{[K,CL,gamma] = mixsyn(G,W1,[],W3);}.
+
 ** Links to Footnotes
 
 A link to a footnote[fn:1] and to another footnote[fn:2].
@@ -212,21 +216,33 @@ Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean so
   =definition= block.
 #+end_definition
 
+#+begin_important
+  =important= block.
+#+end_important
+
 #+begin_exampl
   =exampl= block.
 #+end_exampl
 
+#+begin_exercice
+  =exercice= block.
+#+end_exercice
+
 #+begin_question
   =question= block.
 #+end_question
 
+#+begin_answer
+  =answer= block.
+#+end_answer
+
 #+begin_summary
   =summary= block.
 #+end_summary
 
-#+begin_important
+#+begin_note
-  =important= block.
+  =note= block.
-#+end_important
+#+end_note
 
 #+begin_caution
   =caution= block.
@@ -393,6 +409,8 @@ Numbering can be continued by using =+n= option as shown below.
 
 * Images
 
+** Normal Image
+
 Figure [[fig:general_control_names]] shows the results of the Tikz code of listing [[lst:tikz_test]].
 
 #+name: lst:tikz_test
@@ -424,6 +442,58 @@ Figure [[fig:general_control_names]] shows the results of the Tikz code of listi
 #+RESULTS:
 [[file:figs/general_control_names.png]]
 
+#+begin_src md
+#+name: fig:general_control_names
+#+caption: General Control Configuration
+[[file:figs/general_control_names.png]]
+#+end_src
+
+** Wrap Image
+
+#+name: fig:general_control_names
+#+caption: General Control Configuration
+#+attr_html: :float wrap-right
+#+attr_latex: :float wrap
+[[file:figs/general_control_names.png]]
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non semper turpis. Proin tristique ipsum at mauris viverra efficitur. Maecenas semper urna vitae hendrerit consectetur. Vivamus id odio et lectus pretium hendrerit ac in libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque gravida, nibh vitae euismod mollis, dolor justo hendrerit mauris, sed dapibus velit magna ut purus. Mauris sagittis ligula in ante congue, vel rhoncus velit rutrum. In pulvinar elit nibh, a sodales enim iaculis sed. Maecenas et eleifend libero, vel congue urna. Praesent sit amet ornare lacus, nec maximus lectus.
+
+Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae molestie mi. Ut sodales euismod mauris, vitae finibus orci sagittis a. Quisque fringilla ante mi, vel aliquet est mollis in. Nam rutrum, nibh vitae tincidunt ultrices, quam urna efficitur ipsum, eget tristique lorem purus vitae metus. Maecenas dictum varius eros. Sed aliquam quis tortor in ultricies. Suspendisse imperdiet, mi eget mattis porta, felis quam gravida mi, malesuada venenatis dui dui a libero. Duis in lorem eget elit fermentum accumsan. Cras consequat eros vehicula, laoreet neque nec, tincidunt odio. Phasellus eu arcu lacus. Aliquam vel sollicitudin ipsum, sed iaculis risus. In pulvinar purus libero, quis vestibulum ex lacinia vel. Ut imperdiet ut erat non vulputate.
+
+#+begin_src md
+#+name: fig:general_control_names
+#+caption: General Control Configuration
+#+attr_html: :float wrap-left
+#+attr_latex: :float wrap
+[[file:figs/general_control_names.png]]
+#+end_src
+
+#+name: fig:general_control_names
+#+caption: General Control Configuration
+#+attr_html: :float wrap-left
+#+attr_latex: :float wrap
+[[file:figs/general_control_names.png]]
+
+Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae molestie mi. Ut sodales euismod mauris, vitae finibus orci sagittis a. Quisque fringilla ante mi, vel aliquet est mollis in. Nam rutrum, nibh vitae tincidunt ultrices, quam urna efficitur ipsum, eget tristique lorem purus vitae metus. Maecenas dictum varius eros. Sed aliquam quis tortor in ultricies. Suspendisse imperdiet, mi eget mattis porta, felis quam gravida mi, malesuada venenatis dui dui a libero. Duis in lorem eget elit fermentum accumsan. Cras consequat eros vehicula, laoreet neque nec, tincidunt odio. Phasellus eu arcu lacus. Aliquam vel sollicitudin ipsum, sed iaculis risus. In pulvinar purus libero, quis vestibulum ex lacinia vel. Ut imperdiet ut erat non vulputate.
+
+** Sub Images
+
+Link to subfigure [[fig:general_control_names_1]].
+
+#+begin_src md
+#+name: fig:subfigure
+#+caption: Subfigure Caption
+#+attr_latex: :environment subfigure :width 0.49\linewidth :align c
+| file:figs/general_control_names.png                | file:figs/general_control_names.png                |
+| <<fig:general_control_names_1>> sub figure caption | <<fig:general_control_names_2>> sub figure caption |
+#+end_src
+
+#+name: fig:subfigure
+#+caption: Subfigure Caption
+#+attr_latex: :environment subfigure :width 0.49\linewidth :align c
+| file:figs/general_control_names.png                | file:figs/general_control_names.png                |
+| <<fig:general_control_names_1>> sub figure caption | <<fig:general_control_names_2>> sub figure caption |
+
 * Tables
 
 Table [[tab:table_with_equations]] shows a table with some mathematics inside.
@@ -437,6 +507,41 @@ Table [[tab:table_with_equations]] shows a table with some mathematics inside.
 |   3 |     9 |    27 |    81 | 1.7320508 |   1.3160740 |
 #+TBLFM: $2=$1^2::$3=$1^3::$4=$1^4::$5=sqrt($1)::$6=sqrt(sqrt(($1)))
 
+#+name: tab:table_without_head
+#+caption: Table without Head
+|     | *1* | *2* | *3* | *4* | *5* |
+| *1* |   1 |   2 |   3 |   4 |   5 |
+| *2* |   2 |   4 |   6 |   8 |  10 |
+| *3* |   3 |   6 |   9 |  12 |  15 |
+| *4* |   4 |   8 |  12 |  16 |  20 |
+| *5* |   5 |  10 |  15 |  20 |  25 |
+
+#+name: tab:table_multiple_heads
+#+ATTR_LATEX: :font \footnotesize
+#+caption: Table with multiples groups
+|                         |        *Classical Control*         |           *Modern Control*           |                            *Robust Control*                             |
+| <l>                     |                <c>                 |                 <c>                  |                                   <c>                                   |
+|-------------------------+------------------------------------+--------------------------------------+-------------------------------------------------------------------------|
+| *Date*                  |               1930-                |                1960-                 |                                  1980-                                  |
+|-------------------------+------------------------------------+--------------------------------------+-------------------------------------------------------------------------|
+| *Tools*                 |         Transfer Functions         |       State Space formulation        |                               Disk margin                               |
+|                         |           Nyquist Plots            |          Riccati Equations           | Systems and Signals Norms ($\mathcal{H}_\infty$, $\mathcal{H}_2$ Norms) |
+|                         |             Bode Plots             |                                      |                     Closed Loop Transfer Functions                      |
+|                         |       Phase and Gain margins       |                                      |                           Weighting Functions                           |
+|-------------------------+------------------------------------+--------------------------------------+-------------------------------------------------------------------------|
+| *Control Architectures* | Proportional, Integral, Derivative |         Full State Feedback          |                      General Control Configuration                      |
+|                         |            Leads, Lags             |               LQR, LQG               |                                                                         |
+|                         |                                    |            Kalman Filters            |                                                                         |
+|-------------------------+------------------------------------+--------------------------------------+-------------------------------------------------------------------------|
+| *Advantages*            |          Study Stability           |         Automatic Synthesis          |                           Automatic Synthesis                           |
+|                         |               Simple               |                 MIMO                 |                                  MIMO                                   |
+|                         |              Natural               |         Optimization Problem         |                          Optimization Problem                           |
+|                         |                                    |                                      |                          Guaranteed Robustness                          |
+|                         |                                    |                                      |                   Easy specification of performances                    |
+|-------------------------+------------------------------------+--------------------------------------+-------------------------------------------------------------------------|
+| *Disadvantages*         |           Manual Method            |       No Guaranteed Robustness       |                  Required knowledge of specific tools                   |
+|                         |             Only SISO              | Difficult Rejection of Perturbations |               Need a reasonably good model of the system                |
+
 * Details
 
 Below is some content hidden until you click the bar.
@@ -473,9 +578,8 @@ It is approximately *12,742 km*
 
 yt:SzA2YODtgK4
 
-* Bibliography
+* Bibliography                                                        :ignore:
-bibliographystyle:unsrt
+#+latex: \printbibliography
-bibliography:ref.bib
 
 * Footnotes                                                           :ignore:
 

index.tex

@@ -0,0 +1,638 @@
+% Created 2020-12-11 ven. 00:45
+% Intended LaTeX compiler: pdflatex
+\documentclass[a4paper, 10pt, DIV=12, parskip=full]{scrreprt}
+\usepackage[utf8]{inputenc}
+\usepackage[T1]{fontenc}
+\usepackage{graphicx}
+\usepackage{grffile}
+\usepackage{longtable}
+\usepackage{wrapfig}
+\usepackage{rotating}
+\usepackage[normalem]{ulem}
+\usepackage{amsmath}
+\usepackage{textcomp}
+\usepackage{amssymb}
+\usepackage{capt-of}
+\usepackage{hyperref}
+\usepackage[most]{tcolorbox}
+\usepackage{bm}
+\usepackage{booktabs}
+\usepackage{tabularx}
+\usepackage{array}
+\usepackage{siunitx}
+\input{preamble.tex}
+\addbibresource{ref.bib}
+\author{Dehaeze Thomas}
+\date{\today}
+\title{Test File for the Org Mode Theme\\\medskip
+\large Simple set of CSS and JS files}
+\hypersetup{
+ pdfauthor={Dehaeze Thomas},
+ pdftitle={Test File for the Org Mode Theme},
+ pdfkeywords={},
+ pdfsubject={},
+ pdfcreator={Emacs 27.1 (Org mode 9.5)}, 
+ pdflang={English}}
+\begin{document}
+
+\maketitle
+\tableofcontents
+
+
+\chapter{Basics}
+\section{Normal Markup}
+You can make words \textbf{bold}, \emph{italic}, \uline{underlined}, \texttt{verbatim} and \texttt{code}, and, if you must, \sout{strike-through}.
+
+Here is some inline code Matlab code: \mintinline{matlab}{[K,CL,gamma] = mixsyn(G,W1,[],W3);}.
+
+\section{Links to Footnotes}
+
+A link to a footnote\footnote{A long foot note. Lorem ipsum dolor sit amet, consectetur adipiscing elit. With a reference to Figure \ref{fig:general_control_names}.} and to another footnote\footnote{An other footnote.}.
+
+\section{Lists}
+\textbf{Unordered List}:
+\begin{itemize}
+\item Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+\item Nam aliquet euismod viverra.
+\item Phasellus turpis nisi, faucibus a orci et, faucibus fermentum ligula.
+\end{itemize}
+
+\textbf{List with Tasks}:
+\begin{itemize}
+\item[{$\square$}] Task 1
+\item[{$\boxtimes$}] Task 2
+\item[{$\boxminus$}] Sub-tasks:
+\begin{itemize}
+\item[{$\square$}] Sub-task 1
+\item[{$\boxtimes$}] Sub-task 2
+\end{itemize}
+\end{itemize}
+
+\textbf{Ordered List}:
+\begin{enumerate}
+\item In libero odio, imperdiet eget ex a, vulputate suscipit tellus.
+\item Etiam sed leo ex.
+\item Integer eu rutrum turpis.
+\end{enumerate}
+
+
+\textbf{Nested Lists}:
+\begin{itemize}
+\item Nulla facilisi.
+\item Donec vulputate risus ut lectus bibendum, vitae fringilla odio tempus.
+\begin{enumerate}
+\item In libero odio, imperdiet eget ex a, vulputate suscipit tellus.
+\item Etiam sed leo ex.
+\begin{itemize}
+\item Nulla facilisi.
+\item Donec vulputate risus ut lectus bibendum, vitae fringilla odio tempus.
+\end{itemize}
+\item Integer eu rutrum turpis.
+\end{enumerate}
+\item Ut porta, quam id mattis feugiat, augue mauris bibendum sapien, a pulvinar mi lorem vitae nunc.
+\begin{itemize}
+\item Integer eu rutrum turpis.
+\begin{itemize}
+\item Sed pretium mattis nibh, vel lobortis augue semper vel.
+\end{itemize}
+\end{itemize}
+\end{itemize}
+
+\textbf{Definition List}:
+\begin{description}
+\item[{Lorem ipsum}] dolor sit amet, consectetur adipiscing elit.  Mauris laoreet
+sollicitudin venenatis.  Duis sed consequat dolor.
+\item[{Etiam feugiat}] pharetra sapien et semper.  Nunc ornare lacus sit amet massa
+auctor, vitae aliquam eros interdum.  Mauris arcu ante, imperdiet vel purus
+ac, bibendum faucibus diam.  Ut blandit nec mi at ultricies.  Donec eget
+mattis nisl.  In sed nibh felis.  Cras quis convallis orci.
+\item[{Sed aliquam}] odio sed faucibus aliquam, arcu augue elementum justo, ut
+vulputate ligula sem in augue.  Maecenas ante felis, pellentesque auctor
+semper non, eleifend quis ante.  Fusce enim orci, suscipit ac dapibus et,
+fermentum eu tortor.  Duis in facilisis ante, quis faucibus dolor.  Etiam
+maximus lorem quis accumsan vehicula.
+\end{description}
+
+\section{Links}
+\label{sec:org84c1c02}
+Here is a list of links to:
+\begin{itemize}
+\item Figure \ref{fig:general_control_names}
+\item Table \ref{tab:table_with_equations}
+\item Listing \ref{lst:matlab_figure}
+\item Specific line of code
+\item Equation \eqref{eq:numbered}
+\item Section \ref{sec:headlines}
+\item Bibliographic Reference \cite{stanisic14_effec}, and \cite{schulte11_activ_docum_with_org_mode,dominik10_org_mode_refer_manual_organ_gnu_emacs,stanisic14_effec}
+\end{itemize}
+
+\section{Maths}
+\label{sec:org3aceaee}
+Here is some inline mathematics: \(z = 2\).
+
+Unumbered equation:
+\[ F(x) = \int_0^x f(t) dt \]
+
+Using the \texttt{equation} environment in Eq. \eqref{eq:numbered}.
+\begin{equation}
+  F(s) = \int_0^\infty f(t) e^{-st} dt \label{eq:numbered}
+\end{equation}
+
+Using the \texttt{align} environment Equations \eqref{eq:align_1} and \eqref{eq:align_2}.
+\begin{align}
+  \mathcal{F}(a) &= \frac{1}{2\pi i}\oint_\gamma \frac{f(z)}{z - a}\,dz \label{eq:align_1} \\
+  \int_D (\nabla\cdot \mathcal{F})\,dV &=\int_{\partial D}\mathcal{F}\cdot n\, dS \label{eq:align_2}
+\end{align}
+
+\section{Verse, Quote}
+\label{sec:org44abe19}
+
+Below is a verse.
+
+\begin{verse}
+Great clouds overhead\\
+Tiny black birds rise and fall\\
+Snow covers Emacs\\
+\vspace*{1em}
+\hspace*{3em}---AlexSchroeder\\
+\end{verse}
+
+Below is a quote.
+
+\begin{quote}
+Nobody ever figures out what life is all about, and it doesn't matter.
+Explore the world.
+Nearly everything is really interesting if you go into it deeply enough.
+
+---Richard P. Feynman
+\end{quote}
+
+\section{Aside}
+\label{sec:org78dda35}
+An aside block can be used as shown below.
+
+\begin{aside}
+This is a note about the text using the \texttt{aside} environment.
+This can be as long as wanted
+\end{aside}
+
+Cras elementum ex vel orci congue porttitor. Vestibulum scelerisque gravida mattis. Suspendisse sit amet volutpat felis. Cras luctus porta lectus eget scelerisque. Cras blandit purus vel odio malesuada pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget aliquet sapien. Nunc eu elit in ligula aliquam congue dapibus eu massa. Sed accumsan hendrerit viverra. Quisque purus enim, tristique vitae porttitor eu, feugiat non ligula. Duis vitae ipsum vel quam ultricies ornare quis vitae quam. Vivamus commodo mauris non ex rutrum, sagittis facilisis metus tincidunt. Etiam vel nibh sit amet lorem auctor volutpat vel quis nulla. Quisque nec pharetra justo.
+
+\section{Inline Task}
+\label{sec:org32925ec}
+
+Some text.
+
+\begin{center}
+\fbox{
+\begin{minipage}[c]{.6\textwidth}
+\textbf{\textsf{\textsc{TODO}}} \framebox{\#C} This is an inline task
+
+\rule[.8em]{\textwidth}{2pt}
+
+\noindent\textbf{SCHEDULED:} \textit{<2020-11-26 jeu.>}\\
+\end{minipage}
+}
+\end{center}
+
+Some text.
+
+\chapter{Headlines}
+\label{sec:org406d35b}
+\label{sec:headlines}
+
+\section{Second level Headline with tags\hfill{}\textsc{@home:@work}}
+\label{sec:org783617c}
+\subsection{Third level Headline}
+\label{sec:orgb57eb31}
+\subsubsection{Fourth level Headline}
+\label{sec:orgc09e8b0}
+Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna. Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean sollicitudin nibh enim, sed pulvinar massa iaculis sit amet. Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo. Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae suscipit quam consequat a. Phasellus feugiat congue sapien commodo cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+\subsection{Third level Headline}
+\label{sec:org1af0be3}
+\subsubsection{Fourth level Headline}
+\label{sec:orgf57ad25}
+Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna. Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean sollicitudin nibh enim, sed pulvinar massa iaculis sit amet. Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo. Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae suscipit quam consequat a. Phasellus feugiat congue sapien commodo cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+\section{{\bfseries\sffamily TODO} Second level Headline with Schedule}
+\label{sec:org98b0f7f}
+\noindent\textbf{SCHEDULED:} \textit{<2020-11-26 jeu.>}\\
+
+Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna. Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean sollicitudin nibh enim, sed pulvinar massa iaculis sit amet. Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo. Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae suscipit quam consequat a. Phasellus feugiat congue sapien commodo cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+\section{\framebox{\#B} Second level Headline with a priority}
+\label{sec:org8c0eaf7}
+Aliquam aliquet sagittis lorem in rutrum. Cras pharetra viverra nisi, at placerat felis malesuada elementum. Donec tincidunt pharetra tincidunt. Praesent id lectus eget erat porttitor placerat non a magna.
+
+\section{{\bfseries\sffamily TODO} \framebox{\#C} Second level Headline with TODO State}
+\label{sec:org5204b3b}
+Vivamus egestas laoreet varius. Sed finibus libero nec quam tempor, eget viverra sapien fermentum. Donec dictum eleifend velit, vel elementum ex ultrices non. Vivamus mauris ex, ultrices quis sem vel, dapibus lacinia est. Praesent a sapien id diam venenatis finibus non vel justo.
+
+\section{{\bfseries\sffamily DONE} \framebox{\#A} Second level Headline with DONE State}
+\label{sec:org6388f34}
+\noindent\textbf{CLOSED:} \textit{[2020-11-26 jeu. 18:53]}\\
+Cras sagittis tortor ac rutrum elementum. Maecenas luctus tempor enim, vitae suscipit quam consequat a. Phasellus feugiat congue sapien commodo cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+\subsection{{\bfseries\sffamily WAIT} Third level Headline with DONE State}
+\label{sec:org4f6c74e}
+\noindent\textbf{CLOSED:} \textit{[2020-11-26 jeu. 18:53]}\\
+Cras non mauris ex. Morbi ut eros eu tellus egestas dapibus et et est. Aenean sollicitudin nibh enim, sed pulvinar massa iaculis sit amet.
+
+\chapter{Blocks}
+\label{sec:org1a85a84}
+
+\begin{seealso}
+\texttt{seealso} block.
+\end{seealso}
+
+\begin{hint}
+\texttt{hint} block.
+\end{hint}
+
+\begin{definition}
+\texttt{definition} block.
+\end{definition}
+
+\begin{important}
+\texttt{important} block.
+\end{important}
+
+\begin{exampl}
+\texttt{exampl} block.
+\end{exampl}
+
+\begin{exercice}
+\texttt{exercice} block.
+\end{exercice}
+
+\begin{question}
+\texttt{question} block.
+\end{question}
+
+\begin{answer}
+\texttt{answer} block.
+\end{answer}
+
+\begin{summary}
+\texttt{summary} block.
+\end{summary}
+
+\begin{note}
+\texttt{note} block.
+\end{note}
+
+\begin{caution}
+\texttt{caution} block.
+\end{caution}
+
+\begin{warning}
+\texttt{warning} block.
+\end{warning}
+
+\chapter{Source Blocks}
+\label{sec:org33bbfa3}
+\section{Figures}
+\label{sec:org430e6e0}
+\begin{minted}[]{matlab}
+t = 0:0.01:5; % Time [s]
+x = sin(2*pi*t); % Output Voltage [V]
+\end{minted}
+
+\begin{minted}[]{matlab}
+figure;
+plot(t, x);
+xlabel('Time [s]'); ylabel('Voltage [V]');
+\end{minted}
+
+\begin{figure}[htbp]
+\centering
+\includegraphics[scale=1]{figs/matlab_fig_example.png}
+\caption{\label{fig:matlab_fig_example}Matlab Figure}
+\end{figure}
+
+\section{Table Result}
+\label{sec:org90d9b1e}
+
+\begin{minted}[]{matlab}
+x = 1:10;
+y = x.^2;
+\end{minted}
+
+\begin{table}[htbp]
+\caption{\label{tab:table_name}Table caption}
+\centering
+\begin{tabular}{rr}
+\(x\) & \(y = x^2\)\\
+\hline
+1 & 1\\
+2 & 4\\
+3 & 9\\
+4 & 16\\
+5 & 25\\
+6 & 36\\
+7 & 49\\
+8 & 64\\
+9 & 81\\
+10 & 100\\
+\end{tabular}
+\end{table}
+
+\section{Inline Results}
+\label{sec:org05178e9}
+
+Results can be automatically outputed as shown below.
+
+\begin{minted}[]{matlab}
+sqrt(2)
+\end{minted}
+
+\begin{verbatim}
+1.4142
+\end{verbatim}
+
+
+
+\begin{minted}[]{matlab}
+y
+\end{minted}
+
+\begin{verbatim}
+y =
+     1     4     9    16    25    36    49    64    81   100
+\end{verbatim}
+
+\section{Caption and Reference}
+\label{sec:orgdfe8450}
+
+Captions can be added to code blocks.
+Moreover, we can link to specific bode blocks (Listing \ref{lst:matlab_figure} or \ref{lst:matlab_svd}).
+
+\begin{listing}[htbp]
+\begin{minted}[]{matlab}
+figure;
+[X,Y,Z] = peaks;
+contour(X,Y,Z,20)
+\end{minted}
+\caption{\label{lst:matlab_figure}Code to produce a nice contour plot}
+\end{listing}
+
+\begin{figure}[htbp]
+\centering
+\includegraphics[scale=1]{figs/matlab_logo.png}
+\caption{\label{fig:matlab_logo}Obtained Contour Plot}
+\end{figure}
+
+\begin{listing}[htbp]
+\begin{minted}[]{matlab}
+A = [1 2; 3 4; 5 6; 7 8]
+[U,S,V] = svd(A)
+\end{minted}
+\caption{\label{lst:matlab_svd}Code to compute the Singular Value Decomposition}
+\end{listing}
+
+\begin{verbatim}
+A = [1 2; 3 4; 5 6; 7 8]
+A =
+     1     2
+     3     4
+     5     6
+     7     8
+[U,S,V] = svd(A)
+U =
+        -0.152483233310201         -0.82264747222566        -0.394501022283829        -0.379959133877596
+        -0.349918371807964         -0.42137528768458         0.242796545704357         0.800655879510063
+        -0.547353510305727       -0.0201031031435029         0.697909975442776        -0.461434357387336
+         -0.74478864880349         0.381169081397575        -0.546205498863303        0.0407376117548695
+S =
+          14.2690954992615                         0
+                         0         0.626828232417541
+                         0                         0
+                         0                         0
+V =
+        -0.641423027995072         0.767187395072177
+        -0.767187395072177        -0.641423027995072
+\end{verbatim}
+
+\section{Source Blocks with Line Numbers}
+\label{sec:org9b30b0b}
+
+The Listing \ref{lst:matlab_line_numbers} has line numbers as the \texttt{-n} option was used.
+
+Specific lines of codes can be referenced.
+For instance, the code used to specify the wanted the vertical label is on line 4.
+
+\begin{listing}[htbp]
+\begin{minted}[linenos,firstnumber=1]{matlab}
+figure;
+plot(t, x)
+xlabel('Time [s]');
+ylabel('Output [V]');
+\end{minted}
+\caption{\label{lst:matlab_line_numbers}Specify Labels}
+\end{listing}
+
+Numbering can be continued by using \texttt{+n} option as shown below.
+\begin{minted}[linenos,firstnumber=5]{matlab}
+figure;
+plot(t, u)
+xlabel('Time [s]');
+ylabel('Input [V]');
+\end{minted}
+
+\chapter{Images}
+\label{sec:org949e29f}
+
+\section{Normal Image}
+\label{sec:orgfa05e80}
+
+Figure \ref{fig:general_control_names} shows the results of the Tikz code of listing \ref{lst:tikz_test}.
+
+\begin{listing}[htbp]
+\begin{minted}[]{latex}
+\begin{tikzpicture}
+
+  % Blocs
+  \node[block={2.0cm}{2.0cm}] (P) {$P$};
+  \node[block={1.5cm}{1.5cm}, below=0.7 of P] (K) {$K$};
+
+  % Input and outputs coordinates
+  \coordinate[] (inputw)  at ($(P.south west)!0.75!(P.north west)$);
+  \coordinate[] (inputu)  at ($(P.south west)!0.25!(P.north west)$);
+  \coordinate[] (outputz) at ($(P.south east)!0.75!(P.north east)$);
+  \coordinate[] (outputv) at ($(P.south east)!0.25!(P.north east)$);
+
+  % Connections and labels
+  \draw[<-] (inputw) node[above left, align=right]{(weighted)\\exogenous inputs\\$w$} -- ++(-1.5, 0);
+  \draw[<-] (inputu) -- ++(-0.8, 0) |- node[left, near start, align=right]{control signals\\$u$} (K.west);
+
+  \draw[->] (outputz) node[above right, align=left]{(weighted)\\exogenous outputs\\$z$} -- ++(1.5, 0);
+  \draw[->] (outputv) -- ++(0.8, 0) |- node[right, near start, align=left]{sensed output\\$v$} (K.east);
+\end{tikzpicture}
+\end{minted}
+\caption{\label{lst:tikz_test}Tikz code that is used to generate Figure \ref{fig:general_control_names}}
+\end{listing}
+
+\begin{figure}[htbp]
+\centering
+\includegraphics[scale=1]{figs/general_control_names.png}
+\caption{\label{fig:general_control_names}General Control Configuration}
+\end{figure}
+
+\begin{minted}[]{md}
+#+name: fig:general_control_names
+#+caption: General Control Configuration
+[[file:figs/general_control_names.png]]
+\end{minted}
+
+\section{Wrap Image}
+\label{sec:org108664b}
+
+\begin{wrapfigure}{l}{0.5\textwidth}
+\centering
+\includegraphics[scale=1,width=0.48\textwidth]{figs/general_control_names.png}
+\caption{\label{fig:general_control_names}General Control Configuration}
+\end{wrapfigure}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non semper turpis. Proin tristique ipsum at mauris viverra efficitur. Maecenas semper urna vitae hendrerit consectetur. Vivamus id odio et lectus pretium hendrerit ac in libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque gravida, nibh vitae euismod mollis, dolor justo hendrerit mauris, sed dapibus velit magna ut purus. Mauris sagittis ligula in ante congue, vel rhoncus velit rutrum. In pulvinar elit nibh, a sodales enim iaculis sed. Maecenas et eleifend libero, vel congue urna. Praesent sit amet ornare lacus, nec maximus lectus.
+
+Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae molestie mi. Ut sodales euismod mauris, vitae finibus orci sagittis a. Quisque fringilla ante mi, vel aliquet est mollis in. Nam rutrum, nibh vitae tincidunt ultrices, quam urna efficitur ipsum, eget tristique lorem purus vitae metus. Maecenas dictum varius eros. Sed aliquam quis tortor in ultricies. Suspendisse imperdiet, mi eget mattis porta, felis quam gravida mi, malesuada venenatis dui dui a libero. Duis in lorem eget elit fermentum accumsan. Cras consequat eros vehicula, laoreet neque nec, tincidunt odio. Phasellus eu arcu lacus. Aliquam vel sollicitudin ipsum, sed iaculis risus. In pulvinar purus libero, quis vestibulum ex lacinia vel. Ut imperdiet ut erat non vulputate.
+
+\begin{minted}[]{md}
+#+name: fig:general_control_names
+#+caption: General Control Configuration
+#+attr_html: :float wrap-left
+#+attr_latex: :float wrap
+[[file:figs/general_control_names.png]]
+\end{minted}
+
+\begin{wrapfigure}{l}{0.5\textwidth}
+\centering
+\includegraphics[scale=1,width=0.48\textwidth]{figs/general_control_names.png}
+\caption{\label{fig:general_control_names}General Control Configuration}
+\end{wrapfigure}
+
+Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae molestie mi. Ut sodales euismod mauris, vitae finibus orci sagittis a. Quisque fringilla ante mi, vel aliquet est mollis in. Nam rutrum, nibh vitae tincidunt ultrices, quam urna efficitur ipsum, eget tristique lorem purus vitae metus. Maecenas dictum varius eros. Sed aliquam quis tortor in ultricies. Suspendisse imperdiet, mi eget mattis porta, felis quam gravida mi, malesuada venenatis dui dui a libero. Duis in lorem eget elit fermentum accumsan. Cras consequat eros vehicula, laoreet neque nec, tincidunt odio. Phasellus eu arcu lacus. Aliquam vel sollicitudin ipsum, sed iaculis risus. In pulvinar purus libero, quis vestibulum ex lacinia vel. Ut imperdiet ut erat non vulputate.
+
+\section{Sub Images}
+\label{sec:orgc659610}
+
+Link to subfigure \ref{fig:general_control_names_1}.
+
+\begin{minted}[]{md}
+#+name: fig:subfigure
+#+caption: Subfigure Caption
+#+attr_latex: :environment subfigure :width 0.49\linewidth :align c
+| file:figs/general_control_names.png                | file:figs/general_control_names.png                |
+| <<fig:general_control_names_1>> sub figure caption | <<fig:general_control_names_2>> sub figure caption |
+\end{minted}
+
+\begin{figure}[htbp]
+\begin{subfigure}[c]{0.49\linewidth}
+\includegraphics[scale=1]{figs/general_control_names.png}
+\caption{\label{fig:general_control_names_1} sub figure caption}
+\end{subfigure}
+\hfill
+\begin{subfigure}[c]{0.49\linewidth}
+\includegraphics[scale=1]{figs/general_control_names.png}
+\caption{\label{fig:general_control_names_2} sub figure caption}
+\end{subfigure}
+\hfill
+\caption{\label{fig:subfigure}Subfigure Caption}
+\centering
+\end{figure}
+
+\chapter{Tables}
+\label{sec:org81dc310}
+
+Table \ref{tab:table_with_equations} shows a table with some mathematics inside.
+
+\begin{table}[htbp]
+\caption{\label{tab:table_with_equations}A Simple table with included math}
+\centering
+\begin{tabular}{rrrrrr}
+\(N\) & \(N^2\) & \(N^3\) & \(N^4\) & \(\sqrt n\) & \(\sqrt[4]N\)\\
+\hline
+1 & 1 & 1 & 1 & 1 & 1\\
+2 & 4 & 8 & 16 & 1.4142136 & 1.1892071\\
+3 & 9 & 27 & 81 & 1.7320508 & 1.3160740\\
+\end{tabular}
+\end{table}
+
+\begin{table}[htbp]
+\caption{\label{tab:table_without_head}Table without Head}
+\centering
+\begin{tabular}{lrrrrr}
+ & \textbf{1} & \textbf{2} & \textbf{3} & \textbf{4} & \textbf{5}\\
+\textbf{1} & 1 & 2 & 3 & 4 & 5\\
+\textbf{2} & 2 & 4 & 6 & 8 & 10\\
+\textbf{3} & 3 & 6 & 9 & 12 & 15\\
+\textbf{4} & 4 & 8 & 12 & 16 & 20\\
+\textbf{5} & 5 & 10 & 15 & 20 & 25\\
+\end{tabular}
+\end{table}
+
+\begin{table}[htbp]
+\caption{\label{tab:table_multiple_heads}Table with multiples groups}
+\centering
+\footnotesize
+\begin{tabular}{lccc}
+ & \textbf{Classical Control} & \textbf{Modern Control} & \textbf{Robust Control}\\
+\hline
+\textbf{Date} & 1930- & 1960- & 1980-\\
+\hline
+\textbf{Tools} & Transfer Functions & State Space formulation & Disk margin\\
+ & Nyquist Plots & Riccati Equations & Systems and Signals Norms (\(\mathcal{H}_\infty\), \(\mathcal{H}_2\) Norms)\\
+ & Bode Plots &  & Closed Loop Transfer Functions\\
+ & Phase and Gain margins &  & Weighting Functions\\
+\hline
+\textbf{Control Architectures} & Proportional, Integral, Derivative & Full State Feedback & General Control Configuration\\
+ & Leads, Lags & LQR, LQG & \\
+ &  & Kalman Filters & \\
+\hline
+\textbf{Advantages} & Study Stability & Automatic Synthesis & Automatic Synthesis\\
+ & Simple & MIMO & MIMO\\
+ & Natural & Optimization Problem & Optimization Problem\\
+ &  &  & Guaranteed Robustness\\
+ &  &  & Easy specification of performances\\
+\hline
+\textbf{Disadvantages} & Manual Method & No Guaranteed Robustness & Required knowledge of specific tools\\
+ & Only SISO & Difficult Rejection of Perturbations & Need a reasonably good model of the system\\
+\end{tabular}
+\end{table}
+
+\chapter{Details}
+\label{sec:org0a64f01}
+
+Below is some content hidden until you click the bar.
+
+Almost anything can be put here for instance this table below.
+
+\begin{table}[htbp]
+\caption{\label{tab:table_with_equations_bis}A Simple table with included math}
+\centering
+\begin{tabular}{rrrrrr}
+\(N\) & \(N^2\) & \(N^3\) & \(N^4\) & \(\sqrt n\) & \(\sqrt[4]N\)\\
+\hline
+1 & 1 & 1 & 1 & 1 & 1\\
+2 & 4 & 8 & 16 & 1.4142136 & 1.1892071\\
+3 & 9 & 27 & 81 & 1.7320508 & 1.3160740\\
+\end{tabular}
+\end{table}
+
+This \texttt{details} blocks can even be put in other blocks are shown below.
+
+It is approximately \textbf{12,742 km}
+\begin{question}
+What is the approximate diameter of the earth?
+
+It is approximately \textbf{12,742 km}
+\end{question}
+
+\chapter{Videos}
+\label{sec:org9a0b5d6}
+
+\href{https://www.youtube.com/embed/SzA2YODtgK4}{video}
+
+\printbibliography
+\end{document}

js/script.js

@@ -1,27 +1,26 @@
-// var $ = require('jquery');
-// window.$ = $;
-// require('bootstrap');
-
 // Blocks
 docReady(function() {
     var boxesNames = {
         "seealso": "See also",
         "definition": "Definition",
         "exampl": "Example",
+        "exercice": "Exercice",
         "question": "Question",
         "summary": "Summary",
+        "note": "Note",
+        "answer": "Answer",
         "hint": "Hint",
         "important": "Important",
         "caution": "Caution",
         "warning": "Warning"
-    }
+    };
     for (var className in boxesNames) {
-        let boxes = document.querySelectorAll('div.' + className)
+        let boxes = document.querySelectorAll('div.' + className);
 
         for (let box of boxes) {
-            let boxTitle = document.createElement('p')
+            let boxTitle = document.createElement('p');
-            boxTitle.className = "admonition-title " + className
+            boxTitle.className = "admonition-title " + className;
-            boxTitle.textContent = boxesNames[className]
+            boxTitle.textContent = boxesNames[className];
 
             box.parentNode.insertBefore(boxTitle, box);
         }
@@ -30,39 +29,56 @@ docReady(function() {
 
 // Copy Source Block
 docReady(function() {
-    let srcContainers = document.querySelectorAll('pre.src')
+    let srcContainers = document.querySelectorAll('pre.src');
 
-    for (let srcContrainer of srcContainers) {
+    function copyClickFunction() {
-        let boxCopy = document.createElement('div')
+        let boxCopy = this;
-        boxCopy.className = "src-copy"
-        boxCopy.textContent = "Copy"
 
-        boxCopy.onclick = function() {
         // Create a clone the node to not affect the original one
-            let nodeClone = this.parentNode.cloneNode(true)
+        let nodeClone = boxCopy.parentNode.cloneNode(true);
 
         // Remove Line Numbers and Copy Button
-            let linenumNodes = nodeClone.querySelectorAll('.linenr,.src-copy')
+        let linenumNodes = nodeClone.querySelectorAll('.linenr,.src-copy');
         for (var i = linenumNodes.length - 1 ; i >= 0 ; --i) {
-                nodeClone.removeChild(linenumNodes[i])
+            nodeClone.removeChild(linenumNodes[i]);
         }
 
         // Copy the filetered content to the clipboard
-            let srcText = nodeClone.textContent
+        let srcText = nodeClone.textContent;
         navigator.clipboard.writeText(srcText).then(function() {
-                boxCopy.textContent = "Copied"
+            boxCopy.textContent = "Copied";
-                boxCopy.classList.add("src-copied")
+            boxCopy.classList.add("src-copied");
             setTimeout(function() {
-                    boxCopy.textContent = "Copy"
+                boxCopy.textContent = "Copy";
-                    boxCopy.classList.remove("src-copied")
+                boxCopy.classList.remove("src-copied");
             }, 2000);
         });
     }
 
+    for (let srcContrainer of srcContainers) {
+        let boxCopy = document.createElement('div');
+        boxCopy.className = "src-copy";
+        boxCopy.textContent = "Copy";
+
+        boxCopy.onclick = copyClickFunction;
+
         srcContrainer.prepend(boxCopy);
     }
 });
 
+// Wrap Images and Tables
+docReady(function() {
+    let wrap_elements = document.querySelectorAll('[float=wrap-right]');
+    for (let wrap_el of wrap_elements) {
+        wrap_el.closest('.figure').classList.add('wrap-right');
+    }
+
+    wrap_elements = document.querySelectorAll('[float=wrap-left]');
+    for (let wrap_el of wrap_elements) {
+        wrap_el.closest('.figure').classList.add('wrap-left');
+    }
+});
+
 // Equivalent of Jquery $.ready
 function docReady(fn) {
     // see if DOM is already available
@@ -74,6 +90,51 @@ function docReady(fn) {
     }
 }
 
+
+// Load Jquery
+var scr  = document.createElement('script'),
+    head = document.head || document.getElementsByTagName('head')[0];
+scr.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
+scr.async = false; // optionally
+
+head.insertBefore(scr, head.firstChild);
+
+
+// Load Bootstrap.js
+var scr  = document.createElement('script'),
+    head = document.head || document.getElementsByTagName('head')[0];
+scr.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js';
+scr.async = false; // optionally
+
+head.insertBefore(scr, head.firstChild);
+
+// After it is loaded
+scr.addEventListener('load', () => {
+    $(document).ready(function() {
+        $('#text-table-of-contents ul').first().addClass('nav');
+        // ScrollSpy also requires that we use
+        // a Bootstrap nav component.
+        $('body').scrollspy({target: '#text-table-of-contents'});
+
+        // set the height of tableOfContents
+        var $postamble = $('#postamble');
+        var $tableOfContents = $('#table-of-contents');
+        $tableOfContents.css({paddingBottom: $postamble.outerHeight()});
+
+        // add TOC button
+        var toggleSidebar = $('<div id="toggle-sidebar"><a href="#table-of-contents"><h2>Table of Contents</h2></a></div>');
+        $('#content').prepend(toggleSidebar);
+
+        // add close button when sidebar showed in mobile screen
+        var closeBtn = $('<a class="close-sidebar" href="#">Close</a>');
+        var tocTitle = $('#table-of-contents').find('h2');
+        tocTitle.append(closeBtn);
+    });
+});
+
+
+
+
 // function collapse_toc_elements_on_click (nav_li_a){
 //     /*
 //       When an `a' element in the TOC is clicked, its parent
@@ -119,9 +180,6 @@ function docReady(fn) {
 //                                         // a Bootstrap nav component.
 //     $('body').scrollspy({target: '#text-table-of-contents'});
 
-//     // DON'T add sticky table headers (Fix issue #69?)
-//     // $('table').stickyTableHeaders();
-
 //     // set the height of tableOfContents
 //     var $postamble = $('#postamble');
 //     var $tableOfContents = $('#table-of-contents');

latex.org

@@ -0,0 +1,161 @@
+#+TITLE: LaTeX preamble for Org-Theme
+:DRAWER:
+#+STARTUP: overview
+
+#+OPTIONS: num:t toc:t |:t p:t f:t todo:t tasks:t pri:t tags:t <:t *:t
+
+#+LANGUAGE: en
+#+EMAIL: dehaeze.thomas@gmail.com
+#+AUTHOR: Dehaeze Thomas
+
+#+HTML_LINK_HOME: ../index.html
+#+HTML_LINK_UP:   ../index.html
+
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="dist/style.css"/>
+#+HTML_HEAD: <script type="text/javascript" src="dist/script.js"></script>
+
+#+LaTeX_CLASS: scrreprt
+#+LaTeX_CLASS_OPTIONS: [a4paper, 10pt]
+#+LaTeX_HEADER: \input{preamble.tex}
+
+#+PROPERTY: header-args:latex :tangle preamble.tex
+:END:
+
+#+begin_src latex
+  \usepackage{float}
+#+end_src
+
+#+begin_src latex
+  \usepackage{tabularx,booktabs}
+#+end_src
+
+#+begin_src latex
+  \usepackage{biblatex}
+#+end_src
+
+#+begin_src latex
+  \usepackage{fontawesome}
+#+end_src
+
+#+begin_src latex
+  \usepackage{caption}
+  \usepackage{subcaption}
+
+  \captionsetup[figure]{labelfont=bf}
+  \captionsetup[subfigure]{labelfont=bf}
+  \captionsetup[listing]{labelfont=bf}
+  \captionsetup[table]{labelfont=bf}
+#+end_src
+
+#+begin_src latex
+  \usepackage{xcolor}
+
+  \definecolor{my-blue}{HTML}{6b7adb}
+  \definecolor{my-pale-blue}{HTML}{e6e9f9}
+  \definecolor{my-red}{HTML}{db6b6b}
+  \definecolor{my-pale-red}{HTML}{f9e6e6}
+  \definecolor{my-green}{HTML}{6bdbb6}
+  \definecolor{my-pale-green}{HTML}{e6f9f3}
+  \definecolor{my-yellow}{HTML}{dbd26b}
+  \definecolor{my-pale-yellow}{HTML}{f9f7e6}
+  \definecolor{my-orange}{HTML}{dba76b}
+  \definecolor{my-pale-orange}{HTML}{f9f0e6}
+  \definecolor{my-grey}{HTML}{a3a3a3}
+  \definecolor{my-pale-grey}{HTML}{f0f0f0}
+  \definecolor{my-turq}{HTML}{6bc7db}
+  \definecolor{my-pale-turq}{HTML}{e6f6f9}
+#+end_src
+
+#+begin_src latex
+  \usepackage{inconsolata}
+#+end_src
+
+#+begin_src latex
+  \usepackage[newfloat=true, chapter]{minted}
+  \usemintedstyle{autumn}
+
+  \setminted{frame=lines,breaklines=true,tabsize=4,fontsize=\scriptsize,autogobble=true,labelposition=topline,bgcolor=my-pale-grey}
+  \setminted[matlab]{label=Matlab}
+  \setminted[latex]{label=LaTeX}
+  \setminted[bash]{label=Bash}
+  \setminted[python]{label=Python}
+  \setminted[text]{label=Results}
+  \setminted[md]{label=Org Mode}
+
+  \setmintedinline{fontsize=\normalsize,bgcolor=my-pale-grey}
+#+end_src
+
+#+begin_src latex
+  \usepackage[most]{tcolorbox}
+
+  \tcbuselibrary{minted}
+
+  \newtcolorbox{seealso}{   enhanced,breakable,colback=my-pale-grey,colframe=my-grey,fonttitle=\bfseries,title=See Also}
+  \newtcolorbox{hint}{      enhanced,breakable,colback=my-pale-grey,colframe=my-grey,fonttitle=\bfseries,title=Hint}
+  \newtcolorbox{definition}{enhanced,breakable,colback=my-pale-red, colframe=my-red, fonttitle=\bfseries,title=Definition}
+  \newtcolorbox{important}{ enhanced,breakable,colback=my-pale-red, colframe=my-red, fonttitle=\bfseries,title=Important}
+  \newtcolorbox{exampl}[1][]{    enhanced,breakable,colback=my-pale-green,colframe=my-green,fonttitle=\bfseries,title=Example,#1}
+  \newtcolorbox{exercice}{  enhanced,breakable,colback=my-pale-yellow,colframe=my-yellow,fonttitle=\bfseries,title=Exercice}
+  \newtcolorbox{question}{  enhanced,breakable,colback=my-pale-yellow,colframe=my-yellow,fonttitle=\bfseries,title=Question}
+  \newtcolorbox{answer}{    enhanced,breakable,colback=my-pale-turq,colframe=my-turq,fonttitle=\bfseries,title=Answer}
+  \newtcolorbox{summary}{   enhanced,breakable,colback=my-pale-blue,colframe=my-blue,fonttitle=\bfseries,title=Summary}
+  \newtcolorbox{note}{      enhanced,breakable,colback=my-pale-blue,colframe=my-blue,fonttitle=\bfseries,title=Note}
+  \newtcolorbox{caution}{   enhanced,breakable,colback=my-pale-orange,colframe=my-orange,fonttitle=\bfseries,title=Caution}
+  \newtcolorbox{warning}{   enhanced,breakable,colback=my-pale-orange,colframe=my-orange,fonttitle=\bfseries,title=Warning}
+
+  \newtcolorbox{my-quote}[1]{%
+    colback=my-pale-grey,
+    grow to right by=-10mm,
+    grow to left by=-10mm,
+    boxrule=0pt,
+    boxsep=0pt,
+    breakable,
+    enhanced jigsaw,
+    borderline west={4pt}{0pt}{my-grey}}
+
+  \renewenvironment{quote}{\begin{my-quote}}{\end{my-quote}}
+
+  \newtcolorbox{my-verse}[1]{%
+    colback=my-pale-grey,
+    grow to right by=-10mm,
+    grow to left by=-10mm,
+    boxrule=0pt,
+    boxsep=0pt,
+    breakable,
+    enhanced jigsaw,
+    borderline west={4pt}{0pt}{my-grey}}
+
+  \renewenvironment{verse}{\begin{my-verse}}{\end{my-verse}}
+
+  \usepackage{environ}% http://ctan.org/pkg/environ
+  \NewEnviron{aside}{%
+    \marginpar{\BODY}
+  }
+
+  \renewenvironment{verbatim}{\VerbatimEnvironment\begin{minted}[]{text}}{\end{minted}}
+#+end_src
+
+#+begin_src latex
+  \usepackage{soul}
+  \sethlcolor{my-pale-grey}
+
+  \let\OldTexttt\texttt
+  \renewcommand{\texttt}[1]{{\ttfamily\hl{\mbox{\,#1\,}}}}
+#+end_src
+
+#+begin_src latex
+  \makeatletter
+  \preto\Gin@extensions{png,}
+  \DeclareGraphicsRule{.png}{pdf}{.pdf}{\noexpand\Gin@base.pdf}
+  \makeatother
+#+end_src
+
+#+begin_src latex
+  \usepackage{hyperref}
+  \hypersetup{
+    colorlinks = true,
+    allcolors = my-blue
+  }
+
+  \usepackage{hypcap}
+#+end_src

preamble.tex

@@ -0,0 +1,114 @@
+\usepackage{float}
+
+\usepackage{caption,tabularx,booktabs}
+
+\usepackage{biblatex}
+
+\usepackage{fontawesome}
+
+\usepackage{caption}
+\usepackage{subcaption}
+
+\captionsetup[figure]{labelfont=bf}
+\captionsetup[subfigure]{labelfont=bf}
+\captionsetup[listing]{labelfont=bf}
+\captionsetup[table]{labelfont=bf}
+
+\usepackage{xcolor}
+
+\definecolor{my-blue}{HTML}{6b7adb}
+\definecolor{my-pale-blue}{HTML}{e6e9f9}
+\definecolor{my-red}{HTML}{db6b6b}
+\definecolor{my-pale-red}{HTML}{f9e6e6}
+\definecolor{my-green}{HTML}{6bdbb6}
+\definecolor{my-pale-green}{HTML}{e6f9f3}
+\definecolor{my-yellow}{HTML}{dbd26b}
+\definecolor{my-pale-yellow}{HTML}{f9f7e6}
+\definecolor{my-orange}{HTML}{dba76b}
+\definecolor{my-pale-orange}{HTML}{f9f0e6}
+\definecolor{my-grey}{HTML}{a3a3a3}
+\definecolor{my-pale-grey}{HTML}{f0f0f0}
+\definecolor{my-turq}{HTML}{6bc7db}
+\definecolor{my-pale-turq}{HTML}{e6f6f9}
+
+\usepackage{inconsolata}
+
+\usepackage[newfloat=true, chapter]{minted}
+\usemintedstyle{autumn}
+
+\setminted{frame=lines,breaklines=true,tabsize=4,fontsize=\scriptsize,autogobble=true,labelposition=topline,bgcolor=my-pale-grey}
+\setminted[matlab]{label=Matlab}
+\setminted[latex]{label=LaTeX}
+\setminted[bash]{label=Bash}
+\setminted[python]{label=Python}
+\setminted[text]{label=Results}
+\setminted[md]{label=Org Mode}
+
+\setmintedinline{fontsize=\normalsize,bgcolor=my-pale-grey}
+
+\usepackage[most]{tcolorbox}
+
+\tcbuselibrary{minted}
+
+\newtcolorbox{seealso}{   enhanced,breakable,colback=my-pale-grey,colframe=my-grey,fonttitle=\bfseries,title=See Also}
+\newtcolorbox{hint}{      enhanced,breakable,colback=my-pale-grey,colframe=my-grey,fonttitle=\bfseries,title=Hint}
+\newtcolorbox{definition}{enhanced,breakable,colback=my-pale-red, colframe=my-red, fonttitle=\bfseries,title=Definition}
+\newtcolorbox{important}{ enhanced,breakable,colback=my-pale-red, colframe=my-red, fonttitle=\bfseries,title=Important}
+\newtcolorbox{exampl}[1][]{    enhanced,breakable,colback=my-pale-green,colframe=my-green,fonttitle=\bfseries,title=Example,#1}
+\newtcolorbox{exercice}{  enhanced,breakable,colback=my-pale-yellow,colframe=my-yellow,fonttitle=\bfseries,title=Exercice}
+\newtcolorbox{question}{  enhanced,breakable,colback=my-pale-yellow,colframe=my-yellow,fonttitle=\bfseries,title=Question}
+\newtcolorbox{answer}{    enhanced,breakable,colback=my-pale-turq,colframe=my-turq,fonttitle=\bfseries,title=Answer}
+\newtcolorbox{summary}{   enhanced,breakable,colback=my-pale-blue,colframe=my-blue,fonttitle=\bfseries,title=Summary}
+\newtcolorbox{note}{      enhanced,breakable,colback=my-pale-blue,colframe=my-blue,fonttitle=\bfseries,title=Note}
+\newtcolorbox{caution}{   enhanced,breakable,colback=my-pale-orange,colframe=my-orange,fonttitle=\bfseries,title=Caution}
+\newtcolorbox{warning}{   enhanced,breakable,colback=my-pale-orange,colframe=my-orange,fonttitle=\bfseries,title=Warning}
+
+\newtcolorbox{my-quote}[1]{%
+  colback=my-pale-grey,
+  grow to right by=-10mm,
+  grow to left by=-10mm,
+  boxrule=0pt,
+  boxsep=0pt,
+  breakable,
+  enhanced jigsaw,
+  borderline west={4pt}{0pt}{my-grey}}
+
+\renewenvironment{quote}{\begin{my-quote}}{\end{my-quote}}
+
+\newtcolorbox{my-verse}[1]{%
+  colback=my-pale-grey,
+  grow to right by=-10mm,
+  grow to left by=-10mm,
+  boxrule=0pt,
+  boxsep=0pt,
+  breakable,
+  enhanced jigsaw,
+  borderline west={4pt}{0pt}{my-grey}}
+
+\renewenvironment{verse}{\begin{my-verse}}{\end{my-verse}}
+
+\usepackage{environ}% http://ctan.org/pkg/environ
+\NewEnviron{aside}{%
+  \marginpar{\BODY}
+}
+
+\renewenvironment{verbatim}{\VerbatimEnvironment\begin{minted}[]{text}}{\end{minted}}
+
+\usepackage{soul}
+\sethlcolor{my-pale-grey}
+
+\let\OldTexttt\texttt
+\renewcommand{\texttt}[1]{{\ttfamily\hl{\mbox{\,#1\,}}}}
+
+\makeatletter
+\preto\Gin@extensions{png,}
+\DeclareGraphicsRule{.png}{pdf}{.pdf}{\noexpand\Gin@base.pdf}
+\makeatother
+
+\usepackage{hyperref}
+\hypersetup{
+  colorlinks = true,
+  allcolors = my-blue
+}
+
+\usepackage{hypcap}

scss/partials/_aside.scss

@@ -1,7 +1,7 @@
 .aside {
-    padding-left: .5rem;
+    padding-left: 1.0em;
-    margin-left: .5rem;
+    margin-left: 0.5em;
-    border-left: 5px solid $grey;
+    border-left: 2px solid $grey;
 
     // For very large screens, put it on the right side
     @media (min-width: 1200px) {
@@ -10,7 +10,7 @@
     }
 
     > p {
-        margin: .5rem;
+        margin: 0.2em;
-        font-size: 80%;
+        font-size: 0.8rem;
     }
 }

scss/partials/_base.scss

@@ -1,23 +1,23 @@
 html {
     -ms-text-size-adjust:100%;
     -webkit-text-size-adjust:100%;
-    font-size:100%;
+    font-size:16px;
     height:100%;
     overflow-x:hidden;
 }
 
 body {
-    background: $color-background-outside; // Outside Background
+    background: $color-background;
     color: $color-text;
-    font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+    font-family: $sans-serif;
-    font-weight: normal;
+    font-weight: $normal;
     margin: 0;
     min-height: 100%;
     overflow-x: hidden;
 }
 
 #content {
-    background: $color-background; // Content Background
+    background: $color-background-light;
     height: 100%;
     min-height: 100%;
     margin-left: $toc-width;
@@ -42,13 +42,13 @@ a{
 }
 
 p {
-    font-size:16px;
+    font-size: 1rem;
     line-height: 24px;
     margin: 0 0 1.5em 0;
 }
 
 b,strong {
-    font-weight:bold;
+    font-weight: $bold;
 }
 
 i {
@@ -63,8 +63,8 @@ i {
 code {
     background: $white;
     border: solid 1px #e1e4e5;
-    font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+    font-family: $mono;
-    font-size:75%;
+    font-size: 0.75em;
     max-width:100%;
     overflow-x:auto;
     padding:0 5px;
@@ -90,7 +90,7 @@ blockquote {
 
 // Subscripts and Superscripts
 sub, sup {
-    font-size:0.6em;
+    font-size: 0.6rem;
     line-height:0;
     position:relative;
     vertical-align:baseline;
@@ -104,11 +104,11 @@ mark{
     background:#ff0;
     color:#000;
     font-style: italic;
-    font-weight:bold;
+    font-weight: $bold;
 }
 
 small{
-    font-size:85%;
+    font-size: 0.85rem;
 }
 
 img{
@@ -126,7 +126,7 @@ label{
     display:block;
     margin:0 0 0.3125em 0;
     color:#333;
-    font-size:90%;
+    font-size: 0.9rem;
 }
 
 legend{
@@ -139,7 +139,7 @@ legend{
     padding:0;
     white-space:normal;
     margin-bottom:24px;
-    font-size:150%;
+    font-size: 1.5rem;
 }
 
 .nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{
@@ -203,7 +203,8 @@ hr{
 #content h1 .headerlink:after,#content h2 .headerlink:after,#content h3 .headerlink:after,#content h4 .headerlink:after,#content h5 .headerlink:after,#content h6 .headerlink:after,#content dl dt .headerlink:after{
     visibility:visible;
     content:"";
-    font-family:FontAwesome;
+    font-family: $fa;
+    font-weight: 900;
     display:inline-block;
 }
 
@@ -222,7 +223,7 @@ hr{
 //     border:solid 1px #e1e4e5;
 
 //     p, ul, dl{
-//         font-size:90%;
+//         font-size: 0.9rem;
 //     }
 
 //     .last{
@@ -231,13 +232,13 @@ hr{
 
 //     .sidebar-title{
 //         display:block;
-//         font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
+//         font-family: $sans-serif
 //         font-weight:bold;
 //         background:#e1e4e5;
 //         padding:6px 12px;
 //         margin:-24px;
 //         margin-bottom:24px;
-//         font-size:100%;
+//         font-size: 1rem;
 //     }
 // }
 
@@ -245,13 +246,13 @@ hr{
 #content .highlighted{
     background:#F1C40F;
     display:inline-block;
-    font-weight:bold;
+    font-weight: $bold;
     padding:0 6px;
 }
 
 #content .footnote-reference,#content .citation-reference{
     vertical-align:super;
-    font-size:90%;
+    font-size: 0.9rem;
 }
 
 
@@ -269,22 +270,11 @@ span[id*='MathJax-Span']{
     -webkit-font-smoothing:antialiased;
 }
 
-/*!
- *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{
-    font-family:'FontAwesome';
-    src:url("../fonts/fontawesome-webfont.eot?v=4.1.0");
-    src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");
-    font-weight:normal;
-    font-style:normal;
-}
-
 .fa,.icon{
     display:inline-block;
-    font-family:FontAwesome;
+    font-family: $fa;
+    font-style:normal;
     font-style:normal;
-    font-weight:normal;
     line-height:1;
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
@@ -318,3 +308,31 @@ span[id*='MathJax-Span']{
     border-radius:.1em;
 }
 
+.figure.wrap-right {
+    float: right;
+    &:after {
+        content:'';
+        display:block;
+        clear: both;
+    }
+}
+
+.figure.wrap-left {
+    float: left;
+    &:after {
+        content:'';
+        display:block;
+        clear: both;
+    }
+}
+
+// TODO Highlight links/etc.
+@-webkit-keyframes target {
+    from { background:#ffffff; }
+    50% { background:#ffffd3; }
+    to { background:#ffffff; }
+}
+
+:target {
+    -webkit-animation: target .5s linear;
+}

scss/partials/_bibliography.scss

@@ -5,4 +5,5 @@ div.csl-bib-body {
     .csl-entry {
         margin-bottom: 1em;
     }
+
 }

scss/partials/_boxes.scss

@@ -3,9 +3,12 @@ $types: (
     definition: (color: $pale-red,    title-color: $red,    icon: "\f005"),
     exampl:     (color: $pale-green,  title-color: $green,  icon: "\f013"),
     question:   (color: $pale-yellow, title-color: $yellow, icon: "\f059"),
+    exercice:   (color: $pale-yellow, title-color: $yellow, icon: "\f040"),
+    answer:     (color: $pale-turq,   title-color: $turq,   icon: "\f00c"),
     summary:    (color: $pale-blue,   title-color: $blue,   icon: "\f02e"),
+    note:       (color: $pale-blue,   title-color: $blue,   icon: "\f249"),
     hint:       (color: $pale-grey,   title-color: $grey,   icon: "\f05a"),
-    important:  (color: $pale-orange, title-color: $orange, icon: "\f005"),
+    important:  (color: $pale-red,    title-color: $red,    icon: "\f005"),
     caution:    (color: $pale-orange, title-color: $orange, icon: "\f071"),
     warning:    (color: $pale-orange, title-color: $orange, icon: "\f071")
 );
@@ -31,7 +34,8 @@ $types: (
             margin-bottom: 0px;
 
             &:before{
-                font-family:FontAwesome;
+                font-family: $fa;
+                font-weight: 900;
                 content: map-get($map, icon);
             }
         }
@@ -39,21 +43,17 @@ $types: (
 }
 
 #content .admonition-title{
-    color:#fff;
+    color: $color-block-title;
-    font-weight:bold;
+    font-weight: $bold;
     display: block;
-    color:#fff;
     padding: 6px 12px;
     margin-bottom: 0px;
-    font-family:inherit;
-    -webkit-font-smoothing:antialiased;
 
     &:before{
-        margin-right:4px;
+        margin-right: 8px;
-        font-family:"FontAwesome";
+        font-family: $fa;
         display: inline-block;
-        font-style:normal;
+        font-weight: 900;
-        font-weight:normal;
         line-height: 1;
         text-decoration: inherit;
     }

scss/partials/_codes.scss

@@ -1,14 +1,14 @@
 @mixin src-box {
     display: inline;
     position: absolute;
-    color: #808080;
+    color: $color-text-shadow;
-    background-color: white;
+    background-color: $white;
     padding: 0px 4px;
-    border: 1px solid #d0d0d0;
+    border: 1px solid $color-shadow;
-    font-size:10px;
+    font-size: 0.6rem;
     top: -9px;
     z-index: 10;
-    font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+    font-family: $mono;
 }
 
 // Div that containst the code
@@ -21,11 +21,15 @@
     label {
         text-align: center;
         cursor: text;
+        font-size: 0.85rem;
+        font-family: $serif;
+        font-style: italic;
+        color: $color-caption;
 
         // Listing num
         .listing-number {
-            font-weight: bold;
+            font-weight: $bold;
-            color: #343131;
+            color: $color-caption-num;
         }
     }
 
@@ -38,20 +42,25 @@
 
         // When button is clicked
         &.src-copied {
-            color: $white;
+            color: $color-text-invert;
             background-color: $color-primary;
         }
     }
 
+    // Line numbers
+    .linenr {
+        color: $color-text-shadow;;
+    }
+
     // Code Block
     > pre {
         position: relative;
         overflow: visible;
-        border:1px solid #e1e4e5;
+        border:1px solid $color-shadow;
-        background:#fff;
+        background: $white;
         display: block;
-        font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+        font-family: $mono;
-        font-size:12px;
+        font-size: 0.75rem;
         line-height: 1.5;
         padding: 12px;
         margin-bottom: 24px;
@@ -80,13 +89,14 @@
 pre {
     &.example {
         position: relative;
-        background:#f3f6f6;
+        background: $color-background;
-        border:1px solid #e1e4e5;
+        border: 1px solid $color-shadow;
-        color:#404040;
+        color: $color-text;
-        font-size: 12px;
+        font-size: 0.75rem;
         line-height: 1.5;
         margin-bottom: 24px;
         padding: 12px;
+        font-family: $mono;
 
         //
         &:before {

scss/partials/_colors.scss

@@ -4,12 +4,13 @@
 $white: #fff;
 $black: #000;
 
-$blue:   hsl(204, 61%, 64%);
+$blue:    hsl(232, 61%, 64%);
 $red:     hsl(360, 61%, 64%);
 $green:   hsl(160, 61%, 64%);
 $yellow:  hsl(55,  61%, 64%);
 $orange:  hsl(32,  61%, 64%);
 $grey:    hsl(0,   0%,  64%);
+$turq:    hsl(191, 61%, 64%);
 
 $pale-blue:   adjust-color($blue,   $lightness: 30%);
 $pale-red:    adjust-color($red,    $lightness: 30%);
@@ -17,6 +18,7 @@ $pale-green:  adjust-color($green,  $lightness: 30%);
 $pale-yellow: adjust-color($yellow, $lightness: 30%);
 $pale-orange: adjust-color($orange, $lightness: 30%);
 $pale-grey:   adjust-color($grey,   $lightness: 30%);
+$pale-turq:   adjust-color($turq,   $lightness: 30%);
 
 $dark-blue:   adjust-color($blue,   $lightness: -30%);
 $dark-red:    adjust-color($red,    $lightness: -30%);
@@ -24,30 +26,42 @@ $dark-green:  adjust-color($green,  $lightness: -30%);
 $dark-yellow: adjust-color($yellow, $lightness: -30%);
 $dark-orange: adjust-color($orange, $lightness: -30%);
 $dark-grey:   adjust-color($grey,   $lightness: -30%);
+$dark-turq:   adjust-color($turq,   $lightness: -30%);
 
 $vivid-blue:   adjust-color($blue,   $saturation: 20%);
 $vivid-red:    adjust-color($red,    $saturation: 20%);
 $vivid-green:  adjust-color($green,  $saturation: 20%);
 $vivid-yellow: adjust-color($yellow, $saturation: 20%);
 $vivid-orange: adjust-color($orange, $saturation: 20%);
+$vivid-turq:   adjust-color($turq,   $saturation: 20%);
 
 
 // main color palette
 $color-primary:             $blue;
-$color-primary-background:  adjust-color($blue, $lightness: -30%);
+$color-primary-background:  adjust-color($blue, $lightness: -20%);
-// $color-secondary:           $bouquet;
+$color-secondary:           $green;
 // $color-accent:              $patina;
-// $color-shadow:              rgba($black, .125);
+$color-shadow:              hsl(195, 7%, 89%);
-// $color-note:                #666;
+$color-shadow-light:        hsl(195, 7%, 95%);
+// $color-note:                hsl(195, 7%, 99%);
 
 
 // Common colors
-$color-background:          #fcfcfc;
+$color-background:             hsl(204, 16%, 94%);
-$color-background-outside:  #edf0f2;
+$color-background-light:       hsl(0, 0%, 99%);
+$color-background-med:         hsl(0, 0%, 40%);
+$color-background-dark:        hsl(0, 0%, 20%);
+$color-background-obscur:      hsl(0, 0%, 12%);
 // $color-background-shade:    $iron;
 // $color-background-invert:   $hopbush;
-$color-text:                #404040;
+//
-// $color-text-weak:           $regent-grey;
+$color-text:                  hsl(0, 0%, 25%);
+$color-text-invert:           hsl(0, 0%, 99%);
+$color-text-shadow:           hsl(0, 0%, 65%);
+$color-caption:               $color-text;
+$color-caption-num:           $dark-blue;
+$color-block-title:           $color-text-invert;
+
 // $color-text-strong:         $midnight-blue;
 // $color-text-heading:        $regent-grey;
 // $color-text-invert:         rgba($color-background, .75);

scss/partials/_copyright.scss

@@ -6,8 +6,8 @@
     color:#fcfcfc;
     background:#1f1d1d;
     border-top:solid 10px #343131;
-    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+    font-family: $serif;
-    font-size: 90%;
+    font-size: 0.9rem;
     z-index:400;
     padding:12px;
     a{
@@ -20,7 +20,7 @@
         background-color:#272525;
         display:block;
         text-align:right;
-        font-size:90%;
+        font-size: 0.9rem;
         cursor:pointer;
         color:#27AE60;
         *zoom:1;

scss/partials/_details.scss

@@ -1,9 +1,9 @@
 details {
-    background: #fbfbfb;
+    background: $color-background;
-    border: 1px solid  #c9c9c9;
+    border: 1px solid $color-background-med;
     border-radius: 3px;
     margin-bottom: 1.0em;
-    padding: 12px 12px 0 12px;
+    padding: 12px;
 
     pre.src {
         margin-top: 12px;
@@ -12,15 +12,15 @@ details {
 
     summary {
         outline: 0;
-        color: #c9c9c9;
+        color: $color-background-med;
         padding: 0px;
         margin: 0px;
-        margin-bottom: 10px;
         cursor: pointer;
 
+        // Click to unfold button
         &::after {
             font-size: 0.85em;
-            color: #c9c9c9;
+            color: $color-background-med;
             float: right;
             padding-right: 0.5em;
             content: "Click to fold/unfold";

scss/partials/_figures.scss

@@ -3,9 +3,10 @@
     margin-bottom:24px;
 
     p {
-        color:#000;
+        color: $color-caption;
-        font:italic 85%/1 arial,sans-serif;
+        font-size: 0.85rem;
-        padding:1em 0;
+        font-family: $serif;
+        font-style: italic;
         text-align: center;
         margin: 0;
     }
@@ -14,11 +15,12 @@
         max-width:100%;
         display: block;
         margin: auto;
+        padding-bottom: 0.5em;
     }
 
     .figure-number {
-        font-weight: bold;
+        font-weight: $bold;
-        color: #343131;
+        color: $color-caption-num;
     }
 }
 

scss/partials/_fonts.scss

@@ -1,2 +1,22 @@
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
+// Sans Serif Font
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// Serif Font
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// MonoSpace Font
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// Font Awesome
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css');
+// @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
+
+
+$sans-serif: Roboto, sans-serif, FontAwesome;
+$serif: Merriweather, Georgia, "Times New Roman", serif, FontAwesome;
+$mono: "Source Code Pro", monospace;
+$fa: FontAwesome;
+
+$light: 300;
+$normal: 400;
+$bold: 700;

scss/partials/_footnotes.scss

@@ -2,8 +2,8 @@
 sup{
     a.footref, a.footnum{
         color: #2980b9;
-        font-size: 12px;
+        font-size: 0.75rem;
-        font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+        font-family: $sans-serif;
 
         &:before{ content:"["; }
         &:after{  content:"]"; }
@@ -35,8 +35,8 @@ sup{
             // Foot Text
             p {
                 color: #999;
-                font-size: 90%;
+                font-size: 0.9rem;
-                font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+                font-family: $sans-serif;
                 padding: 8px;
                 line-height: 1.25em;
                 margin: 0;

scss/partials/_headlines.scss

@@ -1,47 +1,49 @@
 .title {
-    font-size:175%;
+    font-size: 1.75rem;
     margin-bottom: 1em;
-    font-weight:700;
+    font-weight: $bold;
     text-align: center;
 
     .subtitle{
-        font-size:80%;
+        font-size: 0.8rem;
     }
 }
 
 
 h1,h2,h3,h4,h5,h6 {
-    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
+    font-family: $sans-serif;
 }
 
 h1{
-    font-size:175%;
+    font-size: 1.75rem;
     margin-bottom: 1em;
-    font-weight:700;
+    font-weight: $bold;
     text-align: center;
 }
 
 h2{
-    font-size:150%;
+    clear: both; // used if float is present before heading
+    font-size: 1.5rem;
     margin-bottom: 1em;
-    font-weight:700;
+    font-weight: $bold;
 }
 
 h3{
-    font-size:125%;
+    clear: both;
+    font-size: 1.25rem;
     margin-bottom: 0.5em;
 }
 
 h4{
-    font-size:115%;
+    font-size: 1.15rem;
     margin-bottom: 0.5em;
     color:#2980B9;
-    font-weight:300;
+    font-weight: $light;
 }
 
 h5{
-    font-size:110%;
+    font-size: 1.1rem;
     margin-bottom: 0.5em;
     color:#2980B9;
-    font-weight:300;
+    font-weight:light;
 }

scss/partials/_htmlize.scss

@@ -1,11 +1,12 @@
 .org-bold {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-bold-italic {
-    font-weight: bold; font-style: italic;
+    font-weight: $bold;
+    font-style: italic;
 }
 .org-buffer-menu-buffer {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-builtin {
     color: #7a378b;
@@ -41,7 +42,7 @@
     color: #008b8b;
 }
 .org-comint-highlight-input {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-comint-highlight-prompt {
     color: #00008b;
@@ -53,7 +54,7 @@
     color: #000000; background-color: #ffffff;
 }
 .org-completions-first-difference {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-diary {
     color: #ff0000;
@@ -62,7 +63,7 @@
     color: #7f7f7f;
 }
 .org-diff-file-header {
-    background-color: #b3b3b3; font-weight: bold;
+    background-color: #b3b3b3; font-weight: $bold;
 }
 .org-diff-function {
     background-color: #cccccc;
@@ -74,10 +75,10 @@
     background-color: #cccccc;
 }
 .org-diff-index {
-    background-color: #b3b3b3; font-weight: bold;
+    background-color: #b3b3b3; font-weight:s$bold;
 }
 .org-diff-nonexistent {
-    background-color: #b3b3b3; font-weight: bold;
+    background-color: #b3b3b3; font-weight:s$bold;
 }
 .org-diff-refine-change {
     background-color: #d9d9d9;
@@ -86,7 +87,7 @@
     color: #0000ff;
 }
 .org-dired-flagged {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-dired-header {
     color: #228b22;
@@ -98,7 +99,7 @@
     color: #008b8b;
 }
 .org-dired-marked {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-dired-perm-write {
     color: #b22222;
@@ -107,7 +108,7 @@
     color: #a020f0;
 }
 .org-dired-warning {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-doc {
     color: #8b2252;
@@ -119,10 +120,10 @@
     color: #7f7f7f;
 }
 .org-flyspell-duplicate {
-    color: #cdad00; font-weight: bold; text-decoration: underline;
+    color: #cdad00; font-weight:s$bold; text-decoration: underline;
 }
 .org-flyspell-incorrect {
-    color: #ff4500; font-weight: bold; text-decoration: underline;
+    color: #ff4500; font-weight:s$bold; text-decoration: underline;
 }
 .org-fringe {
     background-color: #f2f2f2;
@@ -194,13 +195,13 @@
     color: #b22222;
 }
 .org-org-checkbox {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-org-checkbox-statistics-done {
-    color: #228b22; font-weight: bold;
+    color: #228b22; font-weight:s$bold;
 }
 .org-org-checkbox-statistics-todo {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-org-clock-overlay {
     background-color: #ffff00;
@@ -212,7 +213,7 @@
     background-color: #e5e5e5;
 }
 .org-org-column-title {
-    background-color: #e5e5e5; font-weight: bold; text-decoration: underline;
+    background-color: #e5e5e5; font-weight:s$bold; text-decoration: underline;
 }
 .org-org-date {
     color: #a020f0; text-decoration: underline;
@@ -224,10 +225,10 @@
     color: #7f7f7f;
 }
 .org-org-document-title {
-    color: #191970; font-size: 144%; font-weight: bold;
+    color: #191970; font-size: 1.45rem; font-weight:s$bold;
 }
 .org-org-done {
-    color: #228b22; font-weight: bold;
+    color: #228b22; font-weight:s$bold;
 }
 .org-org-drawer {
     color: #0000ff;
@@ -308,7 +309,7 @@
     color: #0000ff;
 }
 .org-org-tag {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-org-target {
     text-decoration: underline;
@@ -317,7 +318,7 @@
     color: #b8860b;
 }
 .org-org-todo {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-org-upcoming-deadline {
     color: #b22222;
@@ -329,7 +330,7 @@
     color: #7f7f7f;
 }
 .org-org-warning {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-outline-1 {
     color: #0000ff;
@@ -362,10 +363,10 @@
     color: #b0e2ff; background-color: #cd00cd;
 }
 .org-regexp-grouping-backslash {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-regexp-grouping-construct {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-region {
     background-color: #eedc82;
@@ -395,10 +396,10 @@
     text-decoration: underline;
 }
 .org-warning {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-widget-button {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-widget-button-pressed {
     color: #ff0000;

scss/partials/_lists.scss

@@ -25,7 +25,7 @@ dl {
     margin-bottom: 1em;
 
     dt {
-        font-weight:bold;
+        font-weight: $bold;
         vertical-align: top;
     }
 

scss/partials/_mathjax.scss

@@ -0,0 +1,7 @@
+mjx-menclose {
+    mjx-box {
+        padding: 0.5em !important;
+        border-radius: 0.2em;
+        background: $pale-blue;
+    }
+}

scss/partials/_media.scss

@@ -1,16 +1,16 @@
-@media screen and (max-width: 768px){
+@media (max-width: 768px){
     .tablet-hide{
         display:none;
     }
 }
 
-@media screen and (max-width: 480px){
+@media (max-width: 480px){
     .mobile-hide{
         display:none;
     }
 }
 
-@media screen and (max-width: 768px){
+@media (max-width: 768px){
     #content{
         margin-left:0;
     }
@@ -29,17 +29,17 @@
     }
 }
 
-@media screen and (min-width: 1400px){
+// @media (min-width: 1400px){
-    #content{
+//     #content{
-        background:rgba(0,0,0,0.05);
+//         background:rgba(0,0,0,0.05);
-    }
+//     }
 
-    #content{
+//     #content{
-        background:#fcfcfc;
+//         background:#fcfcfc;
-    }
+//     }
-}
+// }
 
-@media screen and (max-width: 768px){
+@media (max-width: 768px){
     #copyright{
         width:85%;
         display:none;
@@ -48,64 +48,10 @@
     #copyright.shift{
         display:block;
     }
-
-    img{
-        width:100%;
-        height:auto;
-    }
 }
 
-@media screen and (max-width: 480px){
+@media (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;
-    }
-}

scss/partials/_nagivation.scss

@@ -1,7 +1,7 @@
 #org-div-home-and-up {
     position: absolute;
     right: 0;
-    z-index: 10;
+    z-index: 100;
     padding: 10px;
 
     // Large Screens
@@ -10,4 +10,14 @@
         width: $content-max-width+$toc-width;
         text-align: right;
     }
+
+    // Small screens
+    @media (max-width: 768px) {
+        position: fixed;
+        padding: 1em;
+        color: $color-primary-background;
+        a {
+          color: $color-text-invert;
+        }
+    }
 }

scss/partials/_org.scss

@@ -19,7 +19,7 @@
 // Priority
 .priority {
     color: $vivid-orange;
-    font-family: Lucida Console,monospace;
+    font-family: $mono;
 }
 
 // tag in a headline
@@ -30,8 +30,8 @@
     cursor: pointer;
     display: block;
     float: right;
-    font-size: 70%;
+    font-size: 0.7rem;
-    font-weight: normal;
+    font-weight: $normal;
     margin: 0 3px;
     padding: 5px;
     border-radius: 3px;
@@ -39,13 +39,13 @@
 
 // span around keyword plus timestamp
 .timestamp-wrapper {
-    font-size: 0.8em;
+    font-size: 0.8rem;
     margin-left: 2em;
 
     // Timestamp date
     .timestamp {
         color: $dark-blue;
-        font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+        font-family: $mono;
     }
 
     // keyword associated with a timestamp, like ‘SCHEDULED’

scss/partials/_postamble.scss

@@ -4,22 +4,21 @@
     left:0;
     width: $toc-width;
     padding: 12px;
-    color:#fcfcfc;
+    color: $color-text-invert;
-    background:#1f1d1d;
+    background: $color-background-obscur;
     border-top: solid 10px #343131;
-    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+    font-family: $serif;
-    font-size: 90%;
     z-index:400;
 
     .author {
-        font-size: 100%;
+        font-size: 0.8rem;
         margin-bottom: 0px;
     }
 
     .date {
-        font-size: 90%;
+        font-size: 0.7rem;
         margin-bottom: 0px;
-        color: #27AE60;
+        color: $color-secondary;
     }
 
     .creator, .validation {

scss/partials/_reset.scss

@@ -2,7 +2,7 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
+  font-size: 1rem;
   font: inherit;
   vertical-align: baseline; }
 

scss/partials/_tables.scss

@@ -5,39 +5,50 @@ table {
     border-spacing:0;
     empty-cells:show;
     margin-bottom:24px;
-    border-bottom:3px solid #e1e4e5;
+    border-bottom:3px solid $color-shadow;
 
     // Cell Style
     td, th {
-        font-size:90%;
+        font-size: 0.9rem;
         margin:0;
         overflow:visible;
         padding:8px 16px;
-        background-color:white;
+        background-color: $white;
-        border:1px solid #e1e4e5;
+        border:1px solid $color-shadow;
     }
 
+    .org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
+    .org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
+    .org-center { margin-left: auto; margin-right: auto; text-align: center; }
+
     // First Line of the Table
     thead th{
-        font-weight:bold;
+        font-weight: $bold;
-        border-top:3px solid #e1e4e5;
+        border-top:3px solid $color-shadow;
-        border-bottom:1px solid #e1e4e5;
+        border-bottom:1px solid $color-shadow;
+    }
+
+    // Each group of rows separated by |----+----|
+    tbody {
+       border-top: 3px solid $color-shadow;
     }
 
     // Caption
     caption{
-        color:#000;
+        color: $color-caption;
-        font:italic 85%/1 arial,sans-serif;
+        font-size: 0.85em;
+        font-family: $serif;
+        font-style: italic;
         padding:1em 0;
 
         // "Table x" part
         .table-number {
-            font-weight: bold;
+            font-weight: $bold;
-            color: #343131;
+            color: $color-caption-num;
         }
     }
 
     // Alternating colors for the rows
-    tr:nth-child(2n-1) td{background-color:#f3f6f6;}
+    // tr:nth-child(2n-1) td{background-color: $color-shadow-light;}
-    tr:nth-child(2n)   td{background-color:white;}
+    // tr:nth-child(2n)   td{background-color: $white;}
 }

scss/partials/_toc.scss

@@ -1,135 +1,95 @@
 #table-of-contents {
-
     position: fixed;
     top: 0;
     left: 0;
-    width:300px;
+    width: $toc-width;
     overflow-x: hidden;
     overflow-y: scroll;
     height: 100%;
-    background: #343131;
+    background: $color-background-dark;
     z-index: 200;
-    scrollbar-base-color: #1F1D1D;
-    scrollbar-arrow-color: #b3b3b3;
-    scrollbar-shadow-color: #1F1D1D;
-    scrollbar-track-color : #343131;
 
-    li {
+    // Table of Contents Header
-        list-style:none;
+    h2 {
-        margin-left: 0px;
+        color: $color-text-invert;
-
+        background-color: $color-primary;
-        &.divide-top {
+        text-align: center;
-            border-top:solid 1px #404040;
+        padding: 1em;
+        display: block;
+        font-size: 1rem;
+        z-index: 200;
     }
 
-        &.divide-bottom {
+    // Links to Headers
-            border-bottom:solid 1px #404040;
-        }
-
-        &.current {
-            background:#e3e3e3;
-
     a {
-                color:gray;
+        display: block;
-                border-right:solid 1px #c9c9c9;
-                padding:0.4045em 2.427em;
-                &:hover{
-                    background:#d6d6d6;
-                }
-            }
-        }
-
-        a {
-            padding:0.4045em 1.618em;
         position: relative;
-            border:none;
+        line-height: 1.5em;
-            padding-left:1.618em -4px;
+        font-size: 0.9rem;
-        }
+        color: $color-text-shadow;
 
-        &.on a:hover {
+        &:hover{
-            background:#fcfcfc;
+            background-color: $color-background-med;
+            cursor:pointer;
         }
-        &.current>a:hover{
-            background:#fcfcfc;
-        }
-
     }
 
     .close-sidebar {
         display: none;
     }
 
-    header {
+    // ToC Items
-        height:32px;
+    li {
-        display:inline-block;
+        list-style: none;
-        line-height:32px;
+        margin-left: 0px;
-        padding:0 1.618em;
-        display:block;
-        font-weight:bold;
-        text-transform:uppercase;
-        font-size:80%;
-        color: $color-primary;
-        white-space:nowrap;
     }
 
+    // Reduce margins
     ul {
         margin-bottom: 0;
     }
 
-    li ul li a{
+    // Identation of headings
-        padding:0.4045em 2.427em;
+    li {
-    }
+        // First level Headings
-
+        a{ padding: 0.4em 1.6em; }
-    li ul li ul li a{
+        ul li {
-        padding:0.4045em 3.236em;
+            // Second level Headings
-    }
+            a{ padding: 0.4em 2.4em; }
-
+            ul li {
-    li.current ul{
+                // Third
-        display:block;
+                a { padding:0.4em 3.0em; }
-    }
+                ul li {
-
+                    // Fourth
-    .local-toc li ul{
+                    a { padding:0.4em 3.6em; }
-        display:block;
+                }
-    }
-
-    li ul li a{
-        margin-bottom:0;
-        color:#b3b3b3;
-        font-weight:normal;
-    }
-
-    a {
-        display:inline-block;
-        line-height:18px;
-        padding:0.4045em 1.618em;
-        display:block;
-        position:relative;
-        font-size:90%;
-        color:#b3b3b3;
-        direction: ltr;
-
-        &:hover{
-            background-color:#4e4a4a;
-            cursor:pointer;
             }
         }
-
-
-    h2 {
-        z-index:200;
-        background-color: $color-primary-background;
-        text-align:center;
-        padding:0.809em;
-        display:block;
-        color:#fcfcfc;
-        font-size: 100%;
-        margin-bottom:0.809em;
     }
-
     // Do not display tags in the ToC
     .tag {
         display: none;
     }
+
+    @media (max-width: 768px) {
+        display: none;
+        width: 60%;
+        box-shadow: -25px 0px 10px 32px $black;
+
+        &:target {
+            display: block;
+        }
+
+        .close-sidebar {
+            color: $color-text-invert;
+            display: block;
+            margin-left: 10px;
+            float: right;
+            &:hover {
+                background-color: $color-primary;
+            }
+        }
+    }
 }
 
 
@@ -140,6 +100,8 @@
 
 
 
+// Additionnal things to order
+
 ul.nav li ul li {
     display: none;
 }
@@ -207,3 +169,91 @@ ul.nav > li.active > a {
 #toggle-sidebar {
     display: none;
 }
+
+
+
+
+
+
+li {
+    &.divide-top {
+        border-top:solid 1px #404040;
+    }
+
+    &.divide-bottom {
+        border-bottom:solid 1px #404040;
+    }
+
+    &.current {
+        background:#e3e3e3;
+
+        a {
+            color: gray;
+            border-right: solid 1px #c9c9c9;
+            padding: 0.4045em 2.427em;
+            &:hover{
+                background: #d6d6d6;
+            }
+        }
+    }
+
+    a {
+        // padding:0.4045em 1.618em;
+        position:relative;
+        border:none;
+        padding-left:1.618em -4px;
+    }
+
+    &.on a:hover {
+        background: #fcfcfc;
+    }
+    &.current>a:hover{
+        background: #fcfcfc;
+    }
+}
+
+
+
+li.current ul{
+    display:block;
+}
+
+
+.local-toc li ul{
+    display:block;
+}
+
+
+li ul li a{
+    margin-bottom:0;
+    color:#b3b3b3;
+    font-weight:normal;
+}
+
+
+@media (max-width: 768px) {
+    #copyright, #postamble {
+        display: none;
+    }
+
+    #toggle-sidebar {
+        display: block;
+        margin-bottom: 1.6em;
+        padding: 1.0em;
+        text-align: center;
+
+        h2 {
+            position:fixed;
+            width:100%;
+            left:0;
+            top:0;
+            color: $color-text-invert;
+            background-color: $color-primary;
+            text-align: center;
+            padding: 1em;
+            display: block;
+            font-size: 1rem;
+            z-index: 20;
+        }
+    }
+}

scss/style.scss

@@ -24,5 +24,6 @@
 @import 'partials/_tables.scss';
 @import 'partials/_video.scss';
 @import 'partials/_details.scss';
+@import 'partials/_mathjax.scss';
 
 @import 'partials/_media.scss';