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>

85
AI/style.css
View file

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

10
index.html
View file

@ -70,6 +70,7 @@
</ul> </ul>
</div> </div>
<div class="content"> <div class="content">
<button id="toggle-dark-light-mode">Toggle Dark/Light Mode</button>
<br><br><br> <br><br><br>
<a href="#">0 Days since last incident.</a> <a href="#">0 Days since last incident.</a>
<br><br> <br><br>
@ -85,7 +86,14 @@
<p>- Emily Dickinson</p> <p>- Emily Dickinson</p>
<br><br><br> <br><br><br>
</div> </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> <script>
const menuToggle = document.querySelector('.menuToggle'); const menuToggle = document.querySelector('.menuToggle');
const navigation = document.querySelector('.navigation'); const navigation = document.querySelector('.navigation');

22
style.css
View file

@ -19,6 +19,28 @@ a:visited{
body{ body{
background:#332e33; 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{ .navigation{
position: fixed; position: fixed;
inset: 20px 0 20px 20px; inset: 20px 0 20px 20px;