[TASK] style index list

output/style.css

@@ -177,3 +177,41 @@ body > footer {
   font-style: italic;
   padding: calc(var(--pico-spacing) / 3) 0;
 }
+
+/* List index.html */
+ol {
+  counter-reset: index;  
+  padding: 0;
+  width: 100%;
+}
+
+/* List element index.html */
+ol li {
+  counter-increment: index; 
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  box-sizing: border-box;
+}
+
+
+/* Element counter */
+ol li::before {
+  content: "§";
+  font-size: 1.5rem;
+  text-align: right;
+  font-weight: bold;
+  padding-right: 12px;
+  align-self: flex-start;
+  background-image: linear-gradient(to bottom, aquamarine, orangered);
+  background-attachment: fixed;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+/* Element separation */
+ol li + li {
+  border-top: var(--pico-contrast-focus) solid 1px;
+}

src/main.rs

@@ -111,7 +111,7 @@ fn main() {
             .replace("{{title}}", &lawname);
 
         li_of_files.push_str(&format!(
-            "<li><a href='./{law_name}'>{lawname}</a></li><br />\n"
+            "<li><a href='./{law_name}' title='{law_name}' class='contrast'>{lawname}</a></li>"
         ));
         fs::write(&format!("output/{law_name}.html"), &site).expect("Unable to write file");
     }

templates/style.css

@@ -177,3 +177,41 @@ body > footer {
   font-style: italic;
   padding: calc(var(--pico-spacing) / 3) 0;
 }
+
+/* List index.html */
+ol {
+  counter-reset: index;  
+  padding: 0;
+  width: 100%;
+}
+
+/* List element index.html */
+ol li {
+  counter-increment: index; 
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  box-sizing: border-box;
+}
+
+
+/* Element counter */
+ol li::before {
+  content: "§";
+  font-size: 1.5rem;
+  text-align: right;
+  font-weight: bold;
+  padding-right: 12px;
+  align-self: flex-start;
+  background-image: linear-gradient(to bottom, aquamarine, orangered);
+  background-attachment: fixed;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+/* Element separation */
+ol li + li {
+  border-top: var(--pico-contrast-focus) solid 1px;
+}