feat: add dark mode

This commit is contained in:
Matthew McKinnon 2024-09-15 01:24:32 +10:00
parent ee7b3fd1d1
commit fc56fecdb5
8 changed files with 458 additions and 25 deletions

View File

@ -17,8 +17,10 @@ module.exports = function(eleventyConfig) {
eleventyConfig.setUseGitIgnore(false); eleventyConfig.setUseGitIgnore(false);
eleventyConfig.addPassthroughCopy('./src/css'); eleventyConfig.addPassthroughCopy('./src/css');
eleventyConfig.addPassthroughCopy('./src/assets/'); eleventyConfig.addPassthroughCopy('./src/assets/');
eleventyConfig.addPassthroughCopy('./src/js/');
eleventyConfig.addWatchTarget('./src/css'); eleventyConfig.addWatchTarget('./src/css');
eleventyConfig.addWatchTarget('./src/components'); eleventyConfig.addWatchTarget('./src/js');
eleventyConfig.addWatchTarget('./src/assets/');
eleventyConfig.setDataDeepMerge(true); eleventyConfig.setDataDeepMerge(true);

View File

@ -3,11 +3,11 @@
"version": "1.0.0", "version": "1.0.0",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "eleventy", "build": "npx @11ty/eleventy",
"watch": "eleventy --watch", "watch": "npx eleventy --watch",
"serve": "eleventy --serve", "serve": "npx eleventy --serve",
"start": "eleventy --serve", "start": "npx eleventy --serve",
"debug": "DEBUG=* eleventy" "debug": "DEBUG=* npx @11ty/eleventy"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
@ -19,11 +19,244 @@
"dotenv": "^16.0.1", "dotenv": "^16.0.1",
"eleventy-plugin-blog-tools": "^0.3.1", "eleventy-plugin-blog-tools": "^0.3.1",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"markdown-it-attrs": "^4.1.4" "markdown-it-attrs": "^4.1.4",
"tailwindcss": "^3.4.11"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://gitlab.comprofix.com/comprofix/website.git" "url": "https://gitlab.comprofix.com/comprofix/website.git"
}, },
"dependencies": {
"a-sync-waterfall": "^1.0.1",
"acorn": "^7.4.1",
"ansi-regex": "^6.1.0",
"ansi-styles": "^4.3.0",
"any-promise": "^0.1.0",
"anymatch": "^3.1.3",
"arg": "^5.0.2",
"argparse": "^1.0.10",
"array-differ": "^3.0.0",
"array-union": "^2.1.0",
"array-uniq": "^1.0.3",
"arrify": "^2.0.1",
"asap": "^2.0.6",
"assert-never": "^1.3.0",
"async": "^3.2.6",
"babel-walk": "^3.0.0-canary-5",
"balanced-match": "^1.0.2",
"bcp-47": "^1.0.8",
"bcp-47-match": "^1.0.3",
"bcp-47-normalize": "^1.1.1",
"binary-extensions": "^2.3.0",
"brace-expansion": "^1.1.11",
"braces": "^3.0.3",
"call-bind": "^1.0.7",
"camelcase-css": "^2.0.1",
"chalk": "^4.1.2",
"character-parser": "^2.2.0",
"chokidar": "^3.6.0",
"color-convert": "^2.0.1",
"color-name": "^1.1.4",
"commander": "^10.0.1",
"concat-map": "^0.0.1",
"constantinople": "^4.0.1",
"cross-spawn": "^7.0.3",
"cssesc": "^3.0.0",
"debug": "^4.3.7",
"define-data-property": "^1.1.4",
"dependency-graph": "^0.11.0",
"dev-ip": "^1.0.1",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"doctypes": "^1.1.0",
"dom-serializer": "^1.4.1",
"domelementtype": "^2.3.0",
"domhandler": "^4.3.1",
"domutils": "^2.8.0",
"eastasianwidth": "^0.2.0",
"ee-first": "^1.1.1",
"ejs": "^3.1.10",
"emoji-regex": "^9.2.2",
"encodeurl": "^2.0.0",
"entities": "^3.0.1",
"errno": "^0.1.8",
"es-define-property": "^1.0.0",
"es-errors": "^1.3.0",
"escape-html": "^1.0.3",
"escape-string-regexp": "^4.0.0",
"esprima": "^4.0.1",
"extend-shallow": "^2.0.1",
"fast-glob": "^3.3.2",
"fastq": "^1.17.1",
"filelist": "^1.0.4",
"fill-range": "^7.1.1",
"finalhandler": "^1.3.1",
"foreground-child": "^3.3.0",
"fs.realpath": "^1.0.0",
"function-bind": "^1.1.2",
"get-intrinsic": "^1.2.4",
"glob": "^7.2.3",
"glob-parent": "^5.1.2",
"gopd": "^1.0.1",
"graceful-fs": "^4.2.11",
"gray-matter": "^4.0.3",
"hamljs": "^0.6.2",
"handlebars": "^4.7.8",
"has-flag": "^4.0.0",
"has-property-descriptors": "^1.0.2",
"has-proto": "^1.0.3",
"has-symbols": "^1.0.3",
"has-tostringtag": "^1.0.2",
"hasown": "^2.0.2",
"htmlparser2": "^7.2.0",
"http-equiv-refresh": "^1.0.0",
"inflight": "^1.0.6",
"inherits": "^2.0.4",
"is-alphabetical": "^1.0.4",
"is-alphanumerical": "^1.0.4",
"is-binary-path": "^2.1.0",
"is-core-module": "^2.15.1",
"is-decimal": "^1.0.4",
"is-expression": "^4.0.0",
"is-extendable": "^0.1.1",
"is-extglob": "^2.1.1",
"is-fullwidth-code-point": "^3.0.0",
"is-glob": "^4.0.3",
"is-json": "^2.0.1",
"is-number": "^7.0.0",
"is-promise": "^2.2.2",
"is-regex": "^1.1.4",
"isexe": "^2.0.0",
"iso-639-1": "^2.1.15",
"jackspeak": "^3.4.3",
"jake": "^10.9.2",
"jiti": "^1.21.6",
"js-stringify": "^1.0.2",
"js-yaml": "^3.14.1",
"jstransformer": "^1.0.0",
"junk": "^1.0.3",
"kind-of": "^6.0.3",
"kleur": "^4.1.5",
"lilconfig": "^2.1.0",
"lines-and-columns": "^1.2.4",
"linkify-it": "^4.0.1",
"liquidjs": "^10.16.7",
"list-to-array": "^1.1.0",
"lodash.deburr": "^4.1.0",
"lru-cache": "^10.4.3",
"luxon": "^3.5.0",
"maximatch": "^0.1.0",
"mdurl": "^1.0.1",
"merge2": "^1.4.1",
"micromatch": "^4.0.8",
"mime": "^3.0.0",
"minimatch": "^3.1.2",
"minimist": "^1.2.8",
"minipass": "^3.3.6",
"mkdirp": "^0.5.6",
"moo": "^0.5.2",
"morphdom": "^2.7.4",
"ms": "^2.1.3",
"multimatch": "^5.0.0",
"mustache": "^4.2.0",
"mz": "^2.7.0",
"nanoid": "^3.3.7",
"neo-async": "^2.6.2",
"normalize-path": "^3.0.0",
"nunjucks": "^3.2.4",
"object-assign": "^4.1.1",
"object-hash": "^3.0.0",
"on-finished": "^2.4.1",
"once": "^1.4.0",
"package-json-from-dist": "^1.0.0",
"parse-srcset": "^1.0.2",
"parseurl": "^1.3.3",
"path-is-absolute": "^1.0.1",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"path-scurry": "^1.11.1",
"path-to-regexp": "^6.3.0",
"picocolors": "^1.1.0",
"picomatch": "^2.3.1",
"pify": "^2.3.0",
"pirates": "^4.0.6",
"please-upgrade-node": "^3.2.0",
"postcss": "^8.4.45",
"postcss-import": "^15.1.0",
"postcss-js": "^4.0.1",
"postcss-load-config": "^4.0.2",
"postcss-nested": "^6.2.0",
"postcss-selector-parser": "^6.1.2",
"postcss-value-parser": "^4.2.0",
"posthtml": "^0.16.6",
"posthtml-parser": "^0.11.0",
"posthtml-render": "^3.0.0",
"posthtml-urls": "^1.0.0",
"promise": "^7.3.1",
"promise-each": "^2.2.0",
"prr": "^1.0.1",
"pug": "^3.0.3",
"pug-attrs": "^3.0.0",
"pug-code-gen": "^3.0.3",
"pug-error": "^2.1.0",
"pug-filters": "^4.0.0",
"pug-lexer": "^5.0.1",
"pug-linker": "^4.0.0",
"pug-load": "^3.0.0",
"pug-parser": "^6.0.0",
"pug-runtime": "^3.0.1",
"pug-strip-comments": "^2.0.0",
"pug-walk": "^2.0.0",
"queue-microtask": "^1.2.3",
"read-cache": "^1.0.0",
"readdirp": "^3.6.0",
"recursive-copy": "^2.0.14",
"resolve": "^1.22.8",
"reusify": "^1.0.4",
"rimraf": "^2.7.1",
"run-parallel": "^1.2.0",
"section-matter": "^1.0.0",
"semver": "^7.6.3",
"semver-compare": "^1.0.0",
"set-function-length": "^1.2.2",
"shebang-command": "^2.0.0",
"shebang-regex": "^3.0.0",
"signal-exit": "^4.1.0",
"slash": "^1.0.0",
"slugify": "^1.6.6",
"source-map": "^0.6.1",
"source-map-js": "^1.2.1",
"sprintf-js": "^1.0.3",
"ssri": "^8.0.1",
"statuses": "^2.0.1",
"string-width": "^5.1.2",
"string-width-cjs": "^4.2.3",
"strip-ansi": "^7.1.0",
"strip-ansi-cjs": "^6.0.1",
"strip-bom-string": "^1.0.0",
"sucrase": "^3.35.0",
"supports-color": "^7.2.0",
"supports-preserve-symlinks-flag": "^1.0.0",
"thenify": "^3.3.1",
"thenify-all": "^1.6.0",
"to-fast-properties": "^2.0.0",
"to-regex-range": "^5.0.1",
"token-stream": "^1.0.0",
"ts-interface-checker": "^0.1.13",
"uc.micro": "^1.0.6",
"uglify-js": "^3.19.3",
"unpipe": "^1.0.0",
"util-deprecate": "^1.0.2",
"void-elements": "^3.1.0",
"which": "^2.0.2",
"with": "^7.0.2",
"wordwrap": "^1.0.0",
"wrap-ansi": "^8.1.0",
"wrap-ansi-cjs": "^7.0.0",
"wrappy": "^1.0.2",
"ws": "^8.18.0",
"yallist": "^4.0.0",
"yaml": "^2.5.1"
},
"description": "" "description": ""
} }

