diff --git a/src/lib/lists/blog-gallery.svelte b/src/lib/lists/blog-gallery.svelte index 86d71c0..9077dbb 100644 --- a/src/lib/lists/blog-gallery.svelte +++ b/src/lib/lists/blog-gallery.svelte @@ -16,6 +16,7 @@

{post.post.title}

+

:: {post.post.date} ::

{post.post.description}

{#each post.post.tags as tag} @@ -39,9 +40,11 @@ padding: 8px; transition: background-color var(--duration-animation) var(--anim-curve), border-color var(--duration-animation) var(--anim-curve), - backdrop-filter var(--duration-blur) var(--anim-curve); + backdrop-filter var(--duration-blur) var(--anim-curve), + border-radius var(--duration-animation) var(--anim-curve); border: var(--border-dash-size) var(--border-style) transparent; text-decoration: none; + border-radius: 24px; } .entry:hover { @@ -54,12 +57,21 @@ scale: 1.2; } + .entry:hover .entry-banner-container { + /* border-radius: 24px 24px 0 0; */ + border-top-left-radius: 16px; + border-top-right-radius: 16px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .entry-banner-container { width: 100%; height: 160px; overflow: hidden; display: flex; justify-content: center; + transition: border-radius var(--duration-animation) var(--anim-curve); } .entry-banner { @@ -71,12 +83,8 @@ .entry-text-container { display: flex; flex-direction: column; - margin-top: 16px; - gap: 8px; - } - - .entry-text-container * { - margin: 0; + margin: 16px 2px 2px; + /* gap: 8px; */ } .entry-title { @@ -84,17 +92,27 @@ font-weight: 700; font-size: 1.2rem; line-height: 1.4rem; + margin: 0; + } + + .entry-date { + font-size: 0.8rem; + line-height: 0.8rem; + font-weight: 600; + margin: 4px 0 0 0; + font-family: var(--font-mono); + color: var(--color-text-highlight-alt); } .entry-description { font-size: 1.0rem; line-height: 1.2rem; + margin: 4px 0 8px; } .entry-tag-container { display: flex; gap: 4px; - margin-top: 4px; flex-direction: row; flex-wrap: wrap; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8071406..81e1682 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -97,6 +97,10 @@ --color-text-secondary: #b0b0b0; --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%); --color-text-dark: #1e1e1e; + + --color-text-highlight: color-mix(in srgb, var(--color-highlight) 70%, var(--color-text)); + --color-text-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 70%, var(--color-text)); + --color-highlight: #51B86B; --color-highlight-dark: color-mix(in srgb, var(--color-highlight) 60%, black); --color-highlight-alt: #d03b4a; @@ -105,8 +109,9 @@ --color-background: #111111; --color-background-highlight: color-mix(in srgb, var(--color-highlight) 20%, transparent); - --color-background-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 20%, transparent); + --color-background-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 30%, transparent); --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent); + --color-background-highlight-hover-alt: color-mix(in srgb, var(--color-highlight-alt) 66%, transparent); --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent); --color-waters: #242424; diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index c1bfbe3..a2cdc7a 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -50,7 +50,7 @@ .tag-filter-container { display: flex; gap: 8px 12px; - margin: 0 10px 8px; + margin: 12px 10px 8px; flex-wrap: wrap; } @@ -69,6 +69,16 @@ } .tag-filter:hover { - background-color: var(--color-highlight-alt); + background-color: var(--color-background-highlight-hover-alt); + } + + @media screen and (max-width: 600px) { + .tag-filter-container { + gap: 8px; + } + + .tag-filter { + font-size: 0.8rem; + } } \ No newline at end of file