diff --git a/_src/_includes/stylesheets.njk b/_src/_includes/stylesheets.njk index e553b14..245ed83 100644 --- a/_src/_includes/stylesheets.njk +++ b/_src/_includes/stylesheets.njk @@ -1,7 +1,6 @@ - - - + + {%if currentPage === "home"%} diff --git a/_src/assets/css/citrus/blog.css b/_src/assets/css/citrus/blog.css deleted file mode 100644 index 62a49f2..0000000 --- a/_src/assets/css/citrus/blog.css +++ /dev/null @@ -1,113 +0,0 @@ -#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; - & 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: 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); - } - } - } -} 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 66f0b08..0000000 --- a/_src/assets/css/citrus/default.css +++ /dev/null @@ -1,47 +0,0 @@ -@import url("./blog.css"); -@import url("./gallery.css"); -@import url("./home.css"); -@import url("./nav.css"); -@import url("./variables.css"); - -body { - 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 :is(a, button) { - background-color: var(--citrus-mix-light); - border-color: var(--citrus-mix); - color: var(--citrus-dark); -} -ul 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% - ); - box-shadow: var(--shadow-heavy); - border: 0; - border-radius: 2px; -} -@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/gallery.css b/_src/assets/css/citrus/gallery.css deleted file mode 100644 index 29b8ce1..0000000 --- a/_src/assets/css/citrus/gallery.css +++ /dev/null @@ -1,58 +0,0 @@ -#gallery { - & 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 figure { - border-width: 4px; - border-radius: 0; - &:is(:not(a:hover *, a:focus *)) { - 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; - padding: 0; - } -} diff --git a/_src/assets/css/citrus/home.css b/_src/assets/css/citrus/home.css deleted file mode 100644 index 26906ed..0000000 --- a/_src/assets/css/citrus/home.css +++ /dev/null @@ -1,12 +0,0 @@ -#interests { - & li { - & a { - & span:has(img)::after { - display: none; - } - } - &:nth-child(odd) { - transform: var(--rot-minus); - } - } -} diff --git a/_src/assets/css/citrus/nav.css b/_src/assets/css/citrus/nav.css index 8e1cf0e..2a56037 100644 --- a/_src/assets/css/citrus/nav.css +++ b/_src/assets/css/citrus/nav.css @@ -16,7 +16,6 @@ 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); @@ -36,24 +35,41 @@ } } } -nav#default, -nav#floating, +.navbar section, +.navbar li :is(a, button) { + border-radius: var(--round); +} +#default, +#floating, header { color: var(--citrus-dark); background-attachment: fixed; background-image: var(--nav-bg); background-size: 6px; } -nav#floating, -nav#default { +#floating, +#default { border-bottom-style: solid; border-right-style: solid; border-bottom-width: 4px; border-right-width: 4px; } -nav#default { +#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; @@ -62,14 +78,14 @@ nav#default { @media screen and (min-width: 916px) { header { - display: flex; - width: var(--view); - border-right-width: 4px; - border-right-style: solid; - border-bottom-width: 4px; + border-bottom-right-radius: var(--pad-xl); border-bottom-style: solid; - border-bottom-right-radius: 100px; + 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/default/blog.css b/_src/assets/css/default/blog.css deleted file mode 100644 index d11b504..0000000 --- a/_src/assets/css/default/blog.css +++ /dev/null @@ -1,163 +0,0 @@ -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 { - & 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: 916px) { - article aside { - float: unset; - width: fit-content; - } - article section { - flex-direction: column; - } - article > .postscript { - & p { - margin-right: var(--pad-sm); - & > a img { - height: auto; - max-height: var(--view); - } - } - } -} \ No newline at end of file diff --git a/_src/assets/css/default/changelog.css b/_src/assets/css/default/changelog.css deleted file mode 100644 index eb60a20..0000000 --- a/_src/assets/css/default/changelog.css +++ /dev/null @@ -1,8 +0,0 @@ -li { - &::before { - content: none; - } - &::marker { - content: initial; - } -} diff --git a/_src/assets/css/default/default.css b/_src/assets/css/default/default.css deleted file mode 100644 index 346f236..0000000 --- a/_src/assets/css/default/default.css +++ /dev/null @@ -1,264 +0,0 @@ -@import url("./motion.css"); -@import url("./variables.css"); -@import url("./nav.css"); - -/* i hate default styles >:( and also chrome */ -h1, -h2, -h3, -h4, -h5, -h6 { - display: block; - font-size: 2rem; - font-weight: bold; - width: fit-content; -} -body { - font-family: "Rubik", sans-serif; - font-size: 100%; - margin: 0; - padding: 0; - & a, - button { - cursor: pointer; - &:is(:hover, :focus) { - outline: 0; - } - } -} -svg { - fill: currentColor; - stroke: currentColor; - stroke-width: 0; -} -header { - margin-top: var(--pad-xl); - margin-left: calc(var(--view) + var(--pad-xl)); - & a { - display: flex; - padding: var(--pad-s); - border-radius: var(--round); - } - & svg { - width: 2rem; - height: 2rem; - margin-right: var(--pad-m); - } -} -footer { - overflow-y: hidden; - word-break: break-all; - flex-wrap: wrap; - font-family: "Nosey Rodent", sans-serif; - display: flex; - margin: auto 0 0 auto; - width: fit-content; - justify-content: center; - position: sticky; - inset-block: 100%; - text-align: center; - & span { - background-image: var(--transgender); - padding: 0 var(--pad-s); - } -} -main { - width: fit-content; - padding: var(--pad-xl); - padding-left: calc(var(--view) + var(--pad-xl)); - overflow: hidden; - position: relative; - & ul[role="list"] { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - } -} -details { - cursor: pointer; - display: flex; - flex-direction: column; - & summary::marker { - content: none; - } -} -article { - width: auto; - max-width: var(--main); - 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-s); - } - & pre { - display: flex; - width: auto; - padding: var(--pad-m); - white-space: pre-wrap; - word-break: break-word; - border-style: solid; - border-width: 2px; - } - & figure { - margin: 0; - border-style: solid; - border-width: 2px; - padding: var(--pad-m); - border-radius: inherit; - display: flex; - flex-direction: column; - } - & section { - & a:has(figure) { - height: max-content; - } - & figure img { - border-radius: inherit; - } - & figcaption { - font-weight: normal; - font-style: italic; - padding: var(--pad-m) 0; - } - } -} -.paws li::marker { - content: none; -} -.paws 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); -} -: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); - } -} -dialog button[commandfor="signal"] { - width: max-content; - padding: 0 var(--pad-s); - margin: 0 auto; -} -#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-s); - max-width: 100%; - max-height: 250px; - } - } -} -@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; - } - article { - margin: var(--pad-m); - padding: var(--pad-l); - } - header { - margin: calc(var(--pad-xxl) + var(--pad-l)) 0 0 0; - } - header h1 { - margin: auto 0 0 auto; - padding-right: var(--pad-m); - } - #default::before { - content: none; - } - body::after { - content: ""; - } -} 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 9629a6f..0000000 --- a/_src/assets/css/default/gallery.css +++ /dev/null @@ -1,60 +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; - border-style: solid; - & img { - height: var(--thumb); - object-fit: cover; - } - & figcaption { - display: inline-flex; - font-size: 1.4rem; - } - & .count { - margin: auto 0 0 auto; - } - } -} - -#art { - & 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 { - & a { - display: flex; - width: calc(var(--post) - var(--view)); - flex-direction: column; - } - } -} -@media screen and (max-width: 916px) { - #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 daaf215..0000000 --- a/_src/assets/css/default/home.css +++ /dev/null @@ -1,89 +0,0 @@ -@keyframes jump { - 0% { - transform: translateY(0); - } - - 100% { - transform: translateY(-4px); - } -} -#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; - justify-content: center; - text-align: center; - width: 160px; - &:not(:hover, :focus) { - background: transparent; - } -} -#interests 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; -} diff --git a/_src/assets/css/default/motion.css b/_src/assets/css/default/motion.css index 36c14c5..2bdde73 100644 --- a/_src/assets/css/default/motion.css +++ b/_src/assets/css/default/motion.css @@ -22,12 +22,12 @@ } /* Permalinks */ .header-anchor, - article pre { + main article pre { transition: none; } /* Images */ #gallery a:has(figure), - #blog article figure, + #blog main article figure, a img { transition: none; } @@ -41,8 +41,7 @@ } } /* Scrolling pride flag text */ - article#bio span[id], - footer span { + #bio span[id] { transition: none; animation: none; color: inherit; @@ -60,6 +59,9 @@ position: relative; } } + footer span { + width: 100%; + } #aromantic::before { background-image: url("/assets/img/flag/aromantic.svg"); } @@ -69,9 +71,6 @@ #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; @@ -80,7 +79,7 @@ #art div { transform: none; } - article > .postscript { + main article > .postscript { & p, p > img { transition: none; diff --git a/_src/assets/css/default/nav.css b/_src/assets/css/default/nav.css index d76c1dc..02893f7 100644 --- a/_src/assets/css/default/nav.css +++ b/_src/assets/css/default/nav.css @@ -10,53 +10,41 @@ position: fixed; scrollbar-width: none; width: var(--view); - & li *:is(a, button) { - align-items: center; - border-radius: var(--round); - border-style: solid; - border-width: 2px; - } & section { - border-radius: var(--round); - border-style: solid; - border-width: 2px; font-weight: bold; & h3 { - display: flex; font-size: 1.4rem; height: var(--pad-xl); - margin: var(--pad-s) auto 0 auto; + margin: var(--pad-s) auto 0; padding: 0; } } - & * svg, - li img { - align-self: center; - margin: 0 8px 0 8px; - width: 20px; - } & ul { - margin-top: 0; - margin: var(--pad-s); + margin: 0 var(--pad-s) var(--pad-s); padding: 0; - & li, - button { - align-items: center; + & li { margin-bottom: inherit; - padding: 0; + & 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%; } } } - & li *:is(a, button) { - display: flex; - font-size: 1.125rem; - font-weight: bold; - height: 36px; - line-height: var(--pad-xl); - width: 100%; - } } #default::before, body::after { @@ -71,17 +59,17 @@ body::after { z-index: -1; } #default::before { - -webkit-mask-position-x: -25px; - -webkit-mask-position-y: 90%; bottom: 0; left: 0; + mask-position-x: -25px; + mask-position-y: 90%; mask-size: 160%; } body::after { - -webkit-mask-position-x: 0; - -webkit-mask-position-y: bottom; content: none; height: 100vw; + mask-position-x: 0; + mask-position-y: bottom; mask-size: 100%; width: 100%; } @@ -107,22 +95,9 @@ body::after { border: 0; margin: 0; padding: 0; + z-index: 1; } -#default { - border: 0; - border-right-style: solid; - border-right-width: 2px; +#floating, +#sidebar { + z-index: 2; } -/* hack to make the header look seamless with the nav when using citrus theme */ -body { - position: relative; - z-index: -3; - & main { - position: inherit; - z-index: -2; - } - & #sidebar { - position: inherit; - z-index: -1; - } -} \ 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 fee204b..0f29ba5 100644 --- a/_src/assets/css/default/theme-dark.css +++ b/_src/assets/css/default/theme-dark.css @@ -1,10 +1,10 @@ @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); & #default { @@ -40,14 +40,11 @@ } & .addendum { background-color: var(--secondary-400); - box-shadow: inset 0 0 0 2px var(--secondary); - border-image-source: linear-gradient( - 45deg, - var(--secondary), - var(--secondary-600), - var(--secondary) - ); + border-color: var(--secondary); } + & ul li::before { + background-color: var(--secondary-light-300); + } } #posts { & p:not(:last-child) { @@ -97,18 +94,11 @@ background-color: var(--secondary); } } - 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); } diff --git a/_src/assets/css/default/theme-light.css b/_src/assets/css/default/theme-light.css index af10f64..e08b605 100644 --- a/_src/assets/css/default/theme-light.css +++ b/_src/assets/css/default/theme-light.css @@ -1,10 +1,10 @@ @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); & #default { @@ -40,13 +40,10 @@ } & .addendum { background-color: var(--primary-400); - box-shadow: inset 0 0 0 2px var(--primary); - border-image-source: linear-gradient( - 45deg, - var(--primary), - var(--primary-600), - var(--primary) - ); + border-color: var(--primary); + } + & ul:not([role]) li::before { + background-color: var(--primary-dark-300); } } #posts { @@ -97,18 +94,11 @@ background-color: var(--primary-dark-500); } } - 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); } diff --git a/_src/assets/css/default/variables.css b/_src/assets/css/default/variables.css index 2ad0f01..4ae11ae 100644 --- a/_src/assets/css/default/variables.css +++ b/_src/assets/css/default/variables.css @@ -111,6 +111,15 @@ 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"); 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/theme.js b/_src/assets/js/theme.js index d9178e7..eb7e1d2 100644 --- a/_src/assets/js/theme.js +++ b/_src/assets/js/theme.js @@ -4,7 +4,7 @@ const themeStylesheet = document.getElementById("themed"); const themes = [ { name: "system", file: "default/system.css" }, - { name: "citrus", file: "citrus/default.css" }, + { name: "citrus", file: "citrus/citrus.css" }, ]; let currentTheme = localStorage.getItem("theme") || themes[0].name; diff --git a/_src/pages/gallery.html b/_src/pages/gallery.html index 7f1ed54..d22590d 100644 --- a/_src/pages/gallery.html +++ b/_src/pages/gallery.html @@ -10,7 +10,9 @@ order: 4
{%if artwork.data.images[0]%} + +
{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}

(+{{artwork.data.images.size| minus: 1}})

diff --git a/eleventy.config.js b/eleventy.config.js index 961c549..a69cffa 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -53,7 +53,7 @@ eleventyConfig.setLibrary("md", markdownLibrary); eleventyConfig.addWatchTarget(assets); eleventyConfig.addFilter("sortByFirstDate", items => items.sort((a, b) => new Date(b.data.images[0].date) - new Date(a.data.images[0].date))); eleventyConfig.addFilter("link", function(text, url) { - return `${text}`; + return `${text}`; }); eleventyConfig.addFilter("ISO", (dateObj) => { return format(dateObj, ("yyyy-LL-dd"));