From 537c81e244eadd664ef23a38f6cf663b780f4e4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20Petr=C3=A1=C5=88?= <marcelpetran55@gmail.com>
Date: Fri, 26 Apr 2019 15:52:50 +0200
Subject: [PATCH] Overlay navigation optimalization for bigger screens

---
 cs/home.html   | 32 ++++++++++++++++++--------------
 css/master.css | 29 +++++++++++++++++++----------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/cs/home.html b/cs/home.html
index d9c2d92..561ef03 100644
--- a/cs/home.html
+++ b/cs/home.html
@@ -24,24 +24,28 @@
         </div>
       </div>
       <ul>
-        <li>
-          <a href="#">DOMŮ</a>
-        </li>
-        <li>
-          <a href="#">KALENDÁŘ</a>
-        </li>
-        <li>
-          <a href="#">AKTUALITY</a>
-        </li>
-        <li>
-          <a href="#">ČLENSTVÍ</a>
-        </li>
+        <div class="container-nav-top">
           <li>
-            <a href="#">SEKCE</a>
+            <a href="#">DOMŮ</a>
           </li>
           <li>
-            <a href="#">EN</a>
+            <a href="#">KALENDÁŘ</a>
           </li>
+          <li>
+            <a href="#">AKTUALITY</a>
+          </li>
+          <li>
+            <a href="#">ČLENSTVÍ</a>
+          </li>
+        </div>
+        <div class="container-nav-bottom">
+            <li>
+              <a href="#">SEKCE</a>
+            </li>
+            <li>
+              <a href="#">EN</a>
+            </li>
+        </div>    
       </ul>
     </nav>
 
diff --git a/css/master.css b/css/master.css
index d828f50..05a615c 100644
--- a/css/master.css
+++ b/css/master.css
@@ -265,13 +265,22 @@ nav {
 nav ul {
   list-style-type: none;
   margin: 1em auto 0 auto;
-  display: grid;
-  grid-template-rows: repeat(6, 3.5em);
-  justify-content: space-evenly;
-  text-align: center;
+  display: block;
   width: 80%;
   padding: 0;
 }
+.container-nav-top{
+  display: grid;
+  grid-template-rows: repeat(4, 3.5em);
+  justify-content: space-evenly;
+  text-align: center;
+}
+.container-nav-bottom{
+  display: grid;
+  grid-template-rows: repeat(2, 3.5em);
+  justify-content: space-evenly;
+  text-align: center;
+}
 nav ul a{
   color:#4A4A4A;
   font-weight: bold;
@@ -343,27 +352,27 @@ div.-right{
   animation: show-x .3s .5s forwards;
   -webkit-animation: show-x .3s .5s forwards;
 }
-.active li:nth-of-type(1){
+.active div.container-nav-top li:nth-of-type(1){
   animation: menu-item .25s forwards .35s ease-in-out;
   -webkit-animation: menu-item .25s forwards .35s ease-in-out;
 }
-.active li:nth-of-type(2){
+.active div.container-nav-top li:nth-of-type(2){
   animation: menu-item .25s forwards .40s ease-in-out;
   -webkit-animation: menu-item .25s forwards .40s ease-in-out;
 }
-.active li:nth-of-type(3){
+.active div.container-nav-top li:nth-of-type(3){
   animation: menu-item .25s forwards .45s ease-in-out;
   -webkit-animation: menu-item .25s forwards .45s ease-in-out;
 }
-.active  li:nth-of-type(4){
+.active  div.container-nav-top li:nth-of-type(4){
   animation: menu-item .25s forwards .50s ease-in-out;
   -webkit-animation: menu-item .25s forwards .50s ease-in-out;
 }
-.active li:nth-of-type(5){
+.active div.container-nav-bottom li:nth-of-type(1){
   animation: menu-item .25s forwards .55s ease-in-out;
   -webkit-animation: menu-item .25s forwards .55s ease-in-out;
 }
-.active li:nth-of-type(6){
+.active div.container-nav-bottom li:nth-of-type(2){
   animation: menu-item .25s forwards .60s ease-in-out;
   -webkit-animation: menu-item .25s forwards .60s ease-in-out;
 }