Complete dividat description

2 files changed, 47 insertions, 23 deletions

diff --git a/public/index.html b/public/index.html
index 1df1419..473372b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,17 +25,39 @@
         <p>
           Prevent falls with technology-based training therapy which promotes
           autonomous mobility and functional independence in old age, after an
-          accident or illness.
+          accident or illness:
         </p>
 
-        <ul class="technos">
-          <li>Elm
-          <li>Scala
-          <li>Nix
-          <li>Python
-          <li>Ocaml
-          <li>Rust
-          <li>PostgreSQL
+        <ul class="bullets">
+          <li>
+            frontend application with games and assessments,
+            <ul class="technos">
+              <li>Elm
+              <li>Sass
+            </ul>
+
+          <li>
+            web server API,
+            <ul class="technos">
+              <li>Scala
+              <li>Http4s
+              <li>PostgreSQL
+            </ul>
+
+          <li>
+            auto-upgradable Operating System with a controller, a kiosk browser and drivers,
+            <ul class="technos">
+              <li>Nix
+              <li>Ocaml
+              <li>Python
+              <li>Go
+            </ul>
+
+          <li>
+            WebSocket relay.
+            <ul class="technos">
+              <li>Rust
+            </ul>
         </ul>
       </li>
 
@@ -43,15 +65,15 @@
         <h2>Zengularity for 5 years</h2>
 
         <p>
-          Web Oriented Architecture (WOA) for information systems :
+          Web Oriented Architecture (WOA) for information systems:
         </p>
 
         <ul class="bullets">
-          <li>Training platform for the unemployed in Seine-Saint-Denis.
-          <li>File house insurance claims for Saretec.
-          <li>Unit and automatic franking of Colissimo labels for La Poste.
-          <li>Participant’s pages for the Mutuelle Nationale Territoriale (MNT).
-          <li>Food sample analysis with results visualization for Adisseo.
+          <li>training platform for the unemployed in Seine-Saint-Denis,
+          <li>file house insurance claims for Saretec,
+          <li>unit and automatic franking of Colissimo labels for La Poste,
+          <li>participant’s pages for the Mutuelle Nationale Territoriale (MNT),
+          <li>food sample analysis with results visualization for Adisseo.
         </ul>
 
         <ul class="technos">
diff --git a/public/main.css b/public/main.css
index aa1b219..347beca 100644
--- a/public/main.css
+++ b/public/main.css
@@ -143,7 +143,7 @@ h1 {
 
 h2 {
   font-size: var(--size-dog);
-  margin-top: 0;
+  margin-top: var(--size-dog);
   margin-bottom: var(--size-lion);
   font-weight: normal;
   text-decoration: underline;
@@ -161,27 +161,29 @@ ul.bullets {
   margin-bottom: var(--size-dog);
 }
 
+ul.bullets > li {
+  position: relative;
+  padding: var(--size-bee) 0 var(--size-bee) var(--size-lion);
+}
+
 ul.bullets > li::before {
+  position: absolute;
+  left: 0;
   content: "•";
   color: var(--color-brown);
   display: inline-block;
   margin-right: var(--size-mouse);
 }
 
-ul.bullets > li {
-  padding: var(--size-bee) 0;
-}
-
 ul.technos {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: var(--size-dog);
   padding-left: 0;
 }
 
+
 ul.technos > li {
-  margin-right: var(--size-dog);
-  margin-bottom: var(--size-mouse);
+  margin: var(--size-bee) var(--size-cat) var(--size-mouse) 0;
   background-color: var(--color-light-gray);
   border-radius: var(--size-bee);
   padding: 0 var(--size-mouse);