Refactorings and gui improvements

app/assets/stylesheets/layout.scss

@@ -65,4 +65,74 @@
 
 .highlight-when-nonempty:not([value=""]) {
   @extend .border-primary
+}
+
+@mixin details-icon($color) {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
+  background-size: cover;
+}
+
+.page_nav nav ul {
+  padding-left: 0;
+  list-style-type: none;
+  line-height: 2rem;
+
+  a {
+    color: var(--bs-text);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  ul {
+    // padding-left: 1.5rem;
+  }
+}
+
+
+summary,
+summary a {
+  font-size: 1rem;
+  font-style: normal;
+}
+
+summary {
+  display: flex;
+  line-height: 2rem;
+}
+
+summary::before {
+  @include details-icon(to-rgb(map-get($theme-colors, "dark")));
+  content: '';
+  float: inline-end;
+  width: 0.7rem;
+  height: 1rem;
+  margin-top: 0.5rem;
+  margin-right: 6px;
+  // background: url('chevron-right.svg');
+  // background-size: cover;
+  margin-left: 0;
+  transition: 0.2s;
+}
+
+@include color-mode(dark) {
+  summary::before {
+    @include details-icon(to-rgb(map-get($theme-colors, "light")));
+    // content: '';
+    // float: inline-end;
+    // width: 0.7rem;
+    // height: 1rem;
+    // margin-top: 0.5rem;
+    // margin-right: 6px;
+    // // background: url('chevron-right.svg');
+    // // background-size: cover;
+    // margin-left: 0;
+    // transition: 0.2s;
+  }
+}
+
+details[open]>summary::before {
+  transform: rotate(90deg);
 }