From c0e7882278ab307efe5340ae2c41cf2a65b18733 Mon Sep 17 00:00:00 2001 From: ClovertaTheTrilobita Date: Sat, 11 Apr 2026 01:22:44 +0300 Subject: [PATCH] added nav button fixed invalid url in tags --- src/components/Posts/PostItem.astro | 37 ++++- src/layouts/BaseLayout.astro | 222 +++++++++++++++++++++++++++ src/layouts/MarkdownPostLayout.astro | 111 ++++++++++++++ src/pages/[lang]/tags/[tag].astro | 5 +- src/styles/global.css | 3 +- 5 files changed, 371 insertions(+), 7 deletions(-) diff --git a/src/components/Posts/PostItem.astro b/src/components/Posts/PostItem.astro index c566a77..bc20998 100644 --- a/src/components/Posts/PostItem.astro +++ b/src/components/Posts/PostItem.astro @@ -12,11 +12,10 @@ const data = Astro.props;
{data.date} - - πŸ’¬ + + πŸ’¬ +
@@ -122,10 +121,38 @@ const data = Astro.props; @media (max-width: 640px) { .post-link { - gap: 0.75rem; + display: grid; + grid-template-columns: 1fr 120px; + grid-template-areas: + "title title" + "desc image" + "meta image"; + column-gap: 0.75rem; + row-gap: 0.2rem; + align-items: start; + } + + .post-text { + display: contents; + min-height: auto; + } + + .post-title { + grid-area: title; + -webkit-line-clamp: 2; + } + + .post-description { + grid-area: desc; + } + + .post-meta-row { + grid-area: meta; + gap: 0.7rem; } .post-image { + grid-area: image; width: 120px; height: calc(120px * 9 / 16); } diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 7b46e96..fc236b7 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -22,6 +22,48 @@ const { {pageTitle} +
+ + + +
@@ -38,4 +80,184 @@ const { width: 100%; height: 100%; } + + .floating-actions { + position: fixed; + right: 1.25rem; + bottom: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.75rem; + z-index: 1000; + } + + #theme-toggle-fab, + #back-to-top { + width: 3rem; + height: 3rem; + border: #a7a7a7 2px solid; + border-radius: 999px; + background: rgba(255, 255, 255, 0.92); + color: #222; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(6px); + } + + #theme-toggle-fab { + position: relative; + } + + #theme-toggle-fab { + position: relative; + } + + .theme-toggle-icon { + width: 1.2rem; + height: 1.2rem; + fill: currentColor; + } + + .theme-toggle-icon .sun, + .theme-toggle-icon .moon { + transform-origin: center; + transition: + opacity 0.2s ease, + transform 0.2s ease; + } + + .theme-toggle-icon .sun { + opacity: 1; + transform: scale(1) rotate(0deg); + } + + .theme-toggle-icon .moon { + opacity: 0; + transform: scale(0.75) rotate(-20deg); + } + + :global(.dark) .theme-toggle-icon .sun { + opacity: 0; + transform: scale(0.75) rotate(20deg); + } + + :global(.dark) .theme-toggle-icon .moon { + opacity: 1; + transform: scale(1) rotate(0deg); + } + + #theme-toggle-fab, + #back-to-top { + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: + opacity 0.2s ease, + transform 0.2s ease, + visibility 0.2s ease; + } + + #theme-toggle-fab.show, + #back-to-top.show { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + #theme-toggle-fab.show:hover, + #back-to-top.show:hover { + transform: translateY(-2px); + } + + :global(.dark) #theme-toggle-fab, + :global(.dark) #back-to-top { + background: rgba(34, 34, 34, 0.92); + color: #f5f5f5; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32); + border: #515151 2px solid; + } + + @media (max-width: 640px) { + .floating-actions { + right: 1rem; + bottom: 1rem; + gap: 0.65rem; + } + + #theme-toggle-fab, + #back-to-top { + width: 2.75rem; + height: 2.75rem; + } + } + + diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro index 24f8562..fbe9d39 100644 --- a/src/layouts/MarkdownPostLayout.astro +++ b/src/layouts/MarkdownPostLayout.astro @@ -14,6 +14,27 @@ const t = getTranslations(lang); description={frontmatter.description} image={frontmatter.image?.url} > + + +
@@ -81,7 +102,97 @@ const t = getTranslations(lang); })} /> + +