feat: add dark mode
This commit is contained in:
@ -1,9 +1,10 @@
|
||||
{% include "layouts/header.njk" %}
|
||||
<body>
|
||||
<article class="post_content">
|
||||
|
||||
<div id="blog" class="post">
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
</article>
|
||||
</div>
|
||||
</body>
|
||||
{% include "layouts/footer.njk" %}
|
||||
@ -2,11 +2,23 @@
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="/css/global.css" />
|
||||
<script src="https://kit.fontawesome.com/83f4233a72.js" crossorigin="anonymous"></script>
|
||||
<script src="/js/darkmode.js"></script>
|
||||
|
||||
<div class="menu">
|
||||
<ul class="menu>">
|
||||
<li class="menu"><a href="/">Home</a></li>
|
||||
<li class="menu"><a href="/disclaimer">Disclaimer</a></li>
|
||||
<li class="menu"><a href="/contact">Contact Me</a></li>
|
||||
<li class="menu">
|
||||
<button id="modeSwitcher" class="container">
|
||||
<div class="sun visible"></div>
|
||||
<div class="moon">
|
||||
<div class="star"></div>
|
||||
<div class="star small"></div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<!-- <li class="menu" float=right><a href="#About">Remote Support</a></li> !-->
|
||||
</ul>
|
||||
</div>
|
||||
@ -16,6 +28,8 @@
|
||||
<p style="font-size:24px">Computer Problems Fixed</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
@ -8,7 +8,7 @@ author: Matthew McKinnon
|
||||
<!-- excerpt start -->
|
||||
<center>
|
||||
|
||||
|
||||
 {width=200}
|
||||
|
||||
</center>
|
||||
|
||||
|
||||
@ -1,9 +1,174 @@
|
||||
body, html {
|
||||
/* styles.css */
|
||||
:root {
|
||||
--bg-color: lightgrey;
|
||||
--post-bg-color: white;
|
||||
--text-color: #000000;
|
||||
--button-bg-color: #000000;
|
||||
--button-text-color: #ffffff;
|
||||
}
|
||||
|
||||
/* body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: Arial, sans-serif;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
} */
|
||||
|
||||
.container {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: scale(0.6) rotate(0deg);
|
||||
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
|
||||
/* white transparent for Safari */
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0) 50%,
|
||||
#f0f0f0 50%
|
||||
);
|
||||
}
|
||||
|
||||
.sun:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
#f0f0f0 30%,
|
||||
rgba(0, 0, 0, 0) 31%,
|
||||
rgba(0, 0, 0, 0) 50%,
|
||||
#f0f0f0 50%
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.sun.visible {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(180deg);
|
||||
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
|
||||
}
|
||||
.moon {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 12.5%;
|
||||
top: 18.75%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 50%;
|
||||
box-shadow: 9px 3px 0px 0px #f0f0f0;
|
||||
opacity: 0;
|
||||
transform: scale(0.3) rotate(65deg);
|
||||
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
|
||||
}
|
||||
.moon.visible {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
|
||||
}
|
||||
.star {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
display: block;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-right: 7px solid rgba(0, 0, 0, 0);
|
||||
border-bottom: 5px solid #f0f0f0;
|
||||
border-left: 7px solid rgba(0, 0, 0, 0);
|
||||
transform: scale(0.55) rotate(35deg);
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in 0.4s;
|
||||
}
|
||||
.star:before {
|
||||
border-bottom: 5px solid #f0f0f0;
|
||||
border-left: 3px solid rgba(0, 0, 0, 0);
|
||||
border-right: 3px solid rgba(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: -3px;
|
||||
left: -5px;
|
||||
display: block;
|
||||
content: "";
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
.star:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
color: red;
|
||||
top: 0px;
|
||||
left: -7px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-right: 7px solid rgba(0, 0, 0, 0);
|
||||
border-bottom: 5px solid #f0f0f0;
|
||||
border-left: 7px solid rgba(0, 0, 0, 0);
|
||||
transform: rotate(-70deg);
|
||||
content: "";
|
||||
}
|
||||
.moon.visible .star {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.star.small {
|
||||
transform: scale(0.35) rotate(35deg);
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 37.5%;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in 0.45s;
|
||||
}
|
||||
.moon.visible .star.small {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.45) rotate(35deg);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: yellow;
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
--bg-color: black;
|
||||
--post-bg-color: #333;
|
||||
--text-color: #ffffff;
|
||||
--button-bg-color: #ffffff;
|
||||
--button-text-color: #000000;
|
||||
}
|
||||
|
||||
body, html {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
/* transition: background-color 0.3s ease, color 0.3s ease; */
|
||||
margin: 0;
|
||||
font-family: Menlo, Consolas, DejaVu Sans Mono, monospace;
|
||||
font-family: Verdana, Menlo, Consolas, DejaVu Sans Mono, monospace;
|
||||
font-size: 20px;
|
||||
background-color: lightgrey;
|
||||
background-color:
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -52,7 +217,7 @@ h1 {
|
||||
|
||||
|
||||
|
||||
.menu li a {
|
||||
.menu li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
@ -87,18 +252,10 @@ h1 {
|
||||
|
||||
}
|
||||
|
||||
.blogtext {
|
||||
.post {
|
||||
max-width: 1200px;
|
||||
margin: 20 auto;
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 14px 16px
|
||||
}
|
||||
|
||||
.post_content {
|
||||
max-width: 1200px;
|
||||
margin: 20 auto;
|
||||
background-color: white;
|
||||
background-color: var(--post-bg-color);
|
||||
display: block;
|
||||
padding: 14px 16px
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ eleventyExcludeFromCollections: true
|
||||
|
||||
{% block content %}
|
||||
{% for post in collections.posts | reverse %}
|
||||
<div class="blogtext">
|
||||
<div id="blog" class="post">
|
||||
|
||||
<h1>{{ post.data.title }}</h1>
|
||||
{{ post.data.date }}
|
||||
|
||||
26
src/js/darkmode.js
Normal file
26
src/js/darkmode.js
Normal file
@ -0,0 +1,26 @@
|
||||
// script.js
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const switcher = document.getElementById('modeSwitcher');
|
||||
const currentMode = localStorage.getItem('theme') || 'light';
|
||||
|
||||
if (currentMode === 'dark') {
|
||||
document.body.classList.add('dark-mode');
|
||||
// switcher.textContent = 'Switch to Light Mode';
|
||||
}
|
||||
|
||||
switcher.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
|
||||
// switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
|
||||
localStorage.setItem('theme', mode);
|
||||
});
|
||||
|
||||
const sun = document.querySelector(".sun");
|
||||
const moon = document.querySelector(".moon");
|
||||
const button = document.querySelector(".container");
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
sun.classList.toggle("visible");
|
||||
moon.classList.toggle("visible");
|
||||
})
|
||||
});
|
||||
Reference in New Issue
Block a user