Skip to content

Commit f3bd255

Browse files
Vic-NasVic-Nas
committed
Full page code review
1 parent 62803da commit f3bd255

3 files changed

Lines changed: 44 additions & 22 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<link rel="icon" href="VN.ico">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
99
<link rel="stylesheet" href="styles.css">
10-
1110
</head>
1211
<body>
1312
<div class="container" id="main">
@@ -68,4 +67,4 @@ <h2 id="problems-title"></h2>
6867
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
6968
<script src="script.js"></script>
7069
</body>
71-
</html>
70+
</html>

‎script.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,7 @@ async function renderProblemPage(platform, problemName) {
268268
pageContent += `<div class="side-by-side-layout">`;
269269

270270
// Image side
271+
pageContent += `<div class="image-side">`;
271272
const pngFile = problem.pngFiles[0];
272273
const imageUrl = `${platform}/${problem.name}/${pngFile.name}`;
273274
pageContent += `
@@ -276,14 +277,17 @@ async function renderProblemPage(platform, problemName) {
276277
<div class="image-caption">Solution Visualization</div>
277278
</div>
278279
`;
280+
pageContent += `</div>`;
279281

280282
// Code side
283+
pageContent += `<div class="code-side">`;
281284
pageContent += `
282285
<div class="code-section">
283286
<h3>Python ${platform === 'vicutils' ? 'Script' : 'Solution'}</h3>
284287
<div class="code-content"><pre>${escapeHtml(pythonCode)}</pre></div>
285288
</div>
286289
`;
290+
pageContent += `</div>`;
287291

288292
pageContent += `</div>`;
289293
} else {

‎styles.css‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ h1 {
313313
background: white;
314314
min-height: 100vh;
315315
padding: 2rem;
316-
max-width: 2400px;
316+
max-width: 100%;
317317
margin: 0 auto;
318318
}
319319

@@ -367,17 +367,27 @@ h1 {
367367
margin-bottom: 2rem;
368368
}
369369

370-
/* ===== SIDE-BY-SIDE LAYOUT ===== */
370+
/* ===== SIDE-BY-SIDE LAYOUT (FIXED) ===== */
371371

372372
.side-by-side-layout {
373-
display: grid;
374-
grid-template-columns: 1fr 1fr;
373+
display: flex;
375374
gap: 2rem;
376375
margin: 2rem 0;
376+
align-items: flex-start;
377377
}
378378

379-
.side-by-side-layout > * {
379+
.side-by-side-layout .image-side {
380+
flex: 1;
380381
min-width: 0;
382+
display: flex;
383+
flex-direction: column;
384+
}
385+
386+
.side-by-side-layout .code-side {
387+
flex: 1;
388+
min-width: 0;
389+
display: flex;
390+
flex-direction: column;
381391
}
382392

383393
/* ===== STANDARD IMAGES GRID (for multiple images) ===== */
@@ -391,7 +401,7 @@ h1 {
391401

392402
.images-grid.single-image {
393403
grid-template-columns: 1fr;
394-
max-width: 800px;
404+
max-width: 900px;
395405
margin-left: auto;
396406
margin-right: auto;
397407
}
@@ -403,8 +413,11 @@ h1 {
403413
border-radius: 10px;
404414
overflow: hidden;
405415
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
406-
transition: transform 0.3s ease;
416+
transition: transform 0.3s ease, box-shadow 0.3s ease;
407417
background: white;
418+
display: flex;
419+
flex-direction: column;
420+
height: 100%;
408421
}
409422

410423
.image-container:hover {
@@ -416,6 +429,7 @@ h1 {
416429
width: 100%;
417430
height: auto;
418431
display: block;
432+
object-fit: contain;
419433
}
420434

421435
.image-caption {
@@ -425,6 +439,7 @@ h1 {
425439
color: #666;
426440
text-align: center;
427441
border-top: 1px solid #e2e8f0;
442+
margin-top: auto;
428443
}
429444

430445
/* ===== CODE SECTION ===== */
@@ -435,12 +450,16 @@ h1 {
435450
border-radius: 10px;
436451
padding: 2rem;
437452
margin: 2rem 0;
453+
display: flex;
454+
flex-direction: column;
455+
height: 100%;
438456
}
439457

440458
.code-section h3 {
441459
margin-bottom: 1rem;
442460
color: #2d3748;
443461
font-size: 1.3rem;
462+
flex-shrink: 0;
444463
}
445464

446465
.code-content {
@@ -451,13 +470,13 @@ h1 {
451470
font-family: 'Monaco', 'Menlo', monospace;
452471
font-size: 0.9rem;
453472
line-height: 1.6;
454-
overflow-x: auto;
455-
overflow-y: auto;
456-
max-height: 70vh;
473+
overflow: auto;
474+
flex: 1;
457475
}
458476

459477
.code-content pre {
460478
margin: 0;
479+
min-height: 100%;
461480
}
462481

463482
.code-content::-webkit-scrollbar {
@@ -478,17 +497,21 @@ h1 {
478497
background: #64748b;
479498
}
480499

481-
/* Remove height restriction for side-by-side code */
482-
.side-by-side-layout .code-content {
483-
max-height: none;
484-
overflow-y: visible;
500+
/* Make code section in side-by-side take full height */
501+
.side-by-side-layout .code-section {
502+
margin: 0;
485503
}
486504

487505
/* ===== RESPONSIVE ===== */
488506

489-
@media (max-width: 1100px) {
507+
@media (max-width: 1200px) {
490508
.side-by-side-layout {
491-
grid-template-columns: 1fr;
509+
flex-direction: column;
510+
}
511+
512+
.side-by-side-layout .image-side,
513+
.side-by-side-layout .code-side {
514+
width: 100%;
492515
}
493516
}
494517

@@ -542,8 +565,4 @@ h1 {
542565
.generated-page {
543566
padding: 1rem;
544567
}
545-
546-
.side-by-side-layout {
547-
grid-template-columns: 1fr;
548-
}
549568
}

0 commit comments

Comments
 (0)