75 lines
1.4 KiB
Plaintext
75 lines
1.4 KiB
Plaintext
---
|
|
import { css } from '@styled-system/css'
|
|
import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
|
|
import { srOnlyClass } from '@/styles/srOnly'
|
|
|
|
const headerClass = css({
|
|
backgroundColor: 'neutral.2',
|
|
color: 'neutral.12'
|
|
})
|
|
|
|
const headerContainerClass = css({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
margin: '0 auto',
|
|
padding: 'md',
|
|
width: {
|
|
base: '100%',
|
|
sm: 'breakpoint-sm',
|
|
md: 'breakpoint-md',
|
|
lg: 'breakpoint-lg',
|
|
xl: 'breakpoint-xl',
|
|
'2xl': 'breakpoint-2xl'
|
|
}
|
|
})
|
|
|
|
const headerLogoClass = css({
|
|
fill: 'neutral.12',
|
|
width: '32px',
|
|
height: 'auto'
|
|
})
|
|
|
|
const headerMenuClass = css({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'md'
|
|
})
|
|
|
|
const headerMenuLinkClass = css({
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 'sm',
|
|
paddingInline: 'md',
|
|
paddingBlock: 'sm',
|
|
borderRadius: 'sm',
|
|
textDecoration: 'none',
|
|
_hover: {
|
|
backgroundColor: 'primary.3'
|
|
}
|
|
})
|
|
---
|
|
|
|
<header class={headerClass}>
|
|
<div class={headerContainerClass}>
|
|
<div>
|
|
<a href="/">
|
|
<SrJuggernautLogo className={headerLogoClass} />
|
|
<span class={srOnlyClass}>Ir al inicio</span>
|
|
</a>
|
|
</div>
|
|
<nav>
|
|
<menu class={headerMenuClass}>
|
|
<li>
|
|
<a
|
|
class={headerMenuLinkClass}
|
|
href="https://blog.juggernautplays.com"
|
|
>
|
|
Blog
|
|
</a>
|
|
</li>
|
|
</menu>
|
|
</nav>
|
|
</div>
|
|
</header>
|