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

Compare commits

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

No commits in common. "a46359bfe7b0698ea293e2dda5d9b29d8bf58a5c" and "9de34a0b3a3fe06fb5ea2a047742eea3abf5070d" have entirely different histories.
a46359bfe7 ... 9de34a0b3a

3 changed files with 53 additions and 67 deletions
Show Stats Expand all files Collapse all files

12
css/index.css
View File

@ -1,15 +1,17 @@
html { html {
font-family: "Open Sans", Arial;
color: #9F9FAA;
scroll-behavior: smooth; scroll-behavior: smooth;
background-color: #242528;
} }
html * { html.light * {
font-family: "Open Sans", Arial;
color: #444; color: #444;
background-color: #F0F0F0; background-color: #F0F0F0;
} }
html svg, html.light svg,
html #about a{ html.light #about a {
color: #444; color: #444;
fill: #444; fill: #444;
} }
@ -36,6 +38,7 @@ 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 {
@ -197,6 +200,7 @@ 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,34 +7,16 @@
<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."/>
<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> <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> <title>Parker M.</title>
</head> </head>
<body> <body>
<nav> <nav>
@ -84,7 +66,7 @@
</a> </a>
</header> </header>
<a id="down-arrow" href="#about" aria-label="Scroll down to About section"> <a id="down-arrow" href="#about">
<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

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