From a78ac225108cbac76eb436559740001713672c75 Mon Sep 17 00:00:00 2001
From: JustSteel <SteelSamko2000@gmail.com>
Date: Sun, 21 Mar 2021 20:39:58 +0100
Subject: [PATCH] =?UTF-8?q?Responz=C3=ADvnos=C5=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dokončil som responzívnosť na stránke.
Pravdepodobne sa bude ešte meniť keď popridávam ďalšie veci
---
 websites/{travellly.html => WikiSpot.html} |   5 +-
 websites/{styles.css => WikiSpotCSS.css}   | 128 ++++++++++++++++-----
 2 files changed, 100 insertions(+), 33 deletions(-)
 rename websites/{travellly.html => WikiSpot.html} (96%)
 rename websites/{styles.css => WikiSpotCSS.css} (63%)

diff --git a/websites/travellly.html b/websites/WikiSpot.html
similarity index 96%
rename from websites/travellly.html
rename to websites/WikiSpot.html
index 7c3036c..e5a0f2c 100644
--- a/websites/travellly.html
+++ b/websites/WikiSpot.html
@@ -25,14 +25,15 @@
                     <tr><td><a href="#" class="expandable">CONTACT</a></td></tr>
                 </table>
             </div>
+        </nav>
     </header>
-    <article>
+    <!--<article>
         <div class="an" class="next" id="android"><a href="http://localhost:8000/files/0/PQ.apk">Android</a></div>
     </article>
     <section>
         <div id="phone" class="next"></div>
         <div id="ref"></div>
         <div id="ref2"></div>
-    </section>
+    </section>-->
 </body>
 </html>
\ No newline at end of file
diff --git a/websites/styles.css b/websites/WikiSpotCSS.css
similarity index 63%
rename from websites/styles.css
rename to websites/WikiSpotCSS.css
index 836c1e5..d95e3b7 100644
--- a/websites/styles.css
+++ b/websites/WikiSpotCSS.css
@@ -1,7 +1,24 @@
+/* elements */
+body{
+    background-color: #00B4D8;
+    margin: 0;
+}
+header{
+    background-color:#0077B6;
+    padding-bottom: 23px;
+}
+img{
+    padding-top: 25px;
+    padding-left: 25px;
+}
 nav{
     float: right;
     position: sticky;
 }
+ul{
+    margin: 0;
+    margin-left: 280px;
+}
 li{
     padding-top: 50px;
     padding-bottom: 48px;
@@ -14,32 +31,24 @@ li{
     transition: background-color 0.5s;
     position: relative;
 }
-header{
-    background-color:#0077B6;
-    padding-bottom: 23px;
-}
-body{
-    background-color: #00B4D8;
+#contact{
     margin: 0;
 }
-img{
-    padding-top: 25px;
-    padding-left: 25px;
-}
 li:hover{
     background-color: rgba(79, 80, 80, 0.356);
     transition: ease-in-out;
     transition: background-color 0.5s;
 
 }
-ul{
-    margin: 0;
-    margin-left: 280px;
+a{
+    text-decoration: none;
+    color: #FFFFFF;
 }
 label{
     visibility: collapse;
     user-select: none;
 }
+/* classes */
 .expandable{
     visibility: collapse;
     display: block;
@@ -60,6 +69,7 @@ label{
     margin-top: 340px;
     margin-left: 150px;
 }
+/* IDs */
 #here{
     margin-top: 150px;
 }
@@ -92,34 +102,31 @@ label{
     border-radius: 50%;
 }
 #phone, #ref, #ref2, #android{
-    display: inline-block;
+    display: inline;
     float: left;
 }
-a{
-    text-decoration: none;
-    color: #FFFFFF;
+#check{
+    display: none;
 }
+/* responsive */
 @media (max-width: 1250px){
-    li{
-        font-size: 15px;
-        padding-top: 52px;
-        padding-bottom: 50.5px;
-    }
     ul{
-        margin-top: -98px;
-        margin-left: 353.5px;
+        margin-top: 0px;
+        margin-left: 0px;
     }
 }
-@media (max-width: 825px){
+@media (max-width: 955px){
+    #check:checked ~ * .expandable{
+        visibility: visible;
+    }
     ul{
         visibility: collapse;
         padding: 0;
     }
-    
     label{
         font-size: 40px;
         float: right;
-        margin-top: -86px;
+        margin-top: -90px;
         margin-right: 45px;
         position: relative;
         visibility: visible;
@@ -135,10 +142,69 @@ a{
         font-size: 20px;
         text-align: center;
     }
+    .menu{
+        position: relative;
+        margin-left: -12em;
+    }
+
 }
-#check{
-    display: none;
+@media (max-width: 914px){
+    label{
+        font-size: 40px;
+        float: right;
+        margin-top: -90px;
+        margin-right: 45px;
+        position: relative;
+    }
+    .menu{
+        margin-top: -97px;
+    }
 }
-#check:checked ~ * .expandable{
-    visibility: visible;
+@media (max-width: 860px){
+    label{
+        font-size: 40px;
+        float: right;
+        margin-top: -90px;
+        margin-right: 45px;
+        position: relative;
+    }
+}
+@media (max-width: 840px){
+    label{
+        font-size: 40px;
+        float: right;
+        margin-top: -90px;
+        margin-right: 45px;
+        position: relative;
+    }
+}
+@media (max-width: 692px){
+    label{
+        font-size: 40px;
+        float: right;
+        margin-top: -90px;
+        margin-right: 45px;
+        position: relative;
+    }
+    .menu{
+        margin-top: -217px;
+    }
+}
+@media (max-width: 635px){
+    label{
+        font-size: 40px;
+        float: right;
+        margin-top: -90px;
+        margin-right: 45px;
+        position: relative;
+    }
+}
+@media (max-width: 618px){
+    label{
+        font-size: 40px;
+        float: right;
+        margin-top: -90px;
+        margin-right: 45px;
+        position: relative;
+    }
 }
\ No newline at end of file