add playlist concept
This commit is contained in:
sakrecoer
parent
4df2e1fa37
commit
4f6779e968
3 changed files with 363 additions and 183 deletions
|
|
@ -121,25 +121,6 @@ body {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .main-header::before {
|
|
||||||
background:
|
|
||||||
/* Darker overlay for dark mode */
|
|
||||||
linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(0, 0, 0, 0.7) 0%,
|
|
||||||
rgba(0, 0, 0, 0.4) 40%,
|
|
||||||
rgba(0, 0, 0, 0.4) 60%,
|
|
||||||
rgba(0, 0, 0, 0.7) 100%
|
|
||||||
),
|
|
||||||
repeating-linear-gradient(
|
|
||||||
33deg,
|
|
||||||
transparent,
|
|
||||||
transparent 50px,
|
|
||||||
var(--accent-yellow) 50px,
|
|
||||||
var(--accent-yellow) 51px
|
|
||||||
);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Decorative '>' character */
|
/* Decorative '>' character */
|
||||||
.main-header::after {
|
.main-header::after {
|
||||||
|
|
@ -156,6 +137,59 @@ body {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
/* */
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.playlist-header::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
/* Dark overlay for readability */
|
||||||
|
linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(0, 0, 0, 0.5) 0%,
|
||||||
|
rgba(0, 0, 0, 0.25) 40%,
|
||||||
|
rgba(0, 0, 0, 0.25) 60%,
|
||||||
|
rgba(0, 0, 0, 0.5) 100%
|
||||||
|
),
|
||||||
|
/* Cyberpunk pattern */
|
||||||
|
repeating-linear-gradient(
|
||||||
|
33deg,
|
||||||
|
transparent,
|
||||||
|
transparent 50px,
|
||||||
|
var(--accent-yellow) 50px,
|
||||||
|
var(--accent-yellow) 51px
|
||||||
|
);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Decorative '>' character */
|
||||||
|
.playlist-header::after {
|
||||||
|
content: '>';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
right: 40px;
|
||||||
|
z-index: 1;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--accent-y);
|
||||||
|
opacity: 0.15;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#bannerino {
|
#bannerino {
|
||||||
filter: grayscale(50%);
|
filter: grayscale(50%);
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|
@ -2115,7 +2149,7 @@ button {
|
||||||
|
|
||||||
.playlist-card:hover {
|
.playlist-card:hover {
|
||||||
transform: skewX(0deg) translate(-4px, -4px);
|
transform: skewX(0deg) translate(-4px, -4px);
|
||||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-image {
|
.playlist-image {
|
||||||
|
|
@ -2149,7 +2183,7 @@ button {
|
||||||
|
|
||||||
.playlist-track-count {
|
.playlist-track-count {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--accent-yellow);
|
background: var(--accent-grey);
|
||||||
color: var(--accent-black);
|
color: var(--accent-black);
|
||||||
padding: 0.2rem 0.8rem;
|
padding: 0.2rem 0.8rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
|
|
@ -2308,7 +2342,7 @@ button {
|
||||||
|
|
||||||
.playlist-card:hover {
|
.playlist-card:hover {
|
||||||
transform: skewX(0deg) translate(-4px, -4px);
|
transform: skewX(0deg) translate(-4px, -4px);
|
||||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-link {
|
.playlist-link {
|
||||||
|
|
@ -2351,8 +2385,8 @@ button {
|
||||||
|
|
||||||
.playlist-track-count {
|
.playlist-track-count {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--accent-yellow);
|
background: var(--accent-grey);
|
||||||
color: var(--accent-black);
|
color: var(--bg-primary);
|
||||||
padding: 0.2rem 0.8rem;
|
padding: 0.2rem 0.8rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -2372,7 +2406,7 @@ button {
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-card:hover .playlist-hover-overlay {
|
.playlist-card:hover .playlist-hover-overlay {
|
||||||
|
|
@ -2382,22 +2416,22 @@ button {
|
||||||
.playlist-view-btn {
|
.playlist-view-btn {
|
||||||
padding: 0.8rem 2rem;
|
padding: 0.8rem 2rem;
|
||||||
background: var(--accent-yellow);
|
background: var(--accent-yellow);
|
||||||
color: var(--accent-black);
|
color: var(--bg-primary);
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border: 2px solid var(--accent-grey);
|
border-radius: 7px;
|
||||||
transform: skewX(-33deg);
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-view-btn:hover {
|
.playlist-view-btn:hover {
|
||||||
transform: skewX(-33deg) scale(1.1);
|
background: var(--accent-yellow);
|
||||||
background: var(--accent-black);
|
color: var(--bg-primary);
|
||||||
color: var(--accent-yellow);
|
transition: all .3s ease;
|
||||||
border-color: var(--accent-yellow);
|
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
|
|
@ -2458,7 +2492,7 @@ button {
|
||||||
|
|
||||||
.playlist-meta span {
|
.playlist-meta span {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: var(--accent-grey);
|
color: var(--bg-primary);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2484,7 +2518,7 @@ button {
|
||||||
|
|
||||||
.playlist-track-item:hover {
|
.playlist-track-item:hover {
|
||||||
transform: skewX(0deg) translate(-2px, -2px);
|
transform: skewX(0deg) translate(-2px, -2px);
|
||||||
box-shadow: 6px 6px 0 var(--accent-yellow);
|
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-number {
|
.track-number {
|
||||||
|
|
@ -2553,7 +2587,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-player {
|
.track-player {
|
||||||
width: 150px;
|
width: 100%;
|
||||||
border: 1px solid var(--accent-grey);
|
border: 1px solid var(--accent-grey);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -2582,27 +2616,26 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-play-all {
|
.playlist-play-all {
|
||||||
background: var(--accent-yellow);
|
background: var(--bg-primary);
|
||||||
color: var(--accent-black);
|
color: var(--accent-yellow) !important;
|
||||||
border: 2px solid var(--accent-grey);
|
border: 2px solid var(--accent-yellow);
|
||||||
padding: 1rem 3rem;
|
padding: .5rem 1.5rem;
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: poppins,sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1rem;
|
font-size: .7rem;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all .3s ease;
|
||||||
transform: skewX(-33deg);
|
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
animation: glow 3s infinite alternate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-play-all:hover {
|
.playlist-play-all:hover {
|
||||||
transform: skewX(-33deg) scale(1.05);
|
transform: scale(1.05);
|
||||||
background: var(--accent-black);
|
background: var(--accent-yellow);
|
||||||
color: var(--accent-yellow);
|
color: var(--bg-primary) !important;
|
||||||
border-color: var(--accent-yellow);
|
border-color: var(--accent-yellow);
|
||||||
box-shadow: 8px 8px 0 var(--accent-yellow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Back link */
|
/* Back link */
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,76 @@
|
||||||
|
{{ define "header" }}
|
||||||
|
{{ $displayName := "" }}
|
||||||
|
{{ $name := "" }}
|
||||||
|
{{ $picture := "" }}
|
||||||
|
{{ $banner := "" }}
|
||||||
|
{{ $about := "" }}
|
||||||
|
{{ $website := "" }}
|
||||||
|
{{ $nip05 := "" }}
|
||||||
|
{{ $lud16 := "" }}
|
||||||
|
|
||||||
|
{{ range hugo.Data.profile }}
|
||||||
|
{{ range . }}
|
||||||
|
{{ range .tags }}
|
||||||
|
{{ if eq (index . 0) "display_name" }}
|
||||||
|
{{ $displayName = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "name" }}
|
||||||
|
{{ $name = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "picture" }}
|
||||||
|
{{ $picture = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "banner" }}
|
||||||
|
{{ $banner = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "about" }}
|
||||||
|
{{ $about = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "website" }}
|
||||||
|
{{ $website = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "nip05" }}
|
||||||
|
{{ $nip05 = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "lud16" }}
|
||||||
|
{{ $lud16 = index . 1 }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- If display_name is empty, use name -->
|
||||||
|
{{ if not $displayName }}
|
||||||
|
{{ $displayName = $name }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Main Header -->
|
||||||
|
<header class="playlist-header" style="min-height: unset;max-height:25vh;">
|
||||||
|
<!-- Background image -->
|
||||||
|
{{ if $banner }}
|
||||||
|
<div id="bannerino" style="background-image:url('{{ $banner }}');"></div>
|
||||||
|
<!-- Dark overlay for readability -->
|
||||||
|
<div id="texture"></div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Decorative '>' -->
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="header-profile">
|
||||||
|
{{ if $picture }}
|
||||||
|
<a href="/" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<section class="section playlists-list">
|
<section class="section playlists-list">
|
||||||
<h1>Playlists</h1>
|
|
||||||
|
<h2>Playlists</h2>
|
||||||
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
|
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
|
||||||
|
|
||||||
<div class="playlists-grid">
|
<div class="playlists-grid">
|
||||||
|
|
@ -27,7 +97,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="playlist-hover-overlay">
|
<div class="playlist-hover-overlay">
|
||||||
<span class="playlist-view-btn">▶ View Playlist</span>
|
<span class="playlist-view-btn">▶ Listen</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,73 @@
|
||||||
|
{{ define "header" }}
|
||||||
|
|
||||||
|
{{ $displayName := "" }}
|
||||||
|
{{ $name := "" }}
|
||||||
|
{{ $picture := "" }}
|
||||||
|
{{ $banner := "" }}
|
||||||
|
{{ $about := "" }}
|
||||||
|
{{ $website := "" }}
|
||||||
|
{{ $nip05 := "" }}
|
||||||
|
{{ $lud16 := "" }}
|
||||||
|
|
||||||
|
{{ range hugo.Data.profile }}
|
||||||
|
{{ range . }}
|
||||||
|
{{ range .tags }}
|
||||||
|
{{ if eq (index . 0) "display_name" }}
|
||||||
|
{{ $displayName = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "name" }}
|
||||||
|
{{ $name = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "picture" }}
|
||||||
|
{{ $picture = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "banner" }}
|
||||||
|
{{ $banner = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "about" }}
|
||||||
|
{{ $about = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "website" }}
|
||||||
|
{{ $website = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "nip05" }}
|
||||||
|
{{ $nip05 = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "lud16" }}
|
||||||
|
{{ $lud16 = index . 1 }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- If display_name is empty, use name -->
|
||||||
|
{{ if not $displayName }}
|
||||||
|
{{ $displayName = $name }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Main Header -->
|
||||||
|
<header class="playlist-header" style="min-height: unset;max-height:25vh;">
|
||||||
|
<!-- Background image -->
|
||||||
|
{{ if $banner }}
|
||||||
|
<div id="bannerino"></div>
|
||||||
|
<!-- Dark overlay for readability -->
|
||||||
|
<div id="texture"></div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Decorative '>' -->
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="header-profile">
|
||||||
|
{{ if $picture }}
|
||||||
|
<a href="/playlists" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{ $name := .Title }}
|
{{ $name := .Title }}
|
||||||
{{ $description := .Params.playlist_description | default "" }}
|
{{ $description := .Params.playlist_description | default "" }}
|
||||||
|
|
@ -5,6 +75,13 @@
|
||||||
{{ $tracks := .Params.playlist_tracks | default slice }}
|
{{ $tracks := .Params.playlist_tracks | default slice }}
|
||||||
{{ $created_at := .Params.playlist_created_at | default 0 }}
|
{{ $created_at := .Params.playlist_created_at | default 0 }}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#bannerino {
|
||||||
|
background-image:url('{{ $image }}');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<section class="section playlist-detail">
|
<section class="section playlist-detail">
|
||||||
<div class="playlist-header">
|
<div class="playlist-header">
|
||||||
<div class="playlist-header-content">
|
<div class="playlist-header-content">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue