commit
1a76d0d426
9 changed files with 117 additions and 13 deletions
@ -0,0 +1,3 @@ |
||||
* text=auto |
||||
eol=lf |
||||
|
@ -1,28 +1,87 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<div id="nav"> |
||||
<router-link to="/">Home</router-link> | |
||||
<router-link to="/posts">Posts</router-link> | |
||||
<router-link to="/qa">QA</router-link> |
||||
</div> |
||||
<router-view /> |
||||
<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> |
||||
|
||||
<script> |
||||
|
||||
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> |
||||
|
||||
|
Loading…
Reference in new issue