update ui styles to better match ecorpus.eu

rework logo and favicons

substitute all scss variables with css replaceable ones

move section and tables styles into common. Some more styles improvements

README.md

@@ -17,4 +17,3 @@ It means some commands will need to be run with the `--recurse-submodules` flag,
 eg: `git clone --recurse-submodules [email protected]:Holusion/eCorpus`
 
 Day-to-day operations can be simplified by configuring git (globally or for thsi repository) to always recurse by default : `git config submodule.recurse true`.
-

source/server/templates/layouts/main.hbs

@@ -12,15 +12,25 @@
     <link rel="apple-touch-icon" href="{{thumb}}">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
+    
 
     <title>{{title}}</title>
 
-    <link rel="shortcut icon" type="image/png" href="/dist/favicon.png"/>
+    <link rel="icon" type="image/png" href="/dist/favicon.png" sizes="32x32"/>
+    <link rel="shortcut icon" type="image/svg+xml" href="/dist/favicon.svg"/>
 
     <style>
-      body { background: #303030; }
+      body{
+        background: var(--color-background, #343434);
+        position: relative;
+        width: 100%;
+        padding: var(--nav-height, 44px) 0 0 0;
+        margin: 0;
+        display: block;
+      }
     </style>
+
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/dist/css/corpus.css">
 
   </head>

source/ui/composants/ListItem.ts

@@ -51,9 +51,9 @@ export default class ListItem extends LitElement{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: #000a;
+      background: var(--color-element);
       padding: 1rem;
-      border-bottom: 1px solid #103040;
+      border-bottom: 1px solid var(--color-dark);
     }
     .list-item:hover{
       background: #071922

source/ui/composants/Modal.ts

@@ -102,15 +102,17 @@ interface ModalOptions{
       top: max(100px, 15vh);
       min-width: 30vw;
       max-width: calc(100vw - 20px);
-      border: none;
-      background-color: var(--color-dark);
-      color: var(--color-light);
+      border: 1px solid var(--color-element);
+      border-radius: 5px;
+      background-color: var(--color-background);
+      color: var(--color-text);
       box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
     }
 
     .btn{
       color: white;
-      background: var(--color-tertiary);
+      background: var(--color-element);
+      transition: background 0.2s;
     }
     .btn:hover{
       background: var(--color-secondary);