ui: Menu font sizes

web/src/components/footer.rs

@@ -17,7 +17,7 @@ use sycamore::prelude::*;
 #[component]
 pub fn Footer<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        nav(class="no-print") {
+        nav(class="no-print menu-font") {
             ul {
                 li { a(href="https://github.com/zaphar/kitchen") { "On Github" } }
             }

web/src/components/header.rs

@@ -23,7 +23,7 @@ pub fn Header<'ctx, G: Html>(cx: Scope<'ctx>, h: StateHandler<'ctx>) -> View<G>
         None => "Login".to_owned(),
     });
     view! {cx,
-        nav(class="no-print row-flex align-center header-bg heavy-bottom-border") {
+        nav(class="no-print row-flex align-center header-bg heavy-bottom-border menu-font") {
             h1(class="title") { "Kitchen" }
             ul(class="row-flex align-center") {
                 li { a(href="/ui/planning/select") { "MealPlan" } }

web/src/components/tabs.rs

@@ -47,7 +47,7 @@ pub fn TabbedView<'a, G: Html>(cx: Scope<'a>, state: TabState<'a, G>) -> View<G>
             .collect(),
     );
     view! {cx,
-        nav(class="menu-bg expand-height") {
+        nav(class="menu-bg expand-height menu-font") {
             ul(class="tabs pad-left") {
                 (menu)
             }

web/static/app.css

@@ -34,6 +34,7 @@
     --menu-bg: var(--main-color);
     --header-bg: var(--light-accent);
     --font-size: 20px;
+    --menu-font-size: 1.5em;
     --cell-target: 30%;
 }
 
@@ -76,9 +77,8 @@ a {
     text-decoration: none;
 }
 
-/** Our specific page elements **/
+/** layout classes **/
 
-/** TODO(jwall): Move these onto the html elements themselves. **/
 .column-flex {
   display: flex;
   flex-direction: column;
@@ -129,6 +129,12 @@ a {
     display: block;
 }
 
+/** Typography classes **/
+
+.menu-font {
+    font-size: var(--menu-font-size);
+}
+
 /** nav elements **/
 nav ul {
     list-style-type: none;