add media query in navbar

fscheidt · Jun 25, 2022 · cf82a70 · cf82a70
1 parent a18f10d
commit cf82a70
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git 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
@@ -79,14 +79,20 @@ 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);
   }
   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
@@ -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',