diff --git a/_src/_data/88x31-critters.json b/_src/_data/88x31-critters.json index 1ee3fd2..f53e105 100644 --- a/_src/_data/88x31-critters.json +++ b/_src/_data/88x31-critters.json @@ -19,6 +19,12 @@ "name": "cabl", "src": "https://cabl.rodeo/" }, + { + "alt": "catshaped's website", + "button": "/assets/img/button/catshaped.gif", + "name": "catshaped", + "src": "https://catshaped.neocities.org/" + }, { "alt": "Drakonic's website", "button": "/assets/img/button/drakonic.gif", @@ -55,6 +61,12 @@ "name": "the mice nest", "src": "https://micenest.xyz/" }, + { + "alt": "Okesska's website", + "button": "/assets/img/button/okesska_8831_final2.gif", + "name": "kess!", + "src": "https://okesska.neocities.org/" + }, { "alt": "Pebble's website", "button": "/assets/img/button/pebble.gif", diff --git a/_src/_data/88x31.json b/_src/_data/88x31.json index 358aa82..15aa664 100644 --- a/_src/_data/88x31.json +++ b/_src/_data/88x31.json @@ -61,6 +61,12 @@ "name": "Konqi!", "src": "https://community.kde.org/Konqi" }, + { + "alt": "Krita homepage", + "button": "/assets/img/button/yummy-cricket_krita.png", + "name": "Krita", + "src": "https://krita.org/" + }, { "alt": "Lospec random palette page", "button": "/assets/img/button/lospec.png", @@ -98,6 +104,12 @@ "name": "No one's around to help.", "src": "https://youtube.com/watch?v=yD2FSwTy2lw" }, + { + "alt": "Linux fox designed by Alan Mackey", + "button": "/assets/img/button/powered-by-linux.png", + "name": "Powered by Linux", + "src": "https://web.archive.org/web/19970517213342/www.early.com/~emackey/linux/" + }, { "alt": "Pngquant home page", "button": "/assets/img/button/pngquant.gif", @@ -130,7 +142,7 @@ "src": "https://validator.w3.org/" }, { - "alt": "Xenia (linux mascot) tribute page", + "alt": "Xenia (linux fox mascot) tribute page", "button": "/assets/img/button/xenia.gif", "name": "Linux now!", "src": "https://xenia.efi.pages.gay/" diff --git a/_src/_data/media-music.json b/_src/_data/media-music.json deleted file mode 100644 index 0a31ce0..0000000 --- a/_src/_data/media-music.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "items": [ - { - "artist": "test", - "src": "/", - "title": "test" - } - ] -} \ No newline at end of file diff --git a/_src/_data/site.json b/_src/_data/site.json index 80f858f..b7fa66b 100644 --- a/_src/_data/site.json +++ b/_src/_data/site.json @@ -1,3 +1,3 @@ { - "name": "sundae's bunspace" + "name": "sunny's bunspace" } diff --git a/_src/_includes/base.njk b/_src/_includes/base.njk index 61c83cc..1ccc51a 100644 --- a/_src/_includes/base.njk +++ b/_src/_includes/base.njk @@ -3,102 +3,116 @@ paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5. back: "M2 16 18 4h6L12 14H50v4H12L24 28H18Z" theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2" --- - - - - {{ site.name }} - {% if title %} - - {{ page.fileSlug|capitalize }} - {% endif %} - - - - - - - - {% if page.url === "/home/" %} - - {% endif %} - {% set availableStyles = ['home', 'blog', 'gallery'] %} - {% if page.url %} - {% if availableStyles.indexOf(page.url|firstSegment) !== -1 %} - - {% endif %} - {% endif %} - - - -
-

- {% for page in sortedPages %} - {% if currentUrl|firstSegment === page.url|firstSegment %} - - {% endif %} - {% endfor %} - {{ page.url|firstSegment|slugify|capitalize }}

-
-
- {{ content | safe }} -
- - - - \ No newline at end of file + + + {% if page.url.split('/') %} + {{ page.url.split('/')[1] }} - + {% if page.url.split('/')[2] %} + {{ page.url.split('/')[2] | replace("-", " ") }} | + {% endif %} + {% endif %} + {{ site.name | safe }} + + + {% include "meta.njk" %} + + + + + {% if page.url === "/home/" %} + + {% endif %} + {% set availableStyles = ['home', 'blog', 'gallery'] %} + {% if page.url %} + {% if availableStyles.indexOf(page.url.split('/')[1]|slugify) !== -1 %} + + {% endif %} + {% endif %} + + + +
+

+ {% for page in sortedPages %} + {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} + + {% endif %} + {% endfor %} + {{ page.url.split('/')[1]|slugify|capitalize }} +

+
+
+ {{ content | safe }} +
+ + + diff --git a/_src/_includes/blog.njk b/_src/_includes/blog.njk index 0cac05b..efbdd5d 100644 --- a/_src/_includes/blog.njk +++ b/_src/_includes/blog.njk @@ -5,6 +5,6 @@ layout: base
{{content|safe}}
- {{blurb|safe}} Profile picture + {{blurb|safe}} Profile picture
\ No newline at end of file diff --git a/_src/_includes/gallery.njk b/_src/_includes/gallery.njk index 5d28616..348fe6c 100644 --- a/_src/_includes/gallery.njk +++ b/_src/_includes/gallery.njk @@ -3,27 +3,60 @@ layout: base ---
-

{{page.fileSlug}}{%for flag in flags%}{%endfor%}

- {{content|safe}} -
- {%for image in images%} - -
- -
{{image.alt}}
- -
- - {%endfor%} -
- {%for attachment in attachments%} -
- -
- -
{{attachment.alt}}
-
- -
- {%endfor%} -
+

{{ page.fileSlug }} + {% for flag in flags %} + + {% endfor %} +

+ {{ content|safe }} + {% if programs and programs|length > 0 %} +

Made with:

+ + {% endif %} + {% if palettes and palettes|length > 0 %} +

Color palette used:

