diff --git a/web/src/components/header.rs b/web/src/components/header.rs index 0297160..8dafd5f 100644 --- a/web/src/components/header.rs +++ b/web/src/components/header.rs @@ -17,8 +17,12 @@ use sycamore::prelude::*; #[component] pub fn Header(cx: Scope) -> View { view! {cx, - div(class="menu no-print") { - h1 { "Meal Plan" } + nav(class="no-print") { + h1(class="title") { "Meal Plan" } + ul { + li { a(href="/ui/login") { "Login" } } + li { a(href="https://github.com/zaphar/kitchen") { "Github" } } + } } } } diff --git a/web/src/components/tabs.rs b/web/src/components/tabs.rs index 8406c0d..69ddb89 100644 --- a/web/src/components/tabs.rs +++ b/web/src/components/tabs.rs @@ -52,10 +52,6 @@ pub fn TabbedView(cx: Scope, state: TabState) -> View { } ) } - ul { - li { a(href="/ui/login") { "Login" } " | " } - li { a(href="https://github.com/zaphar/kitchen") { "Github" } } - } } main(class=".conatiner-fluid") { (inner) diff --git a/web/static/app.css b/web/static/app.css index 1604adb..75c441d 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -13,6 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +:root { + --tab-border-color: black; + --tab-border-width: 3px; + --tab-border-style: solid; + --tab-border-radius: 15px; +} + @media print { .no-print, @@ -31,27 +38,17 @@ } } -.destructive { - background-color: firebrick !important; -} - -body { - padding: 8px; -} - -:root { - --tab-border-color: black; - --tab-border-width: 3px; - --tab-border-style: solid; - --tab-border-radius: 15px; -} - @media (prefers-color-scheme: dark) { :root { --tab-border-color: lightgrey; } } +body { + padding: 10px; + margin: 10px; +} + nav>ul.tabs>li { border-style: none; border-bottom-style: var(--tab-border-style); @@ -66,4 +63,17 @@ nav>ul.tabs>li.selected { border-top-left-radius: var(--tab-border-radius); border-top-right-radius: var(--tab-border-radius); border-bottom-style: none; +} + +nav>h1 { + margin: 0px; + margin-left: 3px; + margin-right: 3px; + display: inline; + vertical-align: middle; + text-align: left; +} + +.destructive { + background-color: firebrick !important; } \ No newline at end of file