|
|
|
@ -1,10 +1,13 @@ |
|
|
|
|
<template> |
|
|
|
|
<div id="app"> |
|
|
|
|
<div id="app" :class="theme"> |
|
|
|
|
<div id="nav"> |
|
|
|
|
<router-link to="/">Home</router-link> | |
|
|
|
|
<router-link to="/posts">Posts</router-link> | |
|
|
|
|
<router-link to="/qa">QA</router-link> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<button id="toggleThemeButton" @click="toggleTheme">{{ themeToggleVerb }} my eyes</button> |
|
|
|
|
</div> |
|
|
|
|
<router-view /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
@ -13,16 +16,72 @@ |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: 'App', |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
theme: 'dark' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
themeToggleVerb: function() { |
|
|
|
|
return this.theme === 'light' ? "Save" : "Hurt" |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
toggleTheme() { |
|
|
|
|
const themes = ['light', 'dark'] |
|
|
|
|
this.theme = themes[(themes.indexOf(this.theme) + 1) % themes.length] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
.light { |
|
|
|
|
--primary-color: #ffffeb; |
|
|
|
|
--text-color: #272736; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dark { |
|
|
|
|
--primary-color: #272736; |
|
|
|
|
--text-color: #ffffeb; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dark a { |
|
|
|
|
color: #7e7e8f; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
body { |
|
|
|
|
background-color: var(--primary-color); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#app { |
|
|
|
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
|
|
|
-webkit-font-smoothing: antialiased; |
|
|
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #2c3e50; |
|
|
|
|
margin-top: 60px; |
|
|
|
|
color: var(--text-color); |
|
|
|
|
padding-top: 60px; |
|
|
|
|
background-color: var(--primary-color); |
|
|
|
|
min-height: 100vh; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#toggleThemeButton { |
|
|
|
|
background: var(--primary-color); |
|
|
|
|
border: 0px; |
|
|
|
|
color: var(--text-color); |
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
|
|
margin-right: 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (min-width:420px) { |
|
|
|
|
#toggleThemeButton { |
|
|
|
|
float:right; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|