commit 0196de9615343a5d7325baba9e9c5c6e9d287135
parent 1e2fc11f2978cda7a238f41ff93180d0721f3d62
Author: knutsen <samuel@knutsen.co>
Date: Fri, 2 Jul 2021 00:10:41 +0100
Smooth load mascots, noscript makes them always visible.
Diffstat:
9 files changed, 61 insertions(+), 47 deletions(-)
diff --git a/public/image.js b/public/image.js
@@ -1,31 +1,33 @@
-const YUI_COUNT = 17;
-const NOVELTY = [11, 15, 16];
-
-const mascot = document.getElementById("mascot");
-const favicon = document.querySelector("link[rel~='icon']");
-mascot.style.opacity = 0;
-
-const randomYui = (excludeList=[]) => {
- if (!Array.isArray(excludeList))
- excludeList = [];
- const picks = [...new Array(YUI_COUNT)]
- .map((_, i) => i + 1)
- .filter(e => !excludeList.includes(e));
- const pick = picks[Math.floor(Math.random() * picks.length)];
- const stem = "/mascots/" + pick;
- mascot.style.opacity = 0;
- mascot.setAttribute("src", stem + ".png");
- favicon.setAttribute("href", stem + "-square.png");
-
- const loaded = () => { mascot.style.opacity = .85 };
- if (mascot.complete) loaded();
- else mascot.addEventListener('load', loaded);
-
- useColourScheme({
- 11: 'pink',
- 15: 'green',
- 16: 'rainbow'
- }[pick] || 'default');
-}
-
-mascot.addEventListener("click", randomYui)
+const MASCOT_COUNT = 17;
+const MASCOTS = [...new Array(MASCOT_COUNT)].map((_, i) => i + 1)
+const NOVELTY = [11, 15, 16]; //< Novelty/special mascots.
+
+const mascot = document.getElementById("mascot");
+const favicon = document.querySelector("link[rel~='icon']");
+
+const setMascot = (pick) => {
+ const stem = `/mascots/${pick}`;
+ mascot.style.opacity = 0;
+ mascot.setAttribute('src', `${stem}.png`);
+ favicon.setAttribute('href', `${stem}-square.png`);
+
+ const loaded = () => { mascot.style.opacity = .85 };
+ if (mascot.complete) loaded();
+ else mascot.addEventListener('load', loaded);
+}
+
+const randomMascot = (excludeList=[]) => {
+ if (!Array.isArray(excludeList)) excludeList = [];
+
+ const picks = MASCOTS.filter(e => !excludeList.includes(e));
+ const pick = picks[Math.floor(Math.random() * picks.length)];
+ setMascot(pick);
+
+ useColourScheme({
+ 11: 'pink',
+ 15: 'green',
+ 16: 'rainbow'
+ }[pick] || 'default');
+}
+
+mascot.addEventListener('click', randomMascot)
diff --git a/public/style.css b/public/style.css
@@ -163,6 +163,7 @@ pre code {
}
#mascot {
+ opacity: 0; /* before load */
max-height: var(--mascot-height);
max-width: var(--mascot-max-width);
position: fixed;
@@ -217,6 +218,8 @@ h1 {
color: black;
text-align: center;
font-variant: small-caps;
+ filter: drop-shadow(0px 0px 3px #0002);
+ text-shadow: 1.3pt 1.3pt #6800ff52;
}
li {
diff --git a/static/404.html b/static/404.html
@@ -40,6 +40,7 @@
transform: translateX(-50%);
}
</style>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
<img src="/mascots/17.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
diff --git a/static/books.html b/static/books.html
@@ -4,7 +4,7 @@
<head>
<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='icon' type='image/png' href="/mascots/2-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">
@@ -27,9 +27,10 @@
</div>
- <img src="/mascots/1.png" id="mascot"></img>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="/mascots/2.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
- <script>randomYui(NOVELTY);</script>
+ <script>randomMascot(NOVELTY);</script>
</body>
</html>
diff --git a/static/index.html b/static/index.html
@@ -21,6 +21,8 @@
<div class="titleButton"><a href="/books">Bøker</a></div>
</div>
+ <noscript><p>Welcome, Based JavaScript Hater.</p></noscript>
+
<p>Hei, jeg heter Shimo, jeg studerer fysikk og kjemi på universitet.
Jeg liker å lese (favoritten min er Kafka) og spile gitar.
Waifuen min er Yui, selvfølgelig.
@@ -44,9 +46,10 @@
</ol>
</div>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
<img src="/mascots/1.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
- <script>randomYui(NOVELTY);</script>
+ <script>randomMascot(NOVELTY);</script>
</body>
</html>
diff --git a/static/music.html b/static/music.html
@@ -4,7 +4,7 @@
<head>
<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='icon' type='image/png' href="/mascots/3-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">
@@ -52,9 +52,10 @@
</div>
- <img src="/mascots/1.png" id="mascot"></img>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="/mascots/3.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
- <script>randomYui(NOVELTY);</script>
+ <script>randomMascot(NOVELTY);</script>
</body>
</html>
diff --git a/static/norsk.html b/static/norsk.html
@@ -4,7 +4,7 @@
<head>
<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='icon' type='image/png' href="/mascots/4-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">
@@ -28,9 +28,10 @@
</div>
- <img src="/mascots/1.png" id="mascot"></img>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="/mascots/4.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
- <script>randomYui(NOVELTY);</script>
+ <script>randomMascot(NOVELTY);</script>
</body>
</html>
diff --git a/static/school.html b/static/school.html
@@ -4,7 +4,7 @@
<head>
<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='icon' type='image/png' href="/mascots/5-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">
@@ -27,9 +27,10 @@
</div>
- <img src="/mascots/1.png" id="mascot"></img>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="/mascots/5.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
- <script>randomYui(NOVELTY);</script>
+ <script>randomMascot(NOVELTY);</script>
</body>
</html>
diff --git a/templates/guestbook.html b/templates/guestbook.html
@@ -92,7 +92,7 @@
</style>
<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/8-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">
@@ -178,9 +178,10 @@
{% endif %}
</div>
- <img src="mascots/1.png" id="mascot"></img>
+ <noscript><style>#mascot { opacity: 0.85; }</style></noscript>
+ <img src="mascots/8.png" id="mascot"></img>
<script src="colours.js"></script>
<script src="image.js"></script>
- <script>randomYui();</script>
+ <script>randomMascot(NOVELTY);</script>
</body>
</html>
