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.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);
|
||||||
|
|
||||||
|
|||||||
245
package.json
245
package.json
@ -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": ""
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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" %}
|
||||||
@ -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>
|
||||||
@ -8,7 +8,7 @@ author: Matthew McKinnon
|
|||||||
<!-- excerpt start -->
|
<!-- excerpt start -->
|
||||||
<center>
|
<center>
|
||||||
|
|
||||||
|
 {width=200}
|
||||||
|
|
||||||
</center>
|
</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%;
|
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
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
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