diff options
| author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2019-10-01 21:35:51 -0700 |
|---|---|---|
| committer | Bastien Wirtz <bastien.wirtz@gmail.com> | 2019-10-01 21:40:45 -0700 |
| commit | 5323df4a32ca9b81fa598c0ca988596d93afe713 (patch) | |
| tree | f6a7caacb2b44621839265ffa5edc9ec7dc9c952 /index.html | |
| parent | bf35e3391223659f5ad8f56dc406b85289e915ce (diff) | |
| download | homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.gz homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.zst homer-5323df4a32ca9b81fa598c0ca988596d93afe713.zip | |
Implementing dark mode
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 31 |
1 files changed, 19 insertions, 12 deletions
| @@ -14,7 +14,10 @@ | |||
| 14 | </head> | 14 | </head> |
| 15 | 15 | ||
| 16 | <body> | 16 | <body> |
| 17 | <div id="app" v-if="config"> | 17 | <div id="app" v-if="config" :class="{ |
| 18 | 'is-dark': overrideDark === true, | ||
| 19 | 'is-light': overrideDark === false | ||
| 20 | }"> | ||
| 18 | <div id="bighead"> | 21 | <div id="bighead"> |
| 19 | <section class="first-line"> | 22 | <section class="first-line"> |
| 20 | <div v-cloak class="container"> | 23 | <div v-cloak class="container"> |
| @@ -39,6 +42,11 @@ | |||
| 39 | </a> | 42 | </a> |
| 40 | </div> | 43 | </div> |
| 41 | <div class="end"> | 44 | <div class="end"> |
| 45 | <a | ||
| 46 | v-on:click="toggleTheme()" | ||
| 47 | aria-label="Toggle dark mode" | ||
| 48 | ><i class="fas fa-adjust"></i> | ||
| 49 | </a> | ||
| 42 | <a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i | 50 | <a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i |
| 43 | :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> | 51 | :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> |
| 44 | <div class="search-bar"> | 52 | <div class="search-bar"> |
| @@ -98,19 +106,18 @@ | |||
| 98 | </div> | 106 | </div> |
| 99 | </div> | 107 | </div> |
| 100 | </section> | 108 | </section> |
| 109 | <footer class="footer"> | ||
| 110 | <div class="container"> | ||
| 111 | <div class="content has-text-centered"> | ||
| 112 | <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a | ||
| 113 | href="https://vuejs.org/">vuejs</a> | ||
| 114 | & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i | ||
| 115 | class="fab fa-github-alt"></i></a></p> | ||
| 116 | </div> | ||
| 117 | </div> | ||
| 118 | </footer> | ||
| 101 | </div> | 119 | </div> |
| 102 | 120 | ||
| 103 | <footer class="footer"> | ||
| 104 | <div class="container"> | ||
| 105 | <div class="content has-text-centered"> | ||
| 106 | <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a | ||
| 107 | href="https://vuejs.org/">vuejs</a> | ||
| 108 | & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i | ||
| 109 | class="fab fa-github-alt"></i></a></p> | ||
| 110 | </div> | ||
| 111 | </div> | ||
| 112 | </footer> | ||
| 113 | |||
| 114 | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script> | 121 | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script> |
| 115 | <script src="vendors/js-yaml.min.js"></script> | 122 | <script src="vendors/js-yaml.min.js"></script> |
| 116 | <script src="app.js"></script> | 123 | <script src="app.js"></script> |