media chaos

* dodane media na desktop (900+)
* dodane media na 480px
* dodane media dla telefonow (max-device-width)

static/css/main.css

@@ -17,17 +17,17 @@ body {
     font-family: "Helvetica", "Arial", sans-serif;
 }
 
+
 div.main-content {
     display: flex;
     flex-direction: column;
-    width: 60%;
     margin: 0 auto;
     padding: 1rem;
 }
 
 header#menu {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     border-width: 5px;
     border-color: var(--main);
     border-style: double;
@@ -35,13 +35,6 @@ header#menu {
     margin-bottom: 2rem;
 }
 
-@media (max-width: 850px) {
-    header#menu {
-        flex-direction: column;
-    }
-}
-
-
 header#menu a {
     padding: 12px;
     color: var(--main);
@@ -74,7 +67,7 @@ article#content {
     border-radius: 5px;
     margin-top: 2rem;
     padding: 1rem;
-    gap: 8px;
+    gap: .5rem;
     padding-block: 2rem;
 }
 
@@ -104,7 +97,8 @@ footer#footer > *:not(:last-child)::after {
 
 pre.ascii {
     margin-bottom: 2rem;
-    font-size: 15px;
+    font-size: 1rem;
+    overflow: auto;
 }
 
 .user_home {
@@ -116,6 +110,7 @@ pre.ascii {
 
 .form-row {
   display: flex;
+  flex-direction: column;
   justify-content: flex-end;
   padding: .5em;
 }
@@ -151,3 +146,26 @@ ul li {
   padding: 0.5rem;
   margin-left: 2rem;
 }
+@media only screen and (min-width: 900px) {
+    div.main-content {
+        width: 60%;
+    }
+}
+
+@media only screen 
+    and (min-width: 480px) 
+    and (max-width: 900px) {
+    header#menu {
+        flex-direction: row;
+    }
+    .form-row {
+        flex-direction: row;
+    }
+}
+
+@media only screen and (max-device-width: 480px) {
+    article {
+	font-size: 1em;
+    }
+}
+