denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styled new blog post gallery entries some more; added dates; changed color-highlight-alt variations

Browse Source
This commit is contained in:
denizk0461
2026-03-31 16:47:02 +02:00
parent 78f05fd5f3
commit d3e1aeb33d
3 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/lib/lists/blog-gallery.svelte
View File

@@ -16,6 +16,7 @@
</div>
<div class="entry-text-container">
<p class="entry-title">{post.post.title}</p>
<p class="entry-date">::&nbsp;{post.post.date}&nbsp;::</p>
<p class="entry-description">{post.post.description}</p>
<div class="entry-tag-container">
{#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;
}

7
src/routes/+layout.svelte
View File

@@ -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;

14
src/routes/blog/+page.svelte
View File

@@ -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;
}
}
</style>