parker/pkrm.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: parker:9de34a0b3a3fe06fb5ea2a047742eea3abf5070d
Branches Tags
parker:main
...
compare: parker:a46359bfe7b0698ea293e2dda5d9b29d8bf58a5c
Branches Tags
parker:main

2 Commits
9de34a0b3a ... a46359bfe7

Author SHA1 Message Date
Parker
a46359bfe7
small changes 2025-03-28 23:47:27 -05:00
Parker
5e510d137f
Add aria-label 2025-03-28 22:40:43 -05:00
3 changed files with 67 additions and 53 deletions
Show Stats Expand all files Collapse all files

12
css/index.css
View File

@ -1,17 +1,15 @@
html { html {
font-family: "Open Sans", Arial;
color: #9F9FAA;
scroll-behavior: smooth; scroll-behavior: smooth;
background-color: #242528;
} }
html.light * { html * {
font-family: "Open Sans", Arial;
color: #444; color: #444;
background-color: #F0F0F0; background-color: #F0F0F0;
} }
html.light svg, html svg,
html.light #about a { html #about a{
color: #444; color: #444;
fill: #444; fill: #444;
} }
@ -38,7 +36,6 @@ nav {
nav a { nav a {
margin: 0 1rem; margin: 0 1rem;
text-decoration: none; text-decoration: none;
color: #9F9FAA;
} }
nav a:hover { nav a:hover {
@ -200,7 +197,6 @@ svg:hover {
#about a { #about a {
text-decoration: underline; text-decoration: underline;
color: #9F9FAA;
} }
#about a:hover { #about a:hover {

28
index.html
View File

@ -7,16 +7,34 @@
<meta http-equiv="onion-location" content="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion"> <meta http-equiv="onion-location" content="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion">
<!-- Dicourage indexing --> <!-- Dicourage indexing -->
<meta name="robots" content="noindex, nofollow, noarchive"> <meta name="robots" content="noindex, nofollow, noarchive">
<link rel="stylesheet", href="/css/index.css">
<meta property="og:title" content="Parker M."/> <meta property="og:title" content="Parker M."/>
<meta property="og:url" content="https://pkrm.dev/"/> <meta property="og:url" content="https://pkrm.dev/"/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<meta property="og:description" content="My personal website. See my projects."/> <meta property="og:description" content="My personal website. See my projects."/>
<script src="/js/toggle.js" defer></script>
<title>Parker M.</title> <title>Parker M.</title>
<script>
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
}
</script>
<style>
html.dark * {
color: #9F9FAA;
background-color: #242528;
}
html.dark svg,
html.dark #about a {
color: #9F9FAA;
fill: #9F9FAA;
}
</style>
<script src="/js/toggle.js" defer></script>
<link rel="preload", href="/css/index.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head> </head>
<body> <body>
<nav> <nav>
@ -66,7 +84,7 @@
</a> </a>
</header> </header>
<a id="down-arrow" href="#about"> <a id="down-arrow" href="#about" aria-label="Scroll down to About section">
<svg svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.847 451.847" width="50px" height="50px" fill="#9F9FAA"> <svg svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.847 451.847" width="50px" height="50px" fill="#9F9FAA">
<path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0

80
js/toggle.js
View File

@ -1,61 +1,61 @@
const moon = document.getElementById('moon'); const moon = document.getElementById('moon');
const sun = document.getElementById('sun'); const sun = document.getElementById('sun');
if (!document.cookie.includes('preference')) { /**
setPreference(true); * Check if the user has dark mode enabled
*/
if (localStorage.getItem('darkMode') === 'true') {
turnDark();
} else { } else {
const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1]; turnLight();
if (preference === 'true') { }
turnLight();
/**
* Update local storage with the current theme
*/
function updateLocalStorage() {
if (document.documentElement.classList.contains('dark')) {
localStorage.setItem('darkMode', 'true');
} else { } else {
turnDark(); localStorage.setItem('darkMode', 'false');
}
}
function setPreference(value) {
if (typeof value === 'boolean') {
const expires = new Date();
expires.setFullYear(expires.getFullYear() + 1); // 1 year
document.cookie = `preference=${value};expires=${expires.toUTCString()};path=/`;
turnLight();
} }
} }
/**
* Toggle the theme to dark
*/
function turnLight() { function turnLight() {
document.documentElement.classList.add('light'); document.documentElement.classList.remove('dark');
moon.style.opacity = '0'; sun.style.display = 'none';
sun.style.opacity = '1'; moon.style.display = 'block';
setTimeout(() => {
moon.style.display = 'none';
sun.style.display = 'block';
}
, 100);
}
function turnDark() {
document.documentElement.classList.remove('light');
sun.style.opacity = '0'; sun.style.opacity = '0';
moon.style.opacity = '1'; moon.style.opacity = '1';
setTimeout(() => { updateLocalStorage();
sun.style.display = 'none';
moon.style.display = 'block';
}
, 100);
} }
/**
* Toggle the theme to light
*/
function turnDark() {
document.documentElement.classList.add('dark');
moon.style.display = 'none';
sun.style.display = 'block';
moon.style.opacity = '0';
sun.style.opacity = '1';
updateLocalStorage();
}
// Check for icon clicks
moon.addEventListener('click', () => { moon.addEventListener('click', () => {
document.documentElement.classList.add('light'); turnDark();
setPreference(true);
turnLight();
}); });
sun.addEventListener('click', () => { sun.addEventListener('click', () => {
document.documentElement.classList.remove('light'); turnLight();
setPreference(false);
turnDark();
}); });