Compare commits
No commits in common. "79430649e93d50eaf2fa117f84303a2128dede99" and "5d04593a473c29c59d6036ea5110adb7718b2855" have entirely different histories.
79430649e9
...
5d04593a47
4 changed files with 43 additions and 156 deletions
|
|
@ -85,7 +85,7 @@ body {
|
|||
padding: 4rem 2rem;
|
||||
position: relative;
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 4px solid var(--accent-grey);
|
||||
border-bottom: 4px solid var(--accent-yellow);
|
||||
transition: background-color 0.4s ease;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -151,37 +151,11 @@ body {
|
|||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 4rem;
|
||||
color: var(--accent-y);
|
||||
color: var(--accent-yellow);
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#bannerino {
|
||||
filter: grayscale(100%);
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
z-index:0;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
background-attachment:fixed;
|
||||
}
|
||||
|
||||
#texture {
|
||||
filter: invert(50%) sepia(100%) saturate(100%) hue-rotate(15deg);
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
z-index:1;
|
||||
background-image:url('/images/texture.png');
|
||||
background-size: 80%;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
/* Content sits above overlay */
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
|
|
@ -189,11 +163,8 @@ body {
|
|||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.header-content:hover {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
/* Profile layout */
|
||||
.header-profile {
|
||||
display: flex;
|
||||
|
|
@ -208,21 +179,16 @@ body {
|
|||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 0;
|
||||
border: 4px solid var(--accent-grey);
|
||||
border: 4px solid var(--accent-yellow);
|
||||
object-fit: cover;
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 100%;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.profile-picture:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.profile-picture:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 16px 16px 0 var(--accent-yellow);
|
||||
border: 4px solid var(--accent-yellow);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -240,7 +206,7 @@ body {
|
|||
font-size: 7rem;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1.1;
|
||||
color: var(--accent-grey);
|
||||
color: var(--accent-yellow);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow:
|
||||
|
|
@ -268,13 +234,13 @@ body {
|
|||
line-height: 1.5;
|
||||
|
||||
color: var(--text-secondary);
|
||||
border: 4px solid var(--accent-grey);
|
||||
border-left: 4px solid var(--accent-yellow);
|
||||
padding: 0.5rem 1rem 1.5rem 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 8px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-about {
|
||||
|
|
@ -373,13 +339,14 @@ body {
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #0000008a;
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 3px solid var(--accent-yellow);
|
||||
padding: 0.8rem 2rem;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
|
||||
box-shadow: 0 4px 20px #0000008a;
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 4px 20px var(--shadow-color);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.sticky-nav.visible {
|
||||
|
|
@ -505,7 +472,7 @@ body {
|
|||
left: 0;
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: var(--accent-grey);
|
||||
background: var(--accent-yellow);
|
||||
}
|
||||
|
||||
/* Blog Grid - KEEP SKEW ON CARDS */
|
||||
|
|
@ -527,14 +494,14 @@ body {
|
|||
|
||||
.blog-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
.blog-header-image {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-bottom: 3px solid var(--accent-grey);
|
||||
border-bottom: 3px solid var(--accent-yellow);
|
||||
filter: grayscale(100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
|
@ -586,7 +553,7 @@ button {
|
|||
.read-more-toggle {
|
||||
background: var(--accent-yellow);
|
||||
color: #0a0a0a !important; /* Force black */
|
||||
border: 2px solid var(--accent-yellow);
|
||||
border: 2px solid var(--accent-grey);
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
|
|
@ -599,7 +566,7 @@ button {
|
|||
|
||||
.read-more-toggle:hover {
|
||||
background: var(--accent-black);
|
||||
color: var(--bg-primary) !important; /* Yellow on hover */
|
||||
color: var(--accent-yellow) !important; /* Yellow on hover */
|
||||
border-color: var(--accent-yellow);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
|
@ -612,11 +579,10 @@ button {
|
|||
margin-top: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--accent-yellow);
|
||||
border-left: 4px solid var(--accent-yellow);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 10px 40px #ffd7005c
|
||||
}
|
||||
|
||||
.blog-full-content img {
|
||||
|
|
@ -644,13 +610,14 @@ button {
|
|||
|
||||
.music-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
.music-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--accent-grey);
|
||||
margin-bottom: 1rem;
|
||||
filter: grayscale(100%);
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -733,7 +700,7 @@ button {
|
|||
.lyrics-toggle {
|
||||
background: var(--accent-yellow);
|
||||
color: #0a0a0a !important; /* Force black */
|
||||
border: 2px solid var(--accent-yellow);
|
||||
border: 2px solid var(--accent-grey);
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
|
|
@ -743,7 +710,6 @@ button {
|
|||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 0.8rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lyrics-toggle:hover {
|
||||
|
|
@ -761,58 +727,13 @@ button {
|
|||
margin-top: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-left: 1px solid var(--accent-yellow);
|
||||
border-left: 4px solid var(--accent-yellow);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
/* Music lightbox lyrics - below controls */
|
||||
.music-lightbox-lyrics {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.2rem 1.5rem;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid var(--accent-yellow);
|
||||
border-radius: 0 8px 8px 0;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.8;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-yellow) rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 10px 40px #ffd7005c;
|
||||
}
|
||||
|
||||
.music-lightbox-lyrics::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.music-lightbox-lyrics::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.music-lightbox-lyrics::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-yellow);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.music-lightbox-lyrics p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.music-lightbox-lyrics br {
|
||||
display: block;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
/* Photo Grid - KEEP SKEW ON CARDS */
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
|
|
@ -832,7 +753,7 @@ button {
|
|||
|
||||
.photo-item:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
.photo-item img {
|
||||
|
|
@ -888,14 +809,14 @@ button {
|
|||
|
||||
.video-item:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
.video-item video {
|
||||
width: 100%;
|
||||
background: var(--accent-black);
|
||||
display: block;
|
||||
border-bottom: 3px solid var(--accent-grey);
|
||||
border-bottom: 3px solid var(--accent-yellow);
|
||||
}
|
||||
|
||||
.video-info {
|
||||
|
|
@ -1124,7 +1045,8 @@ button {
|
|||
.profile-about {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 4px solid var(--accent-grey);
|
||||
border-left: none;
|
||||
border-top: 4px solid var(--accent-yellow);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1199,7 +1121,7 @@ button {
|
|||
.photo-item:hover,
|
||||
.video-item:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
box-shadow: 6px 6px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
.custom-lightbox-prev,
|
||||
|
|
@ -1301,8 +1223,8 @@ button {
|
|||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
filter: drop-shadow(0px 0px 20px var(--accent-yellow));
|
||||
animation: glow 3s infinite alternate;
|
||||
filter: drop-shadow(0px 0px 10px var(--accent-yellow));
|
||||
animation: glow 1s infinite alternate;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
|
|
@ -1321,7 +1243,7 @@ button {
|
|||
filter: drop-shadow(0px 0px 5px var(--accent-yellow));
|
||||
}
|
||||
to {
|
||||
filter: drop-shadow(0px 0px 20px var(--accent-yellow));
|
||||
filter: drop-shadow(0px 0px 10px var(--accent-yellow));
|
||||
}
|
||||
}
|
||||
/* ============ CYBERPUNK FOOTER ============ */
|
||||
|
|
@ -1986,10 +1908,8 @@ button {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
background-image:url('/images/texture.png');
|
||||
background-size: 70%;
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -222,10 +222,9 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
|
|||
card.className = 'music-card clickable';
|
||||
card.dataset.playlistIndex = index;
|
||||
|
||||
// Click on card opens lightbox (except when clicking on info button)
|
||||
// Click on card opens lightbox
|
||||
card.addEventListener('click', function(e) {
|
||||
// Don't trigger if clicking on lyrics-toggle or inside lyrics
|
||||
if (e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) {
|
||||
if (e.target.closest('audio') || e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) {
|
||||
return;
|
||||
}
|
||||
const idx = parseInt(this.dataset.playlistIndex);
|
||||
|
|
@ -260,7 +259,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
|
|||
content = originalTrack.content || '';
|
||||
}
|
||||
|
||||
// Build the card HTML
|
||||
let cardHTML = `
|
||||
<div class="music-card-inner">
|
||||
<div class="music-image-wrapper">
|
||||
|
|
@ -300,10 +298,7 @@ function initMusicEventListeners() {
|
|||
});
|
||||
}
|
||||
|
||||
function handleLyricsToggle(e) {
|
||||
// Stop the click from bubbling up to the card
|
||||
e.stopPropagation();
|
||||
|
||||
function handleLyricsToggle() {
|
||||
const lyrics = this.nextElementSibling;
|
||||
if (lyrics && lyrics.classList.contains('lyrics')) {
|
||||
if (lyrics.style.display === 'none') {
|
||||
|
|
@ -592,8 +587,6 @@ function openMusicLightbox(index) {
|
|||
const progressFill = document.getElementById('musicLightboxProgressFill');
|
||||
const playBtn2 = document.getElementById('musicLightboxPlayBtn2');
|
||||
const playIcon2 = document.getElementById('musicPlayIcon2');
|
||||
// Get the lyrics element
|
||||
const lyricsDisplay = document.getElementById('musicLightboxLyrics');
|
||||
|
||||
// Set album art
|
||||
const artUrl = track.image || '/images/default-album.jpg';
|
||||
|
|
@ -605,38 +598,13 @@ function openMusicLightbox(index) {
|
|||
artist.textContent = track.artist || 'Unknown Artist';
|
||||
album.textContent = track.album || '';
|
||||
|
||||
// Set lyrics - find the original track data to get content
|
||||
let lyricsContent = '';
|
||||
// Find the original track data
|
||||
const originalTrack = window.allMusicData ? window.allMusicData.find(t => {
|
||||
let url = '';
|
||||
if (t.tags) {
|
||||
t.tags.forEach(tag => {
|
||||
if (tag[0] === 'url') url = tag[1];
|
||||
});
|
||||
}
|
||||
return url === track.url;
|
||||
}) : null;
|
||||
|
||||
if (originalTrack && originalTrack.content) {
|
||||
lyricsContent = originalTrack.content;
|
||||
}
|
||||
|
||||
// Display lyrics if they exist
|
||||
if (lyricsContent) {
|
||||
lyricsDisplay.innerHTML = lyricsContent.replace(/\n/g, '<br>');
|
||||
lyricsDisplay.style.display = 'block';
|
||||
} else {
|
||||
lyricsDisplay.style.display = 'none';
|
||||
}
|
||||
|
||||
// Reset progress
|
||||
progressFill.style.width = '0%';
|
||||
currentTimeDisplay.textContent = '0:00';
|
||||
durationDisplay.textContent = track.duration ? formatTime(track.duration) : '0:00';
|
||||
|
||||
// Set play buttons to play state
|
||||
playIcon2.textContent = '▶';
|
||||
playIcon2.textContent = '▶️';
|
||||
|
||||
// Create audio player
|
||||
musicPlayer = new Audio(track.url);
|
||||
|
|
|
|||
|
|
@ -61,10 +61,13 @@
|
|||
<img id="musicLightboxImage" src="" alt="Album art">
|
||||
</div>
|
||||
|
||||
<!-- In the info section -->
|
||||
<div class="music-lightbox-info">
|
||||
<h2 id="musicLightboxTitle">Title</h2>
|
||||
<p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
|
||||
<p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
|
||||
<!-- ... rest ... -->
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-progress">
|
||||
<span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
|
||||
|
|
@ -81,14 +84,10 @@
|
|||
</button>
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
|
||||
</div>
|
||||
|
||||
<!-- Lyrics moved here - below the controls -->
|
||||
<div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
|
||||
<script src="{{ $js.RelPermalink }}"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -56,9 +56,9 @@
|
|||
<header class="main-header" style="position:relative;overflow:hidden;">
|
||||
<!-- Background image -->
|
||||
{{ if $banner }}
|
||||
<div id="bannerino" style="background-image:url('{{ $banner }}');"></div>
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-image:url('{{ $banner }}');background-size:cover;background-position:center; background-attachment:fixed;"></div>
|
||||
<!-- Dark overlay for readability -->
|
||||
<div id="texture"></div>
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-image:url('/images/texture.png');pointer-events:none;"></div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<div class="header-content">
|
||||
<div class="header-profile">
|
||||
{{ if $picture }}
|
||||
<img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy">
|
||||
<img src="{{ $picture }}" alt="{{ $displayName }}" class="profile-picture" loading="lazy">
|
||||
{{ end }}
|
||||
<div class="header-text">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue