mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-18 11:45:11 +00:00
74 lines
1.0 KiB
Vue
74 lines
1.0 KiB
Vue
<template>
|
|
<div :class="$store.state.theme" class="theme">
|
|
<div class="nav horizontal-align">
|
|
<NuxtLink class="nav-item" to="/">
|
|
Home
|
|
</NuxtLink>
|
|
<NuxtLink class="nav-item" to="/about">
|
|
About
|
|
</NuxtLink>
|
|
<NuxtLink class="nav-item" to="/parent">
|
|
Parent page
|
|
</NuxtLink>
|
|
</div>
|
|
<Nuxt class="container" />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
body,
|
|
html {
|
|
padding: 0;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
.nav-item {
|
|
text-decoration: none;
|
|
font-size: 1.2em;
|
|
}
|
|
.theme {
|
|
min-height: 100vh;
|
|
padding-top: 2rem;
|
|
}
|
|
/*
|
|
** Light theme
|
|
*/
|
|
.theme.light {
|
|
background: #f5f5f5;
|
|
color: #202020;
|
|
}
|
|
.theme.light a {
|
|
color: #555;
|
|
}
|
|
/*
|
|
** Dark theme
|
|
*/
|
|
.theme.dark {
|
|
background: #202020;
|
|
color: #f5f5f5;
|
|
}
|
|
.theme.dark a {
|
|
color: #eee;
|
|
}
|
|
/*
|
|
** Orange theme
|
|
*/
|
|
.theme.orange {
|
|
background: #ffc107;
|
|
color: #795548;
|
|
}
|
|
.theme.orange a {
|
|
color: #202020;
|
|
}
|
|
/*
|
|
** Blue theme
|
|
*/
|
|
.theme.blue {
|
|
background: #3f51b5;
|
|
color: #f5f5f5;
|
|
}
|
|
.theme.blue a {
|
|
color: #eee;
|
|
}
|
|
</style>
|