stashcom

src/static/index.css

@@ -28,6 +28,7 @@ header {
     margin-bottom: 14px;
 }
 header h1 {
+    text-align: center;
     font-size: 1.6rem;
     color: #111827;
 }
@@ -183,3 +184,24 @@ header p {
         flex-direction: column;
     }
 }
+
+/* Leaderboard horizontal collapse */
+#leaderboardSection {
+  transition: max-width 0.35s ease, opacity 0.25s ease;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+#leaderboardSection.hidden {
+  max-width: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#leaderboardSection.visible {
+  max-width: 100%; /* take full available space in grid column */
+  opacity: 1;
+}
+#rankingExplanation {
+    transition: all 0.35s ease;
+}

src/static/problem.css

@@ -0,0 +1,212 @@
+body {
+    font-family: 'Inter', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+    color: #333;
+    min-height: 100vh; /* allow content to grow */
+    overflow-y: auto;  /* allow vertical scroll */
+    box-sizing: border-box;
+}
+
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+
+.main-container {
+    display: flex;
+    flex-wrap: wrap; /* wrap on small screens */
+    min-height: 100vh;
+    width: 100vw;
+}
+
+.problem-panel {
+    flex: 1 1 400px; /* grow/shrink with base 400px */
+    min-width: 300px;
+    background: white;
+    overflow-y: auto;
+    padding: 20px;
+    border-right: 1px solid #eaeaea;
+    max-height: 100vh;
+}
+
+.editor-container {
+    flex: 1 1 400px;
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    max-height: 100vh;
+    overflow: hidden; /* internal scroll handling */
+}
+
+.editor-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #eaeaea;
+    flex-shrink: 0;
+}
+
+.editor-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 0 20px;
+    overflow-y: auto;
+}
+
+.problem-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.back-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    color: #666;
+    margin-right: 15px;
+    padding: 5px;
+}
+
+.back-btn:hover {
+    color: #000;
+}
+
+h1 {
+    font-size: 22px;
+    font-weight: 600;
+    margin: 0;
+    color: #1a1a1a;
+}
+
+.problem-desc {
+    line-height: 1.6;
+    font-size: 15px;
+    overflow-wrap: break-word;
+}
+
+.problem-desc pre {
+    background: #f6f8fa;
+    padding: 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+}
+
+.problem-desc code {
+    background: #f6f8fa;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+}
+
+.editor-actions {
+    padding: 15px 0;
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
+}
+
+.editor-actions button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.editor-actions button:hover {
+    background-color: #0069d9;
+}
+
+#editor {
+    flex: 1 1 auto;
+    min-height: 300px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: auto;
+    max-height: 60vh;
+}
+
+.result-panel {
+    margin-top: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    min-height: 120px;
+    overflow-y: auto;
+    max-height: 30vh;
+}
+
+.result-panel h3 {
+    margin-top: 0;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.result-panel pre {
+    background: #f6f8fa;
+    padding: 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    margin: 5px 0;
+}
+
+.placeholder {
+    color: #999;
+    font-style: italic;
+    text-align: center;
+    padding: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 14px;
+    color: #666;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .main-container {
+        flex-direction: column;
+        height: auto;
+        overflow-y: visible;
+    }
+    .problem-panel, .editor-container {
+        flex: none;
+        width: 100%;
+        min-width: auto;
+        max-height: none;
+        border-right: none;
+        border-bottom: 1px solid #eaeaea;
+    }
+    #editor {
+        min-height: 400px;
+        max-height: none;
+    }
+    .result-panel {
+        max-height: none;
+    }
+}