diff --git a/_src/_includes/base.njk b/_src/_includes/base.njk index 267dbeb..d2152d5 100644 --- a/_src/_includes/base.njk +++ b/_src/_includes/base.njk @@ -2,9 +2,12 @@ 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" --- + {% set currentUrl %}{{ page.url }}{% endset %} + {% set sortedPages = collections.pages|sort(attribute='data.order') %} {% if page.url.split('/') %} @@ -21,120 +24,81 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2" <link rel="stylesheet" href="/assets/css/default/default.css"> <link rel="preload" href="/assets/css/citrus/default.css" as="style"> <link rel="stylesheet" href="/assets/css/default/system.css" id="themed"> - {% if page.url === "/home/" %} + {% if currentUrl === "/home/" %} <link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css"> {% endif %} {% set availableStyles = ['home', 'blog', 'gallery'] %} - {% if page.url %} + {% if currentUrl %} {% if availableStyles.indexOf(page.url.split('/')[1]|slugify) !== -1 %} <link rel="stylesheet" href="/assets/css/default/{{ page.url.split('/')[1]|slugify }}.css"> {% endif %} {% endif %} </head> <body id="{{ page.url.split('/')[1]|slugify }}"> - <nav> - <details open=""> - <summary> - Navigation - </summary> - {% set currentUrl %}{{ page.url }}{% endset %} - {% set sortedPages = collections.pages|sort(attribute='data.order') %} + <dialog id="signal"> + <article> + {% for article in collections.articles %} + {% if article.fileSlug == 'what' %} + {{ article.content | safe }} + {% endif %} + {% endfor %} + </article> + </dialog> + <section> + <nav class="navbar" id="floating"> <ul role="list"> <li> - <a href="../"> + <button popovertarget="mobile" aria-label="Toggle menu"> <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> - <path d="{{ back }}"></path> + <path d="{{menu}}"></path> </svg> - Back - </a> + </button> </li> - {% for page in sortedPages %} <li> - <a href="{{ page.url }}" {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} aria-current="page" {% endif %}> - <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> - <path d="{{ page.data.icon }}"></path> - </svg> - {{ page.data.title }} - </a> - </li> - {% endfor %} + <button id="theme-toggle" aria-label="Toggle theme"> + <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="{{ theme }}"> + </svg> + </button> </li> </ul> - </details> - <details open=""> - <summary> - Options - </summary> + </nav> + </section> + <section id="mobile" popover=""> + <nav class="navbar"> + {% include "nav.njk" %} <ul role="list"> <li> - <button id="theme-toggle"> + <button id="theme-toggle" aria-label="Toggle theme"> <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="{{ theme }}"> </svg> Toggle theme </button> </li> - </li> </ul> - <script src="/assets/js/theme.js"></script> - </details> - <details open=""> - <summary> - Outgoing - </summary> - <ul role="list"> - {% for key, items in outgoing %} - {% for item in items %} - {% if key != "signal" %} - <li> - <a href="{{ item.src }}"> - <img src="/assets/img/icon/{{ item.icon }}" alt="" aria-hidden="true">{{ key | capitalize }} - </a> - </li> - {% endif %} - {% endfor %} - {% if key == "signal" %} - <li> - <button command="show-modal" commandfor="{{ items[0].id }}"> - <img src="/assets/img/icon/{{ items[0].icon }}" alt="" aria-hidden="true">{{ key | capitalize }} - </button> - </li> - {% endif %} - {% endfor %} - </ul> - <dialog id="signal"> - <article> - {% for article in collections.articles %} - {% if article.fileSlug == 'what' %} - {{ article.content | safe }} - {% endif %} - {% endfor %} - </article> - </dialog> - </details> - <script src="/assets/js/what.js" type="module"></script> - <script src="/assets/js/details-save.js"></script> + </nav> + </section> + <header> + <h1> + {% for page in sortedPages %} + {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} + <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="{{ page.data.icon }}"></path> + </svg> + {% endif %} + {% endfor %} + {{ page.url.split('/')[1]|slugify|capitalize }} + </h1> + </header> + <main> + {{ content | safe }} + </main> + <footer> + <span id="message" aria-label="Random footer message">made with love</span> + <script src="/assets/js/footer.js"></script> + </footer> + <script src="/assets/js/what.js" type="module"></script> + <script src="/assets/js/theme.js"></script> </body> </html> -</nav> -<header> - <h1> - {% for page in sortedPages %} - {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} - <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> - <path d="{{ page.data.icon }}"></path> - </svg> - {% endif %} - {% endfor %} - {{ page.url.split('/')[1]|slugify|capitalize }} - </h1> -</header> -<main> - {{ content | safe }} -</main> -<footer> - <span id="message" aria-label="Random footer message">made with love</span> - <script src="/assets/js/footer.js"></script> -</footer> -</body> -</html> diff --git a/_src/_includes/nav-main.njk b/_src/_includes/nav-main.njk new file mode 100644 index 0000000..f1253c0 --- /dev/null +++ b/_src/_includes/nav-main.njk @@ -0,0 +1,24 @@ +<section> +<h3>Pages</h3> +<ul role="list"> + <li> + <a href="../"> + <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="{{ back }}"></path> + </svg> + Go back + </a> + </li> + {% for page in sortedPages %} + <li> + <a href="{{ page.url }}" {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} aria-current="page" {% endif %}> + <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="{{ page.data.icon }}"></path> + </svg> + {{ page.fileSlug | capitalize }} + </a> + </li> + {% endfor %} + </li> +</ul> +</section> \ No newline at end of file diff --git a/_src/_includes/nav-outgoing.njk b/_src/_includes/nav-outgoing.njk new file mode 100644 index 0000000..7b18a69 --- /dev/null +++ b/_src/_includes/nav-outgoing.njk @@ -0,0 +1,23 @@ +<section> +<h3>Outgoing</h3> +<ul role="list"> + {% for key, items in outgoing %} + {% for item in items %} + {% if key != "signal" %} + <li> + <a href="{{ item.src }}"> + <img src="/assets/img/icon/{{ item.icon }}" alt="" aria-hidden="true">{{ key | capitalize }} + </a> + </li> + {% endif %} + {% endfor %} + {% if key == "signal" %} + <li> + <button command="show-modal" commandfor="{{ items[0].id }}"> + <img src="/assets/img/icon/{{ items[0].icon }}" alt="" aria-hidden="true">{{ key | capitalize }} + </button> + </li> + {% endif %} + {% endfor %} +</ul> +</section> \ No newline at end of file diff --git a/_src/_includes/nav.njk b/_src/_includes/nav.njk new file mode 100644 index 0000000..16aa4ad --- /dev/null +++ b/_src/_includes/nav.njk @@ -0,0 +1,2 @@ +{% include "nav-main.njk" %} +{% include "nav-outgoing.njk" %} \ No newline at end of file diff --git a/_src/assets/css/citrus/default.css b/_src/assets/css/citrus/default.css index 13fb42f..f29ca01 100644 --- a/_src/assets/css/citrus/default.css +++ b/_src/assets/css/citrus/default.css @@ -1,10 +1,12 @@ +@import url("./media.css"); @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, +:is(a, button):not(span *, .postscript *, body nav *), +.link, #posts a { color: var(--citrus-dark); transition: background-color var(--trans); @@ -34,7 +36,8 @@ ul:not([role]) li::before { background-color: var(--citrus-dark-extra); } article { - background: var(--noise), + background: + var(--noise), linear-gradient( var(--citrus-light) 70%, color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100% @@ -50,30 +53,7 @@ article { background-color: var(--citrus-dark); color: var(--citrus-primary); } - &:not(pre,code,a) { + &: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/media.css b/_src/assets/css/citrus/media.css new file mode 100644 index 0000000..8ba1964 --- /dev/null +++ b/_src/assets/css/citrus/media.css @@ -0,0 +1,42 @@ +/* default.css */ +@media screen and (min-width: 920px) { + header { + width: var(--view); + border-right-width: 4px; + border-right-style: solid; + border-bottom-width: 4px; + border-bottom-style: solid; + border-bottom-right-radius: 100px; + margin-left: calc(var(--view) - 4px); + position: relative; + padding: calc(var(--pad-m) - 2px) var(--pad-sm); + z-index: 2; + } +} + +/* nav.css */ +@media screen and (max-width: 920px) { + header { + margin: 0 !important; + padding: 0 !important; + border-right: 0 !important; + border-radius: 0 !important; + width: 100% !important; + background-attachment: none !important; + background-image: none !important; + background-size: none !important; + } + body::after { + content: none !important; + } +} + +/* gallery.css */ +@media screen and (max-width: 450px) { + #artworks & article { + &::before { + width: calc(100% + var(--pad-l) * 2) !important; + margin: -3rem 0 0 -16px !important; + } + } +} diff --git a/_src/assets/css/citrus/nav.css b/_src/assets/css/citrus/nav.css index 1f274bf..f3fd51f 100644 --- a/_src/assets/css/citrus/nav.css +++ b/_src/assets/css/citrus/nav.css @@ -1,14 +1,18 @@ -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); @@ -24,34 +28,28 @@ body > nav { 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, -header { +#mobile > nav, +header, +#floating { 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, #mobile > nav { + 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; } +#mobile > nav { + height: max-content; + border-bottom-right-radius: var(--pad-l); +} \ No newline at end of file diff --git a/_src/assets/css/default/default.css b/_src/assets/css/default/default.css index 3e2fbc2..05f8947 100644 --- a/_src/assets/css/default/default.css +++ b/_src/assets/css/default/default.css @@ -1,6 +1,7 @@ +@import url("./media.css"); @import url("./variables.css"); @import url("./nav.css"); -@import url("./motion.css"); + :root { --view: 18rem; @@ -197,6 +198,7 @@ article { mask-size: contain; mask-repeat: no-repeat; margin: 0 0 0 calc(var(--pad-xl) * -1); + z-index: 0; } } @@ -259,7 +261,7 @@ article a:not(.link *, a:has(img)) { padding: 0 var(--pad-sm); } -dialog button[commandfor] { +dialog button[commandfor="signal"] { width: max-content; padding: 0 var(--pad-sm); margin: 0 auto; @@ -314,38 +316,4 @@ dialog#signal { 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; - } -} +} \ No newline at end of file diff --git a/_src/assets/css/default/home.css b/_src/assets/css/default/home.css index 600666a..b90a534 100644 --- a/_src/assets/css/default/home.css +++ b/_src/assets/css/default/home.css @@ -143,18 +143,4 @@ article#interests { #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; - } - } -} +} \ No newline at end of file diff --git a/_src/assets/css/default/index.css b/_src/assets/css/default/index.css index 26e74dc..ea2cea1 100644 --- a/_src/assets/css/default/index.css +++ b/_src/assets/css/default/index.css @@ -27,7 +27,6 @@ justify-self: center; & a, img { - z-index: 1; display: inherit; flex-direction: inherit; } diff --git a/_src/assets/css/default/motion.css b/_src/assets/css/default/media.css similarity index 61% rename from _src/assets/css/default/motion.css rename to _src/assets/css/default/media.css index 3fd9e21..d5d90a6 100644 --- a/_src/assets/css/default/motion.css +++ b/_src/assets/css/default/media.css @@ -1,3 +1,77 @@ +/* default.css */ +@media screen and (max-width: 920px) { + body::after { + content: "" !important; + } + + footer { + width: 100% !important; + margin: 0 !important; + } + + header { + padding-left: 0 !important; + padding-top: var(--pad-m) !important; + text-align: center !important; + } + + main { + padding: var(--pad-l) !important; + } + + main > section { + flex-direction: column !important; + } + + main > section { + width: initial !important; + } + + article { + max-width: initial !important; + width: auto !important; + } + #mobile > nav { + display: flex !important; + } +} + +/* nav.css */ +@media screen and (min-width: 920px) { + li:has(> button[popovertarget="mobile"]) { + display: none !important; + } + #floating { + display: none; + } + #mobile { + display: flex; + } +} + +@media screen and (max-width: 920px) { + #floating { + position: sticky !important; + top: 0 !important; + } +} + +/* home.css */ +@media screen and (max-width: 920px) { + article#interests { + display: flex !important; + flex-direction: column !important; + + & ul { + justify-content: center !important; + } + + & li a { + padding: 0 !important; + } + } +} + @media (prefers-reduced-motion: no-preference) { /* Scrolling pride flag text */ article#bio span[id], diff --git a/_src/assets/css/default/nav.css b/_src/assets/css/default/nav.css index 3104750..10e81f1 100644 --- a/_src/assets/css/default/nav.css +++ b/_src/assets/css/default/nav.css @@ -1,43 +1,38 @@ -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 { + position: fixed; display: flex; + z-index: 2; flex-direction: column; overflow-x: hidden; padding: var(--pad-l); - position: fixed; width: var(--view); height: 100%; overflow-y: scroll; scrollbar-width: none; + gap: var(--pad-m); + + & li *:is(a, button) { + align-items: center; + border-style: solid; + border-width: 2px; + border-radius: var(--round); + } + + & section { + border-radius: var(--round); + font-weight: bold; + border-width: 2px; + border-style: solid; + + & h3 { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + height: var(--pad-xl); + font-size: 1.4rem; + } + } & * svg, li img { margin: 0 8px 0 8px; @@ -45,10 +40,6 @@ body > nav { align-self: center; } - & details { - display: flex; - } - & ul { margin: var(--pad-sm); padding: 0; @@ -65,11 +56,7 @@ body > nav { } } - & details { - font-size: 1.4rem; - } - - & li *:is(a ,button) { + & li *:is(a, button) { display: flex; font-size: 1.125rem; width: 100%; @@ -79,68 +66,57 @@ body > nav { } } -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; - } - } +#mobile > 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; } -@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; - } + +#mobile > nav::before { + bottom: 0; + left: 0; + mask-size: 160%; + -webkit-mask-position-x: -25px; + -webkit-mask-position-y: 90%; } -@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: none; + mask-size: 100%; + width: 100%; + height: 100vw; + -webkit-mask-position-x: 0; + -webkit-mask-position-y: bottom; +} - body::after { - content: ""; - } +button[popovertarget="mobile"] { + display: none; +} + +#floating { + width: fit-content; + height: fit-content; + border-bottom-style: solid; + border-right-style: solid; + border-bottom-width: 2px; + border-right-width: 2px; + border-bottom-right-radius: var(--pad-l); +} + +#mobile { + margin: 0; + padding: 0; + background: none; + border: 0; +} +#mobile > nav { + 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..09fc2ab 100644 --- a/_src/assets/css/default/theme-dark.css +++ b/_src/assets/css/default/theme-dark.css @@ -9,7 +9,7 @@ border-color: var(--secondary-300); background-color: var(--secondary-200); - & aside { + & #mobile { box-shadow: inset 0 0 0 2px var(--secondary-500); background-color: var(--secondary-300); } @@ -90,21 +90,15 @@ color: inherit; } - & > nav { - background-color: inherit; + & #mobile > nav, + #floating { + background-color: var(--secondary-100); border-color: var(--secondary); - & details { + & section { background-color: var(--secondary-100); - &:not([open]) { - color: var(--secondary); - } - } - - & details[open] { border-color: var(--secondary); background-color: var(--secondary-300); color: var(--secondary-light-300); - & a[aria-current] { color: var(--secondary-500); border-color: var(--secondary-light-500); @@ -122,7 +116,7 @@ } &::after, - & > nav::before { + & #mobile > nav::before { background-color: var(--secondary); } } diff --git a/_src/assets/css/default/theme-light.css b/_src/assets/css/default/theme-light.css index 69e93a9..803a920 100644 --- a/_src/assets/css/default/theme-light.css +++ b/_src/assets/css/default/theme-light.css @@ -9,7 +9,7 @@ border-color: var(--primary-300); background-color: var(--primary-200); - & aside { + & #mobile { box-shadow: inset 0 0 0 2px var(--primary-500); background-color: var(--primary-300); } @@ -90,21 +90,15 @@ color: inherit; } - & > nav { - background-color: inherit; + & #mobile > nav, + #floating { + background-color: var(--primary-100); border-color: var(--primary-dark-500); - & details { + & section { background-color: var(--primary-100); - &:not([open]) { - color: var(--primary-dark-500); - } - } - - & details[open] { border-color: var(--primary-dark-800); background-color: var(--primary-300); color: var(--primary-dark-300); - & a[aria-current] { color: var(--primary-500); border-color: var(--primary-dark-500); @@ -122,7 +116,7 @@ } &::after, - & > nav::before { + & #mobile > nav::before { background-color: var(--primary-dark-500); } } diff --git a/_src/assets/css/default/variables.css b/_src/assets/css/default/variables.css index 86a5f12..7dcd9b2 100644 --- a/_src/assets/css/default/variables.css +++ b/_src/assets/css/default/variables.css @@ -132,9 +132,4 @@ @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"); -} +} \ No newline at end of file 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/data/changelog/2026-03-23.md b/_src/data/changelog/2026-03-23.md new file mode 100644 index 0000000..d85b109 --- /dev/null +++ b/_src/data/changelog/2026-03-23.md @@ -0,0 +1,4 @@ +## {{page.fileSlug|readable}} + +- Changed sidebar + - Toggleable on mobile \ 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</a > </main> - <footer> <p> This site eats cookies for breakfast. diff --git a/_src/pages/blog.html b/_src/pages/blog.html index 4ad375f..4d6d628 100644 --- a/_src/pages/blog.html +++ b/_src/pages/blog.html @@ -1,5 +1,4 @@ --- -title: "Blog" order: 3 icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z" --- diff --git a/_src/pages/changelog.html b/_src/pages/changelog.html index e37120a..a696bb3 100644 --- a/_src/pages/changelog.html +++ b/_src/pages/changelog.html @@ -1,5 +1,4 @@ --- -title: "Changelog" order: 2 icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z" --- diff --git a/_src/pages/gallery.html b/_src/pages/gallery.html index f65441f..214584c 100644 --- a/_src/pages/gallery.html +++ b/_src/pages/gallery.html @@ -1,5 +1,4 @@ --- -title: "Gallery" order: 4 icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5" --- diff --git a/_src/pages/home.html b/_src/pages/home.html index 2de4b7e..32be857 100644 --- a/_src/pages/home.html +++ b/_src/pages/home.html @@ -1,5 +1,4 @@ --- -title: "Home" order: 1 icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z" --- diff --git a/_src/pages/pages.json b/_src/pages/pages.json index 3acf63d..e01c833 100644 --- a/_src/pages/pages.json +++ b/_src/pages/pages.json @@ -1,5 +1,5 @@ { "layout": "base", - "permalink": "/{{ title | slug }}/", + "permalink": "/{{ page.fileSlug }}/", "tags": "pages" } \ No newline at end of file