commit
1a76d0d426
9 changed files with 117 additions and 13 deletions
@ -0,0 +1,3 @@ |
|||||||
|
* text=auto |
||||||
|
eol=lf |
||||||
|
|
@ -1,28 +1,87 @@ |
|||||||
<template> |
<template> |
||||||
<div id="app"> |
<div id="app" :class="theme"> |
||||||
<div id="nav"> |
<div id="nav"> |
||||||
<router-link to="/">Home</router-link> | |
<router-link to="/">Home</router-link> | |
||||||
<router-link to="/posts">Posts</router-link> | |
<router-link to="/posts">Posts</router-link> | |
||||||
<router-link to="/qa">QA</router-link> |
<router-link to="/qa">QA</router-link> |
||||||
</div> |
</div> |
||||||
<router-view /> |
<div> |
||||||
|
<button id="toggleThemeButton" @click="toggleTheme">{{ themeToggleVerb }} my eyes</button> |
||||||
</div> |
</div> |
||||||
|
<router-view /> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'App', |
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> |
</script> |
||||||
|
|
||||||
<style> |
<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 { |
#app { |
||||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||||
-webkit-font-smoothing: antialiased; |
-webkit-font-smoothing: antialiased; |
||||||
-moz-osx-font-smoothing: grayscale; |
-moz-osx-font-smoothing: grayscale; |
||||||
text-align: center; |
text-align: center; |
||||||
color: #2c3e50; |
color: var(--text-color); |
||||||
margin-top: 60px; |
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> |
</style> |
||||||
|
|
||||||
|
Loading…
Reference in new issue