Początki optymalizacji na telefony

assets/css/baza.css

@@ -49,6 +49,49 @@ h1, h2, h3, h4, h5, h6, p {
     margin: 0%;
 }
 
+h1 {
+    font-size: 1.4rem;
+}
+
+h2 {
+    font-size: 1.2rem;
+}
+
+h3 {
+    font-size: 1.1rem;
+}
+
+h4 {
+    font-size: 1rem;
+}
+
+ol, ul {
+    margin: 0%;
+    padding: 0%;
+    padding-left: .5rem;
+}
+
+overflow-x-auto {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+@media (width: 600px) {
+    h1 {
+        font-size: initial;
+    }
+    h2 {
+        font-size: initial;
+    }
+    h3 {
+        font-size: initial;
+    }
+    h4 {
+        font-size: initial;
+    }
+}
+
 /* Linki */
 a, a:visited {
     font-size: large;

assets/css/main.css

@@ -121,6 +121,16 @@ footer div div ul {
     list-style: none;
 }
 
+#extra {
+    display: none;
+}
+
+@media (width: 600px) {
+    #extra {
+        display: flex;
+    }
+}
+
 /* Dodatkowe */
 .flex-row {
     flex-grow: 1;

assets/js/nawigacja.js

@@ -57,7 +57,7 @@ class Footer extends HTMLElement {
                     </div>
                     <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
                 </div>
-                <div style="flex-grow: 0; flex-direction: row;">
+                <div id="extra" style="flex-grow: 0; flex-direction: row;">
                     <iframe
                         src="https://youads.nonamesoft.xyz/ads/site"
                         title="YouAds Ads Site"

js-podstawy.html

@@ -48,7 +48,7 @@
                     <p id="zad4-tekst">Przykładowy tekst</p>
                     <hr>
                     <h5>Kolor tekstu</h5>
-                    <div class="flex-row">
+                    <div class="flex-row overflow-x-auto">
                         <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorRed)'">Czerwony</button>
                         <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorText)'">Podstawowy</button>
                         <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorGreen)'">Zielony</button>
@@ -56,22 +56,22 @@
                         <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorYellow)'">Żółte</button>
                     </div>
                     <h5>Rozmiar tekstu</h5>
-                    <div class="flex-row">
+                    <div class="flex-row overflow-x-auto">
                         <button onclick="document.getElementById('zad4-tekst').style.fontSize = '30pt'">30pt</button>
                         <button onclick="document.getElementById('zad4-tekst').style.fontSize = '50pt'">50pt</button>
                     </div>
                     <h5>Tło</h5>
-                    <div class="flex-row">
+                    <div class="flex-row overflow-x-auto">
                         <button onclick="document.getElementById('zad4-tekst').style.backgroundColor = ''">Brak</button>
                         <button onclick="document.getElementById('zad4-tekst').style.backgroundColor = '#ff0000'">Komunistyczne</button>
                     </div>
                     <h5>Ramka</h5>
-                    <div class="flex-row">
+                    <div class="flex-row overflow-x-auto">
                         <button onclick="document.getElementById('zad4-tekst').style.border = ''">Brak</button>
                         <button onclick="document.getElementById('zad4-tekst').style.border = '.3rem solid var(--colorOverlay1)'">Ta co wszędzie</button>
                     </div>
                     <h5>Tekst</h5>
-                    <div class="flex-row">
+                    <div class="flex-row overflow-x-auto">
                         <button onclick="document.getElementById('zad4-tekst').innerText = prompt('Nowy tekst')">Zmień tekst</button>
                         <button onclick="document.getElementById('zad4-tekst').innerText = 'Przykładowy tekst'">Przywróć pierwotny tekst</button>
                     </div>