View File

@ -1,9 +1,10 @@
{% include "layouts/header.njk" %} {% include "layouts/header.njk" %}
<body> <body>
<article class="post_content">
<div id="blog" class="post">
{% block content %} {% block content %}
{{ content | safe }} {{ content | safe }}
{% endblock %} {% endblock %}
</article> </div>
</body> </body>
{% include "layouts/footer.njk" %} {% include "layouts/footer.njk" %}

View File

@ -2,11 +2,23 @@
<head> <head>
<title>{{ title }}</title> <title>{{ title }}</title>
<link rel="stylesheet" href="/css/global.css" /> <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"> <div class="menu">
<ul class="menu>"> <ul class="menu>">
<li class="menu"><a href="/">Home</a></li> <li class="menu"><a href="/">Home</a></li>
<li class="menu"><a href="/disclaimer">Disclaimer</a></li> <li class="menu"><a href="/disclaimer">Disclaimer</a></li>
<li class="menu"><a href="/contact">Contact Me</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> !--> <!-- <li class="menu" float=right><a href="#About">Remote Support</a></li> !-->
</ul> </ul>
</div> </div>
@ -16,6 +28,8 @@
<p style="font-size:24px">Computer Problems Fixed</p> <p style="font-size:24px">Computer Problems Fixed</p>
</div> </div>
</div> </div>
{% block head %} {% block head %}
{% endblock %} {% endblock %}
</head> </head>

