diff --git a/.eleventy.js b/.eleventy.js new file mode 100644 index 0000000..1e9bf49 --- /dev/null +++ b/.eleventy.js @@ -0,0 +1,32 @@ +module.exports = function(eleventyConfig) { + const config = { + "config" : { + // "base_url": "kittygirl.online", + "title": process.env.TITLE || "kittygirl.online", + "menu": [ + { "name": "My Bog", "url": "/blog" }, + { "name": "About", "url": "/about" }, + ], + "theme": "dark", + }, + } + for (const item in config) { + eleventyConfig.addGlobalData(item, config[item]); + } + + + var nunjucksDate = require("nunjucks-date"); + // http://momentjs.com/docs/#/displaying/format/ + nunjucksDate.setDefaultFormat("DD.MM.YYYY"); + eleventyConfig.addFilter("date", nunjucksDate); + + eleventyConfig.addPassthroughCopy("src/assets"); + eleventyConfig.addPassthroughCopy("src/js"); + eleventyConfig.addPassthroughCopy("src/css"); + return { + dir: { + input: "src", // read source files from "src" + output: "_site" // output result into "_site" + } + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index dd94425..d058ade 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "11ty", "version": "1.0.0", "license": "ISC", + "dependencies": { + "nunjucks-date": "^1.5.0" + }, "devDependencies": { "@11ty/eleventy": "^3.0.0" } @@ -339,7 +342,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==", - "dev": true, "license": "MIT" }, "node_modules/acorn": { @@ -398,7 +400,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, + "devOptional": true, "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", @@ -462,7 +464,6 @@ "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==", - "dev": true, "license": "MIT" }, "node_modules/balanced-match": { @@ -518,7 +519,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=8" @@ -542,7 +543,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "fill-range": "^7.1.1" @@ -562,7 +563,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "anymatch": "~3.1.2", @@ -917,7 +918,7 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -993,7 +994,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -1029,7 +1029,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, + "devOptional": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -1208,7 +1208,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" @@ -1242,7 +1242,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -1262,7 +1262,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -1282,7 +1282,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -1582,6 +1582,15 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/moo": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", @@ -1619,7 +1628,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -1629,7 +1638,6 @@ "version": "3.2.4", "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz", "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==", - "dev": true, "license": "BSD-2-Clause", "dependencies": { "a-sync-waterfall": "^1.0.0", @@ -1651,11 +1659,20 @@ } } }, + "node_modules/nunjucks-date": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/nunjucks-date/-/nunjucks-date-1.5.0.tgz", + "integrity": "sha512-uB1p4L80eXFwwWYuAcWAm12iZu6/ezfShskHxfU8fQxOKGDdEYZ3E0acUfqU6y4UdHSamC6TYfkyxyB59yHYRQ==", + "license": "MIT", + "dependencies": { + "moment": "*", + "nunjucks": "^3.x" + } + }, "node_modules/nunjucks/node_modules/commander": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", - "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -1729,7 +1746,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -1873,7 +1890,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "picomatch": "^2.2.1" @@ -2201,7 +2218,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" diff --git a/package.json b/package.json index 0c2a88f..0fdb293 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "main": "index.js", "scripts": { "start": "npx @11ty/eleventy --serve", - "build": "env NODE_ENV=production npx @11ty/eleventy" + "build": "env NODE_ENV=production npx @11ty/eleventy", + "build-cip": "env TITLE='~za08gywo' NODE_ENV=production npx @11ty/eleventy --pathprefix '~za08gywo'" }, "keywords": [], "author": "", @@ -12,5 +13,8 @@ "description": "", "devDependencies": { "@11ty/eleventy": "^3.0.0" + }, + "dependencies": { + "nunjucks-date": "^1.5.0" } -} +} \ No newline at end of file diff --git a/src/_includes/base.njk b/src/_includes/base.njk new file mode 100644 index 0000000..ab0a8fa --- /dev/null +++ b/src/_includes/base.njk @@ -0,0 +1,19 @@ + + + +{% include "src/_includes/partials/header.njk" %} + + +
+ {% include "src/_includes/partials/darktoggle.njk" %} + + {% include "src/_includes/partials/nav.njk"%} + +
+ {{ content | safe }} +
+ + {% include "src/_includes/partials/footer.njk" %} +
+ + diff --git a/src/_includes/blog-page.njk b/src/_includes/blog-page.njk new file mode 100644 index 0000000..b2c4884 --- /dev/null +++ b/src/_includes/blog-page.njk @@ -0,0 +1,18 @@ +--- +layout: "base.njk" +--- +
+

+ {{ title }} +

+ + {{ content | safe }} + + +
+ +{% include "src/_includes/partials/blob.html" %} \ No newline at end of file diff --git a/src/_includes/blog-post.njk b/src/_includes/blog-post.njk new file mode 100644 index 0000000..fa0af54 --- /dev/null +++ b/src/_includes/blog-post.njk @@ -0,0 +1,12 @@ +--- +layout: "base.njk" +--- +
+

+ {{ title }} +

+ +

Published at {{ page.data.date | date }}

+ + {{ content | safe }} +
\ No newline at end of file diff --git a/src/_includes/partials/blob.html b/src/_includes/partials/blob.html new file mode 100644 index 0000000..acaac2b --- /dev/null +++ b/src/_includes/partials/blob.html @@ -0,0 +1,6 @@ +
+
+
+
+
+
diff --git a/src/_includes/partials/darktoggle.njk b/src/_includes/partials/darktoggle.njk new file mode 100644 index 0000000..d93fbc8 --- /dev/null +++ b/src/_includes/partials/darktoggle.njk @@ -0,0 +1,44 @@ +
+ +
+ \ No newline at end of file diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk new file mode 100644 index 0000000..c503e00 --- /dev/null +++ b/src/_includes/partials/footer.njk @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk new file mode 100644 index 0000000..5b11349 --- /dev/null +++ b/src/_includes/partials/header.njk @@ -0,0 +1,18 @@ + + {# to fight against fouc :( #} + + + + + {{ title }} + + {# TODO: DARK/LIGHT THEME HERE MAYBE??? #} + + + diff --git a/src/_includes/partials/nav.njk b/src/_includes/partials/nav.njk new file mode 100644 index 0000000..55dd154 --- /dev/null +++ b/src/_includes/partials/nav.njk @@ -0,0 +1,26 @@ +
+
+ {% if config.base_url %} + {{ config.title }} + {% else %} + {{ config.title }} + {% endif %} +
+ +
\ No newline at end of file diff --git a/src/assets/darkmode-toggle/cloud_1.svg b/src/assets/darkmode-toggle/cloud_1.svg new file mode 100644 index 0000000..5157b63 --- /dev/null +++ b/src/assets/darkmode-toggle/cloud_1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/darkmode-toggle/cloud_2.svg b/src/assets/darkmode-toggle/cloud_2.svg new file mode 100644 index 0000000..e5715cd --- /dev/null +++ b/src/assets/darkmode-toggle/cloud_2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/darkmode-toggle/cloud_3.svg b/src/assets/darkmode-toggle/cloud_3.svg new file mode 100644 index 0000000..1933ad1 --- /dev/null +++ b/src/assets/darkmode-toggle/cloud_3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/darkmode-toggle/cloud_4.svg b/src/assets/darkmode-toggle/cloud_4.svg new file mode 100644 index 0000000..f376327 --- /dev/null +++ b/src/assets/darkmode-toggle/cloud_4.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/darkmode-toggle/stars.svg b/src/assets/darkmode-toggle/stars.svg new file mode 100644 index 0000000..fd02641 --- /dev/null +++ b/src/assets/darkmode-toggle/stars.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/noise.svg b/src/assets/noise.svg new file mode 100644 index 0000000..d274f71 --- /dev/null +++ b/src/assets/noise.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + diff --git a/src/blog/first.md b/src/blog/first.md new file mode 100644 index 0000000..6d47461 --- /dev/null +++ b/src/blog/first.md @@ -0,0 +1,11 @@ +--- +title: "First Post" +layout: "blog-post.njk" +tags: "blog" +date: 2025-04-04 +--- +This is my first post :) + +# meow + +## meowmeow \ No newline at end of file diff --git a/src/blog/index.md b/src/blog/index.md new file mode 100644 index 0000000..1a37ece --- /dev/null +++ b/src/blog/index.md @@ -0,0 +1,7 @@ +--- +title: "blog page" +layout: blog-page.njk +--- +Dis is the main blog baige :D + +Here is my blog posts: \ No newline at end of file diff --git a/src/blog/second.md b/src/blog/second.md new file mode 100644 index 0000000..f53df48 --- /dev/null +++ b/src/blog/second.md @@ -0,0 +1,7 @@ +--- +title: "Second Post" +layout: "blog-post.njk" +tags: "blog" +date: 2025-04-04 +--- +This is my second post \ No newline at end of file diff --git a/src/blog/third.md b/src/blog/third.md new file mode 100644 index 0000000..c0d7d90 --- /dev/null +++ b/src/blog/third.md @@ -0,0 +1,6 @@ +--- +title: "Third Post" +layout: "blog-post.njk" +tags: "blog" +--- +yippeeeee 3 posts ! \ No newline at end of file diff --git a/src/css/dark.css b/src/css/dark.css new file mode 100644 index 0000000..a6608f1 --- /dev/null +++ b/src/css/dark.css @@ -0,0 +1,79 @@ +.dark { + --red: #ff5a7a; + --pink: #c085ff; + --orange: #ffaa33; + --white: #eaddff; + + background: linear-gradient(149deg, rgba(18, 28, 81, 0.9) 0%, rgba(46, 23, 55, 0.9) 100%), url('/assets/noise.svg'); + background-attachment: fixed; + color: var(--white); + transition: all 0.3s ease; + } + + /* Cards - smoother purple gradient, softened text */ + .dark .card-uwu, + .dark .kyuties-card { + background: linear-gradient(149deg, rgba(39, 54, 124, 0.9) 0%, rgba(66, 26, 99, 0.9) 100%), url('/assets/noise.svg'); + color: var(--white); + box-shadow: 0 4px 30px rgba(57, 28, 69, 0.5); + } + + /* Buttons - Better contrast, slightly softer shadows */ + .dark .button { + background: linear-gradient(149deg, #d6b6f2 0%, #a169e6 100%), url('/assets/noise.svg'); + color: #18002a; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25); + } + + /* Links - pastel hover with brighter highlight */ + .dark a { + color: #e5caff; + transition: all 0.3s ease; + } + + .dark a:hover { + color: #ffffff; + text-shadow: 0 0 8px rgba(229, 202, 255, 0.9); + } + + /* Scrollbars - smoother blend */ + .dark .card-uwu::-webkit-scrollbar-thumb { + background: #aa6eff; + } + + .dark .card-uwu::-webkit-scrollbar-thumb:hover { + background: #925cff; + } + + /* Hero section borders - subtle glow on grid */ + .dark .hero { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3em; + + background: + linear-gradient(to right, #b981e5 1px, transparent 1px) 0 0, + linear-gradient(to right, #b981e5 1px, transparent 1px) 0 100%, + linear-gradient(to left, #b981e5 1px, transparent 1px) 100% 0, + linear-gradient(to left, #b981e5 1px, transparent 1px) 100% 100%, + linear-gradient(to bottom, #b981e5 1px, transparent 1px) 0 0, + linear-gradient(to bottom, #b981e5 1px, transparent 1px) 100% 0, + linear-gradient(to top, #b981e5 1px, transparent 1px) 0 100%, + linear-gradient(to top, #b981e5 1px, transparent 1px) 100% 100%; + + background-repeat: no-repeat; + background-size: 20px 20px; + } + + /* Blobs - consistent pastel shades */ + .dark #blob1 { background-color: #9e1b5d; } + .dark #blob2 { background-color: #9345E6; } + .dark #blob3 { background-color: #C535E6; } + .dark #blob4 { background-color: #E635B7; } + + .dark .arrow { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojRUFEREZGO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPgo=) + } + diff --git a/src/css/darkmode-toggle.css b/src/css/darkmode-toggle.css new file mode 100644 index 0000000..fcc2eb6 --- /dev/null +++ b/src/css/darkmode-toggle.css @@ -0,0 +1,167 @@ +:root { + --darkmode-toggle-bg-color: #cde7ff; + --darkmode-toggle-switch-width: 50px; + --darkmode-toggle-switch-height: 30px; + --darkmode-toggle-switch-round: 50px; + --darkmode-toggle-switch-padding-x: 5px; + --darkmode-toggle-switch-bg: linear-gradient(to bottom, #73bbff, #a2d1fd); + --darkmode-toggle-switch-dark-bg: linear-gradient(to top, #2b3347, #181d27); + --darkmode-toggle-border-width: 2px; + --darkmode-toggle-border-gradient: linear-gradient(to bottom, #a2d1fd, #cde7ff); + --darkmode-toggle-border-dark-gradient: linear-gradient(to bottom, #000000, #6c7384); + --darkmode-toggle-sunmoon-size: 20px; + --darkmode-toggle-transition: all 0.5s ease; + --darkmode-tooggle-border-color-light: #90C9FE; + --darkmode-tooggle-border-color-dark: #565C6B; +} + +#darkmode-container { + position: absolute; + top: 1em; + right: 1em; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--darkmode-toggle-switch-round); +} + +.darkmode-label { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--darkmode-toggle-switch-width); + height: var(--darkmode-toggle-switch-height); + border-radius: var(--darkmode-toggle-switch-round); + cursor: pointer; + transition: var(--darkmode-toggle-transition); + background: var(--darkmode-toggle-switch-bg); + border: var(--darkmode-toggle-border-width) solid var(--darkmode-tooggle-border-color-light); + overflow: hidden; +} + +#darkmode-container.dark .darkmode-label { + border: var(--darkmode-toggle-border-width) solid var(--darkmode-tooggle-border-color-dark); +} + +.darkmode-label::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + border-radius: var(--darkmode-toggle-switch-round); + opacity: 0; + background: var(--darkmode-toggle-switch-dark-bg); + transition: var(--darkmode-toggle-transition); +} + +#darkmode-container.dark .darkmode-label::before { + opacity: 1; +} + +.darkmode-label input { + display: none; +} + +.darkmode-sunmoon { + position: absolute; + width: var(--darkmode-toggle-sunmoon-size); + height: var(--darkmode-toggle-sunmoon-size); + border-radius: 50%; + transition: var(--darkmode-toggle-transition); + left: var(--darkmode-toggle-switch-padding-x); + z-index: 1; + background-color: #FFC187; + box-shadow: 0px 0px 11.7px 0px #FFC187, 0px 0px 20px 0px #ffc18768, -2px -2px 5px 0px #ffab5c inset; +} + +#darkmode-container.dark .darkmode-sunmoon { + left: calc(100% - var(--darkmode-toggle-sunmoon-size) - var(--darkmode-toggle-switch-padding-x)); + background-color: #dee5f3; + box-shadow: 0px 0px 51.7px 0px #dee5f3; +} + +.darkmode-darkside { + position: absolute; + top: 0.5px; + left: 0.5px; + width: 75%; + height: 75%; + border-radius: 50%; + background-color: #FFC187; + transition: var(--darkmode-toggle-transition); +} + +#darkmode-container.dark .darkmode-darkside { + background-color: #565c6b; +} + +.darkmode-clouds { + border-radius: var(--darkmode-toggle-switch-round); + position: relative; + height: 100%; + width: 100%; + overflow: hidden; +} + +.darkmode-cloud { + position: absolute; + width: 60%; + transition: var(--darkmode-toggle-transition); +} + +.darkmode-cloud-1 { + bottom: -45%; + left: 0; +} + +.darkmode-cloud-2 { + bottom: -15%; + left: 25px; +} + +.darkmode-cloud-3 { + bottom: -20%; + right: 0px; +} + +.darkmode-cloud-4 { + bottom: -06%; + right: -25px; +} + + +#darkmode-container.dark .darkmode-cloud-1 { + bottom: -35%; + left: -110px; +} + +#darkmode-container.dark .darkmode-cloud-2 { + bottom: -15%; + left: -110px; + transition: all 0.7s ease; +} + +#darkmode-container.dark .darkmode-cloud-3 { + bottom: -15%; + right: -110px; +} + +#darkmode-container.dark .darkmode-cloud-4 { + bottom: -5%; + right: -110px; + transition: all 0.7s ease; +} + +.darkmode-stars { + position: absolute; + top: 150%; + left: 0; + transform: translateY(-50%); + pointer-events: none; + transition: var(--darkmode-toggle-transition); +} + +#darkmode-container.dark .darkmode-stars { + top: 70%; +} \ No newline at end of file diff --git a/src/css/light.css b/src/css/light.css new file mode 100644 index 0000000..85c9ff4 --- /dev/null +++ b/src/css/light.css @@ -0,0 +1,432 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Righteous&family=Kosugi&family=RocknRoll+One&family=Gothic+A1&family=Black+Han+Sans&family=PT+Sans+Caption&family=Russo+One&family=Palanquin+Dark&family=Raleway:wght@500&family=Commissioner&family=Alegreya+Sans:wght@700&family=Mitr&family=Lalezar&display=swap'); + +:root { + margin: 0; + --red: #d62800; + --pink: #d462a6; + --orange: #ff9b56; + --white: #ffffff; + background: linear-gradient(149deg, rgba(255, 1, 1, 0.5) 0%, rgba(228, 177, 49, 0.5) 100%), url('/assets/noise.svg'); + background-attachment: fixed; + font-family: "Righteos"; + transition: all 0.3s ease; +} + +.title { + font-family: "Righteous"; + font-size: 3em; + margin-top: 2em; +} + +a { + text-decoration: none; + color: #000; + transition: all 0.3s ease; +} + +a:hover { + color: #000; +} + +body::before { + background: #8C8C8C; + filter: url(#noiseFilter); +} + +html, body { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + /* height: 100%; */ + gap: 3em; + margin: 0 10em; + background: transparent; +} + +.cards { + display: grid; + justify-content: center; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.cards-column { + display: flexbox; + flex-direction: column; + grid-column: span 2; +} + +.card-uwu { + overflow: auto; + margin: 40px 20px; + background: #ffffff; + align-items: center; + text-align: center; + border-radius: 1.4vw; + padding: 20px; + + background: linear-gradient(149deg, rgba(232, 21, 193, 0.8) 0%, rgba(236, 148, 24, 0.8) 100%), url('/assets/noise.svg'); + background-attachment: fixed; +} + +.kyuties { + display: flex; + justify-content: space-evenly; +} + +.kyuties-card { + overflow: auto; + margin: 10px; + width: 25vw; + height: 25vw; + background: #ffffff; + align-items: center; + text-align: center; + border-radius: 1.4vw; + padding: 20px; + + background: linear-gradient(149deg, rgba(232, 21, 193, 0.8) 0%, rgba(236, 148, 24, 0.8) 100%), url('/assets/noise.svg'); + background-attachment: fixed; +} + +.card-header { + grid-column: 2 / span 2; + justify-content: center; + align-content: center; + font-family: 'Righteous'; + font-weight: 150; + font-style: italic; + font-size: 24px; + margin: 0px; +} + +.card-uwu:hover { + box-shadow: 0 4px 80px 10px rgba(27, 26, 42, 0.25); +} + +/* Custom Scrollbar styles */ +.card-uwu::-webkit-scrollbar { + width: 10px; /* Adjust the width of the scrollbar */ +} + +.card-uwu::-webkit-scrollbar-track { + background: transparent; /* The track of the scrollbar */ +} + +.card-uwu::-webkit-scrollbar-thumb { + background: #901eed; /* The draggable part of the scrollbar */ + border-radius: 100px; +} + +.card-uwu::-webkit-scrollbar-thumb:hover { + background: #5d129a; /* Color when you hover over the draggable part of the scrollbar */ +} + + +/* For Firefox */ +.card-uwu { + scrollbar-width: thin; /* "auto" or "thin" */ + scrollbar-color: #901eed transparent; /* The draggable part of the scrollbar and the track */ +} + +.card-title { + font-family: "Righteous"; + font-size: 3em; +} + +.card-image { + width: 40%; + height: 40%; + border-radius: 50%; + object-fit: cover; + box-shadow: 0 4px 80px 10px rgba(27, 26, 42, 0.35); +} + + +a.card-link { + color: #000; + font-size: 2em; + text-decoration: underline; +} + +/* Blobs */ +.blob-cont { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: -2; + height: 500px; + width: 500px; + position: relative; + right: 5em; +} + + +.blob { + border-radius: 100px; + filter: blur(40px); +} + +#blob1 { + background-color: var(--white); + position: absolute; + top: 250px; + right: 0; + height: 200px; + width: 200px; + + animation: blob4 8s infinite linear; +} + +#blob2 { + background-color: var(--red); + position: absolute; + top: 200px; + left: 100px; + height: 200px; + width: 200px; + + animation: blob1 8s infinite ease; +} + +#blob3 { + background-color: var(--orange); + position: absolute; + top: 80px; + right: -20px; + height: 200px; + width: 250px; + + animation: blob2 8s infinite ease; +} + +#blob4 { + background-color: var(--pink); + position: absolute; + right: 0; + top: 300px; + height: 250px; + width: 200px; + + animation: blob3 8s infinite linear; +} + +@keyframes blob1 { + 0% { + top: 200px; + left: 100px; + transform: scale(1); + } + 30% { + top: 300px; + left: 150px; + transform: scale(1.2); + } + 60% { + top: 100px; + left: 200px; + transform: scale(1.3); + } + 100% { + top: 200px; + left: 100px; + transform: scale(1); + } +} + +@keyframes blob2 { + 0% { + top: 80px; + right: -20px; + transform: scale(1.2); + } + 30% { + top: 300px; + right: -20px; + transform: scale(1); + } + 60% { + top: 200px; + right: 100px; + transform: scale(1); + } + 100% { + top: 80px; + right: -20px; + transform: scale(1.2); + } +} + +@keyframes blob3 { + 0% { + top: 250px; + right: 0; + transform: scale(1); + } + 30% { + top: 150px; + right: 150px; + transform: scale(1.4); + } + 60% { + top: 250px; + right: 100px; + transform: scale(1); + } + 100% { + top: 250px; + right: 0; + transform: scale(1); + } +} + +@keyframes blob4 { + 0% { + top: 150px; + right: -50px; + transform: scale(1.6); + } + 30% { + top: 100px; + right: 40px; + transform: scale(1.3); + } + 60% { + top: 250px; + right: 10px; + transform: scale(1); + } + 100% { + top: 150px; + right: -50px; + transform: scale(1.6); + } +} + +header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + margin-bottom: 10vh; + font-family: "Righteous"; + font-size: 20px; + margin-top: 2em; +} + +nav { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + gap: 3em; + margin-top: 0.6em; +} + +.hero { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + gap: 3em; + background: linear-gradient(to right, #151515 1px, transparent 1px) 0 0, + linear-gradient(to right, #151515 1px, transparent 1px) 0 100%, + linear-gradient(to left, #151515 1px, transparent 1px) 100% 0, + linear-gradient(to left, #151515 1px, transparent 1px) 100% 100%, + linear-gradient(to bottom, #151515 1px, transparent 1px) 0 0, + linear-gradient(to bottom, #151515 1px, transparent 1px) 100% 0, + linear-gradient(to top, #151515 1px, transparent 1px) 0 100%, + linear-gradient(to top, #151515 1px, transparent 1px) 100% 100%; + background-repeat: no-repeat; + background-size: 20px 20px; +} + +.hero-title { + margin-top: 10vh; + font-size: 5em; +} + +:root::-webkit-scrollbar { + display: none; +} + +p { + max-width: 45vw; +} + +.link { + font-family: "Righteous"; + text-decoration: underline; + color: #910c75; +} + +.button { + font-family: "Righteous"; + font-size: 1.5em; + border-radius: 13px; + border: none; + padding: 1em 2em; + background: linear-gradient(149deg, rgba(232, 21, 193, 0.8) 0%, rgba(236, 148, 24, 0.8) 100%), url('/assets/noise.svg'); + background-attachment: fixed; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + cursor: pointer; + color: #000; + margin-bottom: 1em; + width: 5vw; +} + +.category { + font-family: "Righteous"; + font-size: 2em; + margin-top: 5vh; +} + +img.emoji { + vertical-align: -10%; +} + +.bold-text { + font-weight: bold; +} + +ul.socials { + margin-left: -25px; + font-size: 1.2em; +} + +/* arrow bounce */ +.arrow +{ + position: relative; + bottom: -2rem; + left: 50%; + margin-left:-20px; + width: 40px; + height: 40px; + + /** + * Dark Arrow Down + */ + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==); + background-size: contain; + + opacity: 1; +transition: opacity 0.3s ease; +} + +.bounce { + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..e17afa4 --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,3 @@ +@import url(./light.css); +@import url(./dark.css); +@import url(./darkmode-toggle.css); diff --git a/src/index.njk b/src/index.njk new file mode 100644 index 0000000..f83ac3b --- /dev/null +++ b/src/index.njk @@ -0,0 +1,13 @@ +--- +title: "main page" +layout: base.njk +--- +
+

+ {{ title }} +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ +{% include "src/_includes/partials/blob.html" %} \ No newline at end of file