diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-22 12:42:56 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-22 12:42:56 +0200 |
| commit | 631547a75142326a7c71bdf123e1475217a5ad73 (patch) | |
| tree | f3cfef6b3c5b42bf626fc823ddcf63b8dcf4cdbb /assets/css/components/card.css | |
| parent | 77ccbe72fad5a4870185fff374f75471c16a9043 (diff) | |
| download | danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.tar.gz danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.zip | |
chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme)
Diffstat (limited to 'assets/css/components/card.css')
| -rw-r--r-- | assets/css/components/card.css | 254 |
1 files changed, 0 insertions, 254 deletions
diff --git a/assets/css/components/card.css b/assets/css/components/card.css deleted file mode 100644 index 3d218bc..0000000 --- a/assets/css/components/card.css +++ /dev/null @@ -1,254 +0,0 @@ -/* card.css */ -.post-card { - background: var(--surface); - border: 1px solid var(--border); - border-radius: 8px; - overflow: hidden; - transition: var(--transition); - display: flex; - gap: var(--gap-md); -} - -.post-card:hover { - border-color: var(--accent); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); -} - -.post-card-image { - width: 120px; - height: 100px; - flex-shrink: 0; - object-fit: cover; - background: linear-gradient(135deg, var(--border), var(--bg2)); - border-right: 1px solid var(--border); -} - -@media (min-width: 768px) { - .post-card-image { - width: 160px; - height: 120px; - } -} - -.post-card-body { - padding: var(--gap-md); - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; -} - -.post-type-badge { - display: inline-block; - font-family: var(--font-mono); - font-size: var(--fs-badge); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - padding: 0.35rem 0.7rem; - border-radius: 20px; - margin-bottom: 0.5rem; - width: fit-content; -} - -/* Type-specific badge colors */ -.post-type-badge.tech { - background: color-mix(in srgb, var(--type-tech) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--type-tech) 30%, transparent); - color: var(--type-tech); -} - -.post-type-badge.life { - background: color-mix(in srgb, var(--type-life) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--type-life) 30%, transparent); - color: var(--type-life); -} - -.post-type-badge.quote { - background: color-mix(in srgb, var(--type-quote) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--type-quote) 30%, transparent); - color: var(--type-quote); -} - -.post-type-badge.link { - background: color-mix(in srgb, var(--type-link) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--type-link) 30%, transparent); - color: var(--type-link); -} - -.post-type-badge.photo { - background: color-mix(in srgb, var(--type-photo) 15%, transparent); - border: 1px solid color-mix(in srgb, var(--type-photo) 30%, transparent); - color: var(--type-photo); -} - -.post-card-title { - font-family: var(--font-head); - font-size: 1.1rem; - font-weight: 700; - line-height: 1.3; - margin-bottom: 0.5rem; - color: var(--text); -} - -.post-card-title a { - color: var(--text); - text-decoration: none; -} - -.post-card-title a:hover { - color: var(--accent); -} - -.post-card-excerpt { - color: var(--text-dim); - font-size: 0.9rem; - line-height: 1.6; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - margin-bottom: 0.5rem; -} - -.post-card-meta { - display: flex; - gap: 1rem; - font-family: var(--font-mono); - font-size: 0.75rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} - -/* Featured card in grid */ -.post-card.featured { - grid-row: span 2; -} - -.post-card.featured .post-card-image { - width: 100%; - height: 180px; - border-right: none; - border-bottom: 1px solid var(--border); -} - -.post-card.featured .post-card-body { - padding: var(--gap-lg); -} - -@media (max-width: 768px) { - .post-card { - flex-direction: column; - } - - .post-card-image { - width: 100%; - height: 150px; - border-right: none; - border-bottom: 1px solid var(--border); - } - - .post-card.featured .post-card-image { - height: 150px; - } -} - -/* ─── Homepage article cards ─────────────────────────────── */ - -.articles-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 1.5rem; - margin-bottom: 2rem; -} - -@media (max-width: 768px) { - .articles-grid { grid-template-columns: 1fr; } -} - -.article-card { - background: var(--surface); - border: 1px solid var(--border); - border-radius: 0; - overflow: hidden; - display: flex; - flex-direction: column; - transition: var(--transition); -} - -.article-card:hover { - transform: translate(0, -4px); - box-shadow: 0 8px 30px var(--accent-glow); - border-color: var(--accent); -} - -/* Badge background set via inline style in template using var(--type-*) */ -.article-type { - font-family: var(--font-mono); - font-size: var(--fs-badge); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - padding: 0.4rem 1rem; - color: var(--bg); - width: fit-content; - border-radius: 3px; - margin: 1rem 1rem 0; -} - -.article-content { - padding: 1rem 1rem 1.5rem; - display: flex; - flex-direction: column; - flex: 1; -} - -.article-title { - font-family: var(--font-head); - font-size: 1.1rem; - font-weight: 700; - line-height: 1.3; - margin-bottom: 0.5rem; - letter-spacing: -0.025em; -} - -.article-title a { color: var(--text); text-decoration: none; } -.article-title a:hover { color: var(--accent); } - -.article-excerpt { - color: var(--text-dim); - font-size: 0.9rem; - line-height: 1.6; - flex: 1; - margin-bottom: 1rem; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.article-meta { - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 1rem; - border-top: 1px solid var(--border); - font-family: var(--font-mono); - font-size: 0.75rem; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.08em; - margin-top: auto; -} - -/* .article-read named distinctly from .article-link (used in 404.css) */ -.article-read { - color: var(--accent); - text-decoration: none; - font-weight: 600; - letter-spacing: 0.05em; - transition: color var(--duration-fast) ease; -} - -.article-read:hover { color: var(--accent2); } |
