Prevent unnecessary scrolling on homepage

- Set body to height: 100vh with box-sizing: border-box - Keep glitch art at original size without forcing scroll - Padding accounts for fixed footer area - Content fits on screen without scrollbar when there's room
Fix links visibility with fixed bottom positioning
2026-02-28 10:02:51 -05:00 · 2026-02-28 09:59:30 -05:00 · 2026-02-28 09:54:41 -05:00 · 2026-02-28 09:52:27 -05:00 · 2026-02-28 09:31:48 -05:00
11 changed files with 53 additions and 409 deletions
--- a/blog/index.html
+++ b/blog/index.html
@ -237,15 +237,15 @@
 <p>
  dangrubb.net/blog
 </p>
-
+<div></div>
+<h1 style="color:white;text-align:center;">Status</h1>
 <p>
-  <a href="../index.html"><-- back to home</a>
+  dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.
 </p>
-
-<div id="blogsContainer" class="blogs-container">
-  <p style="color: #9d9aa4;">Loading blog posts...</p>
-</div>
-
+  <div><p></p></div>
+ <div class="img-container">
+        <img src="./src/img/CannotConnect.JPEG" alt="Cannot Connect" class="viewport-image">
+    </div>
 <!-- partial -->
  <script  src="./script.js"></script>

--- a/blog/posts.json
+++ b/blog/posts.json
@ -1,11 +0,0 @@
-[
-  {
-    "id": "01",
-    "title": "Status",
-    "date": "2026-02-28",
-    "excerpt": "dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.",
-    "content": "<p>dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.</p>",
-    "image": "/blog/src/img/CannotConnect.JPEG",
-    "slug": "status"
-  }
-]
--- a/blog/script.js
+++ b/blog/script.js
@ -1,53 +0,0 @@
-"use strict";
-
-// Load and display blog posts from JSON
-async function loadBlogPosts() {
-  try {
-    const response = await fetch('./posts.json');
-    const posts = await response.json();
-    
-    const blogsContainer = document.getElementById('blogsContainer');
-    
-    if (posts.length === 0) {
-      blogsContainer.innerHTML = '<div class="no-posts"><p>No blog posts yet.</p></div>';
-      return;
-    }
-    
-    // Create HTML for each post
-    const postsHTML = posts.map(post => `
-      <article class="blog-post" id="${post.slug}">
-        <h2 class="blog-post-title">${post.title}</h2>
-        <div class="blog-post-date">${new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
-        <div class="blog-post-content">
-          ${post.content}
-        </div>
-        <div class="blog-post-image">
-          <img src="${post.image}" alt="${post.title}" />
-        </div>
-      </article>
-    `).join('');
-    
-    blogsContainer.innerHTML = postsHTML;
-  } catch (error) {
-    console.error('Error loading blog posts:', error);
-    document.getElementById('blogsContainer').innerHTML = '<div class="error"><p>Error loading blog posts.</p></div>';
-  }
-}
-
-// Load blog posts when page is ready
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', loadBlogPosts);
-} else {
-  loadBlogPosts();
-}
-
-// Handle hash-based navigation to specific posts
-window.addEventListener('hashchange', () => {
-  const postId = window.location.hash.slice(1);
-  if (postId) {
-    const element = document.getElementById(postId);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  }
-});
--- a/blog/style.css
+++ b/blog/style.css
@ -220,71 +220,3 @@ a:focus-visible {
    height: 40vh; /* 60% of the viewport height */
    width: auto; /* Maintain aspect ratio */
 }
