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">
<!-- 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/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)">

17
assets/js/pre_page_load.js
View File

@ -14,6 +14,8 @@ const getCSSCustomProp = (propKey) => {
return response;
};
const themeColor = document.querySelectorAll('meta[name="theme-color"]');
const applySetting = () => {
let currentSetting =
localStorage.getItem(STORAGE_KEY) || getCSSCustomProp(COLOR_MODE_KEY);
@ -23,10 +25,19 @@ const applySetting = () => {
"data-user-color-scheme",
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(
`Mode Preference set on document.documentElement.getAttribute("data-user-color-scheme"): ${currentSetting}`
);
}
// console.log(
// `Mode Preference set on document.documentElement.getAttribute("data-user-color-scheme"): ${currentSetting}`
// );
};
let localStorageSetting = localStorage.getItem(STORAGE_KEY);

19
badge.html
View File

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

11
manifest.json
View File

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