From cd5cda5f09ebfdbb46388f5728be9a1f11035378 Mon Sep 17 00:00:00 2001
From: rattatwinko <seppmutterman@gmail.com>
Date: Mon, 29 Sep 2025 11:40:15 +0200
Subject: [PATCH] did some changes to the index style. now works for mobile
 devices!

---
 css/indexer.css      | 262 +++++++++++++++++++++++++++++++++++++++++++
 html/base/index.html | 169 ++++------------------------
 2 files changed, 286 insertions(+), 145 deletions(-)
 create mode 100644 css/indexer.css

diff --git a/css/indexer.css b/css/indexer.css
new file mode 100644
index 0000000..b49bee0
--- /dev/null
+++ b/css/indexer.css
@@ -0,0 +1,262 @@
+* {
+    box-sizing: border-box;
+}
+
+body { 
+    font-family: Arial, sans-serif; 
+    margin: 0;
+    padding: 20px;
+    background-color: #fff;
+    color: #0f1111;
+    font-size: 16px;
+}
+
+h1 { 
+    color: #333;
+    font-size: clamp(1.5rem, 5vw, 2rem);
+    margin: 0 0 1rem 0;
+}
+
+hr { 
+    width: 100%;
+    border: none;
+    border-top: 1px solid #ddd;
+}
+
+/* LIST STYLES */
+ul { 
+    padding-left: clamp(20px, 10vw, 100px);
+    margin-top: 0.5em;
+    list-style: none;
+}
+
+li { 
+    list-style: none; 
+    background: url("../../css/icons/item.webp") no-repeat left center; 
+    background-size: 15px 20px; 
+    padding: 12px 0 12px 30px;
+    font-size: clamp(1rem, 2.5vw, 1.125rem);
+    line-height: 1.5;
+    transition: all 0.3s ease;
+    margin-bottom: 8px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+}
+
+li:hover { 
+    font-size: clamp(1.05rem, 2.6vw, 1.2rem);
+    padding-left: 35px;
+}
+
+li a {
+    display: block;
+    width: 100%;
+    word-break: break-word;
+}
+
+#available { 
+    padding-left: clamp(20px, 5vw, 40px);
+    margin-bottom: 0.5em;
+    font-size: clamp(1rem, 2.5vw, 1.125rem);
+    display: flex;
+    align-items: center;
+}
+
+#available img {
+    margin-right: 8px;
+}
+
+#nojs { 
+    display: inline-flex;
+    align-items: center;
+    color: #333;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+#nojs img {
+    margin-right: 8px;
+    width: clamp(35px, 8vw, 45px);
+    height: clamp(35px, 8vw, 45px);
+}
+
+/* NOSCRIPT LIST */
+#nonenormalul { 
+    list-style: disc inside; 
+    margin: 1em 0; 
+    padding-left: clamp(20px, 5vw, 40px);
+}
+
+#nonenormalul li { 
+    list-style: inherit; 
+    margin: 0.5em 0;
+    padding: 8px 0;
+    background: none;
+    min-height: auto;
+    font-size: clamp(0.9rem, 2.2vw, 1rem);
+}
+
+#nonenormalul li:hover { 
+    font-size: clamp(0.95rem, 2.3vw, 1.05rem);
+}
+
+button {
+    margin: 5px 5px 5px 0;
+    background-image: linear-gradient(#f7f8fa, #e7e9ec);
+    border: 1px solid #adb1b8;
+    border-radius: 3px;
+    box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
+    color: #0f1111;
+    cursor: pointer;
+    display: inline-block;
+    font-family: "Amazon Ember", Arial, sans-serif;
+    font-size: clamp(0.875rem, 2vw, 0.9375rem);
+    min-height: 44px;
+    padding: 8px 16px;
+    outline: 0;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+}
+
+button:active { 
+    border-color: #a2a6ac;
+    transform: translateY(1px);
+}
+
+button:hover { 
+    border-color: #979aa1;
+    background-image: linear-gradient(#e7e9ec, #d7d9dc);
+}
+
+button:focus { 
+    border-color: #e77600;
+    box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
+    outline: 0;
+}
+
+button:disabled, button[disabled] { 
+    color: #999;
+    border-color: #ccc;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* INPUT STYLES */
+input#searchbox {
+    background-color: #fff;
+    color: #0f1111;
+    border: 1px solid #adb1b8;
+    border-radius: 3px;
+    padding: 10px 14px;
+    font-size: clamp(0.9375rem, 2vw, 1rem);
+    min-height: 44px;
+    width: 100%;
+    max-width: 400px;
+    transition: all 0.2s ease;
+}
+
+input#searchbox:focus {
+    border-color: #e77600;
+    box-shadow: rgba(228, 121, 17, .3) 0 0 3px 2px;
+    outline: 0;
+}
+
+/* DARK MODE */
+body.dark-mode {
+    background-color: #1e1e1e;
+    color: #e0e0e0;
+}
+
+body.dark-mode h1 { 
+    color: #f0f0f0;
+}
+
+body.dark-mode hr {
+    border-top-color: #444;
+}
+
+body.dark-mode #nojs { 
+    color: #f0f0f0;
+}
+
+body.dark-mode li { 
+    background-image: url("../../css/icons/item.webp");
+}
+
+body.dark-mode button {
+    background-image: linear-gradient(#3a3a3a, #2a2a2a);
+    color: #e0e0e0;
+    border-color: #555;
+    box-shadow: rgba(0,0,0,.6) 0 1px 0 inset;
+}
+
+body.dark-mode button:hover {
+    background-image: linear-gradient(#454545, #353535);
+    border-color: #666;
+}
+
+body.dark-mode input#searchbox {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+    border: 1px solid #555;
+}
+
+body.dark-mode input#searchbox:focus {
+    border-color: #e77600;
+}
+
+body.dark-mode a {
+    color: #4ea1ff;
+}
+
+body.dark-mode a:visited {
+    color: #9a7aff;
+}
+
+/* MOBILE OPTIMIZATIONS */
+@media (max-width: 768px) {
+    body {
+    padding: 15px;
+    }
+
+    li {
+    padding: 14px 0 14px 35px;
+    background-size: 18px 23px;
+    }
+
+    button {
+    width: 100%;
+    margin: 5px 0;
+    }
+
+    input#searchbox {
+    max-width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+    padding: 10px;
+    }
+
+    ul {
+    padding-left: 10px;
+    }
+
+    #available {
+    padding-left: 10px;
+    }
+}
+
+/* HIGH DPI DISPLAYS */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    li {
+    background-size: 15px 20px;
+    }
+}
\ No newline at end of file
diff --git a/html/base/index.html b/html/base/index.html
index 973cb27..09d6d6d 100644
--- a/html/base/index.html
+++ b/html/base/index.html
@@ -1,157 +1,37 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Auto Index</title>
   <script src="../../js/shared/theme.js" async defer></script>
