commit dae47d6008089e5eb9b0bc545063b31597b305bf parent 637c2a04551f73ff0b66044d305995b34975975e Author: knutsen <samuel@knutsen.co> Date: Wed, 23 Jun 2021 23:38:45 +0100 Changed 404 mascot and added more. Diffstat:
31 files changed, 115 insertions(+), 18 deletions(-)
diff --git a/public/colours.js b/public/colours.js @@ -0,0 +1,51 @@ +const ROOT = window.document.documentElement; + +const COLOUR_SCHEMES = { + default: { + 'bg-colour': '#badaff', + 'hue': '0deg' + }, + pink: { + 'bg-colour': '#ffcdef', + 'hue': '75deg' + }, + green: { + 'bg-colour': '#91ffeb', + 'hue': '300deg' + } +} + +const CSS = new Proxy({}, { + get(_, variable) { + const styles = window.getComputedStyles(ROOT); + return styles.getPropertyValue(`--${variable}`).trim(); + }, + set(_, variable, value) { + return ROOT.style.setProperty(`--${variable}`, value); + } +}); + +let currentScheme = 'default'; +let rainbowInterval = null; +let hueOffs = 0; + +function useColourScheme(scheme) { + if (scheme === currentScheme) return; + currentScheme = scheme; + + clearInterval(rainbowInterval); + if (scheme === 'rainbow') { + hueOffs = 0; + rainbowInterval = setInterval(() => { + CSS['bg-colour'] = `hsl(${hueOffs + 212}deg, 100%, 86%)`; + CSS['hue'] = `${hueOffs}deg`; + hueOffs = (hueOffs + 2) % 360; + }, 40) + return; + } + + const variables = COLOUR_SCHEMES[scheme]; + for (const variable in variables) + CSS[variable] = variables[variable]; +} + diff --git a/public/image.js b/public/image.js @@ -1,12 +1,18 @@ +const YUI_COUNT = 17; + const mascot = document.getElementById("mascot"); const favicon = document.querySelector("link[rel~='icon']"); const randomYui = () => { - const stem = "/mascots/" + Math.floor(1 + Math.random()*14); + const pick = Math.floor(1 + Math.random() * YUI_COUNT); + const stem = "/mascots/" + pick; mascot.setAttribute("src", stem + ".png"); favicon.setAttribute("href", stem + "-square.png"); -} -randomYui(); + if (pick === 11) useColourScheme('pink'); + if (pick === 15) useColourScheme('green'); + else if (pick === 16) useColourScheme('rainbow'); + else useColourScheme('default'); +} mascot.addEventListener("click", randomYui) diff --git a/public/mascots/1-square.png b/public/mascots/1-square.png Binary files differ. diff --git a/public/mascots/10-square.png b/public/mascots/10-square.png Binary files differ. diff --git a/public/mascots/11-square.png b/public/mascots/11-square.png Binary files differ. diff --git a/public/mascots/12-square.png b/public/mascots/12-square.png Binary files differ. diff --git a/public/mascots/13-square.png b/public/mascots/13-square.png Binary files differ. diff --git a/public/mascots/14-square.png b/public/mascots/14-square.png Binary files differ. diff --git a/public/mascots/15-square.png b/public/mascots/15-square.png Binary files differ. diff --git a/public/mascots/15.png b/public/mascots/15.png Binary files differ. diff --git a/public/mascots/16-square.png b/public/mascots/16-square.png Binary files differ. diff --git a/public/mascots/16.png b/public/mascots/16.png Binary files differ. diff --git a/public/mascots/17-square.png b/public/mascots/17-square.png Binary files differ. diff --git a/public/mascots/17.png b/public/mascots/17.png Binary files differ. diff --git a/public/mascots/2-square.png b/public/mascots/2-square.png Binary files differ. diff --git a/public/mascots/3-square.png b/public/mascots/3-square.png Binary files differ. diff --git a/public/mascots/4-square.png b/public/mascots/4-square.png Binary files differ. diff --git a/public/mascots/5-square.png b/public/mascots/5-square.png Binary files differ. diff --git a/public/mascots/6-square.png b/public/mascots/6-square.png Binary files differ. diff --git a/public/mascots/7-square.png b/public/mascots/7-square.png Binary files differ. diff --git a/public/mascots/8-square.png b/public/mascots/8-square.png Binary files differ. diff --git a/public/mascots/9-square.png b/public/mascots/9-square.png Binary files differ. diff --git a/public/style.css b/public/style.css @@ -5,6 +5,13 @@ --fa: "Font Awesome 5 Pro", "Font Awesome 5 Brands"; --monospace: monospace, var(--fa); --serif: 'Lora', serif, var(--fa); + + --mascot-height: 28rem; + --mascot-max-width: 30rem; + --mascot-height-mobile: 16rem; + + --bg-colour: #badff; + --hue: 0deg; } ::selection { @@ -34,8 +41,9 @@ html, body { body { color: black; - background: #baddff; - background-image: url('background-300x300.png'); + background: var(--bg-colour); + background-image: url('/background-300x300.png'); + background-blend-mode: luminosity; background-size: 10em; background-repeat: repeat; font-family: var(--serif); @@ -122,11 +130,16 @@ pre code { #content { /* background-color: #f7d4ff80; */ + filter: hue-rotate(var(--hue)); padding: 1em; min-height: calc(100vh - 2em); padding-bottom: 20em; } +#content img { + filter: hue-rotate(calc(-1 * var(--hue))); +} + .guitarCentre { overflow: auto; } @@ -150,7 +163,8 @@ pre code { } #mascot { - height: 20em; + max-height: var(--mascot-height); + max-width: var(--mascot-max-width); position: fixed; bottom:0em; right:0; @@ -190,11 +204,11 @@ pre code { width: calc(100% - 1.2em) } #mascot { - height: 10em; + height: var(--mascot-height-mobile); } #content { - padding-bottom: 10em; + padding-bottom: var(--mascot-height-mobile); } } diff --git a/scripts/crop-mascots.sh b/scripts/crop-mascots.sh @@ -1,8 +1,11 @@ -#!/bin/bash +#!/usr/bin/bash shopt -s extglob -for file in mascots/+([0-9]).png; do +DIR="$1" +[ -z "$DIR" ] && DIR='./public/mascots' + +for file in "$DIR"/+([0-9]).png; do echo "$file -> ${file:0:-4}-square.png" convert "$file" -gravity Northwest -crop 1:1 "${file:0:-4}-square.png" done diff --git a/static/404.html b/static/404.html @@ -4,7 +4,8 @@ <head> <title>Shimo Couldn't Find That!!</title> <link rel='stylesheet' type='text/css' href="/style.css"> - <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel='icon' type='image/png' href="/mascots/17-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -22,6 +23,7 @@ <h1>404, Not Found!</h1> <p id="bottom" align="center">Couldn't find that page, sorry!!</p> + </div> <style> body, html { @@ -32,11 +34,14 @@ opacity: 0; bottom: 0; left: 50%; - height: 0; + max-height: unset; + max-width: unset; + height: unset; transform: translateX(-50%); } </style> - <img src="/mascots/1.png" id="mascot"></img> + <img src="/mascots/17.png" id="mascot"></img> + <script src="colours.js"></script> <script src="image.js"></script> <script> const bottom = document.getElementById('bottom'); diff --git a/static/books.html b/static/books.html @@ -5,6 +5,7 @@ <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -27,6 +28,8 @@ </div> <img src="/mascots/1.png" id="mascot"></img> + <script src="colours.js"></script> <script src="image.js"></script> + <script>randomYui();</script> </body> </html> diff --git a/static/index.html b/static/index.html @@ -5,6 +5,7 @@ <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"> <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -38,12 +39,14 @@ <li>I have a blåhaj</li> <li>My Mum says I'm cool</li> <li>I'll give you kisses</li> - <li>I have a PGP key: <a href="shiimoe.rsa"><code>A5E16A6FFC9DD158</code></a></li> - <li>My website is <a href="https://git.knutsen.co/shii.moe">open source!</a></li> + <li>I have a PGP key: <a href="shiimoe.rsa"><code>A5E16A6FFC9DD158</code></a></li> + <li>My website is <a href="https://git.knutsen.co/shii.moe">open source!</a></li> </ol> </div> <img src="/mascots/1.png" id="mascot"></img> - <script src="image.js"></script> + <script src="colours.js"></script> + <script src="image.js"></script> + <script>randomYui();</script> </body> </html> diff --git a/static/music.html b/static/music.html @@ -5,6 +5,7 @@ <title>Musik!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -52,6 +53,8 @@ </div> <img src="/mascots/1.png" id="mascot"></img> + <script src="colours.js"></script> <script src="image.js"></script> + <script>randomYui();</script> </body> </html> diff --git a/static/norsk.html b/static/norsk.html @@ -5,6 +5,7 @@ <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -28,7 +29,8 @@ </div> <img src="/mascots/1.png" id="mascot"></img> + <script src="colours.js"></script> <script src="image.js"></script> - + <script>randomYui();</script> </body> </html> diff --git a/static/school.html b/static/school.html @@ -5,6 +5,7 @@ <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -27,6 +28,8 @@ </div> <img src="/mascots/1.png" id="mascot"></img> + <script src="colours.js"></script> <script src="image.js"></script> + <script>randomYui();</script> </body> </html> diff --git a/templates/guestbook.html b/templates/guestbook.html @@ -69,7 +69,7 @@ } .comment { margin: 2rem 0 1.5rem 0; - background: #00000005; + background: #00000008; padding: 0.7rem 1.2rem 0 1.2rem; border-bottom: 3pt solid #0000001a; } @@ -93,6 +93,7 @@ <link rel='stylesheet' type='text/css' href="style.css"/> <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> @@ -175,8 +176,11 @@ {% else %} <p>No comments to display:(</p> {% endif %} + </div> <img src="mascots/1.png" id="mascot"></img> + <script src="colours.js"></script> <script src="image.js"></script> + <script>randomYui();</script> </body> </html>
