Update custom-lab-style.css

Author: ecloude

assets/css/custom-lab-style.css

@@ -1,35 +1,62 @@
-/* --- Ghibli Cloud Dynamic Background (Dark Mode) --- */
+/* --- Ghibli Cloud Dynamic Background (Dark Mode with Computational Elements) --- */
 
 /* 1. Define the subtle movement (cloud-drift) */
 @keyframes cloud-drift {
     0% { background-position: 0 0; }
-    100% { background-position: 100% 0; }
+    100% { background-position: 100% 0; } /* Shifts the background one full image width */
 }
 
 /* 2. Apply the style to the main page body */
 body {
-    /* **NEW: Use a dark color for the sky/background** */
-    background-color: #121212; /* A dark, almost black color (common dark mode background) */
+    /* Use a very dark, deep color for the background that shows around the clouds */
+    background-color: #0d0d0d; /* A deep charcoal/near-black */
 
-    /* Ensure the cloud image is a PNG with transparency, or the image itself is dark */
-    background-image: url("images/clouds_lab.png"); 
+    /* **IMPORTANT**: Update this URL path to where you saved your new image */
+    background-image: url("/images/clouds_lab.png"); 
 
-    background-repeat: repeat-x;
-    background-size: auto 100vh;
+    /* Crucial for seamless drift: it tiles the image horizontally */
+    background-repeat: repeat-x; 
 
-    /* Apply the animation */
+    /* Ensures the image fills the space vertically without distortion */
+    background-size: auto 100vh; /* Adjust 'auto' if the image needs to be larger/smaller */
+    
+    /* Apply the animation for a slow, continuous loop */
     animation: cloud-drift 120s linear infinite;
 
-    /* IMPORTANT for Dark Background: Make text readable */
-    color: #f0f0f0; /* Set default text color to a light gray/off-white */
+    /* Set default text color to a light gray/off-white for readability */
+    color: #e0e0e0;
+    
+    /* Smooth transitions for any hover effects if needed */
+    transition: background-color 0.3s ease;
+}
+
+/* 3. Ensure Readability for your Lab Page Content (Container Box) */
+/* These classes target typical content wrappers in Jekyll themes. You might need to
+   inspect your page to find the exact class that wraps your lab.md content. */
+.markdown-body, .page__content, .page, .wrap, #main { 
+    background-color: rgba(25, 25, 25, 0.85); /* Slightly darker, semi-transparent box */
+    padding: 30px; /* More padding for better aesthetics */
+    border-radius: 10px; /* Slightly more rounded corners */
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6); /* Deeper shadow for pop-out effect */
+    margin: 40px auto; /* Center the content box with vertical margins */
+    max-width: 900px; /* Max width for readability */
+    line-height: 1.6; /* Better line spacing for dark backgrounds */
+    color: #e0e0e0; /* Ensure text inside the box is also light */
 }
 
-/* 3. Ensure Readability for your Lab Page Content */
-/* This wrapper ensures your main content blocks stand out */
-.markdown-body, .page, .content-wrapper { 
-    /* Use a slightly darker, semi-transparent box for content */
-    background-color: rgba(30, 30, 30, 0.85); 
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Stronger shadow to pop against dark background */
+/* Specific adjustments for headings if needed for dark mode */
+h1, h2, h3, h4, h5, h6 {
+    color: #ffffff; /* Make headings pure white for contrast */
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* Subtle shadow for headings */
+}
+
+/* Link colors for dark theme */
+a {
+    color: #87ceeb; /* A light sky blue for links */
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+a:hover {
+    color: #b0e0e6; /* Lighter blue on hover */
+    text-decoration: underline;
 }