+ {% for palette in palettes %} + + {% endif %} +
+ {% for image in images %} + +
+ +
{{ image.alt }}
+ +
+ + {% endfor %} +
+ {% for attachment in attachments %} +
+ +
+ +
{{ attachment.alt }}
+
+ +
+ {% endfor %} + \ No newline at end of file diff --git a/_src/_includes/meta.njk b/_src/_includes/meta.njk new file mode 100644 index 0000000..8f08c53 --- /dev/null +++ b/_src/_includes/meta.njk @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/_src/assets/css/citrus/blog.css b/_src/assets/css/citrus/blog.css new file mode 100644 index 0000000..0ef0694 --- /dev/null +++ b/_src/assets/css/citrus/blog.css @@ -0,0 +1,106 @@ +#blog { + background-attachment: local, fixed; + background-color: var(--light); + background-image: var(--dot), + linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%); + background-size: 6px, contain; + background-blend-mode: overlay, normal; + animation: none; + & article { + border-radius: 0; + background-color: var(--citrus-light); + background-image: var(--noise); + background-size: auto; + background-repeat: repeat; + box-shadow: inset 0 -2rem 3rem -4rem var(--dark), var(--shadow-heavy); + & aside { + border-width: 2px; + border-style: solid; + background-color: var(--citrus-mix-light); + border-color: var(--citrus-mix); + border-radius: 0; + } + & pre { + border-radius: 4px; + color: var(--citrus-secondary); + background-color: var(--citrus-dark-extra); + background-size: 4px; + } + & [aria-label="Post warning"] { + background-color: var(--citrus-primary); + } + & [aria-label="Addendum"] { + border-image-source: linear-gradient( + 45deg, + var(--citrus-primary), + var(--citrus-secondary) + ); + background-color: var(--citrus-primary); + } + & s { + text-decoration-color: #d00; + } + & [aria-label="Postscript"] { + & span:has([alt]) { + &::after { + content: ""; + width: calc(var(--avatar) - 10px); + height: calc(var(--avatar) - 10px); + position: absolute; + margin: 5px; + background-image: linear-gradient( + color-mix(in lch, var(--light), transparent), + transparent + ); + box-shadow: inset 0 0 2px 0 var(--dark); + } + } + & [alt="Profile picture"] { + color: unset; + border-radius: inherit; + border: 2px solid; + border-image-source: linear-gradient( + to bottom, + var(--citrus-mix-light), + var(--citrus-secondary) + ); + border-image-slice: 1; + border-width: 3px; + box-sizing: inherit; + padding: 2px; + background-image: radial-gradient( + ellipse at 50% -0%, + var(--light) 20%, + var(--dark) 150% + ), var(--pansexual); + background-blend-mode: overlay, normal; + background-size: cover, 100%; + background-position: center; + background-repeat: no-repeat; + box-shadow: 0 0 0 2px var(--citrus-mix-dark), + inset 0 0 0 2px var(--citrus-mix), var(--shadow-light); + font-size: 0; + } + } + } + & #posts { + & a { + border-width: 4px; + box-shadow: var(--shadow-light); + border-radius: 0; + & p { + color: initial; + } + & p:not(:last-child) { + color: var(--citrus-dark); + } + &:not(:hover, :focus) { + background-color: var(--citrus-light); + border-color: var(--citrus-light); + } + } + } +} +#blog:not(:has(#posts)) header { + text-align: initial !important; +} diff --git a/_src/assets/css/citrus/citrus.css b/_src/assets/css/citrus/citrus.css deleted file mode 100644 index 542c817..0000000 --- a/_src/assets/css/citrus/citrus.css +++ /dev/null @@ -1,259 +0,0 @@ -@import url("./variables.css"); -@import url("../default/variables.css"); -@import url("./nav.css"); - -#bio, -#interests, -#badges, -#artworks, -#art { - font-family: "Pangolin", sans-serif; -} -body { - background-attachment: local, fixed; - background-color: var(--citrus-primary); - background-image: var(--checker), - linear-gradient(var(--citrus-primary), var(--citrus-secondary)); - background-size: 32px, contain; - background-blend-mode: overlay, normal; -} -body > nav { - background-attachment: fixed; - background-blend-mode: screen; - background-image: var(--dot), - linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%); - background-size: 6px; - background-blend-mode: screen; - border-color: var(--citrus-dark); - color: var(--citrus-dark); - & a, - button { - background-image: linear-gradient( - var(--citrus-light), - var(--citrus-primary) 20%, - var(--citrus-primary) 80%, - var(--citrus-light) 100% - ); - box-shadow: 0 0 0 2px var(--citrus-dark), - inset 0 0 8px 2px var(--citrus-primary); - border-radius: var(--pad-l); - color: inherit; - &[aria-current] { - box-shadow: 0 0 0 2px var(--citrus-dark), - inset 0 0 4px 2px var(--citrus-dark); - background-image: linear-gradient( - var(--citrus-mix), - var(--citrus-dark) 10%, - chocolate - ); - color: var(--citrus-light); - } - &:is(:hover, :focus):not([aria-current="page"]) { - box-shadow: 0 0 0 2px var(--citrus-dark); - transition: background-image var(--trans), border-color var(--trans), - box-shadow var(--trans); - } - } - & details { - background-image: linear-gradient( - -45deg, - var(--citrus-primary), - var(--citrus-secondary), - var(--citrus-primary) - ); - } -} -article { - background-color: var(--citrus-light); - border-radius: 0; - background-image: var(--noise); - box-shadow: var(--shadow); - border: 0; - & .header-anchor { - border-radius: inherit; - background-color: color-mix(in lch, magenta, white); - &:is(:hover, :focus) { - background-color: color-mix(in lch, magenta, white 30%); - } - } - & code:not(pre *) { - border-radius: inherit; - background-color: yellow; - box-shadow: 2px 2px 8px 0 color-mix(in lch, yellow, black 10%); - } -} -/* home.css */ -#interests div:has(img)::after { - display: none !important; -} -#interests li { - & a { - align-content: center; - } - &:has(div img) { - margin: var(--pad-sm); - box-shadow: var(--shadow); - background: color-mix(in lch, yellow, white); - &:nth-child(odd) { - transform: rotate(1deg); - } - } -} -ul:not([role]) li::before { - background-color: #000; -} -a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img { - filter: drop-shadow(4px 6px 0 var(--citrus-dark)); -} -/* blog.css */ -#blog { - background-color: #fff; - background-image: var(--dot); - background-size: 6px; - background-attachment: local; - background-repeat: repeat; - background-blend-mode: difference; - & main { - &::before { - background-image: var(--bg-sky); - background-size: cover; - background-repeat: no-repeat; - } - } - & article { - border-radius: 0; - background-color: #fff; - background-image: var(--noise); - background-size: auto; - background-repeat: repeat; - box-shadow: inset 0 0 2rem -0.5rem #ccc; - & > [aria-label="Postscript"]::after { - background-color: var(--citrus-primary); - } - & aside { - border-width: 2px; - border-style: solid; - background-color: var(--citrus-light); - border-color: var(--citrus-primary); - border-radius: 0; - } - & pre { - border-radius: 4px; - color: var(--citrus-secondary); - background-color: color-mix(in lch, var(--citrus-secondary), black 90%); - background-size: 4px; - text-shadow: 2px 2px 0 - color-mix(in lch, var(--citrus-secondary), black 60%); - } - & [aria-label="Post warning"] { - background-color: var(--citrus-primary); - } - & [aria-label="Addendum"] { - border-image-source: linear-gradient( - 45deg, - var(--citrus-primary), - var(--citrus-secondary) - ); - background-color: var(--citrus-primary); - } - & s { - text-decoration-color: #d00; - } - } - & #posts { - & a { - background-color: #fff; - border-color: #fff; - border-width: 4px; - box-shadow: var(--shadow); - transition: border-color var(--trans), color var(--trans); - & p { - color: initial; - } - & p:not(:last-child) { - color: color-mix(in lch, var(--dark), var(--light) 50%); - } - &:is(:hover, :focus) { - border-color: currentColor; - } - } - } -} -/* gallery.css */ -#gallery { - & article { - border-radius: 0; - border: 0; - } - & a:has(figure) { - transition: border-color var(--trans), background-color var(--trans); - box-shadow: var(--shadow); - &:is(:hover, :focus) { - & figure { - transition: inherit; - background-color: currentColor; - border-color: currentColor; - } - & figcaption, - time { - color: #fff; - } - } - } - & figure { - border-color: #fff; - background-color: #fff; - } -} -#artworks { - article { - margin: var(--pad-xl) 0 0 0; - background-color: #fff; - background-image: var(--noise), var(--lined); - background-size: auto, 32px; - &:last-child:not(:first-of-type) { - margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0; - } - &::before { - content: ""; - display: flex; - height: 32px; - width: calc(100% + var(--pad-xl) * 2); - margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1); - background-image: var(--border), var(--lined), var(--noise); - background-size: 32px, 32px; - background-blend-mode: darken; - } - } -} -#art { - background-image: var(--noise); - & p, - time { - padding: 0; - line-height: 32px; - } - & img { - border-radius: 0; - } - & figcaption { - font-family: "Urbanist", sans-serif; - } -} -@media screen and (max-width: 920px) { - body > nav { - border-right: 0; - border-bottom-right-radius: 0; - } - body::after { - content: none; - } -} -@media screen and (max-width: 450px) { - #artworks & article { - &::before { - width: calc(100% + var(--pad-l) * 2) !important; - margin: -3rem 0 0 -16px; - } - } -} diff --git a/_src/assets/css/citrus/default.css b/_src/assets/css/citrus/default.css new file mode 100644 index 0000000..10a7e94 --- /dev/null +++ b/_src/assets/css/citrus/default.css @@ -0,0 +1,80 @@ +@import url("./blog.css"); +@import url("./gallery.css"); +@import url("./home.css"); +@import url("./nav.css"); +@import url("./variables.css"); + +:is(a, button):not(span *, [aria-label="Postscript"] *, body nav *), +span:has(a), +#posts a { + color: var(--citrus-dark); + transition: background-color var(--trans); + background-color: var(--citrus-primary); + &:is(:hover, :focus) { + color: var(--citrus-dark-extra); + background-color: var(--citrus-secondary); + } + & a { + color: inherit; + } +} +body { + color: var(--citrus-dark-extra); + background-color: var(--citrus-primary); + background-image: var(--paw-tiled); + background-size: 128px; + background-attachment: local; + background-repeat: repeat; + background-blend-mode: soft-light; + animation: mainbg 10s linear infinite; +} +header { + color: var(--citrus-dark); +} +ul:not([role]) li::before { + background-color: var(--citrus-dark-extra); +} +article { + background: var(--noise), + linear-gradient( + var(--citrus-light) 70%, + color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100% + ); + border-radius: 0; + box-shadow: var(--shadow-heavy); + border: 0; + & .header-anchor { + border-radius: 0; + } + & code:not(pre *) { + border-radius: 0; + background-color: var(--citrus-dark); + color: var(--citrus-primary); + } + &:not(pre,code,a) { + font-family: "Nosey Rodent", sans-serif; + } +} +@media screen and (max-width: 920px) { + body > nav { + border: 0; + } + header { + margin: 0; + padding: 0; + border-right: 0; + border-radius: 0; + width: 100%; + } + body::after { + content: none; + } +} +@media screen and (max-width: 450px) { + #artworks & article { + &::before { + width: calc(100% + var(--pad-l) * 2) !important; + margin: -3rem 0 0 -16px; + } + } +} diff --git a/_src/assets/css/citrus/gallery.css b/_src/assets/css/citrus/gallery.css new file mode 100644 index 0000000..187f28c --- /dev/null +++ b/_src/assets/css/citrus/gallery.css @@ -0,0 +1,45 @@ +#gallery { + & article { + border-radius: 0; + border: 0; + } + & a:has(figure) { + font-family: "Urbanist", sans-serif; + transition: border-color var(--trans), background-color var(--trans); + box-shadow: var(--shadow-light); + &:is(:hover, :focus) { + & figure { + transition: inherit; + border-color: currentColor; + } + } + } + & figure { + border-width: 4px; + &:is(:not(a:hover *, a:focus *)) { + border-color: var(--light); + background-color: var(--light); + } + } +} +#artworks { + article { + margin: var(--pad-xl) 0 0 0; + background-color: var(--light); + background-image: var(--noise), var(--lined); + background-size: auto, 32px; + &:last-child:not(:first-of-type) { + margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0; + } + &::before { + content: ""; + display: flex; + height: 32px; + width: calc(100% + var(--pad-xl) * 2); + margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1); + background-image: var(--border), var(--lined), var(--noise); + background-size: 32px, 32px; + background-blend-mode: darken; + } + } +} \ No newline at end of file diff --git a/_src/assets/css/citrus/home.css b/_src/assets/css/citrus/home.css new file mode 100644 index 0000000..e85430f --- /dev/null +++ b/_src/assets/css/citrus/home.css @@ -0,0 +1,21 @@ +article#badges { + & a:is(:hover,:focus) { + transition: box-shadow var(--trans), background-color var(--trans); + box-shadow: 0 0 0 2px var(--citrus-secondary), 0 0 0 4px var(--citrus-dark-extra); + background-color: var(--citrus-secondary); + } +} +#interests li { + margin: var(--pad-sm); + box-shadow: var(--shadow-light); + background: color-mix(in lch, #ff0, #fff); + &:nth-child(odd) { + transform: rotate(1deg); + } + & a { + align-content: center; + & span:has(img)::after { + display: none; + } + } +} diff --git a/_src/assets/css/citrus/nav.css b/_src/assets/css/citrus/nav.css index 2412d54..f01bf52 100644 --- a/_src/assets/css/citrus/nav.css +++ b/_src/assets/css/citrus/nav.css @@ -1,10 +1,58 @@ body > nav { border-right: 4px solid; - border-bottom: 4px solid; - height: auto; - border-bottom-right-radius: var(--round); - & a, button { - border: 0; - margin: 0 0 var(--pad-sm) 0 ; + color: var(--citrus-dark); + & summary { + filter: drop-shadow(2px 0 var(--citrus-dark)) + drop-shadow(-2px 0 var(--citrus-dark)) + drop-shadow(0 2px var(--citrus-dark)) + drop-shadow(0px -2px var(--citrus-dark)); + color: var(--citrus-light); + } + & a, + button { + background: var(--button-bg); + box-shadow: var(--button-shine); + border: var(--button-border); + border-radius: var(--round); + color: inherit; + &[aria-current] { + background: var(--button-current-bg); + box-shadow: var(--button-current-shine); + border: var(--button-current-border); + color: var(--citrus-light); + } + &:is(:hover, :focus):not([aria-current="page"]) { + background: var(--button-hover-bg); + box-shadow: var(--button-hover-shine); + border: var(--button-hover-border); + transition: background-image var(--trans), border-color var(--trans), + box-shadow var(--trans); + color: var(--citrus-mix-dark); + } + } + & details, + details[open] { + background: var(--details-bg); + box-shadow: var(--details-shine); + border: var(--details-border); } } +body > nav, +header { + background-attachment: fixed; + background-blend-mode: screen; + background-image: var(--nav-bg); + background-size: 6px; + border-color: var(--citrus-dark); +} +header { + width: var(--view); + border-right-width: 4px; + border-right-style: solid; + border-bottom-width: 4px; + border-bottom-style: solid; + border-bottom-right-radius: 100px; + margin-left: calc(var(--view) - 4px); + position: relative; + padding: calc(var(--pad-m) - 2px) var(--pad-sm); +} diff --git a/_src/assets/css/citrus/variables.css b/_src/assets/css/citrus/variables.css index f641b36..e64f8d0 100644 --- a/_src/assets/css/citrus/variables.css +++ b/_src/assets/css/citrus/variables.css @@ -3,16 +3,30 @@ --citrus-secondary: var(--secondary); --citrus-light: color-mix(in lch, var(--citrus-primary), var(--light) 70%); --citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%); + --citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light)); + --citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark)); --citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary)); - --shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003; + --citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix)); + --citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix)); + --shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002; + --shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004; --checker: url("/assets/img/theme/citrus/checker.png"); --dot: url("/assets/img/theme/citrus/dot.png"); --lined: url("/assets/img/theme/citrus/line.png"); --paper: url("/assets/img/theme/citrus/paper.png"); --noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png"); --border: url("/assets/img/theme/citrus/border.png"); - --bg-sky: url("/assets/img/pkmn/bg/plat_trade1.png"); - --bg-ilex: url("/assets/img/pkmn/bg/ilex_day.png"); - --bg-ilex-noon: url("/assets/img/pkmn/bg/ilex_noon.png"); - --bg-ilex-night: url("/assets/img/pkmn/bg/ilex_night.png"); -} + --nav-bg: var(--dot), linear-gradient(var(--citrus-primary), var(--citrus-secondary) 60%, var(--citrus-primary) 120%); + --button-bg: linear-gradient(var(--citrus-primary) 30%, var(--citrus-mix) 80%); + --button-border: 2px solid var(--citrus-dark); + --button-shine: inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix); + --button-hover-bg: linear-gradient(var(--citrus-light),var(--citrus-primary),var(--citrus-mix-light)); + --button-hover-border: 2px solid var(--citrus-light); + --button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix); + --button-current-bg: linear-gradient(var(--citrus-mix-dark),var(--citrus-dark-extra) 200%); + --button-current-border: 2px solid var(--citrus-dark-extra); + --button-current-shine: inset 0px 2px 0 var(--citrus-mix-light), inset 0 -2px 0 var(--citrus-mix-dark); + --details-bg: linear-gradient(-45deg,var(--citrus-primary),var(--citrus-mix),var(--citrus-primary)); + --details-shine: inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light), inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary); + --details-border: 2px solid var(--citrus-dark); +} \ No newline at end of file diff --git a/_src/assets/css/default/blog.css b/_src/assets/css/default/blog.css index e51e7e4..1f42ec1 100644 --- a/_src/assets/css/default/blog.css +++ b/_src/assets/css/default/blog.css @@ -6,8 +6,10 @@ } article { margin: 0 auto; - font-family: "Rubik", sans-serif; max-width: var(--post); + & > [aria-label="Postscript"]::after { + background-color: var(--primary); + } & section:not(section:has(p)) { display: flex; gap: var(--pad-l); @@ -17,7 +19,12 @@ article { border-radius: var(--round); width: 66%; } - h1,h2,h3,h4,h5,h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin-bottom: var(--pad-m); } & [aria-label="Post warning"] { @@ -26,7 +33,6 @@ article { font-size: 1.4rem; font-weight: bold; text-align: center; - font-family: monospace; &::before, &::after { content: ""; @@ -36,14 +42,16 @@ article { } } } -[aria-label="Addendum"], [aria-label="Post warning"], article aside { +[aria-label="Addendum"], +[aria-label="Post warning"], +article aside { margin: var(--pad-l) 0; padding: var(--pad-l); } article > [aria-label="Addendum"] { - border-image-slice: 1; - border-image-width: 2px; - border-image-outset: 4px; + border-image-slice: 1; + border-image-width: 2px; + border-image-outset: 4px; } article > [aria-label="Postscript"] { @@ -66,48 +74,46 @@ article > [aria-label="Postscript"] { margin-top: inherit; margin-left: inherit; margin-right: var(--avatar); + margin-bottom: var(--pad-l); border-radius: var(--round); border-bottom-right-radius: 0; width: fit-content; padding: var(--pad-m); background-color: #0060df; color: #fff; - font-family: "Rubik", sans-serif; font-size: 0.8rem; word-wrap: anywhere; - &:hover { background-color: #3a76f0; } - &:not(:last-of-type) { - margin-bottom: var(--pad-l); + & a:has(img:nth-child(n + 2)) { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr)); + align-items: center; + gap: var(--pad-m); + } + & > img { + transition: height var(--trans), border-radius var(--trans), + background-color var(--trans); + border-radius: var(--round); + min-height: fit-content; + max-height: var(--image); } } - & a { - background: unset; - } - - & p a:has(img:nth-child(n + 2)) { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr)); - align-items: center; - gap: var(--pad-m); - } - & p > img { - transition: height var(--trans), border-radius var(--trans), - background-color var(--trans); - border-radius: var(--round); - min-height: fit-content; - max-height: var(--image); - } - & img:not(p a > img) { - display: flex; - box-sizing: content-box; - margin: 0 0 0 auto; - border-radius: 100%; + & span:has([alt]) { width: var(--avatar); height: var(--avatar); + display: flex; + float: right; + & [alt="Profile picture"] { + display: flex; + box-sizing: content-box; + margin: 0 0 0 auto; + border-radius: 100%; + width: inherit; + height: inherit; + } } } @@ -165,4 +171,15 @@ article > [aria-label="Postscript"] { } } } -} \ No newline at end of file +} +@media (prefers-reduced-motion: reduce) { + article > [aria-label="Postscript"] { + & p, + p > img { + transition: none; + } + } + #blog #posts a { + transition: none; + } +} diff --git a/_src/assets/css/default/default.css b/_src/assets/css/default/default.css index ef2878b..e06b33b 100644 --- a/_src/assets/css/default/default.css +++ b/_src/assets/css/default/default.css @@ -1,5 +1,6 @@ @import url("./variables.css"); @import url("./nav.css"); +@import url("./motion.css"); :root { --view: 18rem; @@ -12,6 +13,7 @@ h3, h4, h5, h6 { + font-family: "Rubik", sans-serif; display: block; font-size: 2rem; margin-block-start: 0; @@ -26,10 +28,10 @@ body { font-size: 100%; margin: 0; padding: 0; - & a, button { cursor: pointer; + transition: background-color var(--trans); &:is(:hover, :focus) { outline: 0; @@ -38,8 +40,8 @@ body { } svg { fill: currentColor; - stroke: currentColor; - stroke-width: 0; + stroke: currentColor; + stroke-width: 0; } header { padding-top: var(--pad-xl); @@ -47,12 +49,31 @@ header { & svg { width: 2rem; height: 2rem; + margin-right: var(--pad-m); } & h1 { display: inline-flex; } } +footer { + overflow-y: hidden; + word-break: break-all; + flex-wrap: wrap; + font-family: "Nosey Rodent", sans-serif; + display: flex; + margin-left: var(--view); + width: calc(100% - var(--view)); + justify-content: center; + position: sticky; + inset-block: 100%; + text-align: center; + & span { + background-image: var(--transgender); + padding: 0 var(--pad-sm); + } +} + main { padding: var(--pad-xl); padding-left: calc(var(--view) + var(--pad-xl)); @@ -78,14 +99,6 @@ details { border-radius: 0 var(--round) var(--round) 0; } -main article[id] { - - & p, - li { - font-size: 1.2rem; - } -} - article { border-style: solid; border-width: 2px; @@ -93,10 +106,6 @@ article { height: max-content; padding: var(--pad-xl); - & a { - font-weight: 500; - } - & a:has(figure) { border-radius: var(--round); @@ -139,11 +148,11 @@ article { word-break: break-word; border-style: solid; border-width: 2px; + transition: background-color var(--trans), border-color var(--trans); } & pre, code:not(pre *) { - transition: background-color var(--trans), border-color var(--trans); border-radius: var(--round); font-weight: bold; } @@ -153,22 +162,37 @@ article { border-style: solid; border-width: 2px; padding: var(--pad-m); - border-radius: var(--round); + border-radius: inherit; display: flex; flex-direction: column; - - & img { - border-radius: inherit; + } + & ul:not([role="list"]):is(#art *) { + padding: 0; + margin: 0 0 var(--pad-sm) var(--pad-xl); + } + & li:is(#art *, #bio *) { + display: flex; + &::marker { + content: none; + } + &::before { + content: ""; + width: 20px; + height: 20px; + position: absolute; + mask-image: var(--paw); + mask-size: contain; + mask-repeat: no-repeat; + margin: 0 0 0 calc(var(--pad-xl) * -1); } } - & section { & a:has(figure) { height: max-content; } & figure img { - border-radius: var(--round); + border-radius: inherit; } & figcaption { @@ -178,7 +202,7 @@ article { } } - &>:first-child>code { + & > :first-child > code { display: flex; width: fit-content; margin: var(--pad-sm) 0; @@ -191,18 +215,31 @@ article { img[src*="/assets/img/flag/"] { height: 32px; - border-radius: 0.2rem; - border-style: solid; - border-width: 2px; - border-color: #fff; + border-radius: 2px; + &:first-child { + margin-left: var(--pad-m); + } + &:not(:last-child) { + margin-right: var(--pad-m); + } } -a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img { - transform: translateY(-4px); - transition: var(--trans); +span:has(img[src*="https://www.google.com/s2/favicons"]) img +{ + position: relative; + top: 2px; + left: 2px; + margin-right: 4px; } @media screen and (max-width: 920px) { + body::after { + content: ""; + } + footer { + width: 100%; + margin: 0; + } header { padding-left: 0; padding-top: var(--pad-m); @@ -213,16 +250,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img { padding: var(--pad-l); } - body>nav { - position: initial; - width: 100%; - } - - main>section { + main > section { flex-direction: column; } - main>section { + main > section { width: initial; } @@ -230,35 +262,4 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img { max-width: initial; width: auto; } - - body>nav::before, - body>nav::after { - content: none; - } - - body>nav { - flex-direction: row; - border: 0; - width: 100%; - - & details { - height: fit-content; - width: 100%; - } - } - - body::after { - content: ""; - } } - -@media screen and (max-width: 450px) { - body>nav { - flex-direction: column; - justify-content: start; - - & details[open] { - width: 100%; - } - } -} \ No newline at end of file diff --git a/_src/assets/css/default/gallery.css b/_src/assets/css/default/gallery.css index 188c158..1801a38 100644 --- a/_src/assets/css/default/gallery.css +++ b/_src/assets/css/default/gallery.css @@ -8,9 +8,6 @@ } } #artworks { - & p { - font-size: 1.2rem; - } & ul { display: grid; grid-template-columns: repeat( @@ -27,20 +24,17 @@ & figure { margin: 0; - padding: var(--pad-sm); - border-width: 2px; border-style: solid; & img { display: flex; width: 100%; height: var(--thumb); - border-bottom: unset; object-fit: contain; + border-radius: var(--round); } & figcaption { - font-family: Urbanist, sans-serif; - font-size: var(--pad-lm); + font-size: 1.4rem; display: flex; align-items: baseline; } @@ -55,7 +49,6 @@ flex-direction: column; width: fit-content; h3 { - font-family: "Urbanist", sans-serif; display: flex; gap: var(--pad-sm); } diff --git a/_src/assets/css/default/home.css b/_src/assets/css/default/home.css index 78547c7..5e60b0f 100644 --- a/_src/assets/css/default/home.css +++ b/_src/assets/css/default/home.css @@ -7,133 +7,95 @@ transform: translateY(-4px); } } -@keyframes slide { - 0% { - background-position: 0% 100%; - } - 100% { - background-position: 200% 100%; - } -} article#bio { - & ul { - margin: 0 var(--pad-xl); - } - - & li { - display: flex; - } - - & span[id] { - color: transparent; - background-clip: text; - background-repeat: repeat; - background-size: 200% 100%; - background-position: 0% 50%; - animation: slide 5s linear infinite; - transition: var(--trans); - - &:hover { - opacity: 1; - color: var(--dark); - background-clip: initial; - } - } - - & img[alt] { + & .emoji { height: 24px; + width: 24px; display: inline-flex; margin: 0 0 0 var(--pad-sm); align-self: center; + &::after, + img { + filter: drop-shadow(0 0 0.5px #000a); + } } } article#badges { & ul { - gap: 1rem; padding: 0; display: flex; flex-wrap: wrap; + gap: var(--pad-sm); } & a { display: flex; - padding: inherit; margin: 0; - background-color: unset; } -} - -article#bio ul { - padding: 0; -} - -article#bio ul li { - &::before { - content: ""; - width: 20px; - height: 20px; - position: absolute; - mask-image: var(--paw); - mask-size: contain; - mask-repeat: no-repeat; - margin: var(--pad-sm) 0 0 calc(var(--pad-xl)*-1); + & img { + box-sizing: content-box; } - - &::marker { - content: none; - } -} - -article#interests ul { - display: flex; - flex-wrap: wrap; } article#interests { - & details ul { + & ul { + display: flex; + flex-wrap: wrap; margin: 0; padding: var(--pad-l) 0; } - - & details:last-child ul { - padding: var(--pad-l) 0 0 0 - } - & li { display: flex; + width: 14ch; + flex-wrap: wrap; + text-align: center; + justify-content: center; & a { - padding: var(--pad-sm); - background: transparent; - } - - & span { display: flex; - width: 14ch; - text-align: center; - justify-content: center; + flex-direction: column; + padding: var(--pad-sm); + width: inherit; + &:not(:hover, :focus) { + background: transparent; + } } } + & .music img, + .games img { + height: 48px; + } + + & .manga img { + height: 128px; + } + & span:has(img) { + width: fit-content; + margin: 0 auto; + &::after { + content: ""; + background-image: url("/assets/img/icon/shortcut.png"); + background-size: 100%; + display: block; + z-index: 1; + position: absolute; + width: 24px; + height: 24px; + margin: -1.5rem 0 0 -0.5rem; + pointer-events: none; + } + } + + & details:last-child ul { + padding: var(--pad-l) 0 0 0; + } & details h3 { border-bottom-width: 1px; border-bottom-style: solid; } - - & div:has(img) { - margin: 0 auto; - width: fit-content; - } - - .music img { - height: 48px; - } - - .manga img { - height: 128px; - } } #pkmn { @@ -150,54 +112,39 @@ article#interests { border-width: 3px; border-style: solid; margin: var(--pad-l) 0 0 0; - &>* { + + & li { display: flex; margin-top: -8px; + margin-left: -12px; - &:hover { - filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 3px #0006); + & span:hover { + filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) + drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) + drop-shadow(0 2px 3px #000a); animation: jump 200ms infinite alternate; } } + & li:first-child { + margin-left: 0px; + } } #agender { - background-image: linear-gradient(var(--flag), - #000 0 14.28%, - #c0c0c0 0 28.57%, - #fff 0 42.85%, - #a3fa73 0 57.14%, - #fff 0 71.42%, - #c0c0c0 0 85.71%, - #000 0); + background-image: var(--agender) } #aromantic { - background-image: linear-gradient(var(--flag), - #0a2 20%, - #7d6 0 40%, - #fff 0 60%, - #a9a9a9 0 80%, - #000 0); + background-image: var(--aromantic) } #pansexual { - background-image: linear-gradient(var(--flag), #f09 33.33%, #ffd700 0 66.66%, #00bfff 0); + background-image: var(--pansexual) } - -#interests div:has(img)::after { - content: ""; - background-image: url("/assets/img/icon/shortcut.png"); - background-size: 100%; - display: block; - z-index: 1; - position: absolute; - width: 24px; - height: 24px; - margin: -1.5rem 0 0 -0.5rem; - pointer-events: none; +#badges img { + max-height: 31px; + width: 88px; } - @media screen and (max-width: 920px) { article#interests { display: flex; @@ -211,4 +158,4 @@ article#interests { padding: 0; } } -} \ No newline at end of file +} diff --git a/_src/assets/css/default/index.css b/_src/assets/css/default/index.css index 188f820..20aa000 100644 --- a/_src/assets/css/default/index.css +++ b/_src/assets/css/default/index.css @@ -1,6 +1,7 @@ @import url("./variables.css"); #index { + font-family: "Nosey Rodent", sans-serif; margin: 0; padding: 0; color: var(--primary-dark-300); @@ -9,7 +10,7 @@ height: 100%; display: flex; flex-direction: column; - background-image: var(--sunny); + background-image: url("/assets/img/theme/citrus/sundae.png"); background-repeat: no-repeat; background-position: center; background-size: contain; diff --git a/_src/assets/css/default/motion.css b/_src/assets/css/default/motion.css new file mode 100644 index 0000000..3fd9e21 --- /dev/null +++ b/_src/assets/css/default/motion.css @@ -0,0 +1,82 @@ +@media (prefers-reduced-motion: no-preference) { + /* Scrolling pride flag text */ + article#bio span[id], + footer span { + font-family: "Nosey Rodent", sans-serif; + font-weight: bold; + color: transparent; + background-clip: text; + filter: var(--outlined); + background-repeat: repeat; + background-size: 200% 100%; + background-position: 0% 50%; + animation: slide 5s linear infinite; + transition: color var(--trans); + } +} +@media (prefers-reduced-motion: reduce) { + body { + animation: none !important; + } + /* Buttons */ + :is(a, button), + span:has(a) { + transition: none !important; + } + /* Permalinks */ + .header-anchor, + article pre { + transition: none !important; + } + /* Images */ + #gallery a:has(figure), + #blog article figure, + a img { + transition: none !important; + } + .emoji:has(img[alt*="🐇"]) { + & img { + opacity: 0; + } + &::after { + position: absolute; + content: "🐇"; + } + } + /* Scrolling pride flag text */ + article#bio span[id], footer span { + transition: none !important; + animation: none !important; + color: inherit; + background-clip: initial !important; + background: initial !important; + &::before { + content: ""; + display: inline-flex; + width: 2rem; + height: 1.25rem; + margin: 0 2px; + background-repeat: repeat-x; + border-radius: 2px; + top: 4px; + position: relative; + } + } + #aromantic::before { + background-image: url("/assets/img/flag/aromantic.svg"); + } + #agender::before { + background-image: url("/assets/img/flag/agender.svg"); + } + #pansexual::before { + background-image: url("/assets/img/flag/pansexual.svg"); + } + footer span::before { + background-image: url("/assets/img/flag/trans.svg"); + } + /* Jumping critters */ + #pkmn span:hover { + animation: none !important; + transform: translateY(-4px); + } +} diff --git a/_src/assets/css/default/nav.css b/_src/assets/css/default/nav.css index cf4dfd2..a021210 100644 --- a/_src/assets/css/default/nav.css +++ b/_src/assets/css/default/nav.css @@ -1,4 +1,4 @@ -body>nav::before, +body > nav::before, body::after { z-index: -1; content: ""; @@ -11,7 +11,7 @@ body::after { pointer-events: none; } -body>nav::before { +body > nav::before { bottom: 0; left: 0; mask-size: 160%; @@ -19,20 +19,6 @@ body>nav::before { -webkit-mask-position-y: 90%; } -body>nav::after { - top: 0; - left: 0; - width: var(--view); - content: ""; - position: absolute; - height: 100%; - z-index: -2; - pointer-events: none; - mask-image: var(--paw-tiled); - animation: navbg 10s linear infinite; - mask-size: 128px; -} - body::after { content: none; mask-size: 100%; @@ -42,15 +28,16 @@ body::after { -webkit-mask-position-y: bottom; } -body>nav { +body > nav { display: flex; flex-direction: column; - overflow: hidden; - padding: 1rem; + overflow-x: hidden; + padding: var(--pad-l); position: fixed; width: var(--view); height: 100%; - + overflow-y: scroll; + scrollbar-width: none; & * svg, li img { margin: 0 8px 0 8px; @@ -88,15 +75,13 @@ body>nav { font-size: 1.125rem; width: 100%; font-weight: bold; - height: var(--pad-xl); + height: 36px; line-height: var(--pad-xl); } } body { - font-family: "Rubik", sans-serif; - - &>nav { + & > nav { gap: var(--pad-m); border-right-width: 1px; border-right-style: solid; @@ -114,31 +99,50 @@ body { font-weight: bold; } - & details>summary { + & details > summary { display: flex; justify-content: center; - padding: 0 var(--pad-lm) 0 0; + padding: 0; height: var(--pad-xl); - - &>svg { - transform: rotate(0deg); - transition: transform var(--trans); - } } - - & details:not([open])>summary { - border-radius: var(--round); + & details[open], details:not([open]) { border-style: solid; border-width: 2px; } - - & details[open] { - border-style: solid; - border-width: 2px; - - &>summary svg { - transform: rotate(45deg); - } - } + } +} +@media screen and (max-width: 920px) { + body > nav { + position: initial; + width: 100%; + overflow: initial; + flex-direction: row; + justify-content: start; + & a, button { + line-height: initial; + } + & details { + width: 100%; + height: max-content; + } + } + body > nav::before { + content: none; + } +} +@media screen and (max-width: 620px) { + body > nav { + flex-direction: column; + justify-content: start; + border: 0; + width: 100%; + + & details { + height: fit-content; + } + } + + body::after { + content: ""; } } \ No newline at end of file diff --git a/_src/assets/css/default/system.css b/_src/assets/css/default/system.css index 7a7b182..0001a81 100644 --- a/_src/assets/css/default/system.css +++ b/_src/assets/css/default/system.css @@ -1,2 +1,2 @@ -@import url("./theme-light.css"); -@import url("./theme-dark.css"); \ No newline at end of file +@import url("./theme-dark.css"); +@import url("./theme-light.css"); \ No newline at end of file diff --git a/_src/assets/css/default/theme-dark.css b/_src/assets/css/default/theme-dark.css index 9cab33c..f72510c 100644 --- a/_src/assets/css/default/theme-dark.css +++ b/_src/assets/css/default/theme-dark.css @@ -1,5 +1,4 @@ @media (prefers-color-scheme: dark) { - article, body, header svg { @@ -26,7 +25,6 @@ } & pre { - transition: background-color var(--trans), border-color var(--trans); background-color: var(--secondary-100); &:hover { @@ -41,10 +39,6 @@ } /* blog.css */ - & [aria-label="Postscript"]::after { - background-color: var(--secondary); - } - & [aria-label="Post warning"] { background-color: var(--secondary); color: var(--secondary-100); @@ -57,10 +51,12 @@ & [aria-label="Addendum"] { box-shadow: inset 0 0 0 2px var(--secondary); - border-image-source: linear-gradient(45deg, - var(--secondary), - var(--secondary-600), - var(--secondary)); + border-image-source: linear-gradient( + 45deg, + var(--secondary), + var(--secondary-600), + var(--secondary) + ); background-color: var(--secondary-400); } } @@ -70,17 +66,14 @@ color: var(--secondary-light-700); } } - /* default.css */ body { background-color: var(--secondary-100); - - /* this is cursed */ - & :is(a, button) { + & :is(a, button):not(span *, [aria-label="Postscript"] *), + span:has(a) { color: var(--secondary-light-400); border-color: var(--secondary-600); background-color: var(--secondary-300); - &:is(:hover, :focus) { color: var(--secondary-light-500); border-color: currentColor; @@ -93,14 +86,16 @@ box-shadow: 0 0 0 2px var(--secondary-300); } } + & span a { + color: inherit; + } - &>nav { + & > nav { + background-color: inherit; border-color: var(--secondary); - & details { background-color: var(--secondary-100); - - &:not([open]) summary { + &:not([open]) { color: var(--secondary); } } @@ -117,16 +112,16 @@ } } - &::before { - background-color: var(--secondary); - } - &::after { - background-image: linear-gradient(to bottom, var(--secondary-600) 0%, transparent 30vw); + background-image: linear-gradient( + to bottom, + var(--secondary-600) 0%, + transparent 30vw + ); } } - &::after { + &::after, & > nav::before { background-color: var(--secondary); } } @@ -143,7 +138,8 @@ } & img { - box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--secondary-500) 70%); + box-shadow: 0 0 0 1px + color-mix(in lch, transparent, var(--secondary-500) 70%); } & details h3 { @@ -153,9 +149,5 @@ a:has(img[src*="/assets/img/button"]) { background-color: unset; - - &:is(:hover, :focus) img { - filter: drop-shadow(4px 6px 0 var(--secondary-500)); - } } -} \ No newline at end of file +} diff --git a/_src/assets/css/default/theme-light.css b/_src/assets/css/default/theme-light.css index 9872528..3dd8e5b 100644 --- a/_src/assets/css/default/theme-light.css +++ b/_src/assets/css/default/theme-light.css @@ -1,5 +1,4 @@ @media (prefers-color-scheme: light) { - article, body, header svg { @@ -26,7 +25,6 @@ } & pre { - transition: background-color var(--trans), border-color var(--trans); background-color: var(--primary-100); &:hover { @@ -41,10 +39,6 @@ } /* blog.css */ - & [aria-label="Postscript"]::after { - background-color: var(--primary); - } - & [aria-label="Post warning"] { background-color: var(--primary); color: var(--primary-dark-100); @@ -57,10 +51,12 @@ & [aria-label="Addendum"] { box-shadow: inset 0 0 0 2px var(--primary); - border-image-source: linear-gradient(45deg, - var(--primary), - var(--primary-600), - var(--primary)); + border-image-source: linear-gradient( + 45deg, + var(--primary), + var(--primary-600), + var(--primary) + ); background-color: var(--primary-400); } } @@ -70,21 +66,18 @@ color: var(--primary-dark-700); } } - /* default.css */ body { background-color: var(--primary-100); - - /* this is cursed */ - & :is(a, button) { + & :is(a, button):not(span *, [aria-label="Postscript"] *), + span:has(a) { color: var(--primary-dark-400); border-color: var(--primary-600); background-color: var(--primary-400); - &:is(:hover, :focus) { color: var(--primary-dark-500); border-color: currentColor; - background-color: var(--primary-500); + background-color: var(--primary-600); } &:is(.header-anchor):is(:hover, :focus) { @@ -93,20 +86,22 @@ box-shadow: 0 0 0 2px var(--primary-300); } } + & span a { + color: inherit; + } - &>nav { - border-color: var(--primary); - + & > nav { + background-color: inherit; + border-color: var(--primary-dark-500); & details { background-color: var(--primary-100); - - &:not([open]) summary { - color: var(--primary); + &:not([open]) { + color: var(--primary-dark-500); } } & details[open] { - border-color: var(--primary); + border-color: var(--primary-dark-800); background-color: var(--primary-300); color: var(--primary-dark-300); @@ -117,17 +112,18 @@ } } - &::before { - background-color: var(--primary); - } - &::after { - background-image: linear-gradient(to bottom, var(--primary-600) 0%, transparent 30vw); + background-image: linear-gradient( + to bottom, + var(--primary-600) 0%, + transparent 30vw + ); } } - &::after { - background-color: var(--primary); + &::after, + & > nav::before { + background-color: var(--primary-dark-500); } } @@ -143,7 +139,8 @@ } & img { - box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--primary-dark-500) 30%); + box-shadow: 0 0 0 1px + color-mix(in lch, transparent, var(--primary-dark-500) 30%); } & details h3 { @@ -153,9 +150,5 @@ a:has(img[src*="/assets/img/button"]) { background-color: unset; - - &:is(:hover, :focus) img { - filter: drop-shadow(4px 6px 0 var(--primary-500)); - } } -} \ No newline at end of file +} diff --git a/_src/assets/css/default/variables.css b/_src/assets/css/default/variables.css index cb3260e..7bb6a84 100644 --- a/_src/assets/css/default/variables.css +++ b/_src/assets/css/default/variables.css @@ -1,79 +1,145 @@ :root { - --primary: rgb(255, 190, 0); - --secondary: rgb(255, 100, 0); - --light: rgb(255, 252, 245); - --dark: rgb(6, 2, 0); - --primary-100: color-mix(in lch, var(--primary), var(--light) 90%); - --primary-200: color-mix(in lch, var(--primary), var(--light) 80%); - --primary-300: color-mix(in lch, var(--primary), var(--light) 70%); - --primary-400: color-mix(in lch, var(--primary), var(--light) 60%); - --primary-500: color-mix(in lch, var(--primary), var(--light)); - --primary-600: color-mix(in lch, var(--primary), var(--light) 40%); - --primary-700: color-mix(in lch, var(--primary), var(--light) 30%); - --primary-800: color-mix(in lch, var(--primary), var(--light) 20%); - --primary-900: color-mix(in lch, var(--primary), var(--light) 10%); - --primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%); - --primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%); - --primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%); - --primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%); - --primary-dark-500: color-mix(in lch, var(--primary), var(--dark)); - --primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%); - --primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%); - --primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%); - --primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%); - --secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%); - --secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%); - --secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%); - --secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%); - --secondary-light-500: color-mix(in lch, var(--secondary), var(--light)); - --secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%); - --secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%); - --secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%); - --secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%); - --secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%); - --secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%); - --secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%); - --secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%); - --secondary-500: color-mix(in lch, var(--secondary), var(--dark)); - --secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%); - --secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%); - --secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%); - --secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%); - --trans: 300ms; + --primary: rgb(255, 190, 0); + --secondary: rgb(255, 100, 0); + --light: rgb(255, 252, 245); + --dark: rgb(6, 2, 0); + --primary-100: color-mix(in lch, var(--primary), var(--light) 90%); + --primary-200: color-mix(in lch, var(--primary), var(--light) 80%); + --primary-300: color-mix(in lch, var(--primary), var(--light) 70%); + --primary-400: color-mix(in lch, var(--primary), var(--light) 60%); + --primary-500: color-mix(in lch, var(--primary), var(--light)); + --primary-600: color-mix(in lch, var(--primary), var(--light) 40%); + --primary-700: color-mix(in lch, var(--primary), var(--light) 30%); + --primary-800: color-mix(in lch, var(--primary), var(--light) 20%); + --primary-900: color-mix(in lch, var(--primary), var(--light) 10%); + --primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%); + --primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%); + --primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%); + --primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%); + --primary-dark-500: color-mix(in lch, var(--primary), var(--dark)); + --primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%); + --primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%); + --primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%); + --primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%); + --secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%); + --secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%); + --secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%); + --secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%); + --secondary-light-500: color-mix(in lch, var(--secondary), var(--light)); + --secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%); + --secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%); + --secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%); + --secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%); + --secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%); + --secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%); + --secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%); + --secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%); + --secondary-500: color-mix(in lch, var(--secondary), var(--dark)); + --secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%); + --secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%); + --secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%); + --secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%); + --trans: 300ms; --image: 24rem; --post: 75ch; - --round: 16px; - --pad-xl: 2rem; - --pad-lm: 1.4rem; - --pad-l: 1rem; - --pad-m: 0.8rem; - --pad-sm: 0.4rem; - --flag: 45deg; - --paw: url("/assets/img/theme/paw.svg"); - --paw-tiled: url("/assets/img/theme/paw-tiled.png"); - --sunny: url("/assets/img/theme/citrus/sundae.png") + --round: 16px; + --pad-xl: 2rem; + --pad-lm: 1.4rem; + --pad-l: 1rem; + --pad-m: 0.8rem; + --pad-sm: 0.4rem; + --flag: 45deg; + --paw: url("/assets/img/theme/paw.svg"); + --paw-tiled: url("/assets/img/theme/paw-tiled.png"); + --outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark)) + drop-shadow(0.5px 0 var(--dark)) drop-shadow(-0.5px 0 var(--dark)) + drop-shadow(0 1px var(--light)) drop-shadow(0 -1px var(--light)) + drop-shadow(1px 0 var(--light)) drop-shadow(-1px 0 var(--light)); + --rainbow: linear-gradient( + var(--flag), + red 16.66%, + orange 0 33.33%, + yellow 0 50%, + green 0 66.66%, + blue 0 83.33%, + indigo 0 + ); + --agender: linear-gradient( + var(--flag), + #000 0 14.28%, + #c0c0c0 0 28.57%, + #fff 0 42.85%, + #a3fa73 0 57.14%, + #fff 0 71.42%, + #c0c0c0 0 85.71%, + #000 0 + ); + --aromantic: linear-gradient( + var(--flag), + #0a2 20%, + #7d6 0 40%, + #fff 0 60%, + #a9a9a9 0 80%, + #000 0 + ); + --pansexual: linear-gradient( + var(--flag), + #f09 33.33%, + #ffd700 0 66.66%, + #00bfff 0 + ); + --transgender: linear-gradient( + var(--flag), + #00d2ff 20%, + #ffa6b9 0 40%, + white 0 60%, + #ffa6b9 0 80%, + #00d2ff 0 + ); } -@keyframes navbg { + +@keyframes mainbg { 0% { - mask-position: 0rem 0rem; + background-position: 0rem 0rem; } 100% { - mask-position: 16rem 16rem; + background-position: 256px 256px; + } +} + +@keyframes slide { + 0% { + background-position: 0% 100%; + } + + 100% { + background-position: 200% 100%; } } @font-face { - font-family: Rubik; - src: url("/assets/fonts/Rubik.ttf") format("truetype"); + font-family: Rubik; + src: url("/assets/fonts/Rubik.ttf") format("truetype"); } @font-face { - font-family: Urbanist; - src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype"); + font-family: Urbanist; + src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype"); } @font-face { - font-family: Pangolin; - src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype"); + font-family: Pangolin; + src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: Terminess; + src: url("/assets/fonts/TerminessNerdFont-Regular.ttf") format("truetype"); +} + + +@font-face { + font-family: Nosey Rodent; + src: url("/assets/fonts/noseyrodent.ttf") format("truetype"); } diff --git a/_src/assets/fonts/noseyrodent.ttf b/_src/assets/fonts/noseyrodent.ttf new file mode 100644 index 0000000..0b847b5 Binary files /dev/null and b/_src/assets/fonts/noseyrodent.ttf differ diff --git a/_src/assets/img/art/sundae_funny.png b/_src/assets/img/art/sundae_funny.png new file mode 100644 index 0000000..92a442c Binary files /dev/null and b/_src/assets/img/art/sundae_funny.png differ diff --git a/_src/assets/img/button/catshaped.gif b/_src/assets/img/button/catshaped.gif new file mode 100644 index 0000000..68b66e5 Binary files /dev/null and b/_src/assets/img/button/catshaped.gif differ diff --git a/_src/assets/img/button/okesska_8831_final2.gif b/_src/assets/img/button/okesska_8831_final2.gif new file mode 100644 index 0000000..f1f5bef Binary files /dev/null and b/_src/assets/img/button/okesska_8831_final2.gif differ diff --git a/_src/assets/img/button/powered-by-linux.png b/_src/assets/img/button/powered-by-linux.png new file mode 100644 index 0000000..a4ccbd1 Binary files /dev/null and b/_src/assets/img/button/powered-by-linux.png differ diff --git a/_src/assets/img/button/yummy-cricket_krita.png b/_src/assets/img/button/yummy-cricket_krita.png new file mode 100644 index 0000000..8dd7f34 Binary files /dev/null and b/_src/assets/img/button/yummy-cricket_krita.png differ diff --git a/_src/assets/img/changelog/ver7.png b/_src/assets/img/changelog/ver7.png new file mode 100644 index 0000000..f0d16b4 Binary files /dev/null and b/_src/assets/img/changelog/ver7.png differ diff --git a/_src/assets/img/opengraph/site.png b/_src/assets/img/opengraph/site.png new file mode 100644 index 0000000..4233b4f Binary files /dev/null and b/_src/assets/img/opengraph/site.png differ diff --git a/_src/assets/js/bob.js b/_src/assets/js/bob.js index 574ff44..45488bc 100644 --- a/_src/assets/js/bob.js +++ b/_src/assets/js/bob.js @@ -1,6 +1,8 @@ -import { audioPath } from './path.js' +import { audioPath } from "./path.js"; + let bob = document.getElementById("bob"); let help = document.createElement("audio"); + help.src = `${audioPath}bob.ogg`; help.loop = true; bob.appendChild(help); diff --git a/_src/assets/js/cat.js b/_src/assets/js/cat.js index 9389479..e2c99c4 100644 --- a/_src/assets/js/cat.js +++ b/_src/assets/js/cat.js @@ -1,13 +1,12 @@ import { audioPath } from "./path.js"; let pipe = document.getElementById("meow"); -let preload = new Image(); -preload.src = "/assets/img/button/braixdragon-cat2.gif"; - +let audio = new Audio(`${audioPath}anvil_land_low.ogg`); let hoverTimeout; let hovered = false; let played = localStorage.getItem("audioPlayed") === "true"; -let audio = new Audio(`${audioPath}anvil_land_low.ogg`); +let preload = new Image(); +preload.src = "/assets/img/button/braixdragon-cat2.gif"; window.addEventListener("beforeunload", () => { localStorage.removeItem("catflattened"); diff --git a/_src/assets/js/details-save.js b/_src/assets/js/details-save.js new file mode 100644 index 0000000..205a85b --- /dev/null +++ b/_src/assets/js/details-save.js @@ -0,0 +1,14 @@ +const detailsElements = document.getElementsByTagName("details"); +const dropdown = Array.from(detailsElements); + +const save = () => { + dropdown.forEach((details, i) => { + localStorage.setItem(`details${i}`, details.hasAttribute("open")); + }); +}; + +dropdown.forEach((details, i) => { + const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false; + details.toggleAttribute("open", isOpen); + details.addEventListener("toggle", save); +}); diff --git a/_src/assets/js/fav-poke.js b/_src/assets/js/fav-poke.js index 79e47e8..9abe149 100644 --- a/_src/assets/js/fav-poke.js +++ b/_src/assets/js/fav-poke.js @@ -172,7 +172,7 @@ let favorites = [ { className: "togekiss" }, { className: "leafeon" }, { className: "glaceon" }, - { className: "porygon-z" }, + { className: "porygon-z", title: "Porygon-Z" }, { className: "gallade" }, { className: "froslass" }, { className: "uxie" }, @@ -347,10 +347,9 @@ let favorites = [ { className: "snom" }, { className: "indeedee" }, { className: "indeedee-female", title: "Female Indeedee" }, - { className: "dragapult" } + { className: "dragapult" }, ]; - function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } @@ -370,14 +369,19 @@ function getRandomUniquePkmn(pkmnArray, count) { } const party = getRandomUniquePkmn(favorites, 6); +const pkmnList = document.getElementById("pkmn"); + party.forEach((pkmnData) => { + const listItem = document.createElement("li"); const critter = document.createElement("span"); critter.className = `${spriteClassBase}${pkmnData.className}`; critter.title = capitalizeFirstLetter(getClassName(pkmnData)); - document.getElementById("pkmn").appendChild(critter); + listItem.appendChild(critter); critter.addEventListener("mouseover", () => { const select = document.createElement("audio"); select.src = `${audioPath}select.ogg`; select.play(); }); + + pkmnList.appendChild(listItem); }); diff --git a/_src/assets/js/footer.js b/_src/assets/js/footer.js new file mode 100644 index 0000000..4a65ff2 --- /dev/null +++ b/_src/assets/js/footer.js @@ -0,0 +1,27 @@ +const messages = [ + "*paws at you*", + "[object Object]", + "Be kind, or else", + "Be nice to others", + "byeah", + "Coded with my own two paws!", + "coffee cheetos chicken", + "Did you know? A rabbit is a type of creature", + "hop hop", + "Hope you're doing all right!", + "iPod iPad iPaid iPeed", + "let's go refreshing!\n*refreshes, repeat message*\naw dang it\n*refreshes, repeat message*\naw dang it\n*refreshes, repeat message*\naw dan—", + "Made with love ❤️", + "pyon pyon", + "Sunny is a bunny that is funny", + "Thanks for stopping by!", + "the girl reading this", + "This website is gay", + "Tricked you, it's Egypt and we're both Phlog Pyros", + "U ' x ' U", + "Website built by whatever this thing is → 🐇", + "You're telling me that a queer coded this?", +]; +const randomize = messages[Math.floor(Math.random() * messages.length)]; +const footerMessage = document.getElementById("message"); +footerMessage.innerText = randomize; diff --git a/_src/assets/js/fox.js b/_src/assets/js/fox.js index 0a7c82e..6523a17 100644 --- a/_src/assets/js/fox.js +++ b/_src/assets/js/fox.js @@ -1,16 +1,18 @@ -import { audioPath } from './path.js' +import { audioPath } from "./path.js"; + let fox = document.getElementById("fox"); let music = document.createElement("audio"); + music.src = `${audioPath}fox.ogg`; music.loop = true; fox.appendChild(music); window.addEventListener("load", function () { - music.play(); - music.muted = true; + music.play(); + music.muted = true; }); fox.onmouseover = () => { - music.muted = false; + music.muted = false; }; fox.onmouseout = () => { - music.muted = true; + music.muted = true; }; diff --git a/_src/assets/js/nav-details.js b/_src/assets/js/nav-details.js deleted file mode 100644 index 18b8253..0000000 --- a/_src/assets/js/nav-details.js +++ /dev/null @@ -1,26 +0,0 @@ -const detailsElements = document.getElementsByTagName('details'); -const dropdown = Array.from(detailsElements); - -const save = () => { - dropdown.forEach((details, i) => { - localStorage.setItem(`details${i}`, details.hasAttribute('open')); - }); -}; - -dropdown.forEach((details, i) => { - const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false; - details.toggleAttribute('open', isOpen); - details.addEventListener('toggle', save); - - const svg = details.querySelector('summary svg'); - if (svg) { - svg.style.transition = isOpen ? 'none' : ''; - } -}); - -setTimeout(() => { - dropdown.forEach(details => { - const svg = details.querySelector('summary svg'); - if (svg) svg.style.transition = ''; - }); -}, 100); \ No newline at end of file diff --git a/_src/assets/js/piss.js b/_src/assets/js/piss.js index 44fc72b..5fa5791 100644 --- a/_src/assets/js/piss.js +++ b/_src/assets/js/piss.js @@ -1,16 +1,17 @@ -import { audioPath } from './path.js' +import { audioPath } from "./path.js"; + let secret = document.getElementById("piss"); -let baby = new Image(); -baby.src = "/assets/img/button/piss-baby2.gif"; - -secret.addEventListener("mouseover", func, true); - -function func() { - secret.src = baby.src; -} - let flashlight = document.createElement("audio"); +let baby = new Image(); + +baby.src = "/assets/img/button/piss-baby2.gif"; flashlight.src = `${audioPath}flashlight.ogg`; secret.appendChild(flashlight); - -secret.addEventListener("mouseover", () => flashlight.play(), { once: true }); +secret.addEventListener( + "mouseover", + () => { + secret.src = baby.src; + flashlight.play(); + }, + { once: true } +); diff --git a/_src/assets/js/poke.js b/_src/assets/js/poke.js deleted file mode 100644 index 931488d..0000000 --- a/_src/assets/js/poke.js +++ /dev/null @@ -1,371 +0,0 @@ -import { audioPath } from './path.js' -const imgBasePath = "/assets/img/pkmn/"; -let favorites = [ - { img: `${imgBasePath}1.png`, title: "Bulbasaur"}, - { img: `${imgBasePath}2.png`, title: "Ivysaur"}, - { img: `${imgBasePath}3.png`, title: "Venusaur"}, - { img: `${imgBasePath}4.png`, title: "Charmander"}, - { img: `${imgBasePath}5.png`, title: "Charmeleon"}, - { img: `${imgBasePath}6.png`, title: "Charizard"}, - { img: `${imgBasePath}7.png`, title: "Squirtle"}, - { img: `${imgBasePath}8.png`, title: "Wartortle"}, - { img: `${imgBasePath}9.png`, title: "Blastoise"}, - { img: `${imgBasePath}15.png`, title: "Beedrill"}, - { img: `${imgBasePath}25.png`, title: "Pikachu"}, - { img: `${imgBasePath}26.png`, title: "Raichu"}, - { img: `${imgBasePath}28.png`, title: "Sandslash"}, - { img: `${imgBasePath}29.png`, title: "Nidoran (Female)"}, - { img: `${imgBasePath}30.png`, title: "Nidorina"}, - { img: `${imgBasePath}31.png`, title: "Nidoqueen"}, - { img: `${imgBasePath}32.png`, title: "Nidoran (Male)"}, - { img: `${imgBasePath}33.png`, title: "Nidorino"}, - { img: `${imgBasePath}34.png`, title: "Nidoking"}, - { img: `${imgBasePath}37.png`, title: "Vulpix"}, - { img: `${imgBasePath}38.png`, title: "Ninetales"}, - { img: `${imgBasePath}52.png`, title: "Meowth"}, - { img: `${imgBasePath}58.png`, title: "Growlithe"}, - { img: `${imgBasePath}59.png`, title: "Arcanine"}, - { img: `${imgBasePath}79.png`, title: "Slowpoke"}, - { img: `${imgBasePath}81.png`, title: "Magnemite"}, - { img: `${imgBasePath}82.png`, title: "Magneton"}, - { img: `${imgBasePath}87.png`, title: "Dewgong"}, - { img: `${imgBasePath}90.png`, title: "Shellder"}, - { img: `${imgBasePath}92.png`, title: "Gastly"}, - { img: `${imgBasePath}93.png`, title: "Haunter"}, - { img: `${imgBasePath}94.png`, title: "Gengar"}, - { img: `${imgBasePath}96.png`, title: "Drowzee"}, - { img: `${imgBasePath}104.png`, title: "Cubone"}, - { img: `${imgBasePath}112.png`, title: "Rhydon"}, - { img: `${imgBasePath}115.png`, title: "Kangaskhan"}, - { img: `${imgBasePath}131.png`, title: "Lapras"}, - { img: `${imgBasePath}133.png`, title: "Eevee"}, - { img: `${imgBasePath}134.png`, title: "Vaporeon"}, - { img: `${imgBasePath}135.png`, title: "Jolteon"}, - { img: `${imgBasePath}136.png`, title: "Flareon"}, - { img: `${imgBasePath}137.png`, title: "Porygon"}, - { img: `${imgBasePath}138.png`, title: "Omanyte"}, - { img: `${imgBasePath}147.png`, title: "Dratini"}, - { img: `${imgBasePath}148.png`, title: "Dragonair"}, - { img: `${imgBasePath}149.png`, title: "Dragonite"}, - { img: `${imgBasePath}150.png`, title: "Mewtwo"}, - { img: `${imgBasePath}151.png`, title: "Mew"}, - { img: `${imgBasePath}155.png`, title: "Cyndaquil"}, - { img: `${imgBasePath}156.png`, title: "Quilava"}, - { img: `${imgBasePath}157.png`, title: "Typhlosion"}, - { img: `${imgBasePath}158.png`, title: "Totodile"}, - { img: `${imgBasePath}159.png`, title: "Croconaw"}, - { img: `${imgBasePath}160.png`, title: "Feraligatr"}, - { img: `${imgBasePath}162.png`, title: "Furret"}, - { img: `${imgBasePath}166.png`, title: "Ledian"}, - { img: `${imgBasePath}167.png`, title: "Spinarak"}, - { img: `${imgBasePath}172.png`, title: "Pichu"}, - { img: `${imgBasePath}175.png`, title: "Togepi"}, - { img: `${imgBasePath}176.png`, title: "Togetic"}, - { img: `${imgBasePath}177.png`, title: "Natu"}, - { img: `${imgBasePath}178.png`, title: "Xatu"}, - { img: `${imgBasePath}179.png`, title: "Mareep"}, - { img: `${imgBasePath}180.png`, title: "Flaaffy"}, - { img: `${imgBasePath}181.png`, title: "Ampharos"}, - { img: `${imgBasePath}182.png`, title: "Bellossom"}, - { img: `${imgBasePath}183.png`, title: "Marill"}, - { img: `${imgBasePath}184.png`, title: "Azumarill"}, - { img: `${imgBasePath}187.png`, title: "Hoppip"}, - { img: `${imgBasePath}190.png`, title: "Aipom"}, - { img: `${imgBasePath}194.png`, title: "Wooper"}, - { img: `${imgBasePath}195.png`, title: "Quagsire"}, - { img: `${imgBasePath}196.png`, title: "Espeon"}, - { img: `${imgBasePath}197.png`, title: "Umbreon"}, - { img: `${imgBasePath}198.png`, title: "Murkrow"}, - { img: `${imgBasePath}200.png`, title: "Misdreavus"}, - { img: `${imgBasePath}202.png`, title: "Girafarig"}, - { img: `${imgBasePath}203.png`, title: "Wobbuffet"}, - { img: `${imgBasePath}206.png`, title: "Dunsparce"}, - { img: `${imgBasePath}212.png`, title: "Scizor"}, - { img: `${imgBasePath}213.png`, title: "Shuckle"}, - { img: `${imgBasePath}215.png`, title: "Sneasel"}, - { img: `${imgBasePath}216.png`, title: "Teddiursa"}, - { img: `${imgBasePath}218.png`, title: "Slugma"}, - { img: `${imgBasePath}222.png`, title: "Corsola"}, - { img: `${imgBasePath}225.png`, title: "Delibird"}, - { img: `${imgBasePath}227.png`, title: "Skarmory"}, - { img: `${imgBasePath}228.png`, title: "Houndour"}, - { img: `${imgBasePath}229.png`, title: "Houndoom"}, - { img: `${imgBasePath}231.png`, title: "Phanpy"}, - { img: `${imgBasePath}233.png`, title: "Porygon2"}, - { img: `${imgBasePath}235.png`, title: "Smeargle"}, - { img: `${imgBasePath}241.png`, title: "Miltank"}, - { img: `${imgBasePath}245.png`, title: "Suicune"}, - { img: `${imgBasePath}248.png`, title: "Tyranitar"}, - { img: `${imgBasePath}249.png`, title: "Lugia"}, - { img: `${imgBasePath}250.png`, title: "Ho-oh"}, - { img: `${imgBasePath}251.png`, title: "Celebi"}, - { img: `${imgBasePath}252.png`, title: "Treecko"}, - { img: `${imgBasePath}253.png`, title: "Grovyle"}, - { img: `${imgBasePath}254.png`, title: "Sceptile"}, - { img: `${imgBasePath}255.png`, title: "Torchic"}, - { img: `${imgBasePath}257.png`, title: "Blaziken"}, - { img: `${imgBasePath}258.png`, title: "Mudkip"}, - { img: `${imgBasePath}260.png`, title: "Swampert"}, - { img: `${imgBasePath}261.png`, title: "Poochyena"}, - { img: `${imgBasePath}262.png`, title: "Mightyena"}, - { img: `${imgBasePath}263.png`, title: "Zigzagoon"}, - { img: `${imgBasePath}265.png`, title: "Wurmple"}, - { img: `${imgBasePath}274.png`, title: "Nuzleaf"}, - { img: `${imgBasePath}280.png`, title: "Ralts"}, - { img: `${imgBasePath}281.png`, title: "Kirlia"}, - { img: `${imgBasePath}282.png`, title: "Gardevoir"}, - { img: `${imgBasePath}286.png`, title: "Breloom"}, - { img: `${imgBasePath}287.png`, title: "Slakoth"}, - { img: `${imgBasePath}298.png`, title: "Azurill"}, - { img: `${imgBasePath}300.png`, title: "Skitty"}, - { img: `${imgBasePath}301.png`, title: "Delcatty"}, - { img: `${imgBasePath}302.png`, title: "Sableye"}, - { img: `${imgBasePath}303.png`, title: "Mawile"}, - { img: `${imgBasePath}304.png`, title: "Aron"}, - { img: `${imgBasePath}306.png`, title: "Aggron"}, - { img: `${imgBasePath}311.png`, title: "Plusle"}, - { img: `${imgBasePath}312.png`, title: "Minun"}, - { img: `${imgBasePath}315.png`, title: "Roselia"}, - { img: `${imgBasePath}322.png`, title: "Numel"}, - { img: `${imgBasePath}327.png`, title: "Spinda"}, - { img: `${imgBasePath}328.png`, title: "Trapinch"}, - { img: `${imgBasePath}329.png`, title: "Vibrava"}, - { img: `${imgBasePath}330.png`, title: "Flygon"}, - { img: `${imgBasePath}334.png`, title: "Altaria"}, - { img: `${imgBasePath}335.png`, title: "Zangoose"}, - { img: `${imgBasePath}336.png`, title: "Seviper"}, - { img: `${imgBasePath}337.png`, title: "Lunatone"}, - { img: `${imgBasePath}338.png`, title: "Solrock"}, - { img: `${imgBasePath}350.png`, title: "Milotic"}, - { img: `${imgBasePath}352.png`, title: "Kecleon"}, - { img: `${imgBasePath}354.png`, title: "Banette"}, - { img: `${imgBasePath}359.png`, title: "Absol"}, - { img: `${imgBasePath}360.png`, title: "Wynaut"}, - { img: `${imgBasePath}363.png`, title: "Spheal"}, - { img: `${imgBasePath}373.png`, title: "Salamence"}, - { img: `${imgBasePath}380.png`, title: "Latias"}, - { img: `${imgBasePath}381.png`, title: "Latios"}, - { img: `${imgBasePath}384.png`, title: "Rayquaza"}, - { img: `${imgBasePath}385.png`, title: "Jirachi"}, - { img: `${imgBasePath}387.png`, title: "Turtwig"}, - { img: `${imgBasePath}389.png`, title: "Torterra"}, - { img: `${imgBasePath}393.png`, title: "Piplup"}, - { img: `${imgBasePath}403.png`, title: "Shinx"}, - { img: `${imgBasePath}404.png`, title: "Luxio"}, - { img: `${imgBasePath}405.png`, title: "Luxray"}, - { img: `${imgBasePath}407.png`, title: "Roserade"}, - { img: `${imgBasePath}418.png`, title: "Buizel"}, - { img: `${imgBasePath}419.png`, title: "Floatzel"}, - { img: `${imgBasePath}423.png`, title: "Gastrodon"}, - { img: `${imgBasePath}424.png`, title: "Ambipom"}, - { img: `${imgBasePath}427.png`, title: "Buneary"}, - { img: `${imgBasePath}428.png`, title: "Lopunny"}, - { img: `${imgBasePath}429.png`, title: "Mismagius"}, - { img: `${imgBasePath}430.png`, title: "Honchkrow"}, - { img: `${imgBasePath}431.png`, title: "Glameow"}, - { img: `${imgBasePath}432.png`, title: "Purugly"}, - { img: `${imgBasePath}445.png`, title: "Garchomp"}, - { img: `${imgBasePath}447.png`, title: "Riolu"}, - { img: `${imgBasePath}448.png`, title: "Lucario"}, - { img: `${imgBasePath}453.png`, title: "Croagunk"}, - { img: `${imgBasePath}461.png`, title: "Weavile"}, - { img: `${imgBasePath}468.png`, title: "Togekiss"}, - { img: `${imgBasePath}470.png`, title: "Leafeon"}, - { img: `${imgBasePath}471.png`, title: "Glaceon"}, - { img: `${imgBasePath}474.png`, title: "Porygon-Z"}, - { img: `${imgBasePath}475.png`, title: "Gallade"}, - { img: `${imgBasePath}478.png`, title: "Froslass"}, - { img: `${imgBasePath}480.png`, title: "Uxie"}, - { img: `${imgBasePath}481.png`, title: "Mesprit"}, - { img: `${imgBasePath}482.png`, title: "Azelf"}, - { img: `${imgBasePath}487.png`, title: "Giratina"}, - { img: `${imgBasePath}488.png`, title: "Cresselia"}, - { img: `${imgBasePath}490.png`, title: "Manaphy"}, - { img: `${imgBasePath}492.png`, title: "Shaymin"}, - { img: `${imgBasePath}493.png`, title: "Arceus"}, - { img: `${imgBasePath}494.png`, title: "Victini"}, - { img: `${imgBasePath}495.png`, title: "Snivy"}, - { img: `${imgBasePath}496.png`, title: "Servine"}, - { img: `${imgBasePath}497.png`, title: "Serperior"}, - { img: `${imgBasePath}498.png`, title: "Tepig"}, - { img: `${imgBasePath}501.png`, title: "Oshawott"}, - { img: `${imgBasePath}502.png`, title: "Dewott"}, - { img: `${imgBasePath}503.png`, title: "Samurott"}, - { img: `${imgBasePath}509.png`, title: "Purrloin"}, - { img: `${imgBasePath}510.png`, title: "Liepard"}, - { img: `${imgBasePath}515.png`, title: "Panpour"}, - { img: `${imgBasePath}516.png`, title: "Simipour"}, - { img: `${imgBasePath}529.png`, title: "Drilbur"}, - { img: `${imgBasePath}530.png`, title: "Excadrill"}, - { img: `${imgBasePath}531.png`, title: "Audino"}, - { img: `${imgBasePath}540.png`, title: "Sewaddle"}, - { img: `${imgBasePath}541.png`, title: "Swadloon"}, - { img: `${imgBasePath}542.png`, title: "Leavanny"}, - { img: `${imgBasePath}545.png`, title: "Scolipede"}, - { img: `${imgBasePath}546.png`, title: "Cottonee"}, - { img: `${imgBasePath}547.png`, title: "Whimsicott"}, - { img: `${imgBasePath}548.png`, title: "Petilil"}, - { img: `${imgBasePath}549.png`, title: "Lilligant"}, - { img: `${imgBasePath}556.png`, title: "Maractus"}, - { img: `${imgBasePath}559.png`, title: "Scraggy"}, - { img: `${imgBasePath}560.png`, title: "Scrafty"}, - { img: `${imgBasePath}566.png`, title: "Archen"}, - { img: `${imgBasePath}567.png`, title: "Archeops"}, - { img: `${imgBasePath}570.png`, title: "Zorua"}, - { img: `${imgBasePath}571.png`, title: "Zoroark"}, - { img: `${imgBasePath}572.png`, title: "Minccino"}, - { img: `${imgBasePath}573.png`, title: "Cinccino"}, - { img: `${imgBasePath}577.png`, title: "Solosis"}, - { img: `${imgBasePath}578.png`, title: "Duosion"}, - { img: `${imgBasePath}579.png`, title: "Reuniclus"}, - { img: `${imgBasePath}580.png`, title: "Ducklett"}, - { img: `${imgBasePath}585.png`, title: "Deerling"}, - { img: `${imgBasePath}587.png`, title: "Emolga"}, - { img: `${imgBasePath}595.png`, title: "Joltik"}, - { img: `${imgBasePath}612.png`, title: "Haxorus"}, - { img: `${imgBasePath}616.png`, title: "Shelmet"}, - { img: `${imgBasePath}619.png`, title: "Mienfoo"}, - { img: `${imgBasePath}620.png`, title: "Mienshao"}, - { img: `${imgBasePath}633.png`, title: "Deino"}, - { img: `${imgBasePath}634.png`, title: "Zweilous"}, - { img: `${imgBasePath}637.png`, title: "Volcarona"}, - { img: `${imgBasePath}638.png`, title: "Cobalion"}, - { img: `${imgBasePath}640.png`, title: "Virizion"}, - { img: `${imgBasePath}643.png`, title: "Reshiram"}, - { img: `${imgBasePath}644.png`, title: "Zekrom"}, - { img: `${imgBasePath}647.png`, title: "Keldeo"}, - { img: `${imgBasePath}648.png`, title: "Meloetta"}, - { img: `${imgBasePath}3-mega.png`, title: "Mega Venusaur"}, - { img: `${imgBasePath}6-mega-x.png`, title: "Mega Charizard X"}, - { img: `${imgBasePath}6-mega-y.png`, title: "Mega Charizard Y"}, - { img: `${imgBasePath}9-mega.png`, title: "Mega Blastoise"}, - { img: `${imgBasePath}15-mega.png`, title: "Mega Beedrill"}, - { img: `${imgBasePath}115-mega.png`, title: "Mega Kangaskhan"}, - { img: `${imgBasePath}150-mega-x.png`, title: "Mega Mewtwo X"}, - { img: `${imgBasePath}150-mega-y.png`, title: "Mega Mewtwo Y"}, - { img: `${imgBasePath}181-mega.png`, title: "Mega Ampharos"}, - { img: `${imgBasePath}212-mega.png`, title: "Mega Scizor"}, - { img: `${imgBasePath}229-mega.png`, title: "Mega Houndoom"}, - { img: `${imgBasePath}248-mega.png`, title: "Mega Tyranitar"}, - { img: `${imgBasePath}254-mega.png`, title: "Mega Sceptile"}, - { img: `${imgBasePath}257-mega.png`, title: "Mega Blaziken"}, - { img: `${imgBasePath}260-mega.png`, title: "Mega Swampert"}, - { img: `${imgBasePath}282-mega.png`, title: "Mega Gardevoir"}, - { img: `${imgBasePath}302-mega.png`, title: "Mega Sableye"}, - { img: `${imgBasePath}306-mega.png`, title: "Mega Aggron"}, - { img: `${imgBasePath}334-mega.png`, title: "Mega Altaria"}, - { img: `${imgBasePath}354-mega.png`, title: "Mega Banette"}, - { img: `${imgBasePath}359-mega.png`, title: "Mega Absol"}, - { img: `${imgBasePath}373-mega.png`, title: "Mega Salamence"}, - { img: `${imgBasePath}428-mega.png`, title: "Mega Lopunny"}, - { img: `${imgBasePath}445-mega.png`, title: "Mega Garchomp"}, - { img: `${imgBasePath}448-mega.png`, title: "Mega Lucario"}, - { img: `${imgBasePath}475-mega.png`, title: "Mega Gallade"}, - { img: `${imgBasePath}531-mega.png`, title: "Mega Audino"}, - { img: `${imgBasePath}650.png`, title: "Chespin"}, - { img: `${imgBasePath}651.png`, title: "Quilladin"}, - { img: `${imgBasePath}652.png`, title: "Chesnaught"}, - { img: `${imgBasePath}653.png`, title: "Fennekin"}, - { img: `${imgBasePath}654.png`, title: "Braixen"}, - { img: `${imgBasePath}655.png`, title: "Delphox"}, - { img: `${imgBasePath}656.png`, title: "Froakie"}, - { img: `${imgBasePath}657.png`, title: "Frogadier"}, - { img: `${imgBasePath}658.png`, title: "Greninja"}, - { img: `${imgBasePath}674.png`, title: "Pancham"}, - { img: `${imgBasePath}676.png`, title: "Furfrou"}, - { img: `${imgBasePath}677.png`, title: "Espurr"}, - { img: `${imgBasePath}678-male.png`, title: "Meowstic (Male)"}, - { img: `${imgBasePath}678-female.png`, title: "Meowstic (Female)"}, - { img: `${imgBasePath}694.png`, title: "Helioptile"}, - { img: `${imgBasePath}695.png`, title: "Heliolisk"}, - { img: `${imgBasePath}699.png`, title: "Aurorus"}, - { img: `${imgBasePath}700.png`, title: "Sylveon"}, - { img: `${imgBasePath}701.png`, title: "Hawlucha"}, - { img: `${imgBasePath}704.png`, title: "Goomy"}, - { img: `${imgBasePath}705.png`, title: "Sliggoo"}, - { img: `${imgBasePath}706.png`, title: "Goodra"}, - { img: `${imgBasePath}708.png`, title: "Phantump"}, - { img: `${imgBasePath}714.png`, title: "Noibat"}, - { img: `${imgBasePath}715.png`, title: "Noivern"}, - { img: `${imgBasePath}716.png`, title: "Xerneas"}, - { img: `${imgBasePath}717.png`, title: "Yveltal"}, - { img: `${imgBasePath}722.png`, title: "Rowlet"}, - { img: `${imgBasePath}723.png`, title: "Dartrix"}, - { img: `${imgBasePath}724.png`, title: "Decidueye"}, - { img: `${imgBasePath}725.png`, title: "Litten"}, - { img: `${imgBasePath}726.png`, title: "Torracat"}, - { img: `${imgBasePath}728.png`, title: "Popplio"}, - { img: `${imgBasePath}729.png`, title: "Brionne"}, - { img: `${imgBasePath}730.png`, title: "Primarina"}, - { img: `${imgBasePath}731.png`, title: "Pikipek"}, - { img: `${imgBasePath}743.png`, title: "Ribombee"}, - { img: `${imgBasePath}744.png`, title: "Rockruff"}, - { img: `${imgBasePath}745.png`, title: "Lycanroc"}, - { img: `${imgBasePath}745-dusk.png`, title: "Lycanroc (Dusk Form)"}, - { img: `${imgBasePath}745-midnight.png`, title: "Lycanroc (Midnight Form)"}, - { img: `${imgBasePath}747.png`, title: "Mareanie"}, - { img: `${imgBasePath}748.png`, title: "Toxapex"}, - { img: `${imgBasePath}753.png`, title: "Fomantis"}, - { img: `${imgBasePath}754.png`, title: "Lurantis"}, - { img: `${imgBasePath}757.png`, title: "Salandit"}, - { img: `${imgBasePath}758.png`, title: "Salazzle"}, - { img: `${imgBasePath}759.png`, title: "Stufful"}, - { img: `${imgBasePath}760.png`, title: "Bewear"}, - { img: `${imgBasePath}762.png`, title: "Steenee"}, - { img: `${imgBasePath}763.png`, title: "Tsareena"}, - { img: `${imgBasePath}771.png`, title: "Pyukumuku"}, - { img: `${imgBasePath}775.png`, title: "Komala"}, - { img: `${imgBasePath}778.png`, title: "Mimikyu"}, - { img: `${imgBasePath}782.png`, title: "Jangmo-o"}, - { img: `${imgBasePath}784.png`, title: "Kommo-o"}, - { img: `${imgBasePath}786.png`, title: "Tapu Lele"}, - { img: `${imgBasePath}789.png`, title: "Cosmog"}, - { img: `${imgBasePath}791.png`, title: "Solgaleo"}, - { img: `${imgBasePath}792.png`, title: "Lunala"}, - { img: `${imgBasePath}797.png`, title: "Celesteela"}, - { img: `${imgBasePath}802.png`, title: "Marshadow"}, - { img: `${imgBasePath}803.png`, title: "Poipole"}, - { img: `${imgBasePath}807.png`, title: "Zeraora"}, - { img: `${imgBasePath}810.png`, title: "Grookey"}, - { img: `${imgBasePath}813.png`, title: "Scorbunny"}, - { img: `${imgBasePath}814.png`, title: "Raboot"}, - { img: `${imgBasePath}815.png`, title: "Cinderace"}, - { img: `${imgBasePath}816.png`, title: "Sobble"}, - { img: `${imgBasePath}817.png`, title: "Drizzile"}, - { img: `${imgBasePath}818.png`, title: "Inteleon"}, - { img: `${imgBasePath}823.png`, title: "Corviknight"}, - { img: `${imgBasePath}827.png`, title: "Nickit"}, - { img: `${imgBasePath}828.png`, title: "Thievul"}, - { img: `${imgBasePath}831.png`, title: "Wooloo"}, - { img: `${imgBasePath}835.png`, title: "Yamper"}, - { img: `${imgBasePath}858.png`, title: "Hatterene"}, - { img: `${imgBasePath}859.png`, title: "Impidimp"}, - { img: `${imgBasePath}862.png`, title: "Obstagoon"}, - { img: `${imgBasePath}869.png`, title: "Alcremie"}, - { img: `${imgBasePath}870.png`, title: "Falinks"}, - { img: `${imgBasePath}872.png`, title: "Snom"}, - { img: `${imgBasePath}876-male.png`, title: "Indeedee (Male)"}, - { img: `${imgBasePath}876-female.png`, title: "Indeedee (Female)"}, - { img: `${imgBasePath}887.png`, title: "Dragapult"} -]; -function getRandomUniquePkmn(pkmnArray, count) { - const uniquePkmn = new Set(); - const totalPkmn = pkmnArray.length; - while (uniquePkmn.size < count && uniquePkmn.size < totalPkmn) { - const randomIndex = Math.floor(Math.random() * totalPkmn); - uniquePkmn.add(pkmnArray[randomIndex]); - } - return Array.from(uniquePkmn).slice(0, count); -} -const party = getRandomUniquePkmn(favorites, 6); -party.forEach(pkmnData => { - const critter = document.createElement("img"); - critter.src = pkmnData.img; - critter.title = pkmnData.title; - document.getElementById("pkmn").appendChild(critter); - critter.addEventListener("mouseover", () => { - const select = document.createElement("audio"); - select.src = `${audioPath}select.ogg`; - select.play(); - }); -}); diff --git a/_src/assets/js/theme.js b/_src/assets/js/theme.js index 51c6789..4caa89f 100644 --- a/_src/assets/js/theme.js +++ b/_src/assets/js/theme.js @@ -1,10 +1,10 @@ const basePath = "/assets/css"; const themeToggle = document.getElementById("theme-toggle"); -const themeStylesheet = document.getElementById("custom"); +const themeStylesheet = document.getElementById("themed"); const themes = [ { name: "system", file: "default/system.css" }, - { name: "citrus", file: "citrus/citrus.css" }, + { name: "citrus", file: "citrus/default.css" }, ]; let currentTheme = localStorage.getItem("theme") || themes[0].name; diff --git a/_src/data/art/artwork/NT sunny spritesheet.md b/_src/data/art/artwork/NT sunny spritesheet.md index bc11c1b..b5c20c6 100644 --- a/_src/data/art/artwork/NT sunny spritesheet.md +++ b/_src/data/art/artwork/NT sunny spritesheet.md @@ -4,4 +4,7 @@ images: alt: Various pixel art animations of Sundae as a character from Nuclear Throne. date: 2021-01-25 pixel: true +programs: + - name: paint.net + src: https://www.getpaint.net/ --- diff --git a/_src/data/art/artwork/PETSCII sunny.md b/_src/data/art/artwork/PETSCII sunny.md index 4ebcea4..703d126 100644 --- a/_src/data/art/artwork/PETSCII sunny.md +++ b/_src/data/art/artwork/PETSCII sunny.md @@ -8,12 +8,16 @@ images: alt: Revisioned front-facing bust portrait of Sundae, with shinier hair. date: 2023-04-14 pixel: true +programs: + - name: lvllvl + src: https://lvllvl.com +palettes: + - name: Calm 48 + src: https://lospec.com/palette-list/calm-48 --- A hybrid pixel and PETSCII portrait of sunny. I'm quite fond of both versions! One looks more glossy and true to his model, and the other's got a cute pouty look to his face. -`Color palette used:` ![](https://www.google.com/s2/favicons?domain=https://lospec.com)[Calm 48](https://lospec.com/palette-list/calm-48)* - -`*The lime green nose is a modification and not part of the base palette.` +The lime green nose is a modification and not part of the base palette. diff --git a/_src/data/art/artwork/acnl sunny.md b/_src/data/art/artwork/acnl sunny.md index 3aa9ae0..5d49611 100644 --- a/_src/data/art/artwork/acnl sunny.md +++ b/_src/data/art/artwork/acnl sunny.md @@ -20,6 +20,9 @@ flags: alt: Rainbow pride flag - src: /assets/img/flag/agender.svg alt: Agender pride flag +programs: + - name: ACPatterns + src: https://acpatterns.com/ --- Originally made to be used as a town flag design for my Animal Crossing New Leaf town. diff --git a/_src/data/art/artwork/bun bed.md b/_src/data/art/artwork/bun bed.md index 3f40822..791aea3 100644 --- a/_src/data/art/artwork/bun bed.md +++ b/_src/data/art/artwork/bun bed.md @@ -3,4 +3,7 @@ images: - src: /assets/img/art/sundae_bunbed.png alt: Full-length portrait of Sundae propping his left leg up on his bed—which is just a mattress—with his right leg off to the side of it. date: 2021-12-24 +programs: + - name: Krita + src: https://krita.org/ --- diff --git a/_src/data/art/artwork/city.md b/_src/data/art/artwork/city.md index aaff02d..e43fdcc 100644 --- a/_src/data/art/artwork/city.md +++ b/_src/data/art/artwork/city.md @@ -6,9 +6,13 @@ images: - src: /assets/img/art/sundae_city.png alt: Newer version, with more vibrancy in the color blending. date: 2022-05-22 +programs: + - name: paint.net + src: https://getpaint.net + - name: GNU Image Manipulation Program + src: https://gimp.org/ --- -Done in ![](https://www.google.com/s2/favicons?domain=https://getpaint.net)[paint.net](https://getpaint.net) with a mouse when I was feeling under the weather. I used to be extremely proud of this, but since then I've noticed a lot that I could've done better. -When I was switching over to ![](https://www.google.com/s2/favicons?domain=https://gimp.org)[GIMP](https://gimp.org), I re-imported the layers (with equivalent layer modes) from the paint.net project file out of curiosity, which resulted in higher contrast and more vivid colors. +When I was switching over to GIMP, I re-imported the layers (with equivalent layer modes) from the paint.net project file out of curiosity, which resulted in higher contrast and more vivid colors. diff --git a/_src/data/art/artwork/funny bunny.md b/_src/data/art/artwork/funny bunny.md new file mode 100644 index 0000000..ac70aab --- /dev/null +++ b/_src/data/art/artwork/funny bunny.md @@ -0,0 +1,15 @@ +--- +images: + - src: /assets/img/art/sundae_funny.png + alt: Pixel artwork of Sundae's face up close with half-lidded eyes. + date: 2025-10-12 + pixel: true +programs: + - name: Aseprite + src: https://www.aseprite.org/ +palettes: + - name: AAP-RadiantPLUS + src: https://lospec.com/palette-list/aap-radiantplus +--- + +I hired this bunny to stare at you. \ No newline at end of file diff --git a/_src/data/art/artwork/furred dragon 1.md b/_src/data/art/artwork/furred dragon 1.md index bb07d19..615f48c 100644 --- a/_src/data/art/artwork/furred dragon 1.md +++ b/_src/data/art/artwork/furred dragon 1.md @@ -3,4 +3,7 @@ images: - src: /assets/img/art/sundae_dragon1.png alt: Bust pixel art portrait of Sundae as a furred dragon. His eyes are closed with a relaxed look on his face. date: 2021-08-03 +programs: + - name: MS Paint + src: https://www.microsoft.com/en-us/windows/paint --- diff --git a/_src/data/art/artwork/furred dragon 2.md b/_src/data/art/artwork/furred dragon 2.md index b62dd27..693e2cd 100644 --- a/_src/data/art/artwork/furred dragon 2.md +++ b/_src/data/art/artwork/furred dragon 2.md @@ -3,6 +3,9 @@ images: - src: /assets/img/art/sundae_dragon2.png alt: Bust portrait of Sundae as a furred dragon. He's looking at the viewer with a concerned look on his face, and flopped-over dragon ears. date: 2021-12-24 +programs: + - name: Krita + src: https://krita.org/ --- This was supposed to be a full-length portrait of Sundae's dragon form, but I had difficulty figuring out perspective, drawing dragon wings and ultimately got frustrated. diff --git a/_src/data/art/artwork/glistening.md b/_src/data/art/artwork/glistening.md index e6707a6..7c9ca60 100644 --- a/_src/data/art/artwork/glistening.md +++ b/_src/data/art/artwork/glistening.md @@ -3,13 +3,19 @@ images: - src: /assets/img/art/sundae_glistening.png alt: Front-facing portrait of Sundae focused on the right side of his face. He looks vibrant and has glossy features. His hair, nose, eye and eyelid are particularly shiny. date: 2023-11-09 + - src: /assets/img/art/sundae_glistening-old.png + alt: Older version, overall more sketchy + date: 2023-11-07 +programs: + - name: Krita + src: https://krita.org/ --- Incredibly proud of this! -I used ![](https://www.google.com/s2/favicons?domain=https://tombofnull.itch.io/stipple-beast-brush-pack)[TOMBOFNULL's stipple beast brush pack](https://tombofnull.itch.io/stipple-beast-brush-pack), which I'd been meaning to try out before. +I used ![](https://www.google.com/s2/favicons?domain=https://tombofnull.itch.io/stipple-beast-brush-pack)[TOMBOFNULL's stipple beast brush pack](https://tombofnull.itch.io/stipple-beast-brush-pack), which I'd been meaning to try out before. -Inspired by one of ![](https://www.google.com/s2/favicons?domain=https://kaitty.com)[kaitty's](https://kaitty.com) avatars (specifically from their bandcamp), which I thought was really cute. +Inspired by one of ![](https://www.google.com/s2/favicons?domain=https://kaitty.com)[kaitty's](https://kaitty.com) avatars (specifically from their bandcamp), which I thought was really cute. It first started out as a doodle, referencing their avatar. Although, I wasn't that happy since the colors I used were a bit flat. diff --git a/_src/data/art/artwork/icon of sunny.md b/_src/data/art/artwork/icon of sunny.md index 5fcb704..eb632cb 100644 --- a/_src/data/art/artwork/icon of sunny.md +++ b/_src/data/art/artwork/icon of sunny.md @@ -3,4 +3,7 @@ images: - src: /assets/img/art/sundae_icon.svg alt: Side portrait vector graphic artwork of Sundae. date: 2023-01-17 +programs: + - name: Inkscape + src: https://inkscape.org/ --- diff --git a/_src/data/art/artwork/lick icon.md b/_src/data/art/artwork/lick icon.md index 262b113..cf44aed 100644 --- a/_src/data/art/artwork/lick icon.md +++ b/_src/data/art/artwork/lick icon.md @@ -4,8 +4,13 @@ images: alt: Pixel art animation of Sundae licking the screen. date: 2025-03-18 pixel: true +programs: + - name: Aseprite + src: https://www.aseprite.org/ + - name: GNU Image Manipulation Program + src: https://gimp.org/ --- -I got bored one day and I decided on a whim to make my own lick icon from ![](https://www.google.com/s2/favicons?domain=https://deviantart.com)[Michi's lick icon base](https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097). +I got bored one day and I decided on a whim to make my own lick icon from ![](https://www.google.com/s2/favicons?domain=https://deviantart.com)[Michi's lick icon base](https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097). Pretty happy with it! \ No newline at end of file diff --git a/_src/data/art/artwork/look him.md b/_src/data/art/artwork/look him.md index 6a599d3..6207cb4 100644 --- a/_src/data/art/artwork/look him.md +++ b/_src/data/art/artwork/look him.md @@ -3,6 +3,9 @@ images: - src: /assets/img/art/sundae_refsheet-new-unfinished.png alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed. date: 2025-02-11 +programs: + - name: Krita + src: https://krita.org/ --- Half-finished, was supposed to include a back and side view but I didn't have much motivation to keep going. \ No newline at end of file diff --git a/_src/data/art/artwork/pride.md b/_src/data/art/artwork/pride.md index db8b472..d757c12 100644 --- a/_src/data/art/artwork/pride.md +++ b/_src/data/art/artwork/pride.md @@ -9,9 +9,14 @@ images: flags: - src: /assets/img/flag/pansexual.svg alt: Pansexual pride flag +programs: + - name: Clip Studio Paint + src: https://clipstudio.net/ + - name: Krita + src: https://krita.org/ --- -First done in ![](https://www.google.com/s2/favicons?domain=https://clipstudio.net)[Clip Studio Paint](https://clipstudio.net/en/), but I eventually settled on ![](https://www.google.com/s2/favicons?domain=https://krita.org)[Krita](https://krita.org/en/) and re-drew him there. +First drawn in Clip Studio Paint, but I eventually settled on Krita and re-drew him there. The scope of this was originally much large. It would've been a huge undertaking to re-do the background for it, which is why I re-purposed it for pride month. diff --git a/_src/data/art/artwork/site backdrop.md b/_src/data/art/artwork/site backdrop.md index 7951c43..bb6d64e 100644 --- a/_src/data/art/artwork/site backdrop.md +++ b/_src/data/art/artwork/site backdrop.md @@ -3,4 +3,7 @@ images: - src: /assets/img/art/sundae_backdrop.svg alt: Front-facing bust portrait vector graphic artwork of Sundae, for the backdrop of the site. The colors are warm orange tones and his eyes are closed. date: 2023-07-17 +programs: + - name: Inkscape + src: https://inkscape.org/ --- diff --git a/_src/data/art/artwork/starchild.md b/_src/data/art/artwork/starchild.md index 031374a..1435d97 100644 --- a/_src/data/art/artwork/starchild.md +++ b/_src/data/art/artwork/starchild.md @@ -3,8 +3,11 @@ images: - src: /assets/img/art/sundae_starchild.png alt: Full-length portrait of Sundae in a glowing blue and pink form with white hair, suspended in outer space; sleeping on the edge of a blue nebula on a space gas cloud that's his size. date: 2023-07-12 +programs: + - name: Krita + src: https://krita.org/ --- -I was incredibly surprised to discover that I could create the space background in-program with ![](https://www.google.com/s2/favicons?domain=https://krita.org)[Krita](https://krita.org), just by using different built-in presets from the [Halftone filter](https://docs.krita.org/en/reference_manual/filters/artistic.html). +I was incredibly surprised to discover that I could create the space background in-program with Krita, just by using different built-in presets from the [Halftone filter](https://docs.krita.org/en/reference_manual/filters/artistic.html). This is one of my favorite artworks that I've spent time working on! diff --git a/_src/data/art/artwork/sunny doodle.md b/_src/data/art/artwork/sunny doodle.md index 039ee6a..ed1ed8c 100644 --- a/_src/data/art/artwork/sunny doodle.md +++ b/_src/data/art/artwork/sunny doodle.md @@ -4,10 +4,13 @@ images: alt: Bust portrait pixel art doodle of Sundae in monochrome and dithering. date: 2020-05-06 pixel: true +programs: + - name: MS Paint + src: https://www.microsoft.com/en-us/windows/paint --- The first doodle of the boy, done in Microsoft Paint. I'm not sure when I actually made this, due to lack of chat logs and file dates being wiped. -The earliest I could point to is during 2020, when I made a secondary youtube channel to upload ![](https://www.google.com/s2/favicons?domain=https://youtube.com)[Cave Story's soundtracks](https://youtube.com/@fosstracks/videos), since at the time, there weren't any great uploads. +The earliest I could point to is during 2020, when I made a secondary youtube channel to upload ![](https://www.google.com/s2/favicons?domain=https://youtube.com)[Cave Story's soundtracks](https://youtube.com/@fosstracks/videos), since at the time, there weren't any great uploads. diff --git a/_src/data/art/artwork/sunny headpat.md b/_src/data/art/artwork/sunny headpat.md index 2459249..c50bc6f 100644 --- a/_src/data/art/artwork/sunny headpat.md +++ b/_src/data/art/artwork/sunny headpat.md @@ -4,6 +4,7 @@ images: alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand. date: 2021-11-18 pixel: true +programs: + - name: MS Paint + src: https://www.microsoft.com/en-us/windows/paint --- - -Done in Microsoft Paint. \ No newline at end of file diff --git a/_src/data/art/artwork/sunny mimiga.md b/_src/data/art/artwork/sunny mimiga.md index 0d93df5..f171f1a 100644 --- a/_src/data/art/artwork/sunny mimiga.md +++ b/_src/data/art/artwork/sunny mimiga.md @@ -4,6 +4,9 @@ images: alt: Pixel art avatar of Sundae as a mimiga character from Cave Story. date: 2020-11-12 pixel: true +programs: + - name: paint.net + src: https://www.getpaint.net/ --- This is made using Sue Sakamoto's portrait as a base. \ No newline at end of file diff --git a/_src/data/art/artwork/sunny's model.md b/_src/data/art/artwork/sunny's model.md index bc2f323..40509f0 100644 --- a/_src/data/art/artwork/sunny's model.md +++ b/_src/data/art/artwork/sunny's model.md @@ -3,8 +3,11 @@ images: - src: /assets/img/art/sundae_refsheet.png alt: Reference/model sheet of Sundae with full-length front and side portraits and a list of colors used inbetween. date: 2023-03-26 +programs: + - name: Krita + src: https://krita.org/ --- -For this, I took reference from the work of ![](https://www.google.com/s2/favicons?domain=https://twitter.com)[Dr. Presto (18+ warning)](https://twitter.com/presswer), specifically with how they used to create model sheets of their characters, during 2020. +For this, I took reference from the work of ![](https://www.google.com/s2/favicons?domain=https://twitter.com)[Dr. Presto (18+ warning)](https://twitter.com/presswer), specifically with how they used to create model sheets of their characters, during 2020. They're a huge inspiration for me to start drawing, and I haven't made proper reference models until this. diff --git a/_src/data/art/artwork/vector bun.md b/_src/data/art/artwork/vector bun.md index badae86..e695166 100644 --- a/_src/data/art/artwork/vector bun.md +++ b/_src/data/art/artwork/vector bun.md @@ -7,15 +7,19 @@ attachments: - src: /assets/img/blog/bun.png alt: In-game screenshot of the avatar flags: - - src: /assets/img/flag/trans.svg - alt: Transgender pride flag + - src: /assets/img/flag/trans.svg + alt: Transgender pride flag +programs: + - name: lvllvl + src: https://lvllvl.com +palettes: + - name: CS112-V2 + src: https://lospec.com/palette-list/cs112-v2 --- -Made using ![](https://www.google.com/s2/favicons?domain=https://lvllvl.com)[lvllvl](https://lvllvl.com/)'s vector mode, with the "modular shapes" vector set. +Made using lvllvl's vector mode, with the "modular shapes" vector set. A character that I first made in ROBLOX. They're unnamed, because I haven't done much with them outside of this artwork. -Although, I was surprised how cute I could make an avatar that's not restricted to the default square body that I've been accustomed to for a decade. - -`Color palette used:` ![](https://www.google.com/s2/favicons?domain=https://lospec.com)[CS112-V2](https://lospec.com/palette-list/cs112-v2) \ No newline at end of file +Although, I was surprised how cute I could make an avatar that's not restricted to the default square body that I've been accustomed to for a decade. \ No newline at end of file diff --git a/_src/data/art/fanart/PETSCII kass.md b/_src/data/art/fanart/PETSCII kass.md index 051b8f5..c0c3907 100644 --- a/_src/data/art/fanart/PETSCII kass.md +++ b/_src/data/art/fanart/PETSCII kass.md @@ -7,8 +7,12 @@ images: attachments: - src: /assets/img/blog/kass.jpg alt: In-game screenshot of Kass that I took as reference. +programs: + - name: lvllvl + src: https://lvllvl.com +palettes: + - name: New Worlds 46 + src: https://lospec.com/palette-list/new-worlds-46 --- -A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild. - -`Color palette used:` ![](https://www.google.com/s2/favicons?domain=https://lospec.com)[New Worlds 46](https://lospec.com/palette-list/new-worlds-46) \ No newline at end of file +A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild. \ No newline at end of file diff --git a/_src/data/art/fanart/PETSCII lurantis.md b/_src/data/art/fanart/PETSCII lurantis.md index 3bba8d7..eda1b71 100644 --- a/_src/data/art/fanart/PETSCII lurantis.md +++ b/_src/data/art/fanart/PETSCII lurantis.md @@ -4,10 +4,14 @@ images: alt: Front-facing half-length portrait PETSCII artwork of Lurantis from Pokémon, but with a zig-zag mouth. date: 2023-02-15 pixel: true +programs: + - name: lvllvl + src: https://lvllvl.com +palettes: + - name: Pastel Horizon + src: https://lospec.com/palette-list/pastel-horizon --- -This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using ![](https://www.google.com/s2/favicons?domain=https://lvllvl.com)[lvllvl](https://lvllvl.com/), which is to say that this is done using a bitmap character set, despite it looking like pixel art. +This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using lvllvl, which is to say that this is done using a bitmap character set, despite it looking like pixel art. -![](https://www.google.com/s2/favicons?domain=https://archives.bulbagarden.net)[Lurantis don't have a mouth](https://archives.bulbagarden.net/wiki/Category:Lurantis), but I thought I'd give them one anyway, because they look cute with. - -`Color palette used:` ![](https://www.google.com/s2/favicons?domain=https://lospec.com)[Pastel Horizon](https://lospec.com/palette-list/pastel-horizon) \ No newline at end of file +![](https://www.google.com/s2/favicons?domain=https://archives.bulbagarden.net)[Lurantis don't have a mouth](https://archives.bulbagarden.net/wiki/Category:Lurantis), but I thought I'd give them one anyway, because they look cute with. \ No newline at end of file diff --git a/_src/data/art/fanart/PETSCII sue.md b/_src/data/art/fanart/PETSCII sue.md index 334a060..8e3f479 100644 --- a/_src/data/art/fanart/PETSCII sue.md +++ b/_src/data/art/fanart/PETSCII sue.md @@ -3,10 +3,10 @@ images: - src: /assets/img/art/petscii_sue.png alt: Sue Sakamoto sitting and looking out from the Outer Wall. date: 2023-01-16 +palettes: + - name: Commodore 64 --- -Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of ![](https://www.google.com/s2/favicons?domain=https://lvllvl.com)[lvllvl](https://lvllvl.com/), using a much less user-friendly tool. +Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of ![](https://www.google.com/s2/favicons?domain=https://lvllvl.com)[lvllvl](https://lvllvl.com/), using a much less user-friendly tool. -Inspired by ![](https://www.google.com/s2/favicons?domain=https://mileshouse.neocities.org)[kiophen](https://mileshouse.neocities.org) and ![](https://www.google.com/s2/favicons?domain=https://creature0354.neocities.org)[lati](https://creature0354.neocities.org)'s first PETSCII works! - -`Color palette used:` Commodore 64 +Inspired by ![](https://www.google.com/s2/favicons?domain=https://mileshouse.neocities.org)[kiophen](https://mileshouse.neocities.org) and ![](https://www.google.com/s2/favicons?domain=https://creature0354.neocities.org)[lati](https://creature0354.neocities.org)'s first PETSCII works! \ No newline at end of file diff --git a/_src/data/art/fanart/klonoa sitting.md b/_src/data/art/fanart/klonoa sitting.md index 54a8577..041707d 100644 --- a/_src/data/art/fanart/klonoa sitting.md +++ b/_src/data/art/fanart/klonoa sitting.md @@ -3,6 +3,7 @@ images: - src: /assets/img/art/klonoa_sitting.png alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side. date: 2021-11-18 +programs: + - name: MS Paint + src: https://www.microsoft.com/en-us/windows/paint --- - -Done in Microsoft Paint. \ No newline at end of file diff --git a/_src/data/art/fanart/klonoa.md b/_src/data/art/fanart/klonoa.md index 788d3aa..c4f85e2 100644 --- a/_src/data/art/fanart/klonoa.md +++ b/_src/data/art/fanart/klonoa.md @@ -3,4 +3,7 @@ images: - src: /assets/img/art/klonoa.png alt: Monotone sketch of Klonoa. He's standing, looking at the viewer and waving his hand. date: 2023-02-13 +programs: + - name: Krita + src: https://krita.org/ --- \ No newline at end of file diff --git a/_src/data/art/fanart/mallow.md b/_src/data/art/fanart/mallow.md index acbf0c0..c4cea13 100644 --- a/_src/data/art/fanart/mallow.md +++ b/_src/data/art/fanart/mallow.md @@ -3,8 +3,11 @@ images: - src: /assets/img/art/mallow.png alt: Mallow from Cavern Crusher, sitting on the ledge of a mossy stone pit with water at the bottom. date: 2025-08-03 +programs: + - name: Krita + src: https://krita.org/ --- -![](https://www.google.com/s2/favicons?domain=https://caverncrusher.com)[Mallow!](https://caverncrusher.com/Mallow) I love this goober. It's from a ROBLOX game titled ![](https://www.google.com/s2/favicons?domain=https://roblox.com)[Cavern Crusher](https://www.roblox.com/games/15121756860/CAVERN-CRUSHER) that's in development (as of writing). +![](https://www.google.com/s2/favicons?domain=https://caverncrusher.com)[Mallow!](https://caverncrusher.com/Mallow) I love this goober. It's from a ROBLOX game titled ![](https://www.google.com/s2/favicons?domain=https://roblox.com)[Cavern Crusher](https://www.roblox.com/games/15121756860/CAVERN-CRUSHER) that's in development (as of writing). It has a lot of really cute character designs and I just had to draw one of them. diff --git a/_src/data/art/fanart/sibuxiang.md b/_src/data/art/fanart/sibuxiang.md index 8634d40..00e78a0 100644 --- a/_src/data/art/fanart/sibuxiang.md +++ b/_src/data/art/fanart/sibuxiang.md @@ -3,6 +3,9 @@ images: - src: /assets/img/art/sibuxiang.png alt: Side portrait of qilin Sibuxiang from 有兽焉 (Fabulous Beasts). date: 2025-01-07 +programs: + - name: Krita + src: https://krita.org/ --- Yeah, I read the gay chinese animal manga... \ No newline at end of file diff --git a/_src/data/articles/bio.md b/_src/data/articles/bio.md index 1bb635e..8fcad56 100644 --- a/_src/data/articles/bio.md +++ b/_src/data/articles/bio.md @@ -1,11 +1,16 @@ ## Bio + +Vector icon of Sunny + Hi! My name's Sunny. I'm: -* an artist -* a writer -* an audio and video editor -* a graphic designer -* a web designer -* a bunny 🐇 +- an artist +- a writer +- an audio and video editor +- a graphic designer +- a web designer +- a bunny 🐇 I identify as: agender, aromantic and pansexual. + +_TO DO: add more text here plz. kthxbai ^\_^_ \ No newline at end of file diff --git a/_src/data/blog/Break time.md b/_src/data/blog/Break time.md index ae69a46..b44d09d 100644 --- a/_src/data/blog/Break time.md +++ b/_src/data/blog/Break time.md @@ -5,20 +5,26 @@ modified: 2025-05-23 blurb:

