From bf1f38223402d2c8317d5f18cf26cb86e29e6efb Mon Sep 17 00:00:00 2001 From: Niko Date: Wed, 2 Sep 2026 19:57:31 -0700 Subject: [PATCH] tiny styling changes --- src/_includes/layouts/pages/blog.njk | 15 +-- src/_includes/layouts/pages/home.njk | 20 +--- src/_includes/layouts/pages/post.njk | 22 ++--- src/_includes/layouts/settings.njk | 4 + src/_includes/layouts/ticker.njk | 16 ++++ src/blog/posts/test.md | 2 +- src/script.js | 14 +-- src/styles.css | 138 +++++++++++++++++++-------- 8 files changed, 139 insertions(+), 92 deletions(-) create mode 100644 src/_includes/layouts/ticker.njk diff --git a/src/_includes/layouts/pages/blog.njk b/src/_includes/layouts/pages/blog.njk index 659f28b..a16765c 100644 --- a/src/_includes/layouts/pages/blog.njk +++ b/src/_includes/layouts/pages/blog.njk @@ -24,18 +24,7 @@ - + {% include "layouts/ticker.njk" %} copied to clipboard! @@ -71,7 +60,7 @@ {{ post.data.title }}
{{ post.data.categories }} - :: {{ post.data.created }} + :: {{ post.data.date }}
{%- endfor -%}
diff --git a/src/_includes/layouts/pages/home.njk b/src/_includes/layouts/pages/home.njk index 878c4b8..2f3aa44 100644 --- a/src/_includes/layouts/pages/home.njk +++ b/src/_includes/layouts/pages/home.njk @@ -25,18 +25,7 @@ - + {% include "layouts/ticker.njk" %} copied to clipboard! @@ -45,7 +34,7 @@
- / <- you are here + / <- you are here
@@ -95,6 +84,7 @@
{{steamUser}} + (steam)
diff --git a/src/_includes/layouts/pages/post.njk b/src/_includes/layouts/pages/post.njk index 4b3df1d..4181a2e 100644 --- a/src/_includes/layouts/pages/post.njk +++ b/src/_includes/layouts/pages/post.njk @@ -25,18 +25,7 @@ - + {% include "layouts/ticker.njk" %} copied to clipboard! @@ -69,8 +58,11 @@ gallery -
{% include "layouts/settings.njk" %}
- {{ content | safe }} +
{% include "layouts/settings.njk" %} +
+
+ {{ content | safe }} +
@@ -85,7 +77,7 @@
- {{ created }} + :: {{ date }}
diff --git a/src/_includes/layouts/settings.njk b/src/_includes/layouts/settings.njk index db10748..bbd25dd 100644 --- a/src/_includes/layouts/settings.njk +++ b/src/_includes/layouts/settings.njk @@ -62,6 +62,10 @@ disable animations +
diff --git a/src/_includes/layouts/ticker.njk b/src/_includes/layouts/ticker.njk new file mode 100644 index 0000000..6edbab0 --- /dev/null +++ b/src/_includes/layouts/ticker.njk @@ -0,0 +1,16 @@ + diff --git a/src/blog/posts/test.md b/src/blog/posts/test.md index 390a540..ab8cdec 100644 --- a/src/blog/posts/test.md +++ b/src/blog/posts/test.md @@ -5,7 +5,7 @@ description: "Hi" categories: [ "test", "meow"] tags: post author: "Niko" -created: "2026-05-19T04:51:10" +date: "2026-05-19T04:51:10Z" layout: "layouts/pages/post.njk" permalink: "blog/post/test.html" --- diff --git a/src/script.js b/src/script.js index b2cf996..d436a0c 100644 --- a/src/script.js +++ b/src/script.js @@ -12,8 +12,8 @@ document.addEventListener("DOMContentLoaded", function () { const themeInputs = document.querySelectorAll('input[name="theme-setting"]'); const colorInputs = document.querySelectorAll('input[name="color-setting"]'); const disableBgCheckbox = document.getElementById("disable-bg"); - const disableAnimationsCheckbox = - document.getElementById("disable-animations"); + const disableAnimationsCheckbox = document.getElementById("disable-animations"); + const disableTickerCheckbox = document.getElementById("disable-ticker"); // load saved settings loadSettings(); @@ -50,10 +50,8 @@ document.addEventListener("DOMContentLoaded", function () { // save toggle states localStorage.setItem("disable-bg", disableBgCheckbox.checked); - localStorage.setItem( - "disable-animations", - disableAnimationsCheckbox.checked, - ); + localStorage.setItem("disable-animations", disableAnimationsCheckbox.checked,); + localStorage.setItem("disable-ticker", disableTickerCheckbox.checked); } // settings loading function @@ -85,5 +83,9 @@ document.addEventListener("DOMContentLoaded", function () { if (localStorage.getItem("disable-animations") === "true") { disableAnimationsCheckbox.checked = true; } + + if (localStorage.getItem("disable-ticker") === "true") { + disableTickerCheckbox.checked = true; + } } }); diff --git a/src/styles.css b/src/styles.css index da9f788..543cdf7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -113,39 +113,38 @@ bg { } &:has(#disable-bg:checked) { - & body { - background: var(--background); - & bg { + body { + background: var(--background); + } + bg { display: none!important; } - - } - } &:has(#disable-animations:checked) { - & body { - animation: unset!important } - - & *,& :after { - animation: unset!important; - transition: none!important } - - & .navbar { - & .important:after { - outline-color: color-mix(in srgb, var(--accent) 60%, transparent) } - - & details.settings-area { - &: :details-content { - transition:unset!important } - - } - - } - - & ticker-container { - animation: 150s linear infinite ticker!important } + *, :after { + animation: unset!important; + transition: none!important + } + ticker-container { + animation: 90s linear infinite ticker!important + } +} + +@media (prefers-reduced-motion) { + *, :after { + animation: unset!important; + transition: none!important + } + ticker-container { + opacity: 0; + } +} +&:has(#disable-ticker:checked) { + ticker-container { + opacity: 0 + } } @keyframes bg-move { @@ -185,6 +184,18 @@ bg-gradient { color: var(--accent); cursor: url("./assets/cursors/select.png"), pointer; } +.link:hover { + background: rgba(0,0,0,0.25); + margin: 0 3px; + padding: 0 5px 5px 2px; + border-radius: 10px; + transition: 0.3s; + font-weight: 900px; +} +.link:hover::before { + content: '> '; + opacity: 0.6; +} .tab button { background-color: inherit; @@ -193,7 +204,7 @@ bg-gradient { outline: none; cursor: pointer; padding: 8px; - transition: 0.3s; + transition: 0.5s; border: 2px solid var(--accent); border-radius: 12px 12px 0 0; background: linear-gradient(rgba(255,255,255,0.3) 3%, rgba(130, 140, 230, .5) 12%, transparent 90%), repeating-linear-gradient(-65deg, var(--background) 5px, var(--background) 20px, 10px, transparent 25px); @@ -246,7 +257,7 @@ bg-gradient { position: relative; display: inline-block; font-size: 14px; - cursor: url("./assets/cursors/select.png"), select; + cursor: url("./assets/cursors/normal-select.png"), auto; } .tab button:hover { border-radius: 8px 8px 0 0; @@ -395,10 +406,11 @@ code { ul { display: flex; flex-direction: column; - margin-top: 5px + } li { margin-left: -20px; + font-size: 14px; } .post-info { @@ -432,8 +444,12 @@ li { } blockquote p::before { - content: "> "; - opacity: 0.6; + content: "\201C"; + opacity: 0.8; + margin-left: -30px; +} +blockquote p::after { + content: "\201D" } .tag { @@ -459,16 +475,49 @@ blockquote p::before { padding: 15px; box-shadow: inset 0px 4px 12px 2px var(--shadow); background: var(--crust); - background: linear-gradient(rgba(255,255,255,0.3) 2%, rgba(130, 140, 230, .7) 15%, var(--crust) 60%), repeating-linear-gradient(65deg, var(--background) 15px, var(--background) 20px, 10px, transparent 25px); + background: linear-gradient(rgba(255,255,255,0.3) 2%, rgba(130, 140, 230, .3) 10%, var(--crust) 15%), repeating-linear-gradient(65deg, var(--background) 15px, var(--background) 20px, 10px, transparent 25px); position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - width: 900px; + width: 1000px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); - max-height: 800px; + height: 1000px; +} + +@media (max-height: 1200px) { + .post { + height: 800px; + } + + .post .info { + height: 720px; + overflow: auto; + } + +} + + +@media (max-height: 1080px) { + .post { + height: 600px; + } + .post .info { + overflow: auto; + height: 520px; + } +} + +@media (max-height: 900px) { + .post { + height: 500px; + } + .post .info { + overflow: auto; + height: 420px; + } } .post .tab { @@ -631,7 +680,7 @@ body { left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - width: 900px; + width: 1000px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } @@ -650,16 +699,21 @@ body { .post .info { text-align: left; - width: 60%; + width: 65%; display: inline-block; - padding-top: 10px; float: left; - display: inline-block; - height: 760px; + max-height: 890px; overflow: auto; - padding-right: 13px; + padding: 8px; scrollbar-color: var(--accent) transparent; scrollbar-width: thin; + padding-bottom: 45px; + -webkit-mask-image: linear-gradient(to bottom, var(--crust) 93%, transparent); +} + +.post .info p { + font-size: 14px; + line-height: 16px; } .main .info .contacts { @@ -690,7 +744,7 @@ body { outline-color: var(--accent); border-radius: 10px; padding: 10px; - width: 36%; + width: 30%; display: inline-block; float: right; } -- 2.51.2