View File

@ -8,7 +8,7 @@ author: Matthew McKinnon
<!-- excerpt start --> <!-- excerpt start -->
<center> <center>
![](/assets/img/fireworks.jpg) ![](/assets/img/fireworks.jpg) {width=200}
</center> </center>

View File

@ -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%; 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; margin: 0;
font-family: Menlo, Consolas, DejaVu Sans Mono, monospace; font-family: Verdana, Menlo, Consolas, DejaVu Sans Mono, monospace;
font-size: 20px; font-size: 20px;
background-color: lightgrey; background-color:
} }
h1 { h1 {
@ -52,7 +217,7 @@ h1 {
.menu li a { .menu li a {
display: block; display: block;
color: white; color: white;
text-align: center; text-align: center;
@ -87,18 +252,10 @@ h1 {
} }
.blogtext { .post {
max-width: 1200px; max-width: 1200px;
margin: 20 auto; margin: 20 auto;
background-color: white; background-color: var(--post-bg-color);
display: block;
padding: 14px 16px
}
.post_content {
max-width: 1200px;
margin: 20 auto;
background-color: white;
display: block; display: block;
padding: 14px 16px padding: 14px 16px
} }

View File

@ -6,7 +6,7 @@ eleventyExcludeFromCollections: true
{% block content %} {% block content %}
{% for post in collections.posts | reverse %} {% for post in collections.posts | reverse %}
<div class="blogtext"> <div id="blog" class="post">
<h1>{{ post.data.title }}</h1> <h1>{{ post.data.title }}</h1>
{{ post.data.date }} {{ post.data.date }}

26
src/js/darkmode.js Normal file
View 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");
})
});