changed info display position

files/global.css

@@ -10,45 +10,6 @@ body {
   height: 100%;
 }
 
-.tooltip {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 300px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px 0;
-  position: absolute;
-  z-index: 100;
-  top: 40px;
-  left: 50%;
-  transform: translate(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #555 transparent transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-
 .folders {
   text-align: center;
   display: -ms-flexbox;
@@ -93,74 +54,6 @@ figure {
   margin: 0;
 }
 
-/* Create four equal columns that sits next to each other */
-.column {
-  -ms-flex: 12.5%;
-  flex: 12.5%;
-  max-width: 12.5%;
-  padding: 0 4px;
-}
-
-.column img {
-  margin-top: 20px;
-  vertical-align: middle;
-  width: 100%;
-}
-
-/* Responsive layout - makes a four column-layout instead of eight columns */
-@media screen and (max-width: 1000px) {
-  .column {
-    -ms-flex: 25%;
-    flex: 25%;
-    max-width: 25%;
-  }
-
-  .folders img {
-    width: 80px;
-  }
-
-  .folders figcaption {
-    width: 100px;
-    font-size: small;
-  }
-}
-
-/* Responsive layout - makes a two column-layout instead of four columns */
-@media screen and (max-width: 800px) {
-  .column {
-    -ms-flex: 50%;
-    flex: 50%;
-    max-width: 50%;
-  }
-
-  .folders img {
-    width: 60px;
-  }
-
-  .folders figcaption {
-    width: 80px;
-    font-size: x-small;
-  }
-}
-
-/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
-@media screen and (max-width: 600px) {
-  .column {
-    -ms-flex: 100%;
-    flex: 100%;
-    max-width: 100%;
-  }
-
-  .folders img {
-    width: 40px;
-  }
-
-  .folders figcaption {
-    width: 60px;
-    font-size: xx-small;
-  }
-}
-
 .caption {
   padding-top: 4px;
   text-align: center;
@@ -192,6 +85,7 @@ figure {
   position: fixed;
   top: 0;
   width: 100%;
+  font-size: large;
 }
 
 .navbar li {
@@ -211,3 +105,107 @@ figure {
   padding: 14px 16px;
   text-decoration: none;
 }
+
+.tooltip {
+  position: relative;
+}
+
+.tooltip .tooltiptext {
+  display: none;
+  width: max-content;
+  position: absolute;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity 0.3s;
+  padding: 12px;
+}
+
+.tooltip:hover .tooltiptext {
+  display: block;
+  opacity: 1;
+}
+
+.tooltip:active .tooltiptext {
+  display: block;
+  opacity: 1;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+  -ms-flex: 12.5%;
+  flex: 12.5%;
+  max-width: 12.5%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 20px;
+  vertical-align: middle;
+  width: 100%;
+}
+
+/* Responsive layout - makes a four column-layout instead of eight columns */
+@media screen and (max-width: 1000px) {
+  .column {
+    -ms-flex: 25%;
+    flex: 25%;
+    max-width: 25%;
+  }
+
+  .folders img {
+    width: 80px;
+  }
+
+  .folders figcaption {
+    width: 100px;
+    font-size: small;
+  }
+
+  .navbar {
+    font-size: medium;
+  }
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media screen and (max-width: 800px) {
+  .column {
+    -ms-flex: 50%;
+    flex: 50%;
+    max-width: 50%;
+  }
+
+  .folders img {
+    width: 60px;
+  }
+
+  .folders figcaption {
+    width: 80px;
+    font-size: x-small;
+  }
+
+  .navbar {
+    font-size: small;
+  }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .column {
+    -ms-flex: 100%;
+    flex: 100%;
+    max-width: 100%;
+  }
+
+  .folders img {
+    width: 40px;
+  }
+
+  .folders figcaption {
+    width: 60px;
+    font-size: xx-small;
+  }
+
+  .navbar {
+    font-size: smaller;
+  }
+}

templates/index.html.j2

@@ -19,15 +19,14 @@
       {%- if parent %}
       <li><a href="{{ parent }}">Parent Directory</a></li>
       {%- endif %}
-      <li class="tooltip"><span class="header">{{ header }}</span>
-        {%- if info -%}
-        <span class="tooltiptext">
+      {%- if info %}
+      <li class="tooltip"><a>Info</a><span class="tooltiptext">
           {%- for infoline in info -%}
           {{ infoline }}<br />
           {%- endfor -%}
-        </span>
-        {%- endif -%}
-      </li>
+        </span></li>
+      {%- endif -%}
+      <li style="position: absolute; left: 50%; transform: translateX(-50%);"><span class="header">{{ header }}</span></li>
       {%- if license %}
       <li style="float:right"><a href="{{ license.url }}" target="_blank">License</a></li>
       {%- endif %}

themes/default-dark.css

@@ -39,6 +39,7 @@
 
 .tooltiptext {
   font-weight: 400;
+  background-color: #313537;
 }
 
 body {

themes/default.css

@@ -39,6 +39,7 @@
 
 .tooltiptext {
   font-weight: 400;
+  background-color: #ddd;
 }
 
 body {

themes/kjoe.css

@@ -62,6 +62,7 @@
 
 .tooltiptext {
   font-weight: 600;
+  background-color: #191313;
 }
 
 body {

themes/monokai-vibrant.css

@@ -40,6 +40,7 @@
 
 .tooltiptext {
   font-weight: 600;
+  background-color: #2c313a;
 }
 
 body {