Refactored js and css

Author: Vic-Nas

…lecting beepers/collectiongbeepers.vn.py …llecting beepers/collectingbeepers.vn.pykattis/Collecting beepers/collectiongbeepers.vn.py renamed to kattis/Collecting beepers/collectingbeepers.vn.py kattis/Collecting beepers/collectiongbeepers.vn.py renamed to kattis/Collecting beepers/collectingbeepers.vn.py

@@ -4,7 +4,7 @@ let problemsData = {
     vicutils: []
 };
 
-const main =  document.getElementById("main")
+const main = document.getElementById("main")
 
 
 async function scanForProblems() {
@@ -23,11 +23,11 @@ async function scanForProblems() {
             const problems = [];
 
             if (platform === 'vicutils') {
-                // For vicutils, look for generated .html files
+                // For vicutils, ONLY look for .html files (ignore Python files)
                 for (const item of items) {
                     if (item.type === 'file' && item.name.endsWith('.html')) {
                         problems.push({
-                            name: item.name,  // Keep the full filename
+                            name: item.name,
                             displayName: item.name.replace('.html', '').replace(/_/g, ' '),
                             type: 'html',
                             hasPage: true,
@@ -62,7 +62,11 @@ async function scanForProblems() {
                             );
                             const hasPng = pngFiles.length > 0;
 
-                            const pyFiles = files.filter(file => file.name.endsWith('.vn.py'));
+                            // FIXED: Only select .vn.py files that do NOT contain .shortest.
+                            const pyFiles = files.filter(file => 
+                                file.name.endsWith('.vn.py') && 
+                                !file.name.includes('.shortest.')
+                            );
                             const hasPy = pyFiles.length > 0;
 
                             let type = 'code-only';
@@ -402,4 +406,4 @@ window.addEventListener('hashchange', () => {
     } else if (hash === '') {
         location.reload(); // Reload to show main page
     }
-});
+});

script.js

@@ -1,4 +1,3 @@
-
 * {
     margin: 0;
     padding: 0;
@@ -312,13 +311,20 @@ h1 {
     background: white;
     min-height: 100vh;
     padding: 2rem;
+    overflow-x: hidden;
 }
 
 .nav-buttons {
     display: flex;
     gap: 1rem;
     margin-bottom: 2rem;
     flex-wrap: wrap;
+    position: sticky;
+    top: 0;
+    background: white;
+    padding: 1rem 0;
+    z-index: 10;
+    border-bottom: 2px solid #e2e8f0;
 }
 
 .nav-btn {
@@ -363,7 +369,7 @@ h1 {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin: 2rem 0;
-    max-width: 1000px;
+    max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
 }
@@ -374,6 +380,9 @@ h1 {
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
+    max-height: 600px;
+    display: flex;
+    flex-direction: column;
 }
 
 .image-container:hover {
@@ -382,10 +391,11 @@ h1 {
 
 .image-container img {
     width: 100%;
-    max-width: 800px;
     height: auto;
+    max-height: 550px;
+    object-fit: contain;
     display: block;
-    margin: 0 auto;
+    background: white;
 }
 
 .image-caption {
@@ -402,6 +412,9 @@ h1 {
     border-radius: 10px;
     padding: 2rem;
     margin: 2rem 0;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .code-section h3 {
@@ -419,7 +432,30 @@ h1 {
     line-height: 1.6;
     white-space: pre-wrap;
     overflow-x: auto;
+    max-height: 600px;
+    overflow-y: auto;
     font-weight: bold;
+    scrollbar-width: thin;
+    scrollbar-color: #475569 #1e293b;
+}
+
+.code-content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.code-content::-webkit-scrollbar-track {
+    background: #1e293b;
+    border-radius: 4px;
+}
+
+.code-content::-webkit-scrollbar-thumb {
+    background: #475569;
+    border-radius: 4px;
+}
+
+.code-content::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
 }
 
 @media (max-width: 768px) {