limepotato/limepot-xyz
1
0
Fork 0
Code Issues 3 Pull requests Activity

Darkmode

Browse source
This commit is contained in:
nelle 2022-12-23 18:33:18 -07:00
parent b569a9f53a
commit 0e7852ecb4
4 changed files with 119 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
AI/darkmodetext.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LimePot's Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="darkmode">
<header>
<h1>LimePot's Portfolio</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<button id="toggle-dark-light-mode">Toggle Dark/Light Mode</button>
</header>
<main>
<h2>Welcome to my Portfolio!</h2>
<p>Here you can find information about me and my projects.</p>
<p>Click on the links in the navigation bar above to learn more.</p>
</main>
<footer>
<p>Copyright 2022 LimePot</p>
</footer>
<script>
const toggleButton = document.getElementById('toggle-dark-light-mode');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('darkmode');
document.body.classList.toggle('lightmode');
});
</script>
</body>
</html>

41
AI/style.css
View file

@ -2,34 +2,51 @@ body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
}
header {
/* Dark mode styles */
.darkmode {
background-color: #333;
color: #fff;
}
.darkmode a {
color: #00bfff;
}
/* Light mode styles */
.lightmode {
background-color: #fff;
color: #222;
}
.lightmode a {
color: #00bfff;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
}
header h1 {
header h1 {
margin: 0;
}
}
header nav ul {
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
}
header nav li {
header nav li {
margin-left: 20px;
}
}
header nav a {
header nav a {
color: #fff;
text-decoration: none;
}
}

8
index.html
View file

@ -70,6 +70,7 @@
</ul>
</div>
<div class="content">
<button id="toggle-dark-light-mode">Toggle Dark/Light Mode</button>
<br><br><br>
<a href="#">0 Days since last incident.</a>
<br><br>
@ -86,6 +87,13 @@
<br><br><br>
</div>
<script>
const toggleButton = document.getElementById('toggle-dark-light-mode');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('darkmode');
document.body.classList.toggle('lightmode');
});
</script>
<script>
const menuToggle = document.querySelector('.menuToggle');
const navigation = document.querySelector('.navigation');

22
style.css
View file

@ -19,6 +19,28 @@ a:visited{
body{
background:#332e33;
}
/* Dark mode styles */
.darkmode {
background-color: #332e33;
color: #fff;
}
.darkmode a {
color: #00bfff;
}
/* Light mode styles */
.lightmode {
background-color: #fff;
color: #222;
}
.lightmode a {
color: #00bfff;
}
.navigation{
position: fixed;
inset: 20px 0 20px 20px;