counters

mirva/resources/mirva.css

@@ -319,3 +319,22 @@ a:hover {}
 .float_down {
   float: left;
 }
+
+.float_count {
+  float: left;
+  padding-top: 4px;
+  text-shadow: var(--button-shadow) 2px 2px 1px;
+}
+
+.float_count_footer {
+  text-shadow: var(--button-shadow) 2px 2px 1px;
+  display: none;
+  position: absolute;
+  right: 4px;
+}
+
+@media only screen and (max-width: 800px) {
+  .float_count_footer {
+    display: block;
+  }
+}

mirva/resources/mirva.js

@@ -19,6 +19,11 @@ r(function() {
 function create_nav() {
   let navis = document.getElementsByClassName("navigation");
   for (let i = 0; i < navis.length; i++) {
+    if (navis.length > 10) {
+      // no need to enumerate on small sites.
+      navis[i].appendChild(create_counter(i, navis.length, "float_count"));
+      navis[i].parentElement.appendChild(create_counter(i, navis.length, "float_count_footer"));
+    }
     if (i == navis.length - 1) {
       navis[i].appendChild(create_button("up", document.body, 0));
       continue;
@@ -65,6 +70,13 @@ function create_button(direction, to, next) {
   return container
 }
 
+function create_counter(i, total, class_name) {
+  let container = document.createElement('div');
+  container.classList.add(class_name);
+  container.innerHTML = `${i+1}/${total}`;
+  return container
+}
+
 function is_visible(el, type) {
   let rect = el.getBoundingClientRect();
   if (type == "fully") {