From 03af91e1a1e546d947a3a50af30007af9767e39c Mon Sep 17 00:00:00 2001 From: Flo Greistorfer Date: Sun, 7 Jul 2024 23:57:08 +0200 Subject: [PATCH] changed info display position --- files/global.css | 212 ++++++++++++++++++------------------- templates/index.html.j2 | 11 +- themes/default-dark.css | 1 + themes/default.css | 1 + themes/kjoe.css | 1 + themes/monokai-vibrant.css | 1 + 6 files changed, 114 insertions(+), 113 deletions(-) diff --git a/files/global.css b/files/global.css index 7bc105a..c86118a 100644 --- a/files/global.css +++ b/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 { @@ -210,4 +104,108 @@ figure { text-align: center; 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; + } } \ No newline at end of file diff --git a/templates/index.html.j2 b/templates/index.html.j2 index d2f24ab..c92973e 100644 --- a/templates/index.html.j2 +++ b/templates/index.html.j2 @@ -19,15 +19,14 @@ {%- if parent %}
  • Parent Directory
    • {%- endif %} -
  • {{ header }} - {%- if info -%} - + {%- if info %} +
  • Info {%- for infoline in info -%} {{ infoline }}
    {%- endfor -%} -     - {%- endif -%} -
    • + + {%- endif -%} +
  • {{ header }}
    • {%- if license %}
  • License
    • {%- endif %} diff --git a/themes/default-dark.css b/themes/default-dark.css index d235c29..6a119e2 100644 --- a/themes/default-dark.css +++ b/themes/default-dark.css @@ -39,6 +39,7 @@ .tooltiptext { font-weight: 400; + background-color: #313537; } body { diff --git a/themes/default.css b/themes/default.css index e9f2213..ce74f88 100644 --- a/themes/default.css +++ b/themes/default.css @@ -39,6 +39,7 @@ .tooltiptext { font-weight: 400; + background-color: #ddd; } body { diff --git a/themes/kjoe.css b/themes/kjoe.css index 447168d..c7cf798 100644 --- a/themes/kjoe.css +++ b/themes/kjoe.css @@ -62,6 +62,7 @@ .tooltiptext { font-weight: 600; + background-color: #191313; } body { diff --git a/themes/monokai-vibrant.css b/themes/monokai-vibrant.css index c0f1fb2..efa3ace 100644 --- a/themes/monokai-vibrant.css +++ b/themes/monokai-vibrant.css @@ -40,6 +40,7 @@ .tooltiptext { font-weight: 600; + background-color: #2c313a; } body {