-  <style>
-    body.dark-mode {
-      background-color: #1e1e1e;
-      color: #e0e0e0;
-    }
-    body.dark-mode h1 { color: #f0f0f0; }
-    body.dark-mode #nojs { color: #f0f0f0; }
-    body.dark-mode li { color: #e0e0e0; }
-    body.dark-mode button {
-      background-image: linear-gradient(#3a3a3a ,#2a2a2a);
-      color: #e0e0e0;
-      border-color: #555 #444 #333;
-      box-shadow: rgba(0,0,0,.6) 0 1px 0 inset;
-    }
-    body.dark-mode input#searchbox {
-      background-color: #2a2a2a;
-      color: #e0e0e0;
-      border: 1px solid #555;
-    }
-
-    body.darkmode #nojs {
-      color: #e0e0e0;
-    }
-
-    body.dark-mode a {
-        color: #4ea1ff;
-    }
-
-    body.dark-mode a:visited {
-        color: #9a7aff;
-    }
-
-
-    body { 
-        font-family: Arial, sans-serif; 
-        margin: 20px; 
-        background-color: #fff;
-        color: #0f1111;
-        /*transition: background-color 0.3s, color 0.3s; || enable this if you want a transition!*/
-    }
-
-    h1 { color: #333; transition: color 0.3s; }
-
-    hr { width: auto; }
-
-    li { 
-        list-style: none; 
-        background: url("../../css/icons/item.webp") no-repeat left center; 
-        background-size: 15px 20px; 
-        padding-left: 25px; 
-        transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); 
-        padding-bottom: 5px; 
-    }
-    li:hover { font-size: larger; }
-
-    #available { padding-left: 40px; margin-bottom: 0.1em; }
-    ul { padding-left: 100px; margin-top: 0.2em; }
-
-    #nojs { display: inline-block; color: black; transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1); }
-
-    #nonenormalul { 
-        list-style: disc inside; 
-        margin: 1em 0; 
-        padding-left: 40px; 
-        background: none; 
-    }
-    #nonenormalul li { 
-        list-style: inherit; 
-        margin: 0; 
-        padding: 0; 
-        background: none; 
-        transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); 
-    }
-    #nonenormalul li:hover { font-size: larger; }
-
-    /* BUTTON STYLES */
-    button {
-      margin-right: 5px;
-      background-image: linear-gradient(#f7f8fa ,#e7e9ec);
-      border-color: #adb1b8 #a2a6ac #8d9096;
-      border-style: solid;
-      border-width: 1px;
-      border-radius: 3px;
-      box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
-      box-sizing: border-box;
-      color: #0f1111;
-      cursor: pointer;
-      display: inline-block;
-      font-family: "Amazon Ember", Arial, sans-serif;
-      font-size: 13px;
-      height: 29px;
-      outline: 0;
-      overflow: hidden;
-      padding: 0 11px;
-      text-align: center;
-      text-decoration: none;
-      text-overflow: ellipsis;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: manipulation;
-      white-space: nowrap;
-      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
-    }
-    button:active { border-bottom-color: #a2a6ac; }
-    button:active:hover { border-bottom-color: #a2a6ac; }
-    button:hover { border-color: #a2a6ac #979aa1 #82858a; }
-    button:focus { border-color: #e77600; box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px; outline: 0; }
-    button:disabled, button[disabled]{ color: gray; border-color: gray; }
-
-    /* DARK MODE */
-    body.dark-mode {
-        background-color: #1e1e1e;
-        color: #e0e0e0;
-    }
-    body.dark-mode h1 { color: #f0f0f0; }
-    body.dark-mode #nojs { color: #fff; }
-    body.dark-mode li { background: url("../../css/icons/item.webp") no-repeat left left; }
-    body.dark-mode button {
-        background-image: linear-gradient(#3a3a3a ,#2a2a2a);
-        color: #e0e0e0;
-        border-color: #555 #444 #333;
-        box-shadow: rgba(0,0,0,.6) 0 1px 0 inset;
-    }
-  </style>
+  <link rel="icon" type="image/x-icon" href="../../css/favicon/favicon.ico">
+  <link rel="stylesheet" href="../../css/indexer.css">
   <script>
     console.log("javascript is enabled! good!");
-    document.write('<h1 id="nojs" style="display: flex; align-items: center;cursor:pointer;" onclick="toggleDarkMode();"><img src="../../css/icons/folder.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
+    document.write('<h1 id="nojs" style="display: flex; align-items: center; cursor: pointer;" onclick="toggleDarkMode();"><img src="../../css/icons/folder.webp" alt="Folder icon" />Index of PyPost</h1>');
   </script>
-  <link rel="icon" type="image/x-icon" href="../../css/favicon/favicon.ico">
 </head>
 <body>
-    <noscript>
-        <div style="display: inline-flex; align-items: center;">
-          <img src="../../css/icons/script.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />
-          <h1 id="nojs" style="margin: 0;">Please enable Javascript!</h1>
-        </div>
-        <p>
-           <i><strong>If you might be wondering, what does the Script do?</strong></i><br/>
-             <ul id="nonenormalul">
-              <li>It strips the .HTML ending from each file you see in the list below</li>
-              <li>It isnt necessary, but visually tweaks the page.</li>
-              <li>It enables the "Back" Function for Headers</li>
-              <li>It enables Searching and Sorting of the Page-Display</li>
-              <li>It is essential for downloading Markdown-Source</li>
-             </ul>
-        </p>
-    </noscript>
+  <noscript>
+    <div style="display: inline-flex; align-items: center; flex-wrap: wrap;">
+      <img src="../../css/icons/script.webp" width="45" height="45" alt="Script icon" style="margin-right: 8px;" />
+      <h1 id="nojs" style="margin: 0;">Please enable Javascript!</h1>
+    </div>
+    <p>
+      <i><strong>If you might be wondering, what does the Script do?</strong></i><br/>
+      <ul id="nonenormalul">
+        <li>It strips the .HTML ending from each file you see in the list below</li>
+        <li>It isn't necessary, but visually tweaks the page.</li>
+        <li>It enables the "Back" Function for Headers</li>
+        <li>It enables Searching and Sorting of the Page-Display</li>
+        <li>It is essential for downloading Markdown-Source</li>
+      </ul>
+    </p>
+  </noscript>
+  
   <p id="available">
-    <img src="../../css/icons/available.webp" width="40" height="40" style="vertical-align: middle; display: inline; padding-right: 5px;" />
+    <img src="../../css/icons/available.webp" width="40" height="40" alt="Available icon" />
     Available pages:
   </p>
 
@@ -163,4 +43,3 @@
   <script src="../../js/ulorder.js" defer></script>
 </body>
 </html>
-