Attempt at dark mode, fix sliding anim
This commit is contained in:
parent
1a7c2ef151
commit
5613427b7f
|
|
@ -0,0 +1,39 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
enable-background="new 0 0 512 512"
|
||||
height="512px"
|
||||
id="Layer_1"
|
||||
version="1.1"
|
||||
viewBox="0 0 512 512"
|
||||
width="512px"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="moon.svg"
|
||||
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="0.45647053"
|
||||
inkscape:cx="302.31963"
|
||||
inkscape:cy="537.82224"
|
||||
inkscape:window-width="774"
|
||||
inkscape:window-height="831"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Layer_1" /><path
|
||||
d="M349.852,343.15c-49.875,49.916-131.083,49.916-181,0c-49.916-49.918-49.916-131.125,0-181.021 c13.209-13.187,29.312-23.25,47.832-29.812c5.834-2.042,12.293-0.562,16.625,3.792c4.376,4.375,5.855,10.833,3.793,16.625 c-12.542,35.375-4,73.666,22.25,99.917c26.209,26.228,64.5,34.75,99.916,22.25c5.792-2.062,12.271-0.582,16.625,3.793 c4.376,4.332,5.834,10.812,3.771,16.625C373.143,313.838,363.06,329.941,349.852,343.15z M191.477,184.754 c-37.438,37.438-37.438,98.354,0,135.771c40,40.021,108.125,36.416,143-8.168c-35.959,2.25-71.375-10.729-97.75-37.084 c-26.375-26.354-39.333-61.771-37.084-97.729C196.769,179.796,194.039,182.192,191.477,184.754z"
|
||||
fill="#1D1D1B"
|
||||
id="path1"
|
||||
style="fill:#ffffff" /></svg>
|
||||
<!-- Credits for this svg go to Alessio Atzeni on iconfinder -->
|
||||
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,61 @@
|
|||
// Check if a dark mode cookie exists, and apply dark mode if it does
|
||||
if (getCookie("darkMode") === "true") {
|
||||
applyDarkMode();
|
||||
}
|
||||
|
||||
// Detect dark mode
|
||||
function isDarkModeEnabled() {
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
if (isDarkModeEnabled()) {
|
||||
applyDarkMode();
|
||||
} else {
|
||||
console.log('Dark mode is not enabled.');
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
if (getCookie("darkMode") === "true") {
|
||||
// Disable dark mode
|
||||
setCookie("darkMode", "false", 365, "Strict");
|
||||
applyLightMode();
|
||||
} else {
|
||||
// Enable dark mode
|
||||
setCookie("darkMode", "true", 365, "Strict");
|
||||
applyDarkMode();
|
||||
}
|
||||
}
|
||||
|
||||
function applyDarkMode() {
|
||||
document.body.classList.add("dark-mode");
|
||||
}
|
||||
|
||||
function applyLightMode() {
|
||||
document.body.classList.remove("dark-mode");
|
||||
}
|
||||
|
||||
// Helper functions for handling cookies
|
||||
function setCookie(name, value, days, sameSite) {
|
||||
var expires = "";
|
||||
var sameSiteAttribute = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
if (sameSite) {
|
||||
sameSiteAttribute = "; samesite=" + sameSite;
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/" + sameSiteAttribute;
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -3,6 +3,17 @@ body, h1, p, ul, li, li2, p1 {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
--button-color: rgb(118, 181, 197);
|
||||
--sidebar-color: rgb(0, 160, 198);
|
||||
}
|
||||
|
||||
/* Dark mode stylse */
|
||||
|
||||
body.dark-mode {
|
||||
color: #fff;
|
||||
background-color: rgb(34, 34, 34);
|
||||
--button-color: rgb(27, 105, 125);
|
||||
--sidebar-color: rgb(14, 66, 79);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -13,7 +24,7 @@ a {
|
|||
|
||||
.clickbutton {
|
||||
padding: 10px;
|
||||
background-color: #00a0c6;
|
||||
background-color: var(--button-color);
|
||||
font-size: 15px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
|
|
@ -33,8 +44,8 @@ body {
|
|||
|
||||
/* Sidebar styles */
|
||||
.sidebar {
|
||||
transition: transform 0.3s ease;
|
||||
background-color: rgb(0, 160, 198);
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--sidebar-color);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
width: 250px;
|
||||
|
|
@ -52,7 +63,7 @@ body {
|
|||
heigh: 20px;
|
||||
overflow-y: hidden;
|
||||
position: fixed;
|
||||
transition: transform 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
color: rgb(118, 181, 197);
|
||||
padding: 20px;
|
||||
top: 0px;
|
||||
|
|
@ -98,8 +109,8 @@ p1 {
|
|||
border-radius: 5px;
|
||||
padding: 7px 16px;
|
||||
text-align: center;
|
||||
background-color: rgb(118, 181, 197);
|
||||
transition: background-color 0.3s ease 0s;
|
||||
background-color: var(--button-color);
|
||||
transition: all 0.3s ease 0s;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +120,9 @@ button {
|
|||
position: fixed;
|
||||
padding: 10px;
|
||||
color: rgb(255, 255, 255);
|
||||
background: rgb(118, 181, 197);
|
||||
background: var(--button-color);
|
||||
min-width: 28px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
|
|
@ -124,7 +137,7 @@ button:hover {
|
|||
.content {
|
||||
padding: 20px;
|
||||
margin-left: 300px;
|
||||
transition: margin-left 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -138,12 +151,8 @@ button:hover {
|
|||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.sidebar.display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.hidden {
|
||||
transform: translateX(-250px);
|
||||
transform: translateX(-290px);
|
||||
}
|
||||
|
||||
.content.expanded + .sidebar.hidden {
|
||||
|
|
@ -154,3 +163,9 @@ img {
|
|||
height: 250px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.darkmodeicon {
|
||||
height: 8px;
|
||||
margin-bottom: 1px;
|
||||
scale: 2.7;
|
||||
}
|
||||
|
|
|
|||
16
index.html
16
index.html
|
|
@ -10,6 +10,8 @@
|
|||
<body>
|
||||
<div class="closebar">
|
||||
<button id="sidebutton">></button>
|
||||
<button id="sidebutton" onclick="toggleDarkMode()" style="top: 48px;">
|
||||
<img class="darkmodeicon" alt="Toggle Dark Mode" src="/assets/img/moon.svg">
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<img src="/assets/img/hectabit.svg">
|
||||
|
|
@ -56,17 +58,9 @@
|
|||
<li><h1>Who are these contributors (so far)?</h1></li>
|
||||
<div class="spacer"></div>
|
||||
<li><p1>You can find a list of our amazing contributors</p1><a href=/halloffame> here!</a></li>
|
||||
</div> <script>
|
||||
document.getElementById("sidebutton").addEventListener("click", function() {
|
||||
var sidebar = document.querySelector(".sidebar");
|
||||
var content = document.querySelector(".content");
|
||||
var closebar = document.querySelector(".closebar");
|
||||
closebar.classList.toggle("expanded");
|
||||
sidebar.classList.toggle("hidden");
|
||||
content.classList.toggle("expanded");
|
||||
sidebar.classList.toggle("display");
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<script src=/sidebar.js></script>
|
||||
<script src=/darkmode.js></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
document.getElementById("sidebutton").addEventListener("click", function() {
|
||||
var sidebar = document.querySelector(".sidebar");
|
||||
var content = document.querySelector(".content");
|
||||
var closebar = document.querySelector(".closebar");
|
||||
closebar.classList.toggle("expanded");
|
||||
sidebar.classList.toggle("hidden");
|
||||
content.classList.toggle("expanded");
|
||||
});
|
||||
Reference in New Issue