larger mobile hamburger menu icons

iandennismiller · Jul 2, 2023 · 7ef1696 · 7ef1696
1 parent 975fa89
commit 7ef1696
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/gthnk_web/root/static/gthnk.css b/src/gthnk_web/root/static/gthnk.css
@@ -62,6 +62,10 @@ a.anchor {
     font-style: italic;
 }
 
+.nav-link-description {
+    display: none;
+}
+
 /*
     Images
 */
@@ -106,6 +110,16 @@ body.bootstrap-dark .gthnk-card {
         font-size: 0.8rem !important;
         font-weight: bold;
     }
+
+    .nav-item {
+        font-size: xx-large;
+    }
+
+    .nav-link-description {
+        font-size: large;
+        display: inline;
+        padding-left: 0.5em;
+    }
 }
 
 /*

diff --git a/src/gthnk_web/root/templates/base.html.j2 b/src/gthnk_web/root/templates/base.html.j2
@@ -55,19 +55,31 @@
           {% endif -%}
 
           <li class="nav-item">
-            <a class="nav-link" href="{{ url_for('journal.latest') }}" title="latest day"><i class="fas fa-book"></i></a>
+            <a class="nav-link" href="{{ url_for('journal.latest') }}" title="latest day">
+              <i class="fas fa-book"></i>
+              <span class="nav-link-description">latest day</span>
+            </a>
           </li>
 
           <li class="nav-item">
-            <a class="nav-link" id="calendar_button" href="javascript:void(0)" title="go to day"><i class="far fa-calendar-alt"></i></a>
+            <a class="nav-link" id="calendar_button" href="javascript:void(0)" title="go to day">
+              <i class="far fa-calendar-alt"></i>
+              <span class="nav-link-description">go to day</span>
+            </a>
           </li>
 
           <li class="nav-item">
-            <a class="nav-link" href="{{ url_for('home.config_view') }}" title="configuration"><i class="fas fa-info-circle"></i></a>
+            <a class="nav-link" href="{{ url_for('home.config_view') }}" title="configuration">
+              <i class="fas fa-info-circle"></i>
+              <span class="nav-link-description">configuration</span>
+            </a>
           </li>
 
           <li class="nav-item">
-            <a class="nav-link" href="javascript:toggle_darkmode();" title="dark mode"><i class="far fa-lightbulb"></i></a>
+            <a class="nav-link" href="javascript:toggle_darkmode();" title="dark mode">
+              <i class="far fa-lightbulb"></i>
+              <span class="nav-link-description">dark mode</span>
+            </a>
           </li>
         </ul>
       </div>