css: better split medias

index.php

@@ -51,11 +51,13 @@ $slogan = $slogans[rand(0, count($slogans) - 1)];
 foreach($recent as $user => $date) {
     echo "<a class=\"link\" href=\"/~".$user."/\"><p class=\"user_home\"><span>drwxr-xr-x</span><span>".rand(1,9)."</span><span>".$user."</span><span>".$user."</span><span>".rand(1,19)."</span><span>".date("M d H:i", $date)."</span><span>".$user."</span></p></a>";
 }
+
 ?>
 </article>
 
 <?php
 
+include 'news.php';
 include 'footer.php';
 
 ?>

news.php

@@ -1,69 +1,60 @@
-<?php
-include 'header.php' 
-?>
 
-<h1>> News </h1>
+<h1>> Niusy </h1>
 <article id="content">
 
     <h2> 2025/10/09 </h2>
     <p>
-	Introduced <a href="https://cloud.tylda.org">nextcloud</a> instance. We're slowly reaching linux and fediverse community promoting the initiative.
+        <ul>
+            <li>Założyliśmy instancję <a href="https://cloud.tylda.org">nextcloud</a>. Powoli odzywamy się do środowiska linuxowego i fediverse promując inicjatywę.</li>
+            <li>Niusy dodane na główną</li>
+        </ul>
     </p>    
 
     <h2> 2025/10/08 </h2>
     <p>
-	Introduced <a href="/users.php">users page</a>, which lists all user's web pages.
+	Nowa strona listująca wszystkich <a href="/users.php">użytkowników</a>.
     </p>    
     
     <h2> 2025/10/03 </h2>
     <p>
-	Work on interactive layout for web. Mostly css @media stuff.
+	Poprawiony interaktywny layout strony. Głównie css @media.
     </p>
     
     <h2> 2025/09/30 </h2>
     <p>
-        Use SSH key as default way of logging in and other minor changes to the registration form.
+	Formularz rejestracji wymusza podanie klucza SSH.
     </p>
 
     <h2> 2025/09/25 </h2>
     <p>
         <ul>
-            <li>Basic gemini setup is done. We deicided to go with satellite server.</li>
+            <li>Podstawowe wsparcie gemini protocol. Używamy serwera satellite</li>
-            <li>Wiki page.</li>
+            <li>Strona wiki</li>
         </ul>
     </p>
 
     <h2> 2025/09/20 </h2>
     <p>
 	<ul>
-	    <li>
+	    <li>Smoorg dołącza do tyldy jako wolontariusz, developer i admin</li>
-		Smoorg joins tylda volunteering as admin and developer.
+	    <li>Dodany podstawowy formularz rejestracji</li>
-	    </li>
-	    <li>
-		Registration form foundation
-	    </li>
 	</ul>
     </p>
 
     
     <h2> 2025/09/18 </h2>
     <p>
-	v0id1st introduced basic setup
+	v0id1st stworzył podwaliny serwera
 	<ul>
-    	    <li>script to invite users</li>
+    	    <li>skrypt dodający użytkowników</li>
-    	    <li>irc configuration</li>
+    	    <li>konfiguracja irc</li>
-    	    <li>basic html webpage</li>
+    	    <li>podstawowa strona html+php</li>
     	</ul>
     </p>
 
     <h2> 2025/07/22 </h2>
     <p>
-	Early work is getting done. VPS hosted, zfs volumes per user.
+	Początek prac.
     </p>
-    
 
 </article>
-
-<?php
-include 'footer.php' 
-?>

static/css/main.css

@@ -72,7 +72,7 @@ article#content {
     border-color: var(--main);
     border-style: double;
     border-radius: 5px;
-    margin-top: 2rem;
+    margin: 2rem 0;
     padding: 1rem;
     gap: .5rem;
     padding-block: 2rem;
@@ -160,8 +160,36 @@ ul li {
 }
 
 @media only screen 
-    and (min-width: 480px) 
+    and (min-width: 576px) 
+    and (max-width: 768px) {
+    header#menu {
+        flex-direction: column;
+    }
+    .form-row {
+        flex-direction: row;
+    }
+    pre.ascii {
+	    font-size: 0.8rem;
+    }
+}
+@media only screen 
+    and (min-width: 768px) 
+    and (max-width: 992px) {
+    header#menu {
+        flex-direction: column;
+    }
+    .form-row {
+        flex-direction: row;
+    }
+}
+@media only screen 
+    and (min-width: 992px) 
     and (max-width: 1200px) {
+}
+
+@media only screen 
+    and (min-width: 1200px) 
+    and (max-width: 1400px) {
     header#menu {
         flex-direction: column;
     }
@@ -170,12 +198,22 @@ ul li {
     }
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 576px) {
     header#menu {
         flex-direction: column;
+        margin-bottom: 2rem;
     }
-    article {
+    article#content {
 	font-size: 1em;
+        border: none;
+        border-color: none;
+        border-style: none;
+        border-radius: 0;
+        padding: 0rem;
     }
+    pre.ascii {
+	    font-size: 0.5rem;
+    }
+
 }