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;
|
||||
}
|
||||
|
||||
[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 */
|
||||
.main-header::after {
|
||||
|
|
@ -156,6 +137,59 @@ body {
|
|||
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 {
|
||||
filter: grayscale(50%);
|
||||
position:absolute;
|
||||
|
|
@ -2115,7 +2149,7 @@ button {
|
|||
|
||||
.playlist-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.playlist-image {
|
||||
|
|
@ -2149,7 +2183,7 @@ button {
|
|||
|
||||
.playlist-track-count {
|
||||
display: inline-block;
|
||||
background: var(--accent-yellow);
|
||||
background: var(--accent-grey);
|
||||
color: var(--accent-black);
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
|
|
@ -2308,7 +2342,7 @@ button {
|
|||
|
||||
.playlist-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.playlist-link {
|
||||
|
|
@ -2351,8 +2385,8 @@ button {
|
|||
|
||||
.playlist-track-count {
|
||||
display: inline-block;
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
background: var(--accent-grey);
|
||||
color: var(--bg-primary);
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -2372,7 +2406,7 @@ button {
|
|||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.playlist-card:hover .playlist-hover-overlay {
|
||||
|
|
@ -2382,22 +2416,22 @@ button {
|
|||
.playlist-view-btn {
|
||||
padding: 0.8rem 2rem;
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
color: var(--bg-primary);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
border: 2px solid var(--accent-grey);
|
||||
transform: skewX(-33deg);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
}
|
||||
|
||||
.playlist-view-btn:hover {
|
||||
transform: skewX(-33deg) scale(1.1);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--accent-yellow);
|
||||
background: var(--accent-yellow);
|
||||
color: var(--bg-primary);
|
||||
transition: all .3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -2458,7 +2492,7 @@ button {
|
|||
|
||||
.playlist-meta span {
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent-grey);
|
||||
color: var(--bg-primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -2484,7 +2518,7 @@ button {
|
|||
|
||||
.playlist-track-item:hover {
|
||||
transform: skewX(0deg) translate(-2px, -2px);
|
||||
box-shadow: 6px 6px 0 var(--accent-yellow);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.track-number {
|
||||
|
|
@ -2553,7 +2587,7 @@ button {
|
|||
}
|
||||
|
||||
.track-player {
|
||||
width: 150px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--accent-grey);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -2582,27 +2616,26 @@ button {
|
|||
}
|
||||
|
||||
.playlist-play-all {
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
border: 2px solid var(--accent-grey);
|
||||
padding: 1rem 3rem;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--accent-yellow) !important;
|
||||
border: 2px solid var(--accent-yellow);
|
||||
padding: .5rem 1.5rem;
|
||||
font-family: poppins,sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: .7rem;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform: skewX(-33deg);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
transition: all .3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
animation: glow 3s infinite alternate;
|
||||
}
|
||||
|
||||
.playlist-play-all:hover {
|
||||
transform: skewX(-33deg) scale(1.05);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-yellow);
|
||||
transform: scale(1.05);
|
||||
background: var(--accent-yellow);
|
||||
color: var(--bg-primary) !important;
|
||||
border-color: var(--accent-yellow);
|
||||
box-shadow: 8px 8px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
/* 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" }}
|
||||
<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>
|
||||
|
||||
<div class="playlists-grid">
|
||||
|
|
@ -27,7 +97,7 @@
|
|||
</div>
|
||||
|
||||
<div class="playlist-hover-overlay">
|
||||
<span class="playlist-view-btn">▶ View Playlist</span>
|
||||
<span class="playlist-view-btn">▶ Listen</span>
|
||||
</div>
|
||||
</a>
|
||||
</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" }}
|
||||
{{ $name := .Title }}
|
||||
{{ $description := .Params.playlist_description | default "" }}
|
||||
|
|
@ -5,6 +75,13 @@
|
|||
{{ $tracks := .Params.playlist_tracks | default slice }}
|
||||
{{ $created_at := .Params.playlist_created_at | default 0 }}
|
||||
|
||||
<style>
|
||||
|
||||
#bannerino {
|
||||
background-image:url('{{ $image }}');
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="section playlist-detail">
|
||||
<div class="playlist-header">
|
||||
<div class="playlist-header-content">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue