KevinMidboe/brewpi
1
0
Fork 0
mirror of https://github.com/KevinMidboe/brewPi.git synced 2025-12-08 20:28:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Header color and form fit better w/ rest of page colors

Browse Source
This commit is contained in:
Kevin
2023-08-27 13:30:53 +02:00
parent c16bce0a1a
commit 89b17ea714
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/Header.svelte
View File

@@ -3,7 +3,7 @@
import Navigation from './Navigation.svelte'; import Navigation from './Navigation.svelte';
import GithubIcon from '../icons/Github.svelte'; import GithubIcon from '../icons/Github.svelte';
let open: boolean = false; let open = false;
function toggleMenu() { function toggleMenu() {
open = !open; open = !open;
@@ -18,13 +18,13 @@
{#if open} {#if open}
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}"> <div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
<h1>Navigation</h1> <h1>Page navigation</h1>
<Navigation on:click="{close}" /> <Navigation on:click="{close}" />
<ul class="bottom-content"> <ul class="bottom-content">
<li> <li>
<a href="https://github.com/kevinmidboe/brewpi"> <a class="link" href="https://github.com/kevinmidboe/brewpi">
<GithubIcon /> <GithubIcon />
<span class="meta">View on Github</span> <span class="meta">View on Github</span>
</a> </a>
@@ -55,19 +55,23 @@
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: calc(100vh + 4px);
width: 100vw; width: 100vw;
max-width: 550px; max-width: 550px;
right: 0; right: 0;
top: 0; top: -2px;
z-index: 10; z-index: 10;
border-left: 2px solid white;
border-top: 2px solid white;
background-color: #fff3f6; background-color: var(--green);
color: black; color: black;
padding: calc(100px + 2rem) 2rem 1rem; padding: calc(100px + 2rem) 2rem 1rem;
border-top-left-radius: 4rem; border-top-left-radius: 4rem;
color: var(--background);
h1 { h1 {
font-size: 3rem;
padding-bottom: 4rem; padding-bottom: 4rem;
} }
@@ -124,7 +128,7 @@
user-select: none; user-select: none;
&.open { &.open {
background-color: salmon; background-color: var(--background);
color: black; color: black;
} }