Invalid DateTime. ha, got you.

avatar: /assets/img/art/sundae_glistening.png --- + ## {{page.fileSlug}} -
WARNING: BORING NERD TOPIC AHOY
+
+ +WARNING: BORING NERD TOPIC AHOY + +
I had mentioned on my Neocities profile that I would look into re-writing my website fairly soon right after pushing an update out. Took a bit longer than I would've liked honestly, but it's here! Actually, it had been mostly finished for a while (since July 1st), but I hit a couple of roadblocks (mainly date conversion) that demoralized me from working more on it at the time, as well as some lifestyle changes, like spending less time on the PC and exercising often. **The most notable things about my site re-write off the top of my head are:** -* converting page elements into `.json` data tables -* rebasing large parts of the page styling -* a larger emphasis on accessibility + +- converting page elements into `.json` data tables +- rebasing large parts of the page styling +- a larger emphasis on accessibility ### I have no some idea what I'm doing @@ -30,7 +36,6 @@ I was **very eager** to start working on it, and because I decided to do so late ### You're telling me that Java scripted this? - I still don't understand JavaScript that well, got stumped on a couple of things, and as a result I took some time off working on the re-write. Regardless, I had ported over the base layout and most pages, which would be around 90% of the work done within the first couple of days. The last 10% that was left being: having to tackle date conversion with [Luxon](https://github.com/moment/luxon), setting custom filters for Eleventy to use them and forgetting to port a few page elements to `.json` data tables. @@ -38,19 +43,24 @@ Regardless, I had ported over the base layout and most pages, which would be aro Currently, my filters are handled really shittily, but they work whenever I build my site. Here's how I currently have my filters set up for dates in my `.eleventy.js` file, if you also happen to struggle with this: + ```js const { DateTime } = require("luxon"); -module.exports = function(eleventyConfig) { -eleventyConfig.addFilter("postDate", (dateObj) => { - return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-MM-dd'); - }); - eleventyConfig.addFilter("galleryDate", (dateObj) => { - return DateTime.fromISO(dateObj, { zone: 'utc' }).toLocaleString(DateTime.DATE_FULL); - }); - eleventyConfig.addFilter("readableDate", (dateObj) => { - return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toLocaleString(DateTime.DATE_FULL); - }); +module.exports = function (eleventyConfig) { + eleventyConfig.addFilter("postDate", (dateObj) => { + return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-MM-dd"); + }); + eleventyConfig.addFilter("galleryDate", (dateObj) => { + return DateTime.fromISO(dateObj, { zone: "utc" }).toLocaleString( + DateTime.DATE_FULL + ); + }); + eleventyConfig.addFilter("readableDate", (dateObj) => { + return DateTime.fromJSDate(dateObj, { zone: "utc" }).toLocaleString( + DateTime.DATE_FULL + ); + }); }; ``` @@ -62,4 +72,4 @@ Before you ask: No, I couldn't condense it into two filters, I tried. I'm far to Despite my struggles, I think Eleventy is a great piece of software, it's just that I'm not knowledgeable enough to leverage its strengths to the fullest. -The fault point here is not even Eleventy itself, but just a popular JavaScript library for dealing with time. \ No newline at end of file +The fault point here is not even Eleventy itself, but just a popular JavaScript library for dealing with time. diff --git a/_src/data/blog/System switching.md b/_src/data/blog/System switching.md index f7153f8..4acf330 100644 --- a/_src/data/blog/System switching.md +++ b/_src/data/blog/System switching.md @@ -6,13 +6,14 @@ blurb:

