aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorMark Powers <mark@marks.kitchen>2020-12-24 12:48:58 -0600
committerMark Powers <mark@marks.kitchen>2020-12-24 12:48:58 -0600
commit572671a916335fbbe8766b37b683b8a585c49abd (patch)
tree317feb8a26a87d62977895d860c522498773a976 /src
parentee5600aac9548075634f51113f9b5ed078f82e12 (diff)
Add background changer and css
Diffstat (limited to 'src')
-rw-r--r--src/css/styles.css12
-rw-r--r--src/js/background.js29
-rw-r--r--src/res/change.jpgbin0 -> 4689611 bytes
-rw-r--r--src/res/day.jpgbin0 -> 3710493 bytes
-rw-r--r--src/res/favicon.ico (renamed from src/icon/favicon.ico)bin1150 -> 1150 bytes
-rw-r--r--src/res/favicon.svg (renamed from src/icon/favicon.svg)0
-rw-r--r--src/res/night.jpgbin0 -> 4125007 bytes
-rw-r--r--src/server.js9
-rw-r--r--src/templates/footer.html6
-rw-r--r--src/templates/navigation.html18
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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>