Merge pull request #11 from TRMSC:style-revisions

Style-revisions
TRMSC · Nov 6, 2023 · 3a82fcd · 3a82fcd
2 parents 68cffc1 + 89be2ea
commit 3a82fcd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 26 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -179,7 +179,7 @@ <h3>
           </sub>
         </div>
         <p>
-          <input type="button" id="imagescene-generate" class="bigbutton" value='Szene generieren'>
+          <input type="button" id="imagescene-generate" class="bigbutton s-w-100" value='Szene generieren'>
         </p>
       </div>
 
@@ -191,10 +191,10 @@ <h3>
           <label for="imagescene-result" class="miniheading">Code:</label>
           <textarea id="imagescene-result" name="imagescene-result" rows="6" spellcheck="false" wrap="off" readonly></textarea>
         </div>
-        <div>
-          <input id="imagescene-copy" type="button" value="In die Zwischenablage kopieren">
-          <input id="imagescene-download-html" type="button" value="Als HTML-Datei herunterladen">
-          <input id="imagescene-download-svg" type="button" value="Als SVG-Datei herunterladen">
+        <div id="result-container">
+          <input id="imagescene-copy" class="s-w-100" type="button" value="In die Zwischenablage kopieren">
+          <input id="imagescene-download-html" class="s-w-100" type="button" value="Als HTML-Datei herunterladen">
+          <input id="imagescene-download-svg" class="s-w-100" type="button" value="Als SVG-Datei herunterladen">
           <span id="imagescene-status"></span>
         </div>
       </div>

diff --git a/docs/src/style.css b/docs/src/style.css
@@ -8,22 +8,7 @@
 html {
     font-family: Verdana, Geneva, sans-serif, Tahoma;
     font-size: 12pt;
-    margin: 60px 250px;
-}
-@media (max-width: 1000px) {
-    html {
-        margin: 40px 80px;
-    }
-}
-@media (max-width: 800px) {
-    html {
-        margin: 30px 50px;
-    }
-}
-@media (max-width: 480px) {
-    html {
-        margin: 20px 25px;
-    }
+    margin: 100px 250px;
 }
 svg {
     border-radius: 10px;
@@ -76,11 +61,6 @@ input[type="button"]:hover {
     /*margin-bottom: 0.7em;*/
     margin: 20px 0px 10px 0px;
 }
-@media (max-width: 1000px) {
-    .select-container {
-        flex-direction: column;
-    }
-}
 .select-container input {
     width: 80px;
 }
@@ -134,4 +114,39 @@ footer {
     bottom: auto;
     font-size: smaller;
     text-align: right;
+}
+@media (max-width: 1200px) {
+    html {
+        margin: 65px 80px;
+    }
+    svg {
+        border-radius: 9px;
+    }
+}
+@media (max-width: 768px) {
+    html {
+        margin: 45px 50px;
+    }
+    svg {
+        border-radius: 8px;
+    }
+    .select-container {
+        flex-direction: column;
+    }
+}
+@media (max-width: 568px) {
+    html {
+        margin: 22px 25px;
+    }
+    svg {
+        border-radius: 6px;
+    }
+    #result-container {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+    .s-w-100 {
+        width: 100%;
+    }
 }