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