feat: add dark mode
This commit is contained in:
parent
ee7b3fd1d1
commit
fc56fecdb5
@ -17,8 +17,10 @@ module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.setUseGitIgnore(false);
|
||||
eleventyConfig.addPassthroughCopy('./src/css');
|
||||
eleventyConfig.addPassthroughCopy('./src/assets/');
|
||||
eleventyConfig.addPassthroughCopy('./src/js/');
|
||||
eleventyConfig.addWatchTarget('./src/css');
|
||||
eleventyConfig.addWatchTarget('./src/components');
|
||||
eleventyConfig.addWatchTarget('./src/js');
|
||||
eleventyConfig.addWatchTarget('./src/assets/');
|
||||
|
||||
eleventyConfig.setDataDeepMerge(true);
|
||||
|
||||
|
||||
245
package.json
245
package.json
@ -3,11 +3,11 @@
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "eleventy",
|
||||
"watch": "eleventy --watch",
|
||||
"serve": "eleventy --serve",
|
||||
"start": "eleventy --serve",
|
||||
"debug": "DEBUG=* eleventy"
|
||||
"build": "npx @11ty/eleventy",
|
||||
"watch": "npx eleventy --watch",
|
||||
"serve": "npx eleventy --serve",
|
||||
"start": "npx eleventy --serve",
|
||||
"debug": "DEBUG=* npx @11ty/eleventy"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
@ -19,11 +19,244 @@
|
||||
"dotenv": "^16.0.1",
|
||||
"eleventy-plugin-blog-tools": "^0.3.1",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-attrs": "^4.1.4"
|
||||
"markdown-it-attrs": "^4.1.4",
|
||||
"tailwindcss": "^3.4.11"
|
||||
},
|
||||
"repository": {
|
||||
"type": "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": ""
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
@ -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");
|
||||
})
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user