css: better split medias

Reviewed-on: #6

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

@@ -0,0 +1,60 @@
+
+<h1>> Niusy </h1>
+<article id="content">
+
+    <h2> 2025/10/09 </h2>
+    <p>
+        <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>
+	Nowa strona listująca wszystkich <a href="/users.php">użytkowników</a>.
+    </p>    
+    
+    <h2> 2025/10/03 </h2>
+    <p>
+	Poprawiony interaktywny layout strony. Głównie css @media.
+    </p>
+    
+    <h2> 2025/09/30 </h2>
+    <p>
+	Formularz rejestracji wymusza podanie klucza SSH.
+    </p>
+
+    <h2> 2025/09/25 </h2>
+    <p>
+        <ul>
+            <li>Podstawowe wsparcie gemini protocol. Używamy serwera satellite</li>
+            <li>Strona wiki</li>
+        </ul>
+    </p>
+
+    <h2> 2025/09/20 </h2>
+    <p>
+	<ul>
+	    <li>Smoorg dołącza do tyldy jako wolontariusz, developer i admin</li>
+	    <li>Dodany podstawowy formularz rejestracji</li>
+	</ul>
+    </p>
+
+    
+    <h2> 2025/09/18 </h2>
+    <p>
+	v0id1st stworzył podwaliny serwera
+	<ul>
+    	    <li>skrypt dodający użytkowników</li>
+    	    <li>konfiguracja irc</li>
+    	    <li>podstawowa strona html+php</li>
+    	</ul>
+    </p>
+
+    <h2> 2025/07/22 </h2>
+    <p>
+	Początek prac.
+    </p>
+
+</article>

register.php

@@ -85,3 +85,4 @@ Poniższy formularz trafi do naszych administratorów, którzy go ocenią. Potra
 }
 
 ?>
+

static/css/main.css

@@ -17,6 +17,14 @@ body {
     font-family: "Helvetica", "Arial", sans-serif;
 }
 
+h1 {
+    margin-bottom: 1rem;
+}
+
+h2, h3, h4, h5, h6 {
+    margin: 0.5rem 0;
+}
+
 
 div.main-content {
     display: flex;
@@ -27,7 +35,6 @@ div.main-content {
 
 header#menu {
     display: flex;
-    flex-direction: column;
     border-width: 5px;
     border-color: var(--main);
     border-style: double;
@@ -65,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;
@@ -146,26 +153,67 @@ ul li {
   padding: 0.5rem;
   margin-left: 2rem;
 }
-@media only screen and (min-width: 900px) {
+@media only screen and (min-width: 1200px) {
     div.main-content {
         width: 60%;
     }
 }
 
 @media only screen 
-    and (min-width: 480px) 
-    and (max-width: 900px) {
+    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;
+    }
     .form-row {
         flex-direction: row;
     }
 }
 
-@media only screen and (max-device-width: 480px) {
-    article {
-	font-size: 1em;
+@media only screen and (max-width: 576px) {
+    header#menu {
+        flex-direction: column;
+        margin-bottom: 2rem;
     }
+    article#content {
+	font-size: 1em;
+        border: none;
+        border-color: none;
+        border-style: none;
+        border-radius: 0;
+        padding: 0rem;
+    }
+    pre.ascii {
+	    font-size: 0.5rem;
+    }
+
 }
 

users.php

@@ -1,7 +1,8 @@
 <?php 
 include 'header.php';
 ?>
-<article>
+<h1>> Users </h1>
+<article id="content">
 Lista użytkowników i linki do ich blogów
 <ul>
 <?php
@@ -9,7 +10,7 @@ $host=htmlspecialchars($_SERVER['SERVER_NAME']);
 //$host="";
 foreach (scandir("/home/") as $file) {
     if (in_array($file, array('.', '..'))) continue;
-    echo "<li><a href="/~$file">~$file</a></li>";
+    echo "<li><a href=\"/~$file\">~$file</a></li>";
 }
 
 ?>