nfp.moe: Replace footer with day/night asuna chibi

nfp_moe/app/common.js

@@ -0,0 +1,14 @@
+const DarkModeStorageName = 'nfp_sites_darkmode'
+
+module.exports.darkIsOn = localStorage.getItem(DarkModeStorageName)
+
+module.exports.toggleDarkMode = function() {
+  module.exports.darkIsOn = !module.exports.darkIsOn
+  if (this.darkIsOn) {
+    localStorage.setItem(DarkModeStorageName, true)
+  } else {
+    localStorage.removeItem(DarkModeStorageName)
+  }
+  document.body.className = (module.exports.darkIsOn ? 'nightmode ' : 'daymode ')
+    + (window.supportsavif ? 'avifsupport' : 'jpegonly')
+}

nfp_moe/app/footer.js

@@ -1,6 +1,7 @@
 const m = require('mithril')
 const PageTree = require('./page_tree')
 const Authentication = require('./authentication')
+const common = require('./common')
 
 const Footer = {
   oninit: function(vnode) {
@@ -24,9 +25,20 @@ const Footer = {
           ]
         }),
         
-        !Authentication.currentUser
+        m('ul', [
+          m('li', !Authentication.currentUser
             ? m(m.route.Link, { class: 'root', href: '/login' }, 'Login')
-          : null,
+            : null),
+          m('li', m('button',
+            { onclick: common.toggleDarkMode.bind(this) },
+            common.darkIsOn ? 'Day mode' : 'Night mode'
+          )),
+        ]),
+        m('div.meta', [
+          'Chibi designed and drawn by the amazing and talented ',
+          m('a', { rel: 'noopener', href: 'https://shoritsu.xyz/', target: '_blank' }, 'SHORITSU'),
+          '.',
+        ]),
         m('div.meta', [
           '©'
           + this.year

nfp_moe/app/header.js

@@ -1,8 +1,7 @@
 const m = require('mithril')
 const Authentication = require('./authentication')
 const PageTree = require('./page_tree')
-
+const common = require('./common')
-const DarkModeStorageName = 'nfp_sites_darkmode'
 
 const Menu = {
   oninit: function(vnode) {
@@ -14,13 +13,9 @@ const Menu = {
     if (!PageTree.Tree.length) {
       this.refreshTree()
     }
-
-    
   },
 
   onbeforeupdate: function() {
-    this.darkIsOn = localStorage.getItem(DarkModeStorageName)
-
     let currentPath = m.route.get()
 
     if (currentPath === '/') this.currentActive = 'home'
@@ -47,17 +42,6 @@ const Menu = {
     m.route.set('/')
   },
 
-  toggleDarkMode: function() {
-    this.darkIsOn = !this.darkIsOn
-    if (this.darkIsOn) {
-      localStorage.setItem(DarkModeStorageName, true)
-    } else {
-      localStorage.removeItem(DarkModeStorageName)
-    }
-    document.body.className = (this.darkIsOn ? 'nightmode ' : 'daymode ')
-      + (window.supportsavif ? 'avifsupport' : 'jpegonly')
-  },
-
   view: function() {
     return [
       m('header', [
@@ -85,8 +69,8 @@ const Menu = {
                 ]
               : null,
             m('button',
-              { onclick: this.toggleDarkMode.bind(this) },
+              { onclick: common.toggleDarkMode.bind(this) },
-              this.darkIsOn ? 'Day mode' : 'Night mode'
+              common.darkIsOn ? 'Day mode' : 'Night mode'
             ),
           ])
         ]),

nfp_moe/app/index.js

@@ -12,7 +12,7 @@ window.m = m
 var fileref = document.createElement("link");
 fileref.setAttribute("rel", "stylesheet");
 fileref.setAttribute("type", "text/css");
-fileref.setAttribute("href", '/assets/app.css?v=2');
+fileref.setAttribute("href", '/assets/app.css?v=3');
 document.head.appendChild(fileref) 
 
 m.route.setOrig = m.route.set

nfp_moe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nfp_moe",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "port": 4110,
   "description": "NFP Moe website",
   "main": "index.js",

nfp_moe/public/index.html

@@ -471,7 +471,7 @@ header .title:visited {
 }
 
 header .logo {
-  background-position: -119px 0px;
+  background-position: -1000px -400px;
   width: 81px;
   height: 100px;
   transform: scale(0.9);
@@ -685,11 +685,11 @@ main aside .asuna {
   margin-top: 2rem;
   width: 200px;
   height: 461px;
-  background-position: 0 -150px;
+  background-position: 0 0px;
 }
 
 .nightmode main aside .asuna {
-  background-position: -200px -150px;
+  background-position: -200px 0px;
 }
 
 .daymode .day {
@@ -1027,10 +1027,14 @@ footer .middle {
 }
 
 footer .asuna {
-  flex: 0 0 171px;
+  flex: 0 0 200px;
   height: 200px;
-  width: 171px;
+  width: 200px;
-  background-position-x: -1000px;
+  background-position: -1000px 0;
+}
+
+.nightmode footer .asuna {
+  background-position: -1000px -200px;
 }
 
 footer ul {
@@ -1048,7 +1052,8 @@ footer ul li {
   list-style-position: inside;
 }
 
-footer a {
+footer a,
+footer button {
   color: var(--footer-link);
   margin: 0 0 0.25rem;
 }
@@ -1235,6 +1240,6 @@ footer a {
       <ul><li><div class="lb"></div></li><li><div class="lb"></div></li><li><div class="lb"></div></li></ul>
     </div>
   </footer>
-  <script type="text/javascript" src="/assets/app.js?v=2"></script>
+  <script type="text/javascript" src="/assets/app.js?v=3"></script>
 </body>
 </html>