diff --git a/web/src/components/footer.rs b/web/src/components/footer.rs index 7d522ac..a2c8171 100644 --- a/web/src/components/footer.rs +++ b/web/src/components/footer.rs @@ -17,7 +17,7 @@ use sycamore::prelude::*; #[component] pub fn Footer(cx: Scope) -> View { view! {cx, - nav(class="no-print") { + nav(class="no-print menu-font") { ul { li { a(href="https://github.com/zaphar/kitchen") { "On Github" } } } diff --git a/web/src/components/header.rs b/web/src/components/header.rs index 7f53e43..504bd75 100644 --- a/web/src/components/header.rs +++ b/web/src/components/header.rs @@ -23,7 +23,7 @@ pub fn Header<'ctx, G: Html>(cx: Scope<'ctx>, h: StateHandler<'ctx>) -> View 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" } } diff --git a/web/src/components/tabs.rs b/web/src/components/tabs.rs index b907c58..667a51a 100644 --- a/web/src/components/tabs.rs +++ b/web/src/components/tabs.rs @@ -47,7 +47,7 @@ pub fn TabbedView<'a, G: Html>(cx: Scope<'a>, state: TabState<'a, G>) -> View .collect(), ); view! {cx, - nav(class="menu-bg expand-height") { + nav(class="menu-bg expand-height menu-font") { ul(class="tabs pad-left") { (menu) } diff --git a/web/static/app.css b/web/static/app.css index eb6be9d..f010853 100644 --- a/web/static/app.css +++ b/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;