mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 10:04:05 +00:00
68 lines
1001 B
Vue
68 lines
1001 B
Vue
|
<template>
|
||
|
|
<div :class="$store.state.theme" class="theme">
|
||
|
|
<div class="nav horizontal-align">
|
||
|
|
<nuxt-link class="nav-item" to="/">Home</nuxt-link>
|
||
|
|
<nuxt-link class="nav-item" to="/about">About</nuxt-link>
|
||
|
|
<nuxt-link class="nav-item" to="/parent">Parent page</nuxt-link>
|
||
|
|
</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>
|