Seperate CSS for music

- Add border and padding to .announcement class
- Makes 'EXCLUSIVE: Leaked mixtape' text stand out

blog/index.html

@@ -237,17 +237,17 @@
 <p>
   dangrubb.net/blog
 </p>
-<div></div>
-<h1 style="color:white;text-align:center;">Status</h1>
+
 <p>
-  dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.
+  <a href="../index.html"><-- back to home</a>
 </p>
-  <div><p></p></div>
- <div class="img-container">
-        <img src="./src/img/CannotConnect.JPEG" alt="Cannot Connect" class="viewport-image">
-    </div>
+
+<div id="blogsContainer" class="blogs-container">
+  <p style="color: #9d9aa4;">Loading blog posts...</p>
+</div>
+
 <!-- partial -->
-  <script  src="./script.js"></script>
+  <script src="./script.js"></script>
 
 
 </body>

blog/posts.json

@@ -0,0 +1,11 @@
+[
+  {
+    "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"
+  }
+]

blog/script.js

@@ -0,0 +1,53 @@
+"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' });
+    }
+  }
+});

blog/style.css

@@ -219,4 +219,72 @@ a:focus-visible {
 .viewport-image {
     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;
 }

index.html

@@ -243,6 +243,12 @@
   <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>

music/Darnea/DGDN/index.html

@@ -5,7 +5,6 @@
   <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>

music/Darnea/index.html

@@ -5,7 +5,6 @@
   <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>

music/index.html

@@ -5,7 +5,6 @@
   <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>

music/music.css

@@ -1,9 +1,35 @@
-/* Music Platform Styling */
+/* --- 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; 
+}
 
+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 {
@@ -22,14 +48,9 @@
 
 .music-header h1 a {
   color: #6be1e9;
-  text-decoration: none;
 }
 
-.music-header h1 a:hover {
-  opacity: 0.8;
-}
-
-/* Artists Grid */
+/* Artists/Albums Grid */
 .artists-grid,
 .albums-grid {
   display: grid;
@@ -68,17 +89,6 @@
   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;
@@ -106,47 +116,97 @@
   color: #9d9aa4;
 }
 
-/* Footer */
+/* Footer / Bottom Nav */
 .music-footer {
   text-align: center;
   margin-top: 60px;
-  padding-top: 20px;
+  padding: 20px 0;
   border-top: 2px solid rgba(107, 225, 233, 0.3);
 }
 
-.music-footer p {
-  margin: 0;
+.bottom-nav {
+  margin-top: auto;
+  width: 100%;
+  text-align: center;
+  padding: 20px 0;
 }
 
-.music-footer a {
-  color: #6be1e9;
-  text-decoration: none;
+.bottom-nav a {
+  margin: 0 10px;
+  display: inline-block;
 }
 
-.music-footer a:hover {
-  opacity: 0.8;
+/* --- 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;
 }
 
-/* Responsive */
+.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 --- */
 @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;
+  }
+}

script.js

@@ -126,4 +126,41 @@ uncomment the code below.
 //     <div class="heading">CSS</div>
 //     <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();
+}

style.css

@@ -282,6 +282,10 @@ body {
 /* 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 {
@@ -294,6 +298,74 @@ body {
   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;