Add background changer and css

10 files changed, 59 insertions, 15 deletions

diff --git a/src/css/styles.css b/src/css/styles.css
index ab634ec..3a555cb 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -11,11 +11,16 @@
   
 
 body {
-    width: 80%;
+    width: 60%;
+    min-width: 500px;
     margin: auto;
     /* margin: 0px; */
     background-color: var(--background); 
     font-family: Arial, Helvetica, sans-serif;
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
 h1, h2 {
@@ -119,12 +124,17 @@ p {
     border-top: 1px solid var(--light-text);
     border-bottom: 1px solid var(--light-text);
     background-color: var(--background-accent);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
 }
 
+
 .titlebar a{
     margin: auto;
     max-width: 10%;
     min-width: 100px;
+    flex-grow: 1;
 }
 
 .btn {
diff --git a/src/js/background.js b/src/js/background.js
new file mode 100644
index 0000000..f8a7684
--- /dev/null
+++ b/src/js/background.js
@@ -0,0 +1,29 @@
+function set_background_image(){
+    let date = new Date();
+    let current_hour = date.getHours() 
+    if(current_hour <= 8 || current_hour >= 20){
+        var photo = "night.jpg"
+    } else if(current_hour <= 10 || current_hour > 17){
+        var photo = "change.jpg"
+    } else {
+        var photo = "day.jpg"
+    }
+    let btn = document.getElementById("loadBtn")
+    if(btn){
+        btn.remove()
+    }
+    if(!document.getElementById("backgroundId")){
+        document.body.style.backgroundImage = `url('/res/${photo}')`; 
+        let desc = document.createElement("p")
+        desc.id = "backgroundId"
+        desc.innerHTML = "Background images in the public domain, painted by <a href=\"https://artvee.com/artist/ivan-konstantinovich-aivazovsky/\">Ivan Konstantinovich Aivazovsky.</a>"
+        footer.appendChild(desc)
+    }
+}
+let el = document.createElement("a")
+el.id = "loadBtn"
+el.innerText = "load background"
+el.onclick = set_background_image
+let footer = document.getElementsByTagName("footer")[0]
+footer.appendChild(el)
+
diff --git a/src/res/change.jpg b/src/res/change.jpg
new file mode 100644
index 0000000..0d0b1c3
--- /dev/null
+++ b/src/res/change.jpg
diff --git a/src/res/day.jpg b/src/res/day.jpg
new file mode 100644
index 0000000..13c115c
--- /dev/null
+++ b/src/res/day.jpg
diff --git a/src/icon/favicon.ico b/src/res/favicon.ico
index 7646b67..7646b67 100644
--- a/src/icon/favicon.ico
+++ b/src/res/favicon.ico
diff --git a/src/icon/favicon.svg b/src/res/favicon.svg
index ad339b8..ad339b8 100644
--- a/src/icon/favicon.svg
+++ b/src/res/favicon.svg
diff --git a/src/res/night.jpg b/src/res/night.jpg
new file mode 100644
index 0000000..9b9471c
--- /dev/null
+++ b/src/res/night.jpg
diff --git a/src/server.js b/src/server.js
index 81f1edb..d820cd7 100644
--- a/src/server.js
+++ b/src/server.js
@@ -324,8 +324,8 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
     })
 
 
-    server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/icon/favicon.ico"))
-    server.get('/favicon.svg', (req, res) => res.sendFile(__dirname + "/icon/favicon.svg"))
+    server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/res/favicon.ico"))
+    server.get('/favicon.svg', (req, res) => res.sendFile(__dirname + "/res/favicon.svg"))
     server.get('/css/:id', (req, res) => {
         res.sendFile(__dirname + "/css/" + req.params.id);
     });
@@ -338,6 +338,9 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
     server.get('/js/:id', (req, res) => {
         res.sendFile(__dirname + "/js/" + req.params.id);
     });
+    server.get('/res/:id', (req, res) => {
+        res.sendFile(__dirname + "/res/" + req.params.id);
+    });
 
     server.get('/feed.xml', async (req, res) => {
         var feed = new rss({
@@ -345,7 +348,7 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
             description: "Posts from marks.kitchen",
             feed_url: "https://marks.kitchen/rss",
             site_url: "https://marks.kitchen",
-            webMaster: "webmaster@marks.kitchen",
+            webMaster: "webmaster@marks.kitchen (Mark Powers)",
             copyright: "Mark Powers"
         })
         var posts = await models.posts.findAll({
diff --git a/src/templates/footer.html b/src/templates/footer.html
index 617b5fa..6dc5a48 100644
--- a/src/templates/footer.html
+++ b/src/templates/footer.html
@@ -11,4 +11,8 @@
         <span class="spacer"></span>
         <br>
     </div>
-</footer>
\ No newline at end of file
+    <div>
+      <noscript>Enable javascript for a background image</noscript>
+      <script src="/js/background.js"></script>
+    </div>
+</footer>
diff --git a/src/templates/navigation.html b/src/templates/navigation.html
index ab53b13..b101bab 100644
--- a/src/templates/navigation.html
+++ b/src/templates/navigation.html
@@ -1,12 +1,10 @@
 <nav class="titlebar">
-    <div>
-        <a href="/" class="btn btn-primary">Home</a>
-        <a href="/bread" class="btn btn-primary">Bread</a>
-        <a href="/blog" class="btn btn-primary">Blog</a>
-        <a href="https://games.marks.kitchen" class="btn btn-primary">Games</a>
-        <a href="/email" class="btn btn-primary">Email</a>
-        <a href="/projects" class="btn btn-primary">Projects</a>
-        <a href="https://wiki.marks.kitchen/public" class="btn btn-primary">Wiki</a>
-        <a href="/misc" class="btn btn-primary">Misc</a>
-    </div>
+    <a href="/" class="btn btn-primary">Home</a>
+    <a href="/bread" class="btn btn-primary">Bread</a>
+    <a href="/blog" class="btn btn-primary">Blog</a>
+    <a href="https://games.marks.kitchen" class="btn btn-primary">Games</a>
+    <a href="/email" class="btn btn-primary">Email</a>
+    <a href="/projects" class="btn btn-primary">Projects</a>
+    <a href="https://wiki.marks.kitchen/public" class="btn btn-primary">Wiki</a>
+    <a href="/misc" class="btn btn-primary">Misc</a>
 </nav>