From c18e0889200d67b624e1a44202d5e67eb9984536 Mon Sep 17 00:00:00 2001 From: Parker Date: Tue, 24 Dec 2024 00:36:53 -0600 Subject: [PATCH] Default dark mode --- css/index.css | 32 +++++--------- css/pgp.css | 114 -------------------------------------------------- index.html | 16 +++---- js/toggle.js | 4 +- 4 files changed, 20 insertions(+), 146 deletions(-) delete mode 100644 css/pgp.css diff --git a/css/index.css b/css/index.css index 4b58b69..bda77c6 100644 --- a/css/index.css +++ b/css/index.css @@ -1,29 +1,19 @@ html { font-family: "Open Sans", Arial; - color: #454545; + color: #9F9FAA; scroll-behavior: smooth; -} - -html.dark * { background-color: #242528; - color: #9F9FAA; } -html.dark svg, -html.dark #about a { - color: #9F9FAA; - fill: #9F9FAA; +html.light * { + color: #444; + background-color: #F0F0F0; } -html.increased-contrast * { - background-color: #FFF; - color: #050505; -} - -html.increased-contrast svg, -html.increased-contrast #about a { - fill: #050505; - color: #050505; +html.light svg, +html.light #about a { + color: #444; + fill: #444; } body { @@ -51,7 +41,7 @@ nav { nav a { margin: 0 1rem; text-decoration: none; - color: #454545; + color: #9F9FAA; } nav a:hover { @@ -68,7 +58,6 @@ nav a:hover { right: 0; margin: 1rem; font-size: 1.5rem; - color: #454545; } #moon, #sun { @@ -154,7 +143,6 @@ svg:hover { bottom: 2%; left: 50%; transform: translateX(-50%); - color: #454545; font-size: 2rem; } @@ -205,7 +193,7 @@ svg:hover { #about a { text-decoration: underline; - color: #454545; + color: #9F9FAA; } #about a:hover { diff --git a/css/pgp.css b/css/pgp.css deleted file mode 100644 index 9dcc930..0000000 --- a/css/pgp.css +++ /dev/null @@ -1,114 +0,0 @@ -/* Import Montserrat font */ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap'); - -body { - margin: 0; - padding: 0; - font-family: 'Montserrat', sans-serif; - background-color: #242528; - color: #9F9FAA; -} - - -/* Navbar styles */ -nav { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 2rem; - background-color: #212223; - color: #9F9FAA; -} - -nav a { - text-decoration: none; - color: #9F9FAA; - font-size: 1.5rem; - margin: 0 1rem; -} - -nav a:hover { - color: #fff; -} - -.navbar-left { - display: flex; - justify-content: flex-start; - align-items: center; - margin-left: 15%; -} - -.navbar-right { - display: flex; - justify-content: flex-end; - align-items: center; - margin-right: 15%; -} - -/* Navbar media query for mobile */ -@media only screen and (max-width: 600px) { - nav a { - margin: 0; - font-size: 1rem; - } - - .navbar-left { - margin: 0 1rem; - } - - .navbar-right { - margin: 0 1rem; - } - - .navbar-right a { - margin-left: 1rem; - } -} - -/* Container styles */ -.container { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 1.25rem; - text-align: center; - width: 600px; - word-break: break-all; -} - -.container p { - text-align: left; -} - -/* Continer media query for mobile */ -@media only screen and (max-width: 600px) { - .container { - font-size: 1.25rem; - width: 300px; - } - - .container p { - margin: 1rem 0 2rem 0; - } -} - - -/* Footer styles */ -footer { - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - font-size: 1rem; - text-align: center; - margin-bottom: 2rem; - width: 90vw; -} - -/* Footer media query for mobile */ -@media only screen and (max-width: 600px) { - footer { - bottom: -2rem; - } -} \ No newline at end of file diff --git a/index.html b/index.html index 627548d..d13327e 100644 --- a/index.html +++ b/index.html @@ -25,11 +25,11 @@ Tor ( Mirror ) - + - + @@ -40,35 +40,35 @@ - + - + - + - + - + - + diff --git a/js/toggle.js b/js/toggle.js index 2399f7a..b364ab0 100644 --- a/js/toggle.js +++ b/js/toggle.js @@ -2,7 +2,7 @@ const moon = document.getElementById('moon'); const sun = document.getElementById('sun'); moon.addEventListener('click', () => { - document.documentElement.classList.remove('dark'); + document.documentElement.classList.add('light'); // Fade out moon and fade in sun moon.style.opacity = '0'; @@ -16,7 +16,7 @@ moon.addEventListener('click', () => { }); sun.addEventListener('click', () => { - document.documentElement.classList.add('dark'); + document.documentElement.classList.remove('light'); // Fade out sun and fade in moon sun.style.opacity = '0';