diff --git a/_src/_data/icon.json b/_src/_data/icon.json deleted file mode 100644 index 7c6c261..0000000 --- a/_src/_data/icon.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "blog": "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z", - "changelog": "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z", - "gallery": "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5", - "home": "M20 20V30h8V12L16 2 4 12V30h8V20Z" -} \ No newline at end of file diff --git a/_src/_data/outgoing.json b/_src/_data/outgoing.json index bb4f56f..0f2639a 100644 --- a/_src/_data/outgoing.json +++ b/_src/_data/outgoing.json @@ -8,7 +8,7 @@ "matrix": [ { "icon": "matrix.svg", - "src": "https://matrix.to/#/@sundae:bunsin.space" + "src": "https://matrix.to/#/@fossilisk:matrix.org" } ], "neocities": [ diff --git a/_src/_data/svg.json b/_src/_data/svg.json deleted file mode 100644 index 816bf1e..0000000 --- a/_src/_data/svg.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "paw": "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z", - "back": "M2 16 18 4h6L12 14H50v4H12L24 28H18Z", - "theme": "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2", - "menu": "M4 8H28v3H4Zm0 7H28v3H4Zm0 7H28v3H4Z" -} \ No newline at end of file diff --git a/_src/_includes/base.njk b/_src/_includes/base.njk index 84b9c0f..267dbeb 100644 --- a/_src/_includes/base.njk +++ b/_src/_includes/base.njk @@ -1,59 +1,140 @@ +--- +paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z" +back: "M2 16 18 4h6L12 14H50v4H12L24 28H18Z" +theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2" +--- - {%set currentPage = page.url.split('/')[1]|slugify%} - {%set pageOrder = collections.pages|sort(attribute='data.order')%} - {%set availableStyles = ['home', 'blog', 'gallery']%} - {%if page.url.split('/')%} + {% if page.url.split('/') %} {{ page.url.split('/')[1] }} - - {%if page.url.split('/')[2]%} - {{ page.url.split('/')[2]|replace("-", " ") }} | - {%endif%} - {%endif%} - {{ site.name|safe }} + {% if page.url.split('/')[2] %} + {{ page.url.split('/')[2] | replace("-", " ") }} | + {% endif %} + {% endif %} + {{ site.name | safe }} + {% include "meta.njk" %} - {%include "meta.njk"%} - {%include "stylesheets.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 %} - - -
- {% include "../data/articles/what.html" %} -
- - - -
-

- - {%for page in pageOrder%} - {%if page.url|slugify == currentPage%} - - {%endif%} - {%endfor%} - {{ currentPage | capitalize }} - -

-
-
- {{ content|safe }} -
- - - + + +
+

+ {% 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 10792f6..90af020 100644 --- a/_src/_includes/blog.njk +++ b/_src/_includes/blog.njk @@ -1,9 +1,10 @@ --- layout: base --- +
- {{content|safe}} -
- {{blurb|safe}} Profile picture -
-
+ {{content|safe}} +
+ {{blurb|safe}} Profile picture +
+ \ No newline at end of file diff --git a/_src/_includes/gallery.njk b/_src/_includes/gallery.njk index a380155..ab588bd 100644 --- a/_src/_includes/gallery.njk +++ b/_src/_includes/gallery.njk @@ -1,57 +1,56 @@ --- layout: base --- +
-
-

{{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%} - - {%endfor%} - - {%endif%} -
-
- {%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 %} + + {% endfor %} + + {% 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/nav-misc.njk b/_src/_includes/nav-misc.njk deleted file mode 100644 index ac470d5..0000000 --- a/_src/_includes/nav-misc.njk +++ /dev/null @@ -1,25 +0,0 @@ - \ No newline at end of file diff --git a/_src/_includes/nav.njk b/_src/_includes/nav.njk deleted file mode 100644 index 5f12ca7..0000000 --- a/_src/_includes/nav.njk +++ /dev/null @@ -1,38 +0,0 @@ -
-

Pages

- -
-
-

Outgoing

- -
diff --git a/_src/_includes/stylesheets.njk b/_src/_includes/stylesheets.njk deleted file mode 100644 index 245ed83..0000000 --- a/_src/_includes/stylesheets.njk +++ /dev/null @@ -1,7 +0,0 @@ - - - - - {%if currentPage === "home"%} - - {%endif%} \ 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..a5fa4c7 --- /dev/null +++ b/_src/assets/css/citrus/blog.css @@ -0,0 +1,108 @@ +#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, .addendum { + border-radius: 0; + border-width: 4px; + border-style: solid; + } + & aside { + border-color: var(--citrus-mix-light); + background-image: linear-gradient(135deg, + var(--citrus-light-extra) 5%, + var(--citrus-light) 50%, var(--citrus-light-extra) + ); + } + & .addendum { + border-color: var(--citrus-primary); + background-image: linear-gradient(135deg, + var(--citrus-mix-light) 5%, + var(--citrus-light) 50%, var(--citrus-mix-light) + ); + } + & pre { + border-radius: 4px; + color: var(--citrus-secondary); + background-color: var(--citrus-dark-extra); + background-size: 4px; + } + & .post-warning { + background-color: var(--citrus-primary); + } + & s { + text-decoration-color: #d00; + } + & .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); + } + } + } +} diff --git a/_src/assets/css/citrus/citrus.css b/_src/assets/css/citrus/citrus.css deleted file mode 100644 index 2a3c987..0000000 --- a/_src/assets/css/citrus/citrus.css +++ /dev/null @@ -1,231 +0,0 @@ -@import url("./nav.css"); -@import url("./variables.css"); - -body { - font-family: "Nosey Rodent"; - background-attachment: local; - background-blend-mode: soft-light; - background-color: var(--citrus-primary); - background-image: var(--paw-tiled); - background-repeat: repeat; - background-size: 128px; - color: var(--citrus-dark-extra); -} -main article { - background: - var(--noise), - linear-gradient( - var(--citrus-light) 70%, - color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100% - ); - box-shadow: var(--shadow-heavy); - border-radius: 2px; - & a, - button { - background-color: var(--citrus-mix-light); - color: var(--citrus-dark); - &:hover { - background-color: var(--citrus-primary); - } - } - & ul li::before { - background-color: var(--citrus-dark-extra); - } -} -#interests { - & li { - & a { - & span:has(img)::after { - display: none; - } - } - &:nth-child(odd) { - transform: var(--rot-minus); - } - } -} -#gallery { - & main article { - border-radius: 4px; - box-shadow: - inset 0 0 0 4px color-mix(in lch, var(--light), var(--dark) 2%), - inset 0 0 0 8px var(--citrus-mix-dark), - var(--shadow-heavy); - background-color: color-mix( - in lch, - var(--citrus-mix-dark), - var(--citrus-mix) - ); - background-image: - var(--noise), - linear-gradient( - 135deg, - color-mix(in lch, var(--citrus-mix-dark), var(--citrus-mix)), - var(--citrus-mix-dark) - ); - } - & 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; - } - } - } - & a:is(:not(:hover, :focus)) figure { - border-color: var(--light); - background-color: var(--light); - } -} -:is(#art li, #art section a):nth-child(odd) { - transform: var(--rot-minus); -} -#art div { - background-color: var(--citrus-light); - background-image: var(--noise), var(--paper); - background-size: auto, 4px; - box-shadow: var(--shadow-light); - margin-bottom: var(--pad-xl); - padding: var(--pad-xl); - transform: var(--rot-plus); - & p { - line-height: 32px; - } -} -#blog { - animation: none; - background-attachment: local, fixed; - background-blend-mode: overlay, normal; - background-color: var(--light); - background-image: - var(--dot), - linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%); - background-size: 6px, contain; - & main article { - background-color: var(--citrus-light); - background-image: var(--noise); - background-repeat: repeat; - background-size: auto; - border-radius: 0; - box-shadow: - inset 0 -2rem 3rem -4rem var(--dark), - var(--shadow-heavy); - & aside, - .addendum { - border-radius: 0; - border-width: 4px; - border-style: solid; - } - & aside { - border-color: var(--citrus-mix-light); - background-image: linear-gradient( - 135deg, - var(--citrus-light-extra) 5%, - var(--citrus-light) 50%, - var(--citrus-light-extra) - ); - } - & .addendum { - border-color: var(--citrus-primary); - background-image: linear-gradient( - 135deg, - var(--citrus-mix-light) 5%, - var(--citrus-light) 50%, - var(--citrus-mix-light) - ); - } - & pre { - border-radius: 4px; - color: var(--citrus-secondary); - background-color: var(--citrus-dark-extra); - background-size: 4px; - } - & .post-warning { - background-color: var(--citrus-primary); - } - & s { - text-decoration-color: #d00; - } - & .postscript { - & span:has([alt]) { - &::after { - content: ""; - width: var(--avatar); - height: var(--avatar); - position: absolute; - margin: 5px; - background-image: - radial-gradient(circle at 0px 0px, var(--light), transparent 50%), - linear-gradient( - 135deg, - transparent 15%, - var(--light) 20%, - color-mix(in lch, var(--light), transparent 90%) 50% - ); - } - } - & [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); - } - } - } -} - -@media screen and (max-width: 916px) { - body::after { - content: none; - } -} -@media screen and (min-width: 916px) { - nav#default { - height: max-content; - } - header { - margin-top: 0; - } -} diff --git a/_src/assets/css/citrus/default.css b/_src/assets/css/citrus/default.css new file mode 100644 index 0000000..13fb42f --- /dev/null +++ b/_src/assets/css/citrus/default.css @@ -0,0 +1,79 @@ +@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 *, .postscript *, body nav *),.link, +#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..2e88b7c --- /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; + } + } + } + & a 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: calc(var(--pad-xxl) * -1) 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..385fcaf --- /dev/null +++ b/_src/assets/css/citrus/home.css @@ -0,0 +1,25 @@ +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 { + width: 16ch; + margin: var(--pad-sm); + box-shadow: var(--shadow-light); + background-image: linear-gradient(color-mix(in lch, var(--citrus-light-extra), var(--citrus-primary) 50%), var(--citrus-primary) 200%); + & img { + filter: drop-shadow(0 0 1px var(--citrus-dark)); + } + &: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 2a56037..1f274bf 100644 --- a/_src/assets/css/citrus/nav.css +++ b/_src/assets/css/citrus/nav.css @@ -1,21 +1,18 @@ -.navbar { +body > nav { + border-right: 4px solid; color: var(--citrus-dark); - & section { - background: var(--details-bg); - box-shadow: var(--details-shine); - border: var(--details-border); - & h3 { - 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); - } + & 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); } - & li :is(a, button) { + & li *:is(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); @@ -23,69 +20,38 @@ border: var(--button-current-border); color: var(--citrus-light); } - &:is(:hover, :focus):not([aria-current]) { + &: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), + 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); + } } -.navbar section, -.navbar li :is(a, button) { - border-radius: var(--round); -} -#default, -#floating, +body > nav, header { - color: var(--citrus-dark); background-attachment: fixed; + background-blend-mode: screen; background-image: var(--nav-bg); background-size: 6px; + border-color: var(--citrus-dark); } -#floating, -#default { - border-bottom-style: solid; +header { + width: var(--view); + border-right-width: 4px; border-right-style: solid; border-bottom-width: 4px; - border-right-width: 4px; -} -#default { - border-bottom-right-radius: var(--pad-l); -} -body { + border-bottom-style: solid; + border-bottom-right-radius: 100px; + margin-left: calc(var(--view) - 4px); position: relative; - z-index: -3; - & main { - position: inherit; - z-index: -2; - } - & #sidebar { - position: inherit; - z-index: -1; - } -} - -@media screen and (max-width: 916px) { - header { - background: none; - } -} - -@media screen and (min-width: 916px) { - header { - border-bottom-right-radius: var(--pad-xl); - border-bottom-style: solid; - border-bottom-width: 4px; - border-right-style: solid; - border-right-width: 4px; - display: flex; - margin-left: calc(var(--view) - 4px); - padding: var(--pad-m) 0; - width: var(--view); - } + 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 a844194..e64f8d0 100644 --- a/_src/assets/css/citrus/variables.css +++ b/_src/assets/css/citrus/variables.css @@ -5,15 +5,9 @@ --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) - ); + --citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary)); --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)); - --rot-plus: rotate(0.5deg); - --rot-minus: rotate(-0.5deg); --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"); @@ -22,43 +16,17 @@ --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"); - --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% - ); + --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-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-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); + --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 new file mode 100644 index 0000000..9152642 --- /dev/null +++ b/_src/assets/css/default/blog.css @@ -0,0 +1,183 @@ +:root { + --avatar: 3rem; +} +article:not(#blog:has(#posts) *) { + margin: 0 auto; +} +article { + max-width: var(--post); + & ul { + margin: 0; + } + & > .postscript::after { + background-color: var(--primary); + } + & section:not(section:has(p)) { + display: flex; + gap: var(--pad-l); + } + & aside { + float: right; + border-radius: var(--round); + width: 66%; + } + h1, + h2, + h3, + h4, + h5, + h6 { + margin-bottom: var(--pad-m); + } + & .post-warning { + display: flex; + flex-direction: column; + font-size: 1.4rem; + font-weight: bold; + text-align: center; + &::before, + &::after { + content: ""; + display: inherit; + border-width: 2px; + border-style: dashed; + } + } +} +.addendum, +.post-warning, +article aside { + margin: var(--pad-l) 0; + padding: var(--pad-l); +} +article > .addendum { + border-image-slice: 1; + border-image-width: 2px; + border-image-outset: 4px; +} + +article > .postscript { + margin: 0 0 auto auto; + padding: var(--pad-xl) 0 var(--pad-xxl) 0; + &::after { + content: ""; + position: absolute; + width: 64px; + height: 64px; + mask-image: var(--paw); + mask-size: 100%; + mask-repeat: no-repeat; + transform: rotate(15deg); + } + & p { + display: flex; + flex-direction: column; + transition: background-color var(--trans); + 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-size: 0.8rem; + word-wrap: anywhere; + &:hover { + background-color: #3a76f0; + } + + & 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); + } + } + & 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; + } + } +} + +#posts { + max-width: var(--post); + & ul { + display: flex; + flex-direction: column; + gap: var(--pad-l); + margin: 0; + padding: 0; + } + + & a { + display: flex; + flex-direction: column; + border-style: solid; + border-width: 2px; + border-radius: var(--round); + padding: var(--pad-m); + font-size: 1.125rem; + font-weight: bold; + text-decoration: none; + word-break: break-word; + & time, + p { + display: flex; + font-size: 1rem; + font-weight: normal; + } + } +} +@media screen and (max-width: 920px) { + article aside { + float: unset; + width: fit-content; + } + article section { + flex-direction: column; + } + #posts { + max-width: unset; + width: auto; + } + article > .postscript { + & p { + margin-right: var(--pad-sm); + & > a img { + height: auto; + max-height: var(--view); + } + } + } +} +@media (prefers-reduced-motion: reduce) { + article > .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 new file mode 100644 index 0000000..3e2fbc2 --- /dev/null +++ b/_src/assets/css/default/default.css @@ -0,0 +1,351 @@ +@import url("./variables.css"); +@import url("./nav.css"); +@import url("./motion.css"); + +:root { + --view: 18rem; +} + +/* i hate default styles >:( and also chrome */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Rubik", sans-serif; + display: block; + font-size: 2rem; + margin-block-start: 0; + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + +body { + font-family: "Rubik", sans-serif; + font-size: 100%; + margin: 0; + padding: 0; + + & a, + button { + cursor: pointer; + transition: background-color var(--trans); + + &:is(:hover, :focus) { + outline: 0; + } + } +} + +svg { + fill: currentColor; + stroke: currentColor; + stroke-width: 0; +} + +header { + padding-top: var(--pad-xl); + padding-left: calc(var(--view) + var(--pad-xl)); + + & 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)); + overflow: hidden; +} + +details { + cursor: pointer; + display: flex; + flex-direction: column; + + & summary::marker { + content: none; + } +} + +.header-anchor { + display: inline-block; + transition: + color var(--trans), + background-color var(--trans); + height: max-content; + padding: 0 var(--pad-m); + margin: 0 0 0 calc(var(--pad-xl) * -1); + border-radius: 0 var(--round) var(--round) 0; +} + +article { + color: inherit; + border-style: solid; + border-width: 2px; + border-radius: var(--round); + height: max-content; + padding: var(--pad-xl); + + & a:has(figure) { + border-radius: var(--round); + + & figure { + border-color: inherit; + } + } + + & s { + text-decoration-style: line-through; + text-decoration-thickness: 0.1em; + } + + & u { + text-decoration-style: double; + text-decoration-thickness: 2px; + } + + & em { + font-weight: 200; + } + + & p { + word-wrap: break-word; + } + + & p:not(:last-child, [aria-label]) { + padding-bottom: var(--pad-sm); + } + + & code:not(pre *) { + padding: 0 var(--pad-sm); + } + + & pre { + display: flex; + width: auto; + padding: var(--pad-m); + white-space: pre-wrap; + word-break: break-word; + border-style: solid; + border-width: 2px; + transition: + background-color var(--trans), + border-color var(--trans); + } + + & pre, + code:not(pre *) { + border-radius: var(--round); + font-weight: bold; + } + + & figure { + margin: 0; + border-style: solid; + border-width: 2px; + padding: var(--pad-m); + border-radius: inherit; + display: flex; + flex-direction: column; + } + + & ul:not([role="list"]):is(#art *) { + padding: 0; + margin: 0 0 var(--pad-sm) var(--pad-xl); + } + + & li:not([role] *, #changelog *) { + &::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: inherit; + } + + & figcaption { + font-weight: normal; + font-style: italic; + padding-top: var(--pad-sm); + } + } + + & > :first-child > code { + display: flex; + width: fit-content; + margin: var(--pad-sm) 0; + } +} + +:is(main article, main section):not(:last-child) { + margin-bottom: var(--pad-m); +} + +img[src*="/assets/img/flag/"] { + height: 32px; + border-radius: 2px; + + &:first-child { + margin-left: var(--pad-m); + } + + &:not(:last-child) { + margin-right: var(--pad-m); + } +} + +.link { + display: inline-flex; + + & a { + margin-right: 4px; + } + + & img { + position: relative; + vertical-align: sub; + margin: 0 var(--pad-sm); + } +} + +article a:not(.link *, a:has(img)) { + display: inline-flex; + padding: 0 var(--pad-sm); +} + +dialog button[commandfor] { + width: max-content; + padding: 0 var(--pad-sm); + margin: 0 auto; +} + +dialog#signal { + cursor: default; + background: black; + border: none; + margin: 0 auto; + text-align: center; + max-width: 100%; + max-height: 100%; + width: 100%; + height: 100%; + position: fixed; + padding: var(--pad-xl); + + & article { + display: flex; + flex-direction: column; + justify-content: center; + border: 0; + padding: 0; + margin: 0 auto; + max-width: fit-content; + background: none; + word-wrap: break-word; + color: white; + + & h1 { + font-size: 4rem; + } + + & p { + font-size: 2rem; + } + + & a { + margin: auto 0 0 auto; + } + & h1, + p, + a { + font-family: "Times New Roman", Times, serif; + } + + & img { + border: 4px solid white; + padding: var(--pad-sm); + max-width: 100%; + max-height: 250px; + } + } +} + +@media screen and (max-width: 920px) { + body::after { + content: ""; + } + + footer { + width: 100%; + margin: 0; + } + + header { + padding-left: 0; + padding-top: var(--pad-m); + text-align: center; + } + + main { + padding: var(--pad-l); + } + + main > section { + flex-direction: column; + } + + main > section { + width: initial; + } + + article { + max-width: initial; + width: auto; + } +} diff --git a/_src/assets/css/default/fallback.css b/_src/assets/css/default/fallback.css deleted file mode 100644 index ab43057..0000000 --- a/_src/assets/css/default/fallback.css +++ /dev/null @@ -1,561 +0,0 @@ -@import url("./variables.css"); -@import url("./nav.css"); -@import url("./motion.css"); - -body { - font-size: 100%; - margin: 0; - padding: 0; - & a, - button { - cursor: pointer; - } -} -main { - overflow: hidden; - padding: var(--pad-xl) var(--pad-xl) 0 calc(var(--view) + var(--pad-xl)); - position: relative; - width: fit-content; - margin-bottom: var(--pad-xl); - & ul[role="list"] { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - } - & article { - color: inherit; - height: max-content; - max-width: var(--main); - padding: var(--pad-xl); - width: auto; - &:not(:last-child) { - margin-bottom: var(--pad-l); - } - & s { - text-decoration-style: line-through; - text-decoration-thickness: 0.1em; - } - & u { - text-decoration-style: double; - text-decoration-thickness: 2px; - } - & em { - font-weight: 200; - } - & p { - word-wrap: break-word; - &:not(li p):not(:last-child) { - padding-bottom: var(--pad-m); - } - } - & pre { - display: flex; - width: auto; - padding: var(--pad-m); - white-space: pre-wrap; - word-break: break-word; - } - & a { - padding: 2px; - & > img { - display: inline-flex; - height: auto; - vertical-align: middle; - padding-right: 2px; - } - &:has(figure) { - height: fit-content; - } - } - & figure { - margin: 0; - padding: var(--pad-m); - border-radius: inherit; - display: flex; - flex-direction: column; - } - } -} -header { - & a { - display: flex; - } - & svg { - width: 32px; - height: 32px; - margin-right: var(--pad-m); - } -} -footer { - color: var(--dark); - display: inline-flex; - inset-block: 100%; - margin: 0 auto; - position: sticky; - width: 100%; - z-index: -1; - & span { - width: inherit; - background-image: var(--transgender); - padding: 0 var(--pad-s); - } -} -h1, -h2, -h3, -h4, -h5, -h6 { - display: block; - font-size: 2rem; - font-weight: bold; - margin: 0; - width: fit-content; -} -details { - cursor: pointer; - display: flex; - flex-direction: column; - & summary::marker { - content: none; - } -} -svg { - fill: currentColor; - stroke: currentColor; - stroke-width: 0; -} -p { - margin: 0; -} -.paws { - margin: 0; - padding: 0 var(--pad-xl); - & li::marker { - content: none; - } - & li::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); - } -} -img[src*="/assets/img/flag/"] { - height: 32px; - border-radius: 2px; - &:first-child { - margin-left: var(--pad-m); - } - &:not(:last-child) { - margin-right: var(--pad-m); - } -} -/* home.html */ -#bio .emoji { - display: inline-flex; - height: 20px; - vertical-align: middle; - width: 20px; - &::after, - img { - filter: drop-shadow(0 0 0.5px #000a); - } -} -#badges ul { - gap: var(--pad-s); - padding: 0; -} -#interests { - & a { - align-items: center; - display: inline-flex; - flex-direction: column; - height: auto; - text-align: center; - width: 120px; - &:not(:hover, :focus) { - background: transparent; - } - & span:has(img)::after { - background-image: url("/assets/img/icon/shortcut.png"); - background-size: 100%; - content: ""; - display: block; - height: 24px; - margin: -1.5rem 0 0 -0.5rem; - pointer-events: none; - position: absolute; - width: 24px; - z-index: 1; - } - } -} -.games img { - height: 48px; -} -.manga img { - height: 128px; -} -#pkmn { - background-image: url("/assets/img/pkmn/bg/box.png"); - border-bottom-color: #78a068; - border-left-color: #c8f8c0; - border-radius: 4px; - border-right-color: #78a068; - border-style: solid; - border-top-color: #c8f8c0; - border-width: 3px; - margin: var(--pad-l) 0 0 0; - width: fit-content; - & li { - display: flex; - margin-left: -12px; - margin-top: -8px; - & 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; - } - } -} -#agender { - background-image: var(--agender); -} -#aromantic { - background-image: var(--aromantic); -} -#pansexual { - background-image: var(--pansexual); -} -#badges img { - max-height: 31px; - width: 88px; -} -/* changelog.html */ -#changelog li { - &::before { - content: none; - } - &::marker { - content: initial; - } -} -/* gallery.html */ -#art { - & h1, - p { - margin: 0; - } - & p { - max-width: var(--post); - } - & section:has(a:nth-child(n + 2)) { - display: flex; - flex-direction: row; - gap: var(--pad-l); - } - & section:has(a:nth-child(n + 3)) { - flex-direction: column; - } - & section { - &:not(:last-child) { - margin-bottom: var(--pad-l); - } - & a { - display: flex; - width: calc(var(--post) - var(--view)); - flex-direction: column; - height: fit-content; - } - & time { - margin: var(--pad-m) 0 0; - } - } -} -#artworks { - & ul { - display: grid; - grid-template-columns: repeat( - auto-fill, - minmax(min(var(--thumb), 100%), 1fr) - ); - gap: var(--pad-l); - & a { - display: block; - } - } - & figure { - margin: 0; - & img { - width: 100%; - height: var(--thumb); - object-fit: cover; - } - & figcaption { - display: inline-flex; - font-size: 1.4rem; - } - & .count { - margin: auto 0 0 auto; - } - } -} -/* blog.html */ -#blog { - & main article { - max-width: var(--post); - & .postscript { - margin: 0 0 auto auto; - padding: var(--pad-xl) 0 var(--pad-xxl) 0; - &::after { - content: ""; - position: absolute; - width: 64px; - height: 64px; - mask-image: var(--paw); - mask-size: 100%; - mask-repeat: no-repeat; - transform: rotate(15deg); - } - & p { - display: flex; - flex-direction: column; - transition: background-color var(--trans); - 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-size: 0.8rem; - word-wrap: anywhere; - &:hover { - background-color: #3a76f0; - } - - & 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); - } - } - & span:has([alt="Profile picture"]) { - width: var(--avatar); - height: var(--avatar); - display: flex; - float: right; - & [alt="Profile picture"] { - display: flex; - box-sizing: content-box; - margin: 0 0 0 auto; - width: inherit; - height: inherit; - } - } - } - & .postscript::after { - background-color: var(--primary); - } - & section:has(figure) { - display: flex; - gap: var(--pad-l); - } - & aside { - float: right; - border-radius: var(--round); - width: 66%; - } - h1, - h2, - h3, - h4, - h5, - h6 { - margin-bottom: var(--pad-m); - } - & .post-warning { - font-size: 1.4rem; - font-weight: bold; - text-align: center; - &::before, - &::after { - content: ""; - display: inherit; - border-width: 2px; - border-style: dashed; - } - } - } - & #posts { - & ul { - display: flex; - flex-direction: column; - gap: var(--pad-l); - margin: 0; - padding: 0; - } - - & a { - display: flex; - flex-direction: column; - font-size: 1.125rem; - font-weight: bold; - padding: var(--pad-m); - text-decoration: none; - word-break: break-word; - & time, - p { - display: flex; - font-size: 1rem; - font-weight: normal; - } - } - } -} -.addendum, -.post-warning, -#blog main article aside { - margin: var(--pad-l) 0; - padding: var(--pad-l); -} -/* easter egg :) */ -#signal { - background: black; - border: 0; - color: white; - font-family: "Times New Roman", Times, serif; - height: 100%; - margin: 0; - padding: 0; - max-height: 100%; - max-width: 100%; - position: fixed; - width: 100%; - & article { - align-content: center; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - margin: 0 auto; - width: fit-content; - & h1 { - display: inline-flex; - font-size: 4rem; - margin: 0 auto; - } - & p { - font-size: 2rem; - } - & a { - margin: auto 0 0 auto; - } - & img { - border: 4px solid white; - max-height: 250px; - max-width: 100%; - padding: var(--pad-s); - } - & button { - inset-block: 100%; - bottom: 0; - position: sticky; - margin: var(--pad-xl) auto; - width: fit-content; - } - } -} -@media screen and (min-width: 916px) { - #sidebar { - display: flex; - } - #floating { - display: none; - } - #default button[popovertarget] { - display: none; - } -} -@media screen and (max-width: 916px) { - /* Reset */ - header, - footer, - main { - margin: 0; - padding: 0; - width: auto; - } - footer span { - margin: 0 auto; - } - article { - margin: var(--pad-m); - padding: var(--pad-l); - } - header { - margin: calc(var(--pad-xxl) + var(--pad-l)) 0 0 0; - & h1 { - margin: auto 0 0 auto; - padding-right: var(--pad-m); - } - } - #default::before { - content: none; - } - body::after { - content: ""; - } - #blog { - & main article { - max-width: initial; - & aside { - float: unset; - width: fit-content; - } - & section { - flex-direction: column; - } - & .postscript { - & p { - margin-right: var(--pad-sm); - & > a img { - height: auto; - max-height: var(--view); - } - } - } - } - } - #art { - & p { - max-width: auto; - } - & a:has(img) { - width: auto; - } - & section:has(a:nth-child(n + 2)) { - flex-direction: column; - } - } -} diff --git a/_src/assets/css/default/gallery.css b/_src/assets/css/default/gallery.css new file mode 100644 index 0000000..2728903 --- /dev/null +++ b/_src/assets/css/default/gallery.css @@ -0,0 +1,93 @@ +:root { + --thumb: 16rem; +} +#gallery { + & time { + display: flex; + align-self: center; + } +} +#artworks { + & ul { + display: grid; + grid-template-columns: repeat( + auto-fill, + minmax(min(var(--thumb), 100%), 1fr) + ); + padding: 0; + margin: 0; + gap: var(--pad-l); + & a { + display: block; + } + } + + & figure { + margin: 0; + border-style: solid; + & img { + display: flex; + width: 100%; + height: var(--thumb); + object-fit: contain; + border-radius: var(--round); + } + + & figcaption { + font-size: 1.4rem; + display: flex; + align-items: baseline; + text-decoration-style: none; + } + & .count { + margin: auto 0 0 auto; + } + } +} + +#art { + display: flex; + flex-direction: column; + width: fit-content; + & p { + max-width: var(--post); + } + & h3 { + display: flex; + gap: var(--pad-sm); + } + & section:has(a:nth-child(n + 2)) { + display: flex; + flex-direction: row; + gap: var(--pad-l); + } + & section:has(a:nth-child(n + 3)) { + flex-direction: column; + } + & section { + & a { + display: flex; + width: calc(var(--post) - var(--view)); + flex-direction: column; + } + } +} +@media screen and (max-width: 1500px) { + #art section:has(a:nth-child(n + 2)) { + flex-direction: column; + & a { + width: 100%; + } + } +} +@media screen and (max-width: 920px) { + #art p { + max-width: auto; + } + #art a:has(img) { + width: auto; + } + #art section:has(a:nth-child(n + 2)) { + flex-direction: column; + } +} diff --git a/_src/assets/css/default/home.css b/_src/assets/css/default/home.css new file mode 100644 index 0000000..600666a --- /dev/null +++ b/_src/assets/css/default/home.css @@ -0,0 +1,160 @@ +@keyframes jump { + 0% { + transform: translateY(0); + } + + 100% { + transform: translateY(-4px); + } +} + +article#bio { + & .emoji { + height: 20px; + width: 20px; + display: inline-flex; + vertical-align: middle; + &::after, + img { + filter: drop-shadow(0 0 0.5px #000a); + } + } +} + +article#badges { + & ul { + padding: 0; + display: flex; + flex-wrap: wrap; + gap: var(--pad-sm); + } + + & a { + display: flex; + margin: 0; + } + & img { + box-sizing: content-box; + } +} + +article#interests { + & ul { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: var(--pad-l) 0; + } + & li { + display: flex; + width: 14ch; + flex-wrap: wrap; + text-align: center; + justify-content: center; + + & a { + display: flex; + 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; + } +} + +#pkmn { + display: flex; + flex-wrap: wrap; + justify-content: center; + background-image: url("/assets/img/pkmn/bg/box.png"); + border-radius: 5px; + width: fit-content; + border-bottom-color: #78a068; + border-left-color: #c8f8c0; + border-right-color: #78a068; + border-top-color: #c8f8c0; + border-width: 3px; + border-style: solid; + margin: var(--pad-l) 0 0 0; + + & li { + display: flex; + margin-top: -8px; + margin-left: -12px; + + & 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: var(--agender); +} + +#aromantic { + background-image: var(--aromantic); +} + +#pansexual { + background-image: var(--pansexual); +} +#badges img { + max-height: 31px; + width: 88px; +} +@media screen and (max-width: 920px) { + article#interests { + display: flex; + flex-direction: column; + + & ul { + justify-content: center; + } + + & li a { + padding: 0; + } + } +} diff --git a/_src/assets/css/default/index.css b/_src/assets/css/default/index.css index dbeefce..26e74dc 100644 --- a/_src/assets/css/default/index.css +++ b/_src/assets/css/default/index.css @@ -14,10 +14,12 @@ background-repeat: no-repeat; background-position: center; background-size: contain; + & footer { position: sticky; bottom: 0; } + & header { top: 0; display: flex; @@ -25,6 +27,7 @@ justify-self: center; & a, img { + z-index: 1; display: inherit; flex-direction: inherit; } @@ -35,6 +38,7 @@ overflow: hidden; } } + & footer, header { position: absolute; diff --git a/_src/assets/css/default/motion.css b/_src/assets/css/default/motion.css index 2bdde73..3fd9e21 100644 --- a/_src/assets/css/default/motion.css +++ b/_src/assets/css/default/motion.css @@ -1,6 +1,6 @@ @media (prefers-reduced-motion: no-preference) { /* Scrolling pride flag text */ - #bio span[id], + article#bio span[id], footer span { font-family: "Nosey Rodent", sans-serif; font-weight: bold; @@ -15,21 +15,24 @@ } } @media (prefers-reduced-motion: reduce) { + body { + animation: none !important; + } /* Buttons */ :is(a, button), span:has(a) { - transition: none; + transition: none !important; } /* Permalinks */ .header-anchor, - main article pre { - transition: none; + article pre { + transition: none !important; } /* Images */ #gallery a:has(figure), - #blog main article figure, + #blog article figure, a img { - transition: none; + transition: none !important; } .emoji:has(img[alt*="🐇"]) { & img { @@ -41,12 +44,12 @@ } } /* Scrolling pride flag text */ - #bio span[id] { - transition: none; - animation: none; + article#bio span[id], footer span { + transition: none !important; + animation: none !important; color: inherit; - background-clip: initial; - background: initial; + background-clip: initial !important; + background: initial !important; &::before { content: ""; display: inline-flex; @@ -59,9 +62,6 @@ position: relative; } } - footer span { - width: 100%; - } #aromantic::before { background-image: url("/assets/img/flag/aromantic.svg"); } @@ -71,21 +71,12 @@ #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; + animation: none !important; transform: translateY(-4px); } - #art div { - transform: none; - } - main article > .postscript { - & p, - p > img { - transition: none; - } - } - #blog #posts a { - transition: none; - } } diff --git a/_src/assets/css/default/nav.css b/_src/assets/css/default/nav.css index 02893f7..3104750 100644 --- a/_src/assets/css/default/nav.css +++ b/_src/assets/css/default/nav.css @@ -1,103 +1,146 @@ -.navbar { +body > nav::before, +body::after { + z-index: -1; + content: ""; + position: absolute; + mask-image: url("/assets/img/theme/sundae_sit-lines.png"); + mask-repeat: no-repeat; + margin: 0; + width: inherit; + height: inherit; + pointer-events: none; +} + +body > nav::before { + bottom: 0; + left: 0; + mask-size: 160%; + -webkit-mask-position-x: -25px; + -webkit-mask-position-y: 90%; +} + +body::after { + content: none; + mask-size: 100%; + width: 100%; + height: 100vw; + -webkit-mask-position-x: 0; + -webkit-mask-position-y: bottom; +} + +body > nav { display: flex; flex-direction: column; - gap: var(--pad-m); - height: 100%; - margin: 0; overflow-x: hidden; - overflow-y: scroll; padding: var(--pad-l); position: fixed; - scrollbar-width: none; width: var(--view); - & section { - font-weight: bold; - & h3 { - font-size: 1.4rem; - height: var(--pad-xl); - margin: var(--pad-s) auto 0; - padding: 0; - } + height: 100%; + overflow-y: scroll; + scrollbar-width: none; + & * svg, + li img { + margin: 0 8px 0 8px; + width: 20px; + align-self: center; } + + & details { + display: flex; + } + & ul { - margin: 0 var(--pad-s) var(--pad-s); + margin: var(--pad-sm); padding: 0; - & li { + + & li, + button { + padding: 0; + align-items: center; margin-bottom: inherit; - & a, - button { - display: flex; - font-size: 1.125rem; - font-weight: bold; - height: 36px; - line-height: 2.125rem; - padding: 0; - width: 100%; - } - & img, - svg { - align-self: center; - margin: 0 8px 0 8px; - width: 20px; - } + & img { border-radius: 100%; } } } -} -#default::before, -body::after { - content: ""; - height: inherit; - margin: 0; - mask-image: url("/assets/img/theme/sundae_sit-lines.png"); - mask-repeat: no-repeat; - pointer-events: none; - position: absolute; - width: inherit; - z-index: -1; -} -#default::before { - bottom: 0; - left: 0; - mask-position-x: -25px; - mask-position-y: 90%; - mask-size: 160%; -} -body::after { - content: none; - height: 100vw; - mask-position-x: 0; - mask-position-y: bottom; - mask-size: 100%; - width: 100%; -} -#floating { - border-bottom-right-radius: var(--pad-l); - border-bottom-style: solid; - border-bottom-width: 2px; - border-right-style: solid; - border-right-width: 2px; - height: fit-content; - top: 0; - width: var(--float); - & button { - font-size: 0; - width: fit-content; + + & details { + font-size: 1.4rem; } - & a { - display: none; + + & li *:is(a ,button) { + display: flex; + font-size: 1.125rem; + width: 100%; + font-weight: bold; + height: 36px; + line-height: var(--pad-xl); } } -#sidebar { - background: none; - border: 0; - margin: 0; - padding: 0; - z-index: 1; + +body { + & > nav { + gap: var(--pad-m); + border-right-width: 1px; + border-right-style: solid; + + & li *:is(a ,button) { + align-items: center; + border-style: solid; + border-width: 2px; + border-radius: var(--round); + } + + & details { + border-radius: var(--round); + font-weight: bold; + } + + & details > summary { + display: flex; + justify-content: center; + padding: 0; + height: var(--pad-xl); + } + & details[open], details:not([open]) { + border-style: solid; + border-width: 2px; + } + } } -#floating, -#sidebar { - z-index: 2; +@media screen and (max-width: 920px) { + body > nav { + position: initial; + width: 100%; + overflow: initial; + flex-direction: row; + justify-content: start; + & li *:is(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 0c5a567..0001a81 100644 --- a/_src/assets/css/default/system.css +++ b/_src/assets/css/default/system.css @@ -1,36 +1,2 @@ @import url("./theme-dark.css"); -@import url("./theme-light.css"); -body { - font-family: "Rubik", sans-serif; -} -main article, -main article a:has(figure), -#blog .addendum, -#blog #posts a, -#gallery #artworks a, -header a, .navbar section, .navbar li :is(a, button) { - border-radius: var(--round); - border-style: solid; - border-width: 2px; -} -main article { - & a figure { - border-color: inherit; - } -} -header { - margin-top: var(--pad-xl); - margin-left: calc(var(--view) + var(--pad-xl)); - & a { - padding: var(--pad-s); - } -} -#blog { - & [alt="Profile picture"] { - border-radius: 100%; - } -} -#default { - border-right-style: solid; - border-right-width: 2px; -} \ No newline at end of file +@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 0f29ba5..606ad73 100644 --- a/_src/assets/css/default/theme-dark.css +++ b/_src/assets/css/default/theme-dark.css @@ -1,86 +1,117 @@ @media (prefers-color-scheme: dark) { - main article, + article, body, header svg { color: var(--secondary-light-300); } - main article { + + article { border-color: var(--secondary-300); background-color: var(--secondary-200); - & #default { + + & aside { box-shadow: inset 0 0 0 2px var(--secondary-500); background-color: var(--secondary-300); } + & s, u { text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%); } + & code:not(pre *) { color: var(--secondary-400); background-color: var(--secondary-light-400); } + & pre { background-color: var(--secondary-100); + &:hover { border-color: var(--secondary); background-color: var(--secondary-400); } } + & pre, code { border-color: var(--secondary-400); } + + /* blog.css */ & .post-warning { background-color: var(--secondary); color: var(--secondary-100); + &::before, &::after { background-color: var(--secondary); } } + & .addendum { + box-shadow: inset 0 0 0 2px var(--secondary); + border-image-source: linear-gradient( + 45deg, + var(--secondary), + var(--secondary-600), + var(--secondary) + ); background-color: var(--secondary-400); - border-color: var(--secondary); } - & ul li::before { - background-color: var(--secondary-light-300); - } } + #posts { & p:not(:last-child) { color: var(--secondary-light-700); } } + /* default.css */ body { background-color: var(--secondary-100); - & a, - button { + & :is(a, button):not(span *, .postscript *, dialog *), + span:has(a) { color: var(--secondary-light-400); border-color: var(--secondary-600); - background-color: color-mix(in lch, var(--secondary-300), transparent); + background-color: var(--secondary-300); &:is(:hover, :focus) { color: var(--secondary-light-500); border-color: currentColor; background-color: var(--secondary-500); } + + &:is(.header-anchor):is(:hover, :focus) { + background-color: var(--secondary-light-400); + color: var(--secondary-300); + box-shadow: 0 0 0 2px var(--secondary-300); + } } & span a { color: inherit; } - & #default, - #floating { - background-color: var(--secondary-100); + + & > nav { + background-color: inherit; border-color: var(--secondary); - & section { + & details { + background-color: var(--secondary-100); + &:not([open]) { + color: var(--secondary); + } + } + + & details[open] { border-color: var(--secondary); background-color: var(--secondary-300); color: var(--secondary-light-300); + & a[aria-current] { color: var(--secondary-500); border-color: var(--secondary-light-500); background-color: var(--secondary-light-500); } } + &::after { background-image: linear-gradient( to bottom, @@ -89,20 +120,34 @@ ); } } + &::after, - & #default::before { + & > nav::before { background-color: var(--secondary); } } + + /* home.css */ + ul:not([role]) li::before { + background-color: var(--secondary-light-300); + } + #interests { & a:is(:hover, :focus):not(.header-anchor) { box-shadow: 0 0 0 1px currentColor; background-color: var(--secondary-500); } + + & img { + box-shadow: 0 0 0 1px + color-mix(in lch, transparent, var(--secondary-500) 70%); + } + & details h3 { border-color: var(--secondary-600); } } + a:has(img[src*="/assets/img/button"]) { background-color: unset; } diff --git a/_src/assets/css/default/theme-light.css b/_src/assets/css/default/theme-light.css index e08b605..69e93a9 100644 --- a/_src/assets/css/default/theme-light.css +++ b/_src/assets/css/default/theme-light.css @@ -1,86 +1,117 @@ @media (prefers-color-scheme: light) { - main article, + article, body, header svg { color: var(--primary-dark-300); } - main article { + + article { border-color: var(--primary-300); background-color: var(--primary-200); - & #default { + + & aside { box-shadow: inset 0 0 0 2px var(--primary-500); background-color: var(--primary-300); } + & s, u { text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%); } + & code:not(pre *) { color: var(--primary-400); background-color: var(--primary-dark-400); } + & pre { background-color: var(--primary-100); + &:hover { border-color: var(--primary); background-color: var(--primary-400); } } + & pre, code { border-color: var(--primary-400); } + + /* blog.css */ & .post-warning { background-color: var(--primary); color: var(--primary-dark-100); + &::before, &::after { background-color: var(--primary); } } + & .addendum { + box-shadow: inset 0 0 0 2px var(--primary); + border-image-source: linear-gradient( + 45deg, + var(--primary), + var(--primary-600), + var(--primary) + ); background-color: var(--primary-400); - border-color: var(--primary); - } - & ul:not([role]) li::before { - background-color: var(--primary-dark-300); } } + #posts { & p:not(:last-child) { color: var(--primary-dark-700); } } + /* default.css */ body { background-color: var(--primary-100); - & a, - button { + & :is(a, button):not(span *, .postscript *, dialog *), + span:has(a) { color: var(--primary-dark-400); border-color: var(--primary-600); - background-color: color-mix(in lch, var(--primary-400), transparent); + background-color: var(--primary-400); &:is(:hover, :focus) { color: var(--primary-dark-500); border-color: currentColor; background-color: var(--primary-600); } + + &:is(.header-anchor):is(:hover, :focus) { + background-color: var(--primary-dark-400); + color: var(--primary-300); + box-shadow: 0 0 0 2px var(--primary-300); + } } & span a { color: inherit; } - & #default, - #floating { - background-color: var(--primary-100); + + & > nav { + background-color: inherit; border-color: var(--primary-dark-500); - & section { + & details { + background-color: var(--primary-100); + &:not([open]) { + color: var(--primary-dark-500); + } + } + + & details[open] { border-color: var(--primary-dark-800); background-color: var(--primary-300); color: var(--primary-dark-300); + & a[aria-current] { color: var(--primary-500); border-color: var(--primary-dark-500); background-color: var(--primary-dark-500); } } + &::after { background-image: linear-gradient( to bottom, @@ -89,20 +120,34 @@ ); } } + &::after, - & #default::before { + & > nav::before { background-color: var(--primary-dark-500); } } + + /* home.css */ + ul:not([role]) li::before { + background-color: var(--primary-dark-300); + } + #interests { & a:is(:hover, :focus):not(.header-anchor) { box-shadow: 0 0 0 1px currentColor; background-color: var(--primary-500); } + + & img { + box-shadow: 0 0 0 1px + color-mix(in lch, transparent, var(--primary-dark-500) 30%); + } + & details h3 { border-color: var(--primary-dark-600); } } + a:has(img[src*="/assets/img/button"]) { background-color: unset; } diff --git a/_src/assets/css/default/variables.css b/_src/assets/css/default/variables.css index 4ae11ae..86a5f12 100644 --- a/_src/assets/css/default/variables.css +++ b/_src/assets/css/default/variables.css @@ -39,21 +39,17 @@ --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%); - --avatar: 3rem; /* Blog avatar */ - --flag: 45deg; /* Pride flag */ - --image: 24rem; /* Postscript images */ - --main: 108rem; /* Main width */ - --post: 75ch; /* Article text width */ - --view: 300px; /* Sidebar width */ - --float: 88px; /* Floating sidebar width */ - --thumb: 16rem; /* Gallery artwork thumbnail */ - --pad-s: 0.4rem; - --pad-m: 0.8rem; - --pad-l: 1rem; - --pad-xl: 2rem; - --pad-xxl: 4rem; - --round: 16px; /* Border radius */ --trans: 300ms; + --image: 24rem; + --post: 75ch; + --round: 16px; + --pad-xxl: 4rem; + --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)) @@ -102,6 +98,17 @@ #00d2ff 0 ); } + +@keyframes mainbg { + 0% { + background-position: 0rem 0rem; + } + + 100% { + background-position: 256px 256px; + } +} + @keyframes slide { 0% { background-position: 0% 100%; @@ -111,24 +118,23 @@ background-position: 200% 100%; } } -@keyframes jump { - 0% { - transform: translateY(0); - } - 100% { - transform: translateY(-4px); - } -} @font-face { 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-face { font-family: Nosey Rodent; src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype"); } + +@font-face { + font-family: Impact; + src: url("/assets/fonts/Impact-Regular.ttf") format("truetype"); +} diff --git a/_src/assets/css/reset.css b/_src/assets/css/reset.css index bb8cf5e..aae8fd1 100644 --- a/_src/assets/css/reset.css +++ b/_src/assets/css/reset.css @@ -4,14 +4,16 @@ *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } + /* Prevent font size inflation */ html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; } + /* Remove default margin in favour of better control in authored CSS */ body, h1, @@ -23,18 +25,22 @@ figure, blockquote, dl, dd { - margin-block-end: 0; + margin-block-end: 0; + margin-block-start: 0; } + /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role="list"], -ol[role="list"] { - list-style: none; +ul[role='list'], +ol[role='list'] { + list-style: none; } + /* Set core body defaults */ body { - min-height: 100vh; - line-height: 1.5; + min-height: 100vh; + line-height: 1.5; } + /* Set shorter line heights on headings and interactive elements */ h1, h2, @@ -43,39 +49,45 @@ h4, button, input, label { - line-height: 1.1; + line-height: 1.1; } + /* Balance text wrapping on headings */ h1, h2, h3, h4 { - text-wrap: balance; + text-wrap: balance; } -/* A elements that don't have a class get default styles */ + +/* A elements that don't have a class get default styles a:not([class]) { - text-decoration-skip-ink: auto; - color: currentColor; + text-decoration-skip-ink: auto; + color: currentColor; } +*/ + /* Make images easier to work with */ img, picture { - max-width: 100%; - display: block; + max-width: 100%; } + /* Inherit fonts for inputs and buttons */ input, button, textarea, select { - font-family: inherit; - font-size: inherit; + font-family: inherit; + font-size: inherit; } + /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { - min-height: 10em; + min-height: 10em; } + /* Anything that has been anchored to should have extra scroll margin */ :target { - scroll-margin-block: 5ex; -} + scroll-margin-block: 5ex; +} \ No newline at end of file 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/theme.js b/_src/assets/js/theme.js index eb7e1d2..4caa89f 100644 --- a/_src/assets/js/theme.js +++ b/_src/assets/js/theme.js @@ -1,26 +1,24 @@ const basePath = "/assets/css"; -const themeToggles = document.querySelectorAll(".theme-toggle"); +const themeToggle = document.getElementById("theme-toggle"); const themeStylesheet = document.getElementById("themed"); const themes = [ - { name: "system", file: "default/system.css" }, - { name: "citrus", file: "citrus/citrus.css" }, + { name: "system", file: "default/system.css" }, + { name: "citrus", file: "citrus/default.css" }, ]; let currentTheme = localStorage.getItem("theme") || themes[0].name; setTheme(currentTheme); function setTheme(themeName) { - const theme = themes.find(t => t.name === themeName); - if (theme && themeStylesheet) { - themeStylesheet.href = `${basePath}/${theme.file}`; - } + const theme = themes.find(t => t.name === themeName); + if (theme) { + themeStylesheet.href = `${basePath}/${theme.file}`; + } } -themeToggles.forEach(btn => - btn.addEventListener("click", () => { - currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name; - setTheme(currentTheme); - localStorage.setItem("theme", currentTheme); - }) -); \ No newline at end of file +themeToggle.addEventListener("click", () => { + currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name; + setTheme(currentTheme); + localStorage.setItem("theme", currentTheme); +}); \ No newline at end of file diff --git a/_src/data/art/artwork/NT sunny spritesheet.md b/_src/data/art/artwork/NT sunny spritesheet.md index 06aab9f..b5c20c6 100644 --- a/_src/data/art/artwork/NT sunny spritesheet.md +++ b/_src/data/art/artwork/NT sunny spritesheet.md @@ -4,7 +4,6 @@ images: alt: Various pixel art animations of Sundae as a character from Nuclear Throne. date: 2021-01-25 pixel: true - fit: contain programs: - name: paint.net src: https://www.getpaint.net/ diff --git a/_src/data/art/artwork/artwork.json b/_src/data/art/artwork/artwork.json index 8e41eb7..84ffc5c 100644 --- a/_src/data/art/artwork/artwork.json +++ b/_src/data/art/artwork/artwork.json @@ -1,4 +1,4 @@ { - "permalink": "/gallery/original/{{page.fileSlug|slug}}/", + "permalink": "/gallery/{{page.fileSlug|slug}}/", "tags": "artworks" } \ 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 0c077d4..6207cb4 100644 --- a/_src/data/art/artwork/look him.md +++ b/_src/data/art/artwork/look him.md @@ -3,7 +3,6 @@ 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 - fit: scale-down programs: - name: Krita src: https://krita.org/ diff --git a/_src/data/art/artwork/sunny headpat.md b/_src/data/art/artwork/sunny headpat.md index 6fe5aba..c50bc6f 100644 --- a/_src/data/art/artwork/sunny headpat.md +++ b/_src/data/art/artwork/sunny headpat.md @@ -4,7 +4,6 @@ images: alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand. date: 2021-11-18 pixel: true - fit: scale-down programs: - name: MS Paint src: https://www.microsoft.com/en-us/windows/paint diff --git a/_src/data/art/fanart/PETSCII kass.md b/_src/data/art/fanart/PETSCII kass.md index 2fce5d8..c0c3907 100644 --- a/_src/data/art/fanart/PETSCII kass.md +++ b/_src/data/art/fanart/PETSCII kass.md @@ -4,7 +4,6 @@ images: alt: Side portrait of Kass, looking back at the player. date: 2023-02-23 pixel: true - position: -25px attachments: - src: /assets/img/blog/kass.jpg alt: In-game screenshot of Kass that I took as reference. diff --git a/_src/data/art/fanart/PETSCII sue.md b/_src/data/art/fanart/PETSCII sue.md index 6d4f92c..8f4f758 100644 --- a/_src/data/art/fanart/PETSCII sue.md +++ b/_src/data/art/fanart/PETSCII sue.md @@ -3,7 +3,6 @@ images: - src: /assets/img/art/petscii_sue.png alt: Sue Sakamoto sitting and looking out from the Outer Wall. date: 2023-01-16 - position: right palettes: - name: Commodore 64 --- diff --git a/_src/data/art/fanart/fanart.json b/_src/data/art/fanart/fanart.json index 5d3f31f..f42ad8c 100644 --- a/_src/data/art/fanart/fanart.json +++ b/_src/data/art/fanart/fanart.json @@ -1,4 +1,4 @@ { - "permalink": "/gallery/fanart/{{page.fileSlug|slug}}/", + "permalink": "/gallery/{{page.fileSlug|slug}}/", "tags": "fanarts" } \ 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 19ffc0a..041707d 100644 --- a/_src/data/art/fanart/klonoa sitting.md +++ b/_src/data/art/fanart/klonoa sitting.md @@ -3,7 +3,6 @@ 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 - fit: scale-down programs: - name: MS Paint src: https://www.microsoft.com/en-us/windows/paint diff --git a/_src/data/art/fanart/mallow.md b/_src/data/art/fanart/mallow.md index b9d98d5..b318784 100644 --- a/_src/data/art/fanart/mallow.md +++ b/_src/data/art/fanart/mallow.md @@ -3,7 +3,6 @@ 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 - position: left programs: - name: Krita src: https://krita.org/ diff --git a/_src/data/articles/bio.md b/_src/data/articles/bio.md new file mode 100644 index 0000000..8fcad56 --- /dev/null +++ b/_src/data/articles/bio.md @@ -0,0 +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 🐇 + +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/articles/fanart.md b/_src/data/articles/fanart.md new file mode 100644 index 0000000..2ad993e --- /dev/null +++ b/_src/data/articles/fanart.md @@ -0,0 +1,3 @@ +## Fan art + +Various artworks featuring characters from other media \ No newline at end of file diff --git a/_src/data/articles/home-bio.html b/_src/data/articles/home-bio.html deleted file mode 100644 index 603ad90..0000000 --- a/_src/data/articles/home-bio.html +++ /dev/null @@ -1,12 +0,0 @@ -Vector icon of Sunny -

Hi! My name's Sunny. I'm:

- -

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/articles/home-interests.html b/_src/data/articles/home-interests.html deleted file mode 100644 index 0df7be3..0000000 --- a/_src/data/articles/home-interests.html +++ /dev/null @@ -1,3 +0,0 @@ -

Below are lists of media that I've enjoyed and/or still enjoy.

-

It is a non-exclusive list, so not everything ever is on here. Just whatever comes to mind to recommend.

-

There will be a lot of music, though.

\ No newline at end of file diff --git a/_src/data/articles/interests.md b/_src/data/articles/interests.md new file mode 100644 index 0000000..4e1b4f5 --- /dev/null +++ b/_src/data/articles/interests.md @@ -0,0 +1,7 @@ +## Interests + +Below are lists of media that I've enjoyed and/or still enjoy. + +It is a non-exclusive list, so not everything ever is on here. Just whatever comes to mind to recommend. + +There will be **a lot** of music, though. \ No newline at end of file diff --git a/_src/data/articles/ocs.md b/_src/data/articles/ocs.md new file mode 100644 index 0000000..0cacdd8 --- /dev/null +++ b/_src/data/articles/ocs.md @@ -0,0 +1,3 @@ +## Original characters + +My own characters that I've drawn \ No newline at end of file diff --git a/_src/data/articles/what.html b/_src/data/articles/what.md similarity index 100% rename from _src/data/articles/what.html rename to _src/data/articles/what.md diff --git a/_src/data/blog/Rewrite 2.0.md b/_src/data/blog/Rewrite 2.0.md index 48f5805..e4e0a44 100644 --- a/_src/data/blog/Rewrite 2.0.md +++ b/_src/data/blog/Rewrite 2.0.md @@ -44,7 +44,7 @@ I wasn't exactly a fan of how I laid out my [interests](/home#interests), previo I've changed them to be more minimal, mimicking Windows desktop entries with the shortcut icon. -If you'd like to implement the shelving for your own website, you can find the source files in the {{"old branch"|link:"https://bunsin.space/forgejo/sundae/website/src/branch/old"}}. +If you'd like to implement the shelving for your own website, you can find the source files in the {{"old branch"|link:"https://moth.ink/forgejo/sundae/website/src/branch/old"}}.
How the shelving featuring my personal favorite games and music looked before.
How it looks now.
Note: the cut-off in the middle is meant to showcase the light and dark theme.
diff --git a/_src/data/blog/blog.json b/_src/data/blog/blog.json index f363c93..d629760 100644 --- a/_src/data/blog/blog.json +++ b/_src/data/blog/blog.json @@ -1,5 +1,5 @@ { "layout": "blog", - "permalink": "/blog/{{page.fileSlug|slug}}/", + "permalink": "/blog/{{ page.fileSlug | slug }}/", "tags": "posts" } \ No newline at end of file diff --git a/_src/data/changelog/2023-02-16.md b/_src/data/changelog/2023-02-16.md index 95c54e6..ad7c530 100644 --- a/_src/data/changelog/2023-02-16.md +++ b/_src/data/changelog/2023-02-16.md @@ -1 +1,3 @@ +## {{page.fileSlug|readable}} + - Created my Neocities account! diff --git a/_src/data/changelog/2023-03-12.md b/_src/data/changelog/2023-03-12.md index 7e539a0..3cd208c 100644 --- a/_src/data/changelog/2023-03-12.md +++ b/_src/data/changelog/2023-03-12.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Added [Home](/home), [Gallery](/gallery) and ~~About~~ - ~~About~~ contains Pokémon boxes and a small bio - Added links to other pages diff --git a/_src/data/changelog/2023-03-16.md b/_src/data/changelog/2023-03-16.md index 7e361c7..b1b0930 100644 --- a/_src/data/changelog/2023-03-16.md +++ b/_src/data/changelog/2023-03-16.md @@ -1,6 +1,9 @@ --- title: Version 0 --- + +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver0.png) - Added sidebar diff --git a/_src/data/changelog/2023-04-16.md b/_src/data/changelog/2023-04-16.md index 54845b8..7bc7bf7 100644 --- a/_src/data/changelog/2023-04-16.md +++ b/_src/data/changelog/2023-04-16.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Working on my [interests](/home#interests)... - Added ~~Favorite Pokémon~~ - Moved Pokémon boxes from ~~About~~ diff --git a/_src/data/changelog/2023-04-20.md b/_src/data/changelog/2023-04-20.md index 2864d64..362db16 100644 --- a/_src/data/changelog/2023-04-20.md +++ b/_src/data/changelog/2023-04-20.md @@ -1 +1,3 @@ +## {{page.fileSlug|readable}} + - [Gallery](/gallery) implemented diff --git a/_src/data/changelog/2023-07-16.md b/_src/data/changelog/2023-07-16.md index 7d138a9..55c11e6 100644 --- a/_src/data/changelog/2023-07-16.md +++ b/_src/data/changelog/2023-07-16.md @@ -2,6 +2,8 @@ title: Version 1 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver1.png) - Changed backgrounds diff --git a/_src/data/changelog/2023-07-18.md b/_src/data/changelog/2023-07-18.md index 08ef8f6..c73de93 100644 --- a/_src/data/changelog/2023-07-18.md +++ b/_src/data/changelog/2023-07-18.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Changed [Gallery](/gallery) - Now implementing {{"CSS grid layout"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}} - Removed Sunny's portrait from the sidebar diff --git a/_src/data/changelog/2023-08-05.md b/_src/data/changelog/2023-08-05.md index 02f4fe8..7781575 100644 --- a/_src/data/changelog/2023-08-05.md +++ b/_src/data/changelog/2023-08-05.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Changed ~~About~~ - Added a collection of games and music that I enjoy - Added 88x31 buttons to the footer of the page diff --git a/_src/data/changelog/2023-08-14.md b/_src/data/changelog/2023-08-14.md index 70596cb..87fb267 100644 --- a/_src/data/changelog/2023-08-14.md +++ b/_src/data/changelog/2023-08-14.md @@ -1 +1,3 @@ +## {{page.fileSlug|readable}} + - Made a 88x31 button! [![](/assets/img/button/sunbun_a.gif "sunbun")](/) \ No newline at end of file diff --git a/_src/data/changelog/2023-09-12.md b/_src/data/changelog/2023-09-12.md index 31d8979..45bf115 100644 --- a/_src/data/changelog/2023-09-12.md +++ b/_src/data/changelog/2023-09-12.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Re-added and moved Sunny's portrait to my [bio](/home#bio) - Changed [Gallery](/gallery) - Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art) diff --git a/_src/data/changelog/2023-09-16.md b/_src/data/changelog/2023-09-16.md index f61bbaf..bcce94b 100644 --- a/_src/data/changelog/2023-09-16.md +++ b/_src/data/changelog/2023-09-16.md @@ -1 +1,3 @@ +## {{page.fileSlug|readable}} + - Wrote more about my [interests](/home#interests) \ No newline at end of file diff --git a/_src/data/changelog/2023-10-16.md b/_src/data/changelog/2023-10-16.md index 343e9e1..e5f9c28 100644 --- a/_src/data/changelog/2023-10-16.md +++ b/_src/data/changelog/2023-10-16.md @@ -1 +1,3 @@ +## {{page.fileSlug|readable}} + - Starting work on a re-design. I fixed a few inconsistencies beforehand \ No newline at end of file diff --git a/_src/data/changelog/2023-11-02.md b/_src/data/changelog/2023-11-02.md index 4e4abf3..8f2ae44 100644 --- a/_src/data/changelog/2023-11-02.md +++ b/_src/data/changelog/2023-11-02.md @@ -2,6 +2,8 @@ title: Version 2 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver2.png) Added a lot of visual flair with to page elements to look like everyday objects, with the exception being: the header, sidebar and topbar, as they're supposed to be UI. diff --git a/_src/data/changelog/2023-12-01.md b/_src/data/changelog/2023-12-01.md index 8c333a7..e091e58 100644 --- a/_src/data/changelog/2023-12-01.md +++ b/_src/data/changelog/2023-12-01.md @@ -2,6 +2,8 @@ title: Version 3 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver3.png) Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to {{"semantic HTML"|link:"https://developer.mozilla.org/en-US/curriculum/core/semantic-html/"}}. diff --git a/_src/data/changelog/2023-12-04.md b/_src/data/changelog/2023-12-04.md index 1925ef7..3b88297 100644 --- a/_src/data/changelog/2023-12-04.md +++ b/_src/data/changelog/2023-12-04.md @@ -1,2 +1,4 @@ +## {{page.fileSlug|readable}} + - Changed ~~About~~ - Updated the look of the jewel CD cases in my [interests](/home#interests) diff --git a/_src/data/changelog/2023-12-11.md b/_src/data/changelog/2023-12-11.md index d2d946f..ac7e0ac 100644 --- a/_src/data/changelog/2023-12-11.md +++ b/_src/data/changelog/2023-12-11.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Fixed a couple of small issues regarding mobile view - Changed [Gallery](/gallery) - Artworks now work (ha) with keyboard navigation diff --git a/_src/data/changelog/2023-12-17.md b/_src/data/changelog/2023-12-17.md index 24f3b2b..670b71d 100644 --- a/_src/data/changelog/2023-12-17.md +++ b/_src/data/changelog/2023-12-17.md @@ -1,2 +1,4 @@ +## {{page.fileSlug|readable}} + - Added ~~Jukebox~~ - A page with a music player featuring a pre-defined track list from various video games and accompanying backgrounds that fade-in on track change diff --git a/_src/data/changelog/2023-12-28.md b/_src/data/changelog/2023-12-28.md index 9d386d4..64f5e56 100644 --- a/_src/data/changelog/2023-12-28.md +++ b/_src/data/changelog/2023-12-28.md @@ -1,2 +1,4 @@ +## {{page.fileSlug|readable}} + - Drafted ~~Jukebox~~ - I am bad at JavaScript diff --git a/_src/data/changelog/2024-06-11.md b/_src/data/changelog/2024-06-11.md index 4f14be4..fd633bd 100644 --- a/_src/data/changelog/2024-06-11.md +++ b/_src/data/changelog/2024-06-11.md @@ -2,6 +2,8 @@ title: Version 4 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver4.png) - Shiny buttons are BACK! diff --git a/_src/data/changelog/2024-09-24.md b/_src/data/changelog/2024-09-24.md index 0f4b212..bf5ce5e 100644 --- a/_src/data/changelog/2024-09-24.md +++ b/_src/data/changelog/2024-09-24.md @@ -2,6 +2,8 @@ title: Version 5 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver5.png) Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}. diff --git a/_src/data/changelog/2025-06-25.md b/_src/data/changelog/2025-06-25.md index ccd80e0..1a8f6ce 100644 --- a/_src/data/changelog/2025-06-25.md +++ b/_src/data/changelog/2025-06-25.md @@ -2,6 +2,8 @@ title: Version 6 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver6.png) Re-wrote the site, again. diff --git a/_src/data/changelog/2025-08-10.md b/_src/data/changelog/2025-08-10.md index 8eb10d5..0ebb38c 100644 --- a/_src/data/changelog/2025-08-10.md +++ b/_src/data/changelog/2025-08-10.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + Polished the old theme - Changed [Home](/home) diff --git a/_src/data/changelog/2025-09-09.md b/_src/data/changelog/2025-09-09.md index 9594b67..892658b 100644 --- a/_src/data/changelog/2025-09-09.md +++ b/_src/data/changelog/2025-09-09.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Changed sidebar - Added icon for [Changelog](/changelog) - For some reason I forgot give it an icon, it previously used the Gallery icon diff --git a/_src/data/changelog/2025-09-10.md b/_src/data/changelog/2025-09-10.md index 1edb658..88a7cae 100644 --- a/_src/data/changelog/2025-09-10.md +++ b/_src/data/changelog/2025-09-10.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + Website (hopefully) fixed for Chromium-based browsers _...grr_ - Changed sidebar diff --git a/_src/data/changelog/2025-09-11.md b/_src/data/changelog/2025-09-11.md index 085578d..5f8f35a 100644 --- a/_src/data/changelog/2025-09-11.md +++ b/_src/data/changelog/2025-09-11.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + Actively trying to accommodate for accessibility - Added `header` to pages back in diff --git a/_src/data/changelog/2025-10-14.md b/_src/data/changelog/2025-10-14.md index 759a536..f442a3a 100644 --- a/_src/data/changelog/2025-10-14.md +++ b/_src/data/changelog/2025-10-14.md @@ -2,6 +2,8 @@ title: Version 7 --- +## {{page.fileSlug|readable}} {{title}} + ![](/assets/img/changelog/ver7.png) Overhauled the old theme diff --git a/_src/data/changelog/2025-10-19.md b/_src/data/changelog/2025-10-19.md index 474a88d..3db17f0 100644 --- a/_src/data/changelog/2025-10-19.md +++ b/_src/data/changelog/2025-10-19.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Changed [Index](/) and [Blog](/blog) - Updated with miscellaneous disclaimers - Implemented proper off-site links everywhere with favicons as an Eleventy filter **(FINALLY)** \ No newline at end of file diff --git a/_src/data/changelog/2026-03-06.md b/_src/data/changelog/2026-03-06.md index 387cb39..019098e 100644 --- a/_src/data/changelog/2026-03-06.md +++ b/_src/data/changelog/2026-03-06.md @@ -1,3 +1,5 @@ +## {{page.fileSlug|readable}} + - Updated to {{"Eleventy v3.1.2"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.2"}} - Should hopefully be able to be compiled without throwing errors now. - Updated [Gallery](/gallery) diff --git a/_src/data/changelog/2026-04-02.md b/_src/data/changelog/2026-04-02.md index 06e338b..d374565 100644 --- a/_src/data/changelog/2026-04-02.md +++ b/_src/data/changelog/2026-04-02.md @@ -1,2 +1,4 @@ +## {{page.fileSlug|readable}} + - Updated a few links, due to moving domains - Started working on a redesign for the sidebar, mostly intended for easier mobile navigation \ No newline at end of file diff --git a/_src/data/changelog/2026-04-07.md b/_src/data/changelog/2026-04-07.md deleted file mode 100644 index 28ab0a5..0000000 --- a/_src/data/changelog/2026-04-07.md +++ /dev/null @@ -1,4 +0,0 @@ -- Changed sidebar - - Now toggleable on lower resolutions -- Changed [Gallery](/gallery) - - Redesigned to look like a corkboard \ No newline at end of file diff --git a/_src/index.html b/_src/index.html index 512cad6..06ffcba 100644 --- a/_src/index.html +++ b/_src/index.html @@ -22,6 +22,7 @@ >Mastodon +