{{date|readable}}

-With Microsoft announcing that ![](https://www.google.com/s2/favicons?domain=https://microsoft.com)[Windows 10 will stop being supported after October 14, 2025](https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281"), I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11. +With Microsoft announcing that ![](https://www.google.com/s2/favicons?domain=https://microsoft.com)[Windows 10 will stop being supported after October 14, 2025](https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281), I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11. -![](https://www.google.com/s2/favicons?domain=https://kde.org)[Here's a handy resource](https://kde.org/for/w10-exiles/) if you aren't sure how to proceed. +![](https://www.google.com/s2/favicons?domain=https://kde.org)[Here's a handy resource](https://kde.org/for/w10-exiles/) if you aren't sure how to proceed. I'm not paid or anything to mention this, I just think **we shouldn't have to put up with capitalist bullshit to continue using a device.**
@@ -21,10 +22,10 @@ I've been using Linux exclusively for the past 3 months and the switch to it has My main "worries" and/or misconceptions before getting into it were: -* the supposed lack of programs and/or games -* learning the terminal -* learning the different directory structure -* issues with my Nvidia GPU +* the supposed lack of programs and/or games +* learning the terminal +* learning the different directory structure +* issues with my Nvidia GPU

I had grown tired of Windows and Microsoft as a whole yada yada—

@@ -37,23 +38,22 @@ So... the hardest part about moving is, well, how would I move to Linux? There's ### Decisions -I went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out ![](https://www.google.com/s2/favicons?domain=https://fedoraproject.org)[Fedora Workstation](https://fedoraproject.org/#editions) at first and it felt pretty seamless, I didn't have to use the terminal for much of anything. +I went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out ![](https://www.google.com/s2/favicons?domain=https://fedoraproject.org)[Fedora Workstation](https://fedoraproject.org/#editions) at first and it felt pretty seamless, I didn't have to use the terminal for much of anything. I tinkered with it for a couple of days before deciding to look up system/media installers for Linux distributions (that are able to be run on Windows) and coming up empty-handed, cluelessly thinking that somehow only Windows manages to offer one. -...Until I found ![](https://www.google.com/s2/favicons?domain=https://debian.org)[Debian's System Installer for Windows (win32loader)](https://wiki.debian.org/DebianInstaller/Loader), which I tried running under a Windows 11 virtual machine to see if it would fail to install, and it didn't! +...Until I found ![](https://www.google.com/s2/favicons?domain=https://debian.org)[Debian's System Installer for Windows (win32loader)](https://wiki.debian.org/DebianInstaller/Loader), which I tried running under a Windows 11 virtual machine to see if it would fail to install, and it didn't! So I just went ahead and installed it over my actual Windows partition (backing up my documents prior). -