tweak icons framework and header banner

lib/html_body.typ

@@ -7,12 +7,12 @@
 #let html_body(
   /// The visible header of the page
   header: none,
-  /// Home button, more or less expect an image in a link
-  home: none,
   /// The footer of the page
   footer: none,
   /// Logo of the site
   logo: none,
+  /// Array of element to add before the theme switcher on top of the page
+  nav-elements: none,
   /// Navigation menu content, css style expect a list
   menu: none,
   body
@@ -38,27 +38,41 @@
         margin-left: auto;
       }
       & > * {
-        margin-left: 0.25rem;
-        margin-right: 0.25rem;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
-      
+
       /* Typst keep inserting <p> tags everywhere */
       & > p {
         margin-top: 0.25rem;
         margin-bottom: 0.25rem;
+
+        & > * {
+          margin-left: 0.5rem;
+          margin-right: 0.5rem;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
 
-      home-symbol, home-symbol a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        /*height: 100%;*/
-      }
-      home-symbol a {
+      a {
         /* Unstyle link */
         color: inherit;
         text-decoration: inherit;
         /* cursor: inherit; // we want to keep the clickable cursor */
+
+        & > .icon {
+          &:hover {
+            box-shadow: inset 0px 0px 0.4em 0px var(--color-button-shadow);
+            cursor: pointer;
+          }
+        }
       }
     }
   
@@ -96,8 +110,8 @@
   html.body({
     chtml.site-wrapper({
       chtml.site-container({
-        html.nav({
-          if home != none { chtml.home-symbol(home) }
+        html.nav({ 
+          if nav-elements != none { for elt in nav-elements { elt }}
           theme-picker()
           if menu != none { nav-menu-toggle() }
         })