zaphar/kitchen
1
0
Fork 0
mirror of https://github.com/zaphar/kitchen.git synced 2025-07-22 19:40:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui: Typography tweaks

Browse Source
This commit is contained in:
Jeremy Wall 2023-12-04 15:05:45 -05:00
parent 6e0e00c7f3
commit dac529e8e8
5 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/footer.rs
View File

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

2
web/src/components/header.rs
View File

@ -25,7 +25,7 @@ pub fn Header<'ctx, G: Html>(cx: Scope<'ctx>, h: StateHandler<'ctx>) -> View<G>
view! {cx, view! {cx,
nav(class="no-print row-flex align-center header-bg heavy-bottom-border menu-font") { nav(class="no-print row-flex align-center header-bg heavy-bottom-border menu-font") {
h1(class="title") { "Kitchen" } 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/planning/select") { "MealPlan" } }
li { a(href="/ui/manage/ingredients") { "Manage" } } li { a(href="/ui/manage/ingredients") { "Manage" } }
li { a(href="/ui/login") { (login.get()) } } li { a(href="/ui/login") { (login.get()) } }

2
web/src/components/recipe.rs
View File

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

2
web/src/components/tabs.rs
View File

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

22
web/static/app.css
View File

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