raymon
/
Personal-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feat/themes' into beta

Browse Source
master
Raymonzut 4 years ago
parent 43d28f7f6b dd4e2ca9fb
commit ffe62b6380
No known key found for this signature in database
GPG Key ID: 1E9BCC39EDD1DD53
2 changed files with 76 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      client/public/index.html
  2. 67
      client/src/App.vue

8
client/public/index.html
Unescape View File

@ -6,6 +6,14 @@
<meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Website</title> <title>Personal Website</title>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
}
</style>
</head> </head>
<body> <body>

67
client/src/App.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save