diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 2f77c00..c91af85 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -72,9 +72,11 @@ } .ctas { + text-align: right; + > :global(*) { margin-bottom: 1em; } } - \ No newline at end of file + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 4ee9311..3139684 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -121,12 +121,10 @@ .nav { --nav-border: solid 1px var(--color-nav-border); - display: block; - position: relative; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); @media screen and (width >= 1024px) { - padding: 0.5em 2em; + padding: 0.5em 0; } } @@ -159,20 +157,14 @@ } @media screen and (width >= 1024px) { - display: inline-block; + display: flex; + justify-content: center; + width: 100%; padding: 0; position: unset; background: unset; border: none; } - - span { - display: inline-block; - padding: 0.5em 1em; - margin: 0 1em; - - transition: margin 200ms, padding 200ms; - } } .nav-link { @@ -182,19 +174,34 @@ text-decoration: none; @media screen and (width >= 1024px) { + flex-grow: 1; + text-align: center; border-right: var(--nav-border); - &:first-child { - border-left: var(--nav-border); + &:last-child { + border-right: none; + } + } + + span { + display: block; + padding: 0.5em 1em; + margin: 0 1em; + + @media screen and (width >= 1024px) { + transition: margin 200ms, padding 200ms; } } &:hover span { - padding: 0.5em 2em; - margin: 0; text-shadow: 0 0 1px var(--color-nav-text); background-color: var(--color-nav-background); + + @media screen and (width >= 1024px) { + padding: 0.5em 2em; + margin: 0; + } } &.active span {