diff --git a/_src/_data/icon.json b/_src/_data/icon.json new file mode 100644 index 0000000..7c6c261 --- /dev/null +++ b/_src/_data/icon.json @@ -0,0 +1,6 @@ +{ + "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 0f2639a..bb4f56f 100644 --- a/_src/_data/outgoing.json +++ b/_src/_data/outgoing.json @@ -8,7 +8,7 @@ "matrix": [ { "icon": "matrix.svg", - "src": "https://matrix.to/#/@fossilisk:matrix.org" + "src": "https://matrix.to/#/@sundae:bunsin.space" } ], "neocities": [ diff --git a/_src/_data/svg.json b/_src/_data/svg.json new file mode 100644 index 0000000..816bf1e --- /dev/null +++ b/_src/_data/svg.json @@ -0,0 +1,6 @@ +{ + "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 267dbeb..84b9c0f 100644 --- a/_src/_includes/base.njk +++ b/_src/_includes/base.njk @@ -1,140 +1,59 @@ ---- -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" %} - - - - - {% 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 "meta.njk"%} + {%include "stylesheets.njk"%} - - -
-

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

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

Pages

+ +
+
+

Outgoing

+ +
diff --git a/_src/_includes/stylesheets.njk b/_src/_includes/stylesheets.njk new file mode 100644 index 0000000..245ed83 --- /dev/null +++ b/_src/_includes/stylesheets.njk @@ -0,0 +1,7 @@ + + + + + {%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 deleted file mode 100644 index a5fa4c7..0000000 --- a/_src/assets/css/citrus/blog.css +++ /dev/null @@ -1,108 +0,0 @@ -#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 new file mode 100644 index 0000000..2a3c987 --- /dev/null +++ b/_src/assets/css/citrus/citrus.css @@ -0,0 +1,231 @@ +@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 deleted file mode 100644 index 13fb42f..0000000 --- a/_src/assets/css/citrus/default.css +++ /dev/null @@ -1,79 +0,0 @@ -@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 deleted file mode 100644 index 2e88b7c..0000000 --- a/_src/assets/css/citrus/gallery.css +++ /dev/null @@ -1,45 +0,0 @@ -#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 deleted file mode 100644 index 385fcaf..0000000 --- a/_src/assets/css/citrus/home.css +++ /dev/null @@ -1,25 +0,0 @@ -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 1f274bf..2a56037 100644 --- a/_src/assets/css/citrus/nav.css +++ b/_src/assets/css/citrus/nav.css @@ -1,18 +1,21 @@ -body > nav { - border-right: 4px solid; +.navbar { 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); + & 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); + } } - & 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); @@ -20,38 +23,69 @@ body > nav { border: var(--button-current-border); color: var(--citrus-light); } - &:is(:hover, :focus):not([aria-current="page"]) { + &:is(:hover, :focus):not([aria-current]) { 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); - } } -body > nav, +.navbar section, +.navbar li :is(a, button) { + border-radius: var(--round); +} +#default, +#floating, 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); } -header { - width: var(--view); - border-right-width: 4px; +#floating, +#default { + border-bottom-style: solid; 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); + border-right-width: 4px; +} +#default { + border-bottom-right-radius: var(--pad-l); +} +body { + 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); + } } diff --git a/_src/assets/css/citrus/variables.css b/_src/assets/css/citrus/variables.css index e64f8d0..a844194 100644 --- a/_src/assets/css/citrus/variables.css +++ b/_src/assets/css/citrus/variables.css @@ -5,9 +5,15 @@ --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"); @@ -16,17 +22,43 @@ --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 deleted file mode 100644 index 9152642..0000000 --- a/_src/assets/css/default/blog.css +++ /dev/null @@ -1,183 +0,0 @@ -: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 deleted file mode 100644 index 3e2fbc2..0000000 --- a/_src/assets/css/default/default.css +++ /dev/null @@ -1,351 +0,0 @@ -@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 new file mode 100644 index 0000000..ab43057 --- /dev/null +++ b/_src/assets/css/default/fallback.css @@ -0,0 +1,561 @@ +@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 deleted file mode 100644 index 2728903..0000000 --- a/_src/assets/css/default/gallery.css +++ /dev/null @@ -1,93 +0,0 @@ -: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 deleted file mode 100644 index 600666a..0000000 --- a/_src/assets/css/default/home.css +++ /dev/null @@ -1,160 +0,0 @@ -@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 26e74dc..dbeefce 100644 --- a/_src/assets/css/default/index.css +++ b/_src/assets/css/default/index.css @@ -14,12 +14,10 @@ background-repeat: no-repeat; background-position: center; background-size: contain; - & footer { position: sticky; bottom: 0; } - & header { top: 0; display: flex; @@ -27,7 +25,6 @@ justify-self: center; & a, img { - z-index: 1; display: inherit; flex-direction: inherit; } @@ -38,7 +35,6 @@ overflow: hidden; } } - & footer, header { position: absolute; diff --git a/_src/assets/css/default/motion.css b/_src/assets/css/default/motion.css index 3fd9e21..2bdde73 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 */ - article#bio span[id], + #bio span[id], footer span { font-family: "Nosey Rodent", sans-serif; font-weight: bold; @@ -15,24 +15,21 @@ } } @media (prefers-reduced-motion: reduce) { - body { - animation: none !important; - } /* Buttons */ :is(a, button), span:has(a) { - transition: none !important; + transition: none; } /* Permalinks */ .header-anchor, - article pre { - transition: none !important; + main article pre { + transition: none; } /* Images */ #gallery a:has(figure), - #blog article figure, + #blog main article figure, a img { - transition: none !important; + transition: none; } .emoji:has(img[alt*="🐇"]) { & img { @@ -44,12 +41,12 @@ } } /* Scrolling pride flag text */ - article#bio span[id], footer span { - transition: none !important; - animation: none !important; + #bio span[id] { + transition: none; + animation: none; color: inherit; - background-clip: initial !important; - background: initial !important; + background-clip: initial; + background: initial; &::before { content: ""; display: inline-flex; @@ -62,6 +59,9 @@ position: relative; } } + footer span { + width: 100%; + } #aromantic::before { background-image: url("/assets/img/flag/aromantic.svg"); } @@ -71,12 +71,21 @@ #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; + animation: none; 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 3104750..02893f7 100644 --- a/_src/assets/css/default/nav.css +++ b/_src/assets/css/default/nav.css @@ -1,146 +1,103 @@ -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 { +.navbar { 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; - width: var(--view); - 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: var(--pad-sm); - padding: 0; - - & li, - button { + width: var(--view); + & section { + font-weight: bold; + & h3 { + font-size: 1.4rem; + height: var(--pad-xl); + margin: var(--pad-s) auto 0; padding: 0; - align-items: center; + } + } + & ul { + margin: 0 var(--pad-s) var(--pad-s); + padding: 0; + & li { 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%; } } } - - & details { - font-size: 1.4rem; +} +#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; } - - & li *:is(a ,button) { - display: flex; - font-size: 1.125rem; - width: 100%; - font-weight: bold; - height: 36px; - line-height: var(--pad-xl); + & a { + display: none; } } - -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; - } - } +#sidebar { + background: none; + border: 0; + margin: 0; + padding: 0; + z-index: 1; } -@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; - } +#floating, +#sidebar { + z-index: 2; } -@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 0001a81..0c5a567 100644 --- a/_src/assets/css/default/system.css +++ b/_src/assets/css/default/system.css @@ -1,2 +1,36 @@ @import url("./theme-dark.css"); -@import url("./theme-light.css"); \ No newline at end of file +@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 diff --git a/_src/assets/css/default/theme-dark.css b/_src/assets/css/default/theme-dark.css index 606ad73..0f29ba5 100644 --- a/_src/assets/css/default/theme-dark.css +++ b/_src/assets/css/default/theme-dark.css @@ -1,117 +1,86 @@ @media (prefers-color-scheme: dark) { - article, + main article, body, header svg { color: var(--secondary-light-300); } - - article { + main article { border-color: var(--secondary-300); background-color: var(--secondary-200); - - & aside { + & #default { 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); - & :is(a, button):not(span *, .postscript *, dialog *), - span:has(a) { + & a, + button { color: var(--secondary-light-400); border-color: var(--secondary-600); - background-color: var(--secondary-300); + background-color: color-mix(in lch, var(--secondary-300), transparent); &: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; } - - & > nav { - background-color: inherit; + & #default, + #floating { + background-color: var(--secondary-100); border-color: var(--secondary); - & details { - background-color: var(--secondary-100); - &:not([open]) { - color: var(--secondary); - } - } - - & details[open] { + & section { 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, @@ -120,34 +89,20 @@ ); } } - &::after, - & > nav::before { + & #default::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 69e93a9..e08b605 100644 --- a/_src/assets/css/default/theme-light.css +++ b/_src/assets/css/default/theme-light.css @@ -1,117 +1,86 @@ @media (prefers-color-scheme: light) { - article, + main article, body, header svg { color: var(--primary-dark-300); } - - article { + main article { border-color: var(--primary-300); background-color: var(--primary-200); - - & aside { + & #default { 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); - & :is(a, button):not(span *, .postscript *, dialog *), - span:has(a) { + & a, + button { color: var(--primary-dark-400); border-color: var(--primary-600); - background-color: var(--primary-400); + background-color: color-mix(in lch, var(--primary-400), transparent); &: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; } - - & > nav { - background-color: inherit; + & #default, + #floating { + background-color: var(--primary-100); border-color: var(--primary-dark-500); - & details { - background-color: var(--primary-100); - &:not([open]) { - color: var(--primary-dark-500); - } - } - - & details[open] { + & section { 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, @@ -120,34 +89,20 @@ ); } } - &::after, - & > nav::before { + & #default::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 86a5f12..4ae11ae 100644 --- a/_src/assets/css/default/variables.css +++ b/_src/assets/css/default/variables.css @@ -39,17 +39,21 @@ --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-xxl: 4rem; - --pad-xl: 2rem; - --pad-lm: 1.4rem; - --pad-l: 1rem; + --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-sm: 0.4rem; - --flag: 45deg; + --pad-l: 1rem; + --pad-xl: 2rem; + --pad-xxl: 4rem; + --round: 16px; /* Border radius */ + --trans: 300ms; --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)) @@ -98,17 +102,6 @@ #00d2ff 0 ); } - -@keyframes mainbg { - 0% { - background-position: 0rem 0rem; - } - - 100% { - background-position: 256px 256px; - } -} - @keyframes slide { 0% { background-position: 0% 100%; @@ -118,23 +111,24 @@ 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 aae8fd1..bb8cf5e 100644 --- a/_src/assets/css/reset.css +++ b/_src/assets/css/reset.css @@ -4,16 +4,14 @@ *, *::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, @@ -25,22 +23,18 @@ figure, blockquote, dl, dd { - margin-block-end: 0; - margin-block-start: 0; + margin-block-end: 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, @@ -49,45 +43,39 @@ 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%; + max-width: 100%; + display: block; } - /* 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; -} \ No newline at end of file + scroll-margin-block: 5ex; +} diff --git a/_src/assets/js/details-save.js b/_src/assets/js/details-save.js deleted file mode 100644 index 205a85b..0000000 --- a/_src/assets/js/details-save.js +++ /dev/null @@ -1,14 +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); -}); diff --git a/_src/assets/js/theme.js b/_src/assets/js/theme.js index 4caa89f..eb7e1d2 100644 --- a/_src/assets/js/theme.js +++ b/_src/assets/js/theme.js @@ -1,24 +1,26 @@ const basePath = "/assets/css"; -const themeToggle = document.getElementById("theme-toggle"); +const themeToggles = document.querySelectorAll(".theme-toggle"); const themeStylesheet = document.getElementById("themed"); const themes = [ - { name: "system", file: "default/system.css" }, - { name: "citrus", file: "citrus/default.css" }, + { name: "system", file: "default/system.css" }, + { name: "citrus", file: "citrus/citrus.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.href = `${basePath}/${theme.file}`; - } + const theme = themes.find(t => t.name === themeName); + if (theme && themeStylesheet) { + themeStylesheet.href = `${basePath}/${theme.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 +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 diff --git a/_src/data/art/artwork/NT sunny spritesheet.md b/_src/data/art/artwork/NT sunny spritesheet.md index b5c20c6..06aab9f 100644 --- a/_src/data/art/artwork/NT sunny spritesheet.md +++ b/_src/data/art/artwork/NT sunny spritesheet.md @@ -4,6 +4,7 @@ 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 84ffc5c..8e41eb7 100644 --- a/_src/data/art/artwork/artwork.json +++ b/_src/data/art/artwork/artwork.json @@ -1,4 +1,4 @@ { - "permalink": "/gallery/{{page.fileSlug|slug}}/", + "permalink": "/gallery/original/{{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 6207cb4..0c077d4 100644 --- a/_src/data/art/artwork/look him.md +++ b/_src/data/art/artwork/look him.md @@ -3,6 +3,7 @@ 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 c50bc6f..6fe5aba 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 + 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 c0c3907..2fce5d8 100644 --- a/_src/data/art/fanart/PETSCII kass.md +++ b/_src/data/art/fanart/PETSCII kass.md @@ -4,6 +4,7 @@ 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 8f4f758..6d4f92c 100644 --- a/_src/data/art/fanart/PETSCII sue.md +++ b/_src/data/art/fanart/PETSCII sue.md @@ -3,6 +3,7 @@ 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 f42ad8c..5d3f31f 100644 --- a/_src/data/art/fanart/fanart.json +++ b/_src/data/art/fanart/fanart.json @@ -1,4 +1,4 @@ { - "permalink": "/gallery/{{page.fileSlug|slug}}/", + "permalink": "/gallery/fanart/{{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 041707d..19ffc0a 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 + 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 b318784..b9d98d5 100644 --- a/_src/data/art/fanart/mallow.md +++ b/_src/data/art/fanart/mallow.md @@ -3,6 +3,7 @@ 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 deleted file mode 100644 index 8fcad56..0000000 --- a/_src/data/articles/bio.md +++ /dev/null @@ -1,16 +0,0 @@ -## 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 deleted file mode 100644 index 2ad993e..0000000 --- a/_src/data/articles/fanart.md +++ /dev/null @@ -1,3 +0,0 @@ -## 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 new file mode 100644 index 0000000..603ad90 --- /dev/null +++ b/_src/data/articles/home-bio.html @@ -0,0 +1,12 @@ +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 new file mode 100644 index 0000000..0df7be3 --- /dev/null +++ b/_src/data/articles/home-interests.html @@ -0,0 +1,3 @@ +

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 deleted file mode 100644 index 4e1b4f5..0000000 --- a/_src/data/articles/interests.md +++ /dev/null @@ -1,7 +0,0 @@ -## 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 deleted file mode 100644 index 0cacdd8..0000000 --- a/_src/data/articles/ocs.md +++ /dev/null @@ -1,3 +0,0 @@ -## Original characters - -My own characters that I've drawn \ No newline at end of file diff --git a/_src/data/articles/what.md b/_src/data/articles/what.html similarity index 100% rename from _src/data/articles/what.md rename to _src/data/articles/what.html diff --git a/_src/data/blog/Rewrite 2.0.md b/_src/data/blog/Rewrite 2.0.md index e4e0a44..48f5805 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://moth.ink/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://bunsin.space/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 d629760..f363c93 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 ad7c530..95c54e6 100644 --- a/_src/data/changelog/2023-02-16.md +++ b/_src/data/changelog/2023-02-16.md @@ -1,3 +1 @@ -## {{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 3cd208c..7e539a0 100644 --- a/_src/data/changelog/2023-03-12.md +++ b/_src/data/changelog/2023-03-12.md @@ -1,5 +1,3 @@ -## {{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 b1b0930..7e361c7 100644 --- a/_src/data/changelog/2023-03-16.md +++ b/_src/data/changelog/2023-03-16.md @@ -1,9 +1,6 @@ --- 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 7bc7bf7..54845b8 100644 --- a/_src/data/changelog/2023-04-16.md +++ b/_src/data/changelog/2023-04-16.md @@ -1,5 +1,3 @@ -## {{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 362db16..2864d64 100644 --- a/_src/data/changelog/2023-04-20.md +++ b/_src/data/changelog/2023-04-20.md @@ -1,3 +1 @@ -## {{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 55c11e6..7d138a9 100644 --- a/_src/data/changelog/2023-07-16.md +++ b/_src/data/changelog/2023-07-16.md @@ -2,8 +2,6 @@ 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 c73de93..08ef8f6 100644 --- a/_src/data/changelog/2023-07-18.md +++ b/_src/data/changelog/2023-07-18.md @@ -1,5 +1,3 @@ -## {{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 7781575..02f4fe8 100644 --- a/_src/data/changelog/2023-08-05.md +++ b/_src/data/changelog/2023-08-05.md @@ -1,5 +1,3 @@ -## {{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 87fb267..70596cb 100644 --- a/_src/data/changelog/2023-08-14.md +++ b/_src/data/changelog/2023-08-14.md @@ -1,3 +1 @@ -## {{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 45bf115..31d8979 100644 --- a/_src/data/changelog/2023-09-12.md +++ b/_src/data/changelog/2023-09-12.md @@ -1,5 +1,3 @@ -## {{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 bcce94b..f61bbaf 100644 --- a/_src/data/changelog/2023-09-16.md +++ b/_src/data/changelog/2023-09-16.md @@ -1,3 +1 @@ -## {{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 e5f9c28..343e9e1 100644 --- a/_src/data/changelog/2023-10-16.md +++ b/_src/data/changelog/2023-10-16.md @@ -1,3 +1 @@ -## {{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 8f2ae44..4e4abf3 100644 --- a/_src/data/changelog/2023-11-02.md +++ b/_src/data/changelog/2023-11-02.md @@ -2,8 +2,6 @@ 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 e091e58..8c333a7 100644 --- a/_src/data/changelog/2023-12-01.md +++ b/_src/data/changelog/2023-12-01.md @@ -2,8 +2,6 @@ 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 3b88297..1925ef7 100644 --- a/_src/data/changelog/2023-12-04.md +++ b/_src/data/changelog/2023-12-04.md @@ -1,4 +1,2 @@ -## {{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 ac7e0ac..d2d946f 100644 --- a/_src/data/changelog/2023-12-11.md +++ b/_src/data/changelog/2023-12-11.md @@ -1,5 +1,3 @@ -## {{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 670b71d..24f3b2b 100644 --- a/_src/data/changelog/2023-12-17.md +++ b/_src/data/changelog/2023-12-17.md @@ -1,4 +1,2 @@ -## {{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 64f5e56..9d386d4 100644 --- a/_src/data/changelog/2023-12-28.md +++ b/_src/data/changelog/2023-12-28.md @@ -1,4 +1,2 @@ -## {{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 fd633bd..4f14be4 100644 --- a/_src/data/changelog/2024-06-11.md +++ b/_src/data/changelog/2024-06-11.md @@ -2,8 +2,6 @@ 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 bf5ce5e..0f4b212 100644 --- a/_src/data/changelog/2024-09-24.md +++ b/_src/data/changelog/2024-09-24.md @@ -2,8 +2,6 @@ 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 1a8f6ce..ccd80e0 100644 --- a/_src/data/changelog/2025-06-25.md +++ b/_src/data/changelog/2025-06-25.md @@ -2,8 +2,6 @@ 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 0ebb38c..8eb10d5 100644 --- a/_src/data/changelog/2025-08-10.md +++ b/_src/data/changelog/2025-08-10.md @@ -1,5 +1,3 @@ -## {{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 892658b..9594b67 100644 --- a/_src/data/changelog/2025-09-09.md +++ b/_src/data/changelog/2025-09-09.md @@ -1,5 +1,3 @@ -## {{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 88a7cae..1edb658 100644 --- a/_src/data/changelog/2025-09-10.md +++ b/_src/data/changelog/2025-09-10.md @@ -1,5 +1,3 @@ -## {{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 5f8f35a..085578d 100644 --- a/_src/data/changelog/2025-09-11.md +++ b/_src/data/changelog/2025-09-11.md @@ -1,5 +1,3 @@ -## {{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 f442a3a..759a536 100644 --- a/_src/data/changelog/2025-10-14.md +++ b/_src/data/changelog/2025-10-14.md @@ -2,8 +2,6 @@ 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 3db17f0..474a88d 100644 --- a/_src/data/changelog/2025-10-19.md +++ b/_src/data/changelog/2025-10-19.md @@ -1,5 +1,3 @@ -## {{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 019098e..387cb39 100644 --- a/_src/data/changelog/2026-03-06.md +++ b/_src/data/changelog/2026-03-06.md @@ -1,5 +1,3 @@ -## {{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 d374565..06e338b 100644 --- a/_src/data/changelog/2026-04-02.md +++ b/_src/data/changelog/2026-04-02.md @@ -1,4 +1,2 @@ -## {{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 new file mode 100644 index 0000000..28ab0a5 --- /dev/null +++ b/_src/data/changelog/2026-04-07.md @@ -0,0 +1,4 @@ +- 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 06ffcba..512cad6 100644 --- a/_src/index.html +++ b/_src/index.html @@ -22,7 +22,6 @@ >Mastodon -