Merge branch 'better-acsl-page-css' into 'master'

Improves ACSL page on mobile

See merge request !48

assets/css/page.css

@@ -1182,10 +1182,16 @@ details summary:before {
 }
 
 .sidecode {
-  width: 50%;
+  width: 100%;
   overflow: hidden;
   margin-bottom: 20px;
 }
+@media (min-width: 768px) {
+  .sidecode {
+    width: 50%;
+    margin-bottom: 20px;
+  }
+}
 @media (min-width: 1024px) {
   .sidecode {
     margin-bottom: 25px;
@@ -1197,21 +1203,39 @@ details summary:before {
   margin-right: auto;
 }
 sidenote {
-  position: absolute;
-  width: 45%;
-  margin-right: 5%;
-  right: -12px;
-  padding-left: 11px;
-  border-left: 3px solid #e9b040;
+  display: none;
   font-family: 'Muli';
   font-size: 14px;
   text-align: justify;
   white-space: pre-wrap;
 }
+.sidecode > .under {
+  margin-bottom: 15px;
+  display: block;
+  text-align: justify;
+}
+.sidecode > .under:before {
+  content: attr(id);
+  vertical-align: super;
+  font-size: 11px;
+  font-weight: bold;
+  color: #f7931c;
+  padding-right: 10px;
+}
+.sidecode .inline {
+  display: inline;
+  vertical-align: super;
+  color: #f7931c;
+  font-weight: bold;
+  font-size: 11px;
+}
 @media (min-width:  768px) {
   sidenote {
     font-size: 15px;
   }
+  .sidecode .inline {
+    display: none;
+  }
 }
 @media (min-width: 1024px) {
   sidenote {
@@ -1224,10 +1248,28 @@ sidenote {
   }
 }
 sidenote + point {
-  content:'';
-  display: inline-block;
-  width: 100%;
-  margin: 0 -100% 0 .5em;
-  vertical-align: middle;
-  border-bottom: 1px solid #e9b040;
+  display: none;
 }
+@media (min-width: 768px){
+  sidenote {
+    position: absolute;
+    bottom: unset;
+    width: 45%;
+    margin-right: 5%;
+    right: -12px;
+    padding-left: 11px;
+    display: inline-block;
+    border-left: 3px solid #e9b040;
+  }
+  .sidecode > .under {
+    display: none;
+  }
+  sidenote + point {
+    content:'';
+    display: inline-block;
+    width: 100%;
+    margin: 0 -100% 0 .5em;
+    vertical-align: middle;
+    border-bottom: 1px solid #e9b040;
+  }
+}
\ No newline at end of file

html/acsl.html

@@ -29,11 +29,11 @@ ACSL is a <em>formal</em> language.</p>
 <div class="sidecode">
 <pre>
 /*@
-  requires \valid(a+(0..n-1));<sidenote>ACSL provides specification primitives to cover the low-level aspects of the C programming language</sidenote><point></point>
+  requires \valid(a+(0..n-1));<span class=inline>1</span><sidenote>ACSL provides specification primitives to cover the low-level aspects of the C programming language</sidenote><point></point>
 
   assigns  a[0..n-1];
 
-  ensures<sidenote>As a formal language, ACSL enables a precise specification of function contracts. That makes the specification not only understandable by a human, but also manipulable by an analyzer. Furthermore, as a complete specification is not always useful, the contract can be partial, it depends on what one wants to verify.</sidenote><point></point>
+  ensures<span class=inline>2</span><sidenote>As a formal language, ACSL enables a precise specification of function contracts. That makes the specification not only understandable by a human, but also manipulable by an analyzer. Furthermore, as a complete specification is not always useful, the contract can be partial, it depends on what one wants to verify.</sidenote><point></point>
   \forall integer i;
     0 <= i < n ==> a[i] == 0;
 */
@@ -43,7 +43,7 @@ void set_to_0(int* a, int n){
   /*@
     loop invariant 0 <= i <= n;
     loop invariant
-    \forall integer j;<sidenote>It also allows more abstract reasoning through mathematical or logic types, or through the definition of high level ideas, like "the function expects a valid linked list".</sidenote><point></point>
+    \forall integer j;<span class=inline>3</span><sidenote>It also allows more abstract reasoning through mathematical or logic types, or through the definition of high level ideas, like "the function expects a valid linked list".</sidenote><point></point>
       0 <= j < i ==> a[j] == 0;
     loop assigns i, a[0..n-1];
     loop variant n-i;
@@ -52,6 +52,10 @@ void set_to_0(int* a, int n){
     a[i] = 0;
 }
 </pre>
+<div class=under id=1>ACSL provides specification primitives to cover the low-level aspects of the C programming language</div>
+<div class=under id=2>As a formal language, ACSL enables a precise specification of function contracts. That makes the specification not only understandable by a human, but also manipulable by an analyzer. Furthermore, as a complete specification is not always useful, the contract can be partial, it depends on what one wants to verify.</div>
+<div class=under id=3>It also allows more abstract reasoning through mathematical or logic types, or through the definition of high level ideas, like "the function expects a valid linked list".</div>
+
 </div>
 
 <p><a href="../fc-plugins/wp.html">WP</a> and the older