ui: Typography tweaks

web/src/components/footer.rs

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

web/src/components/header.rs

@@ -25,7 +25,7 @@ pub fn Header<'ctx, G: Html>(cx: Scope<'ctx>, h: StateHandler<'ctx>) -> View<G>
     view! {cx,
         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") {
+            ul(class="row-flex align-center no-list") {
                 li { a(href="/ui/planning/select") { "MealPlan" } }
                 li { a(href="/ui/manage/ingredients") { "Manage" } }
                 li { a(href="/ui/login") { (login.get()) } }

web/src/components/recipe.rs

@@ -146,7 +146,7 @@ fn Steps<G: Html>(cx: Scope, steps: Vec<recipes::Step>) -> View<G> {
         view! {cx,
             div {
                 h3 { "Step " (idx + 1) }
-                ul(class="ingredients") {
+                ul(class="ingredients no-list") {
                     (ingredient_fragments)
                 }
                 div(class="instructions") {

web/src/components/tabs.rs

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

web/static/app.css

@@ -33,7 +33,7 @@
     --text-color: black;
     --menu-bg: var(--main-color);
     --header-bg: var(--light-accent);
-    --font-size: 20px;
+    --font-size: 1.2em;
     --menu-font-size: 1.5em;
     --cell-target: 30%;
 }
@@ -129,29 +129,22 @@ a {
     display: block;
 }
 
+.no-list {
+    list-style-type: none;
+}
+
 /** Typography classes **/
 
 .menu-font {
     font-size: var(--menu-font-size);
 }
 
-/** nav elements **/
-nav ul {
-    list-style-type: none;
-}
-
+/** element specific styling **/
 nav li {
     margin-right: var(--nav-margin);
 }
 
-nav li a::after {
-    content: '| ";
-}
-
-nav li a {
-    color: black;
-}
-
+/** color and borders **/
 .header-bg {
     background-color: var(--header-bg);
 }
@@ -160,6 +153,7 @@ nav li a {
     border-bottom: var(--border-width) solid var(--heavy-accent)
 }
 
+/** Situational **/
 .selected {
     border-style: none;
     border-bottom-style: var(--tab-border-style);