-
-/* Blog Posts Styling */
-.blogs-container {
-  margin: 40px auto 0;
-  max-width: 65em;
-  width: 100%;
-}
-
-.blog-post {
-  margin: 40px auto;
-  padding: 20px;
-  border: 1px solid rgba(155, 169, 180, 0.2);
-  border-radius: 4px;
-  background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
-  scroll-margin-top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 700px;
-}
-
-.blog-post-title {
-  color: #ffff00;
-  font-weight: bold;
-  font-size: 1.8rem;
-  margin: 0 0 10px;
-  text-align: center;
-}
-
-.blog-post-date {
-  color: #aa95bd;
-  font-size: 0.9rem;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.blog-post-content {
-  color: #9d9aa4;
-  font-size: 0.95rem;
-  line-height: 1.6;
-  text-align: center;
-}
-
-.blog-post-content p {
-  margin: 0 0 15px;
-}
-
-.blog-post-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 20px;
-}
-
-.blog-post-image img {
-  max-width: 100%;
-  height: auto;
-  max-height: 60vh;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-.no-posts,
-.error {
-  text-align: center;
-  color: #9d9aa4;
-  padding: 40px 20px;
-}
--- a/index.html
+++ b/index.html
@ -243,28 +243,18 @@
  <a href="https://dangrubb.net/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
 </p>

-<div class="blog-preview-container">
-  <div class="blog-preview" id="latestBlogPreview">
-    <p style="color: #9d9aa4;">Loading latest post...</p>
-  </div>
-</div>
-
 <div class="debug">
  <div class="code"></div>
 </div>

-<!-- Navigation Links (now pinned to bottom via CSS) -->
-<nav class="bottom-nav">
-  <p>
+<div class="links-bottom">
  <a target="_parent" href="https://ai.dangrubb.net">ai</a>
  <a target="_parent" href="https://dangrubb.net/blog">blog</a>
  <a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
  <a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
  <a target="_parent" href="https://dangrubb.net/cv">cv</a>
  <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
-  </p>
-</nav>
-
+</div>
 <!-- partial -->
  <script  src="./script.js"></script>

--- a/music/Darnea/DGDN/index.html
+++ b/music/Darnea/DGDN/index.html
@ -5,6 +5,7 @@
  <title>DGDN - Darnea | dangrubb.net</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="../../../style.css">
  <link rel="stylesheet" href="../../music.css">
  <link rel="stylesheet" href="./player.css">
 </head>
--- a/music/Darnea/index.html
+++ b/music/Darnea/index.html
@ -5,6 +5,7 @@
  <title>Darnea - dangrubb.net</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="../../style.css">
  <link rel="stylesheet" href="../music.css">
 </head>
 <body>
--- a/music/index.html
+++ b/music/index.html
@ -5,6 +5,7 @@
  <title>dangrubb.net Music</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="../style.css">
  <link rel="stylesheet" href="./music.css">
 </head>
 <body>
--- a/music/music.css
+++ b/music/music.css
@ -1,35 +1,9 @@
-/* --- BASE STYLES (Merged from style.css) --- */
-body {
-  background: #0d0a14;
-  padding: 40px 20px;
-  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-  color: #9d9aa4;
-  /* Fixed the no-scroll issue here: */
-  min-height: 100vh;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow-y: auto; 
-}
+/* Music Platform Styling */

-a {
-  color: #6be1e9;
-  text-decoration: none;
-}
-
-a:focus,
-a:hover,
-a:visited {
-  opacity: 0.8;
-}
-
-/* --- MUSIC PLATFORM STYLING --- */
 .music-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
-  flex: 1; /* Allows container to grow and push footer down */
 }

 .music-header {
@ -48,9 +22,14 @@ a:visited {

 .music-header h1 a {
  color: #6be1e9;
+  text-decoration: none;
 }

-/* Artists/Albums Grid */
+.music-header h1 a:hover {
+  opacity: 0.8;
+}
+
+/* Artists Grid */
 .artists-grid,
 .albums-grid {
  display: grid;
@ -89,6 +68,17 @@ a:visited {
  color: #9d9aa4;
 }

+.artist-card h2 a,
+.album-card h3 a {
+  color: #6be1e9;
+  text-decoration: none;
+}
+
+.artist-card h2 a:hover,
+.album-card h3 a:hover {
+  opacity: 0.8;
+}
+
 .artist-meta,
 .album-meta {
  color: #6be1e9;
@ -116,97 +106,47 @@ a:visited {
  color: #9d9aa4;
 }

-/* Footer / Bottom Nav */
+/* Footer */
 .music-footer {
  text-align: center;
  margin-top: 60px;
-  padding: 20px 0;
+  padding-top: 20px;
  border-top: 2px solid rgba(107, 225, 233, 0.3);
 }

-.bottom-nav {
-  margin-top: auto;
-  width: 100%;
-  text-align: center;
-  padding: 20px 0;
+.music-footer p {
+  margin: 0;
 }

-.bottom-nav a {
-  margin: 0 10px;
-  display: inline-block;
+.music-footer a {
+  color: #6be1e9;
+  text-decoration: none;
 }

-/* --- BARD / IMAGE STYLES --- */
-.bard {
-  margin: 0 auto 30px;
-  width: 100%;
-  max-width: 65em;
-  height: auto;
-  aspect-ratio: 1 / 0.95;
-  font-size: 2px;
-  flex-shrink: 0;
-  position: relative;
+.music-footer a:hover {
+  opacity: 0.8;
 }

-.bard img {
-  width: 100%;
-  height: auto;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-/* --- ANNOUNCEMENT & BLOG PREVIEW --- */
-.announcement {
-  margin: 20px auto;
-  display: block;
-  border: 1px solid #ffff00;
-  padding: 10px 15px;
-  border-radius: 3px;
-  text-align: center;
-  max-width: 400px;
-}
-
-.announcement a {
-  color: #ffff00;
-  font-weight: bold;
-}
-
-.blog-preview-container {
-  margin: 30px auto;
-  max-width: 600px; 
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.blog-preview {
-  border: 1px solid rgba(155, 169, 180, 0.3);
-  border-radius: 4px;
-  padding: 15px;
-  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-/* --- RESPONSIVE MEDIA QUERIES --- */
+/* Responsive */
@media (max-width: 768px) {
  .music-container {
    padding: 20px 10px;
  }
+
  .music-header h1 {
    font-size: 1.5rem;
  }
+
  .artists-grid,
  .albums-grid {
    grid-template-columns: 1fr;
  }
+
  .artist-banner {
    font-size: 3rem;
  }
+
  .artist-detail h2 {
    font-size: 1.8rem;
  }
-  .bard {
-    font-size: 3px;
-  }
 }
--- a/script.js
+++ b/script.js
@ -127,40 +127,3 @@ uncomment the code below.
 //     <pre>${css.join("\n\n")}</pre>
 //   </div>
 // `;
-
-// Load latest blog post preview
-async function loadLatestBlogPost() {
-  try {
-    const response = await fetch('./blog/posts.json');
-    const posts = await response.json();
-    
-    if (posts.length === 0) {
-      document.getElementById('latestBlogPreview').innerHTML = '<p style="color: #9d9aa4;">No blog posts yet.</p>';
-      return;
-    }
-    
-    // Get the latest post (first in the array)
-    const latestPost = posts[0];
-    
-    // Create the preview HTML
-    const previewHTML = `
-      <a href="./blog/#${latestPost.slug}" class="blog-preview-title">${latestPost.title}</a>
-      <div class="blog-preview-date">${new Date(latestPost.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
-      <img src="${latestPost.image}" alt="${latestPost.title}" />
-      <p class="blog-preview-excerpt">${latestPost.excerpt}</p>
-      <a href="./blog/#${latestPost.slug}" class="blog-preview-link">Read more →</a>
-    `;
-    
-    document.getElementById('latestBlogPreview').innerHTML = previewHTML;
-  } catch (error) {
-    console.error('Error loading blog posts:', error);
-    document.getElementById('latestBlogPreview').innerHTML = '<p style="color: #9d9aa4;">Error loading blog posts.</p>';
-  }
-}
-
-// Load blog preview when page is ready
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', loadLatestBlogPost);
-} else {
-  loadLatestBlogPost();
-}
--- a/style.css
+++ b/style.css
@ -264,123 +264,3 @@ a:focus-visible {
 .column + .column {
  color: #aa95bd;
 }
-
-/* Make body use flexbox to push nav to bottom */
-body {
-  background: #0d0a14;
-  padding: 40px 20px;
-  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-  color: #9d9aa4;
-  min-height: 100vh;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow: hidden; /* Prevents scrollbar */
-}
-
-/* Color the announcement link yellow */
-.announcement {
-  margin: 20px auto 0;
-  display: inline-block;
-  border: 1px solid #ffff00;
-  padding: 10px 15px;
-  border-radius: 3px;
-}
-
-.announcement a {
-  color: #ffff00;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-.announcement a:hover {
-  text-decoration: underline;
-}
-
-/* Blog Preview Box */
-.blog-preview-container {
-  margin: 30px auto 0;
-  max-width: 33%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.blog-preview {
-  border: 1px solid rgba(155, 169, 180, 0.3);
-  border-radius: 4px;
-  padding: 15px;
-  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-.blog-preview img {
-  width: 100%;
-  height: auto;
-  max-height: 150px;
-  object-fit: cover;
-  border-radius: 3px;
-  margin-bottom: 10px;
-}
-
-.blog-preview-title {
-  color: #ffff00;
-  font-weight: bold;
-  font-size: 0.95rem;
-  margin: 10px 0 5px;
-  text-decoration: none;
-  display: block;
-}
-
-.blog-preview-title:hover {
-  text-decoration: underline;
-}
-
-.blog-preview-date {
-  color: #aa95bd;
-  font-size: 0.8rem;
-  margin-bottom: 8px;
-}
-
-.blog-preview-excerpt {
-  color: #9d9aa4;
-  font-size: 0.85rem;
-  line-height: 1.4;
-  margin: 8px 0 10px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.blog-preview-link {
-  display: inline-block;
-  color: #6be1e9;
-  font-size: 0.8rem;
-  text-decoration: none;
-}
-
-.blog-preview-link:hover {
-  text-decoration: underline;
-}
-
-/* Push the navigation to the bottom using flexbox spacer */
-.bottom-nav {
-  margin-top: auto;
-  width: 100%;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-}
-
-.bottom-nav p {
-  margin: 0;
-  text-align: center;
-}
-
-.bottom-nav a {
-  margin: 0 10px;
-  display: inline-block;
-}
Author	SHA1	Message	Date
dangrubbb	ea044f0875	Prevent unnecessary scrolling on homepage - Set body to height: 100vh with box-sizing: border-box - Keep glitch art at original size without forcing scroll - Padding accounts for fixed footer area - Content fits on screen without scrollbar when there's room	2026-02-28 10:02:51 -05:00
dangrubbb	882fdd7e7f	Fix links visibility with fixed bottom positioning - Change body to min-height: 100vh with bottom padding for fixed footer - Use position: fixed on links-bottom to keep them always visible at bottom - Add gradient background to links bar for visual separation - Content can scroll, links always visible and accessible - Remove overflow: hidden to allow proper scrolling	2026-02-28 09:59:30 -05:00
dangrubbb	b9d5d5cc80	Fix layout to prevent scrollbar - Change body height from min-height to height: 100vh with overflow: hidden - Use flexbox with flex-grow/flex-shrink to keep everything on one screen - Reduce padding and margins for better fit - Debug section takes remaining space, links always at bottom - No scrollbar, works on all screen sizes	2026-02-28 09:54:41 -05:00
dangrubbb	1e6a843b94	Refine homepage layout - Remove announcement box styling, keep only yellow text link - Move links-bottom to true bottom of page using flexbox - Add min-height: 100vh to body for proper footer alignment - Announcement link now styled as plain yellow text without borders	2026-02-28 09:52:27 -05:00
dangrubbb	9afda9a01a	Add music platform with DGDN album player - Create /music landing page with artist grid - Add /music/Darnea artist page with album listing - Build /music/Darnea/DGDN album player with clickable tracklist - Auto-play next track on completion - Dangrubb-branded styling with cyan accent colors - FLAC player pulls from /src/audio/DGDN - Move landing page links to bottom with yellow announcement box	2026-02-28 09:31:48 -05:00