83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<header class="header">
|
|
<a
|
|
href="/"
|
|
class="logo-link"
|
|
><h1 class="logo">traxxx</h1></a>
|
|
|
|
<nav class="nav">
|
|
<ul class="nolist">
|
|
<li class="nav-item">
|
|
<Icon icon="stars" />
|
|
|
|
<a
|
|
href="/actors"
|
|
class="nav-link"
|
|
>Actors</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<Icon icon="earth2" />
|
|
|
|
<a
|
|
href="/networks"
|
|
class="nav-link"
|
|
>Networks</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<Icon icon="price-tags" />
|
|
|
|
<a
|
|
href="/tags"
|
|
class="nav-link"
|
|
>Categories</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
background: $background;
|
|
color: $primary;
|
|
border-bottom: solid 1px $shadow-hint;
|
|
font-size: 0;
|
|
}
|
|
|
|
.logo-link {
|
|
color: inherit;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
padding: .5rem 1rem;
|
|
margin: 0 1rem 0 0;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.nav {
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-link {
|
|
display: inline-block;
|
|
color: $shadow;
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
</style>
|