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