Compare commits
2 Commits
9de34a0b3a
...
a46359bfe7
| Author | SHA1 | Date | |
|---|---|---|---|
a46359bfe7
|
|||
|
5e510d137f
|
@ -1,17 +1,15 @@
|
||||
html {
|
||||
font-family: "Open Sans", Arial;
|
||||
color: #9F9FAA;
|
||||
scroll-behavior: smooth;
|
||||
background-color: #242528;
|
||||
}
|
||||
|
||||
html.light * {
|
||||
html * {
|
||||
font-family: "Open Sans", Arial;
|
||||
color: #444;
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
||||
html.light svg,
|
||||
html.light #about a {
|
||||
html svg,
|
||||
html #about a{
|
||||
color: #444;
|
||||
fill: #444;
|
||||
}
|
||||
@ -38,7 +36,6 @@ nav {
|
||||
nav a {
|
||||
margin: 0 1rem;
|
||||
text-decoration: none;
|
||||
color: #9F9FAA;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
@ -200,7 +197,6 @@ svg:hover {
|
||||
|
||||
#about a {
|
||||
text-decoration: underline;
|
||||
color: #9F9FAA;
|
||||
}
|
||||
|
||||
#about a:hover {
|
||||
|
||||
28
index.html
28
index.html
@ -7,16 +7,34 @@
|
||||
<meta http-equiv="onion-location" content="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion">
|
||||
<!-- Dicourage indexing -->
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
|
||||
<link rel="stylesheet", href="/css/index.css">
|
||||
<meta property="og:title" content="Parker M."/>
|
||||
<meta property="og:url" content="https://pkrm.dev/"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="My personal website. See my projects."/>
|
||||
|
||||
<script src="/js/toggle.js" defer></script>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<nav>
|
||||
@ -66,7 +84,7 @@
|
||||
</a>
|
||||
</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">
|
||||
<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
|
||||
|
||||
80
js/toggle.js
80
js/toggle.js
@ -1,61 +1,61 @@
|
||||
const moon = document.getElementById('moon');
|
||||
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 {
|
||||
const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1];
|
||||
if (preference === 'true') {
|
||||
turnLight();
|
||||
turnLight();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update local storage with the current theme
|
||||
*/
|
||||
function updateLocalStorage() {
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
localStorage.setItem('darkMode', 'true');
|
||||
} else {
|
||||
turnDark();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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();
|
||||
localStorage.setItem('darkMode', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the theme to dark
|
||||
*/
|
||||
function turnLight() {
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
|
||||
moon.style.opacity = '0';
|
||||
sun.style.opacity = '1';
|
||||
|
||||
setTimeout(() => {
|
||||
moon.style.display = 'none';
|
||||
sun.style.display = 'block';
|
||||
}
|
||||
, 100);
|
||||
}
|
||||
|
||||
function turnDark() {
|
||||
document.documentElement.classList.remove('light');
|
||||
sun.style.display = 'none';
|
||||
moon.style.display = 'block';
|
||||
|
||||
sun.style.opacity = '0';
|
||||
moon.style.opacity = '1';
|
||||
|
||||
setTimeout(() => {
|
||||
sun.style.display = 'none';
|
||||
moon.style.display = 'block';
|
||||
}
|
||||
, 100);
|
||||
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';
|
||||
sun.style.opacity = '1';
|
||||
|
||||
updateLocalStorage();
|
||||
}
|
||||
|
||||
// Check for icon clicks
|
||||
moon.addEventListener('click', () => {
|
||||
document.documentElement.classList.add('light');
|
||||
setPreference(true);
|
||||
turnLight();
|
||||
turnDark();
|
||||
});
|
||||
|
||||
sun.addEventListener('click', () => {
|
||||
document.documentElement.classList.remove('light');
|
||||
setPreference(false);
|
||||
turnDark();
|
||||
turnLight();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user