tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

polish badge

Browse Source
This commit is contained in:
Tom 2025-03-25 16:54:54 +00:00
parent 2a7f6b2ecb
commit f0b5ba92d6
4 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_includes/default_head_tags.html
View File

@ -14,7 +14,10 @@
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<!-- Theme tags --> <!-- Theme tags -->
<meta name="theme-color" content="#fcfcfc"> <!-- <meta name="theme-color" content="#fcfcfc"> -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fcfcfc" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#141414" />
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> <link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> <link rel="icon" type="image/png" href="/favicon/android-chrome-512x512.png" media="(prefers-color-scheme: dark)">

17
assets/js/pre_page_load.js
View File

@ -14,6 +14,8 @@ const getCSSCustomProp = (propKey) => {
return response; return response;
}; };
const themeColor = document.querySelectorAll('meta[name="theme-color"]');
const applySetting = () => { const applySetting = () => {
let currentSetting = let currentSetting =
localStorage.getItem(STORAGE_KEY) || getCSSCustomProp(COLOR_MODE_KEY); localStorage.getItem(STORAGE_KEY) || getCSSCustomProp(COLOR_MODE_KEY);
@ -23,10 +25,19 @@ const applySetting = () => {
"data-user-color-scheme", "data-user-color-scheme",
currentSetting currentSetting
); );
switch (currentSetting) {
case "light":
console.log("setting theme colour to #fcfcfc");
themeColor.forEach((n) => n.setAttribute("content", "#fcfcfc"));
break;
case "dark":
themeColor.forEach((n) => n.setAttribute("content", "#222"));
break;
}
} }
console.log( // console.log(
`Mode Preference set on document.documentElement.getAttribute("data-user-color-scheme"): ${currentSetting}` // `Mode Preference set on document.documentElement.getAttribute("data-user-color-scheme"): ${currentSetting}`
); // );
}; };
let localStorageSetting = localStorage.getItem(STORAGE_KEY); let localStorageSetting = localStorage.getItem(STORAGE_KEY);

19
badge.html
View File

@ -12,10 +12,20 @@ img:
<head> <head>
{% include default_head_tags.html %} {% include default_head_tags.html %}
<style> <style>
header {
height: 100vh;
justify-content: unset;
}
.profile-pic-name { .profile-pic-name {
display: flex; display: flex;
} }
p {
font-size: min(7vw, 3vh);
}
img.qr { img.qr {
width: 50vw; width: 50vw;
height: 50vw; height: 50vw;
@ -41,6 +51,7 @@ header h1 {
top: 0px; top: 0px;
left: 100%; left: 100%;
padding-top: 0px; padding-top: 0px;
transform: translate(calc(-100% - 0.5em), 0.5em);
} }
.card { .card {
@ -52,6 +63,11 @@ header h1 {
place-items: center; place-items: center;
overflow: hidden; overflow: hidden;
border-radius: 25px; border-radius: 25px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, calc(-100% - 50px));
} }
.card::before { .card::before {
@ -117,7 +133,9 @@ header h1 {
</p> </p>
</div> </div>
<a href = "/">
<div class = "card"> <div class = "card">
<img <img
src="/assets/badge/qr.svg" src="/assets/badge/qr.svg"
class="qr invertable" class="qr invertable"
@ -126,6 +144,7 @@ header h1 {
width="175" width="175"
/> />
</div> </div>
</a>
<div class="user-toggle"> <div class="user-toggle">

11
manifest.json
View File

@ -1,8 +1,13 @@
---
layout: none
---
{ {
"name": "Tom Hodson's Website", "name": "Tom Hodson's Website Badge",
"short_name": "Tom's Site", "short_name": "Tom's Site Badge",
"start_url": "https://thomashodson.com/", "start_url": "/badge",
"homepage_url": "https://thomashodson.com",
"display": "standalone", "display": "standalone",
"manifest_version": 3,
"icons": [ "icons": [
{ {
"src": "apple-touch-icon.png", "src": "apple-touch-icon.png",