From cf82a70ad7e712e7a76320dd89c0e4dc0718ac33 Mon Sep 17 00:00:00 2001
From: Felippe Scheidt <felippescheidt@gmail.com>
Date: Sat, 25 Jun 2022 13:08:45 -0300
Subject: [PATCH] add media query in navbar

---
 index.html      | 63 +++++++++++++++++++++++++++++++++++++++++--------
 static/main.css | 14 ++++++++++-
 static/main.js  |  2 +-
 3 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index c8f3492..f818ca7 100644
--- a/index.html
+++ b/index.html
@@ -21,17 +21,56 @@
 <nav class="navbar">
     <ul class="menu">
         <li><a href="#index" class="active"><i class="fas fa-home"></i></a></li>
-        <li><a href="#html" class="remote">HTML</a></li>
+        <li>
+          <a href="#html">
+            <i class="fas fa-code res"></i>
+            <span class="res">HTML</span>
+          </a>
+        </li>
         <li><a href="#css" class="remote">CSS</a></li>
         <li><a href="#js" class="remote">JS</a></li>
-        <li><a href="#slides">Slides</a></li>
-        <li><a href="#cores">Cores</a></li>
-        <li><a href="#text">Text</a></li>
-        <li><a href="#images">Images</a></li>
-        <li><a href="#forms">Forms</a></li>
-        <li><a href="#tools" class="remote">Tools</a></li>
-        <li><a href="#info"><i class="fas fa-info-circle"></i></a></li>            
-        <li id="clear-cache"><a onclick="app.restore();"><i id="clear-fa" class="fas fa-undo-alt"></i></a></li>            
+        
+        <li>
+          <a href="#slides" title="pdf slides">
+            <!-- <i class="fas fa-file-pdf res"></i> -->
+            <i class="fas fa-chalkboard res"></i>
+            <span class="res">slides</span>
+          </a>
+        </li>
+        <li>
+          <a href="#cores" title="css colors generator">
+            <i class="fas fa-fill-drip res"></i>
+            <span class="res">cores</span>
+          </a>
+        </li>
+        <li>
+          <a href="#text" title="text and paragraphs">
+            <i class="fas fa-paragraph res"></i>
+            <span class="res">text</span>
+          </a>
+        <li>
+          <a href="#images" title="images">
+            <i class="fas fa-images res"></i>
+            <span class="res">images</span>
+          </a>
+        </li>
+        <li>
+          <a href="#forms" title="formularios">
+            <i class="fas fa-id-card res"></i>
+            <span class="res">forms</span>
+          </a>
+        </li>
+        <li>
+          <a href="#tools" title="material extra">
+            <i class="fas fa-book res"></i>
+            <span class="res">tools</span>
+          </a>
+        </li>
+        <li>
+          <a href="#info">
+            <i class="fas fa-info-circle"></i>
+          </a>
+        </li>            
         
     </ul>
 </nav>
@@ -49,7 +88,11 @@ <h1>about</h1>
         </header>        
         <table class="brief">
             <tr>
-                <td>Site</td>
+                <td>Site 
+                  <a id="clear-cache" onclick="app.restore();">
+                    <i id="clear-fa" class="fas fa-undo-alt"></i>
+                  </a>
+                </td>
                 <td><a id="app-site" target="_blank" href="#"></a></td>
             </tr>
             <tr>
diff --git a/static/main.css b/static/main.css
index 19192bf..97a4df3 100644
--- a/static/main.css
+++ b/static/main.css
@@ -79,7 +79,7 @@ main{
   margin-bottom: 10px;
   
 }
-@media (min-width: 1024px) {
+@media (min-width: 1025px) {
   main{
     padding: 10px 20px 0px 20px;
     border-top: 3px solid rgb(168, 161, 152);
@@ -87,6 +87,12 @@ main{
   main > *{
     font-size: 1.4em;
   }
+  .navbar i.res{
+    display: none;
+  }
+  .navbar span.res{
+    display: inline-block;
+  }
 }
 @media (max-width: 1024px) {
   main{
@@ -95,6 +101,12 @@ main{
   .md-content pre{
     white-space: pre-wrap;
   }
+  .navbar i.res{
+    display: inline-block;
+  }
+  .navbar span.res{
+    display: none;
+  }
 }
 main.app{
   display: grid;
diff --git a/static/main.js b/static/main.js
index 19f2a5b..ab9286e 100644
--- a/static/main.js
+++ b/static/main.js
@@ -33,7 +33,7 @@ function getData(){
     })
 }
 const app = {
-    version: '1.94.2',
+    version: '1.95.1',
     site: 'https://fscheidt.github.io/site',
     repo: 'https://github.com/fscheidt/site',
     title: 'WEB1',