diff --git a/.eleventy.js b/.eleventy.js index 22819ce..6a212b7 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -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); diff --git a/package.json b/package.json index 38e99b7..5e2bef5 100644 --- a/package.json +++ b/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": "" } diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index c50d11c..6565b68 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -1,9 +1,10 @@ {% include "layouts/header.njk" %} -
+ +
{% block content %} {{ content | safe }} {% endblock %} -
+ {% include "layouts/footer.njk" %} \ No newline at end of file diff --git a/src/_includes/layouts/header.njk b/src/_includes/layouts/header.njk index 5ff8482..53c23c8 100644 --- a/src/_includes/layouts/header.njk +++ b/src/_includes/layouts/header.njk @@ -2,11 +2,23 @@ {{ title }} + + +
@@ -16,6 +28,8 @@

Computer Problems Fixed

+ + {% block head %} {% endblock %} \ No newline at end of file diff --git a/src/blog/posts/2022/08/07/NewWebsite.md b/src/blog/posts/2022/08/07/NewWebsite.md index 7b5ac30..b18500e 100644 --- a/src/blog/posts/2022/08/07/NewWebsite.md +++ b/src/blog/posts/2022/08/07/NewWebsite.md @@ -8,7 +8,7 @@ author: Matthew McKinnon
-![](/assets/img/fireworks.jpg) +![](/assets/img/fireworks.jpg) {width=200}
diff --git a/src/css/global.css b/src/css/global.css index 7abdc4a..349806e 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -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 } diff --git a/src/index.njk b/src/index.njk index 8319400..a972d1d 100644 --- a/src/index.njk +++ b/src/index.njk @@ -6,7 +6,7 @@ eleventyExcludeFromCollections: true {% block content %} {% for post in collections.posts | reverse %} -
+

{{ post.data.title }}

{{ post.data.date }} diff --git a/src/js/darkmode.js b/src/js/darkmode.js new file mode 100644 index 0000000..b6a56b7 --- /dev/null +++ b/src/js/darkmode.js @@ -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"); +}) +}); \ No newline at end of file