From 02703bbd638364d77b286d0c97ab8e685882286a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Ka=C5=88ka?=
 <LukasKanka@users.noreply.github.com>
Date: Thu, 11 Jan 2024 18:08:50 +0100
Subject: [PATCH] =?UTF-8?q?Responzivn=C3=AD=20web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  62 +++++++++++++-----------
 style.css  | 138 ++++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 127 insertions(+), 73 deletions(-)

diff --git a/index.html b/index.html
index a74a99d..06bd3dd 100644
--- a/index.html
+++ b/index.html
@@ -36,38 +36,44 @@
     </div>
     <hr />
 
+
     <div class="flexbox">
         <div class="navigation">
-            <table>
-                <caption>
-                    Rubriky:
-                </caption>
-                <tr>
-                    <th>
-                        <li>
-                            <a class="button" href="automatizovane-testovani.html">Automatizované testování</a>
-                        </li>
-                        <li><a class="button" href="nastroje.html">Nástroje</a></li>
-                        <li>
-                            <a class="button" href="penetracni-testovani.html">Penetrační testování</a>
-                        </li>
-                        <li>
-                            <a class="button" href="testing-obecne.html">Testing obečně</a>
-                        </li>
-                        <li>
-                            <a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních aplikací</a>
-                        </li>
-                        <li>
-                            <a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a>
-                        </li>
-                        <li>
-                            <a class="button" href="zatezove-testovani.html">Zátěžové testování</a>
-                        </li>
-                    </th>
-                </tr>
-            </table>
+            <div class="dropdown-content
+            ">
+                <table>
+                    <caption>
+                        Rubriky:
+                    </caption>
+                    <tr>
+                        <th>
+                            <li>
+                                <a class="button" href="automatizovane-testovani.html">Automatizované testování</a>
+                            </li>
+                            <li><a class="button" href="nastroje.html">Nástroje</a></li>
+                            <li>
+                                <a class="button" href="penetracni-testovani.html">Penetrační testování</a>
+                            </li>
+                            <li>
+                                <a class="button" href="testing-obecne.html">Testing obečně</a>
+                            </li>
+                            <li>
+                                <a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních
+                                    aplikací</a>
+                            </li>
+                            <li>
+                                <a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a>
+                            </li>
+                            <li>
+                                <a class="button" href="zatezove-testovani.html">Zátěžové testování</a>
+                            </li>
+                        </th>
+                    </tr>
+                </table>
+            </div>
         </div>
 
+
         <div class="content">
             <p class="big-text">Testing Docs CZ</p>
             <p>
diff --git a/style.css b/style.css
index 605e2c3..0343fcf 100644
--- a/style.css
+++ b/style.css
@@ -1,100 +1,148 @@
 :root {
-    --special_black: rgb(11, 2, 2);
-    --special_white: white;
-    --special_grey: grey;
-    --special_black_original: black;
+  --special_black: rgb(11, 2, 2);
+  --special_white: white;
+  --special_grey: grey;
+  --special_black_original: black;
 }
 
+/* Body */
 body {
-    background-color: var(--special_black);
-    color: var(--special_white);
-    width: calc(100% - 32px);
-    max-width: 1200px;
-    margin: auto;
+  background-color: var(--special_black);
+  color: var(--special_white);
+  width: calc(100% - 32px);
+  max-width: 1200px;
+  margin: auto;
+}
+
+@media screen and (max-width: 600px) {
+  body {
+    width: calc(100% - 16px);
+  }
 }
 
 .menu-item {
-    display: inline-block;
-    width: 200px;
-    height: 20px;
-    position: static;
-    text-align: center;
+  display: inline-block;
+  width: 200px;
+  height: 20px;
+  position: static;
+  text-align: center;
 }
 
 .flexbox {
-    display: flex;
+  display: flex;
+  /* flex-direction: column; */
 }
 
 .navigation {
-    flex: 1;
-    /* margin: 0px 0px 0px 50px; */
-    padding: 25px;
-    /* margin-top: 20px; */
+  flex: 1;
+  /* margin: 0px 0px 0px 50px; */
+  padding: 25px;
+  /* margin-top: 20px; */
 }
 
+/* .dropdown-content {
+  display: none;
+} */
+
 .content {
-    flex: 3;
-    margin-bottom: 25px;
+  flex: 3;
+  margin-bottom: 25px;
+}
+
+@media screen and (max-width: 600px) {
+  /* Nastavení sloupcu na sloupce mobil */
+  .flexbox {
+    flex-direction: column;
+  }
+
+  /* ˇPořadí zobrazení */
+  .navigation {
+    order: -1;
+    flex-direction: column;
+  }
+
+  /* škrývání */
+  .navigation:hover .dropdown-content {
+    display: block;
+  }
+
+  /* roletka posuvník */
+  .dropdown-content {
+    overflow: auto;
+    max-height: 100px; /* or any other value */
+  }
+
+  .content {
+    order: 1;
+    flex-direction: column;
+  }
 }
 
 .articles {
-    margin: 0px 50px 0px 0px;
-    margin-top: 25px;
+  margin: 0px 50px 0px 0px;
+  margin-top: 25px;
+}
+
+@media screen and (max-width: 600px) {
+  .articles {
+    display: none;
+  }
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
+  position: fixed;
+  bottom: 0;
 }
 
 .big-text {
-    font-size: 40px;
-    text-align: center;
+  font-size: 40px;
+  text-align: center;
 }
 
 h1 {
-    font-family: cursive;
-    margin: 0px 0px 0px 30px;
+  font-family: cursive;
+  margin: 0px 0px 0px 30px;
 }
 
 h2 {
-    font-family: cursive;
-    margin: 0px 0px 0px 30px;
+  font-family: cursive;
+  margin: 0px 0px 0px 30px;
 }
 
 /*.link-white*/
 .button {
-    color: var(--special_white);
+  color: var(--special_white);
 }
 
 td,
 th {
-    border: 1px solid var(--special_white);
-    padding: 10px;
+  border: 1px solid var(--special_white);
+  padding: 10px;
 }
 
 .code-box {
-    border: 1px solid var(--special_white);
-    padding: 10px;
-    background-color: var(--special_grey);
-    font-family: monospace;
-    color: var(--special_black_original);
-    font-weight: bold;
-    border-radius: 8px;
+  border: 1px solid var(--special_white);
+  padding: 10px;
+  background-color: var(--special_grey);
+  font-family: monospace;
+  color: var(--special_black_original);
+  font-weight: bold;
+  border-radius: 8px;
 }
 
 .not-dot {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 .link {
-    color: var(--special_white);
+  color: var(--special_white);
+  /*cursor: unset;*/
 }
 
 .strong-text {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .link-black {
-    color: var(--special_black_original);
+  color: var(--special_black_original);
 }