fixed responsive design

Author: furkanalk

docs/css/styles.css

@@ -146,4 +146,17 @@ html, body { height: 100%; }
 .scroll-touch {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 640px) {
+  #raceGraph {
+    height: 250px !important;
+  }
+}
+
+/* orta ve üstü ekranlarda Chart.js’in kendi responsive ölçülerini kullansın */
+@media (min-width: 641px) {
+  #raceGraph {
+    height: auto !important;
+  }
 }

docs/index.html

@@ -50,8 +50,8 @@ <h2 class="text-3xl font-bold mb-4 text-indigo-600">
     </section>
 
    <!-- WIKI -->
-  <section id="wikiSection" class="container mx-auto p-8 flex flex-col md:flex-row gap-10">
-    <nav class="w-full md:w-64 bg-blue-900/90 rounded-2xl shadow-md p-6 sticky top-24">
+  <section id="wikiSection" class="container mx-auto p-4 md:p-8 flex flex-col md:flex-row gap-4 md:gap-10">
+    <nav class="w-full md:w-64 bg-blue-900/90 rounded-2xl shadow-md p-4 md:p-6 md:sticky md:top-24">
       <h2 class="text-xl font-bold border-b pb-3 mb-5 text-gray-800 dark:text-gray-100">Contents</h2>
       <ul class="space-y-3 text-gray-700 dark:text-gray-300">
         <li><a href="#intro" class="block px-3 py-2 rounded hover:bg-indigo-600/90 transition">Welcome</a></li>
@@ -85,7 +85,7 @@ <h2 class="text-xl font-bold border-b pb-3 mb-5 text-gray-800 dark:text-gray-100
     </nav>
 
     <div class="flex-1">
-      <article id="intro" class="bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="intro" class="bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h2 class="text-3xl font-bold text-indigo-600 mb-4">Welcome to the Algorithm Wiki</h2>
         <p class="mb-3">
           Explore foundational algorithms used in pathfinding, sorting, and decision-making.
@@ -96,7 +96,7 @@ <h2 class="text-3xl font-bold text-indigo-600 mb-4">Welcome to the Algorithm Wik
       </article>
 
       <!-- BFS -->
-      <article id="bfs" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="bfs" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-indigo-500 mb-4">Breadth-First Search (BFS)</h3>
         <p class="mb-3">BFS explores a graph layer by layer from the start node, guaranteeing the shortest path in
           unweighted graphs. It employs a <em>queue</em> to track frontier nodes.</p>
@@ -123,7 +123,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- DFS -->
-      <article id="dfs" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="dfs" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-indigo-500 mb-4">Depth-First Search (DFS)</h3>
         <p class="mb-3">DFS dives deep along branches before backtracking, using recursion or an explicit
           <em>stack</em>. It excels at exploring tree-like structures and detecting cycles.</p>
@@ -150,7 +150,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Dijkstra -->
-      <article id="dijkstra" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="dijkstra" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-indigo-500 mb-4">Dijkstra’s Algorithm</h3>
         <p class="mb-3">Dijkstra computes shortest paths in graphs with non-negative edge weights by expanding the node
           with the smallest tentative distance stored in a <em>min-heap</em>.</p>
@@ -178,7 +178,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- A* -->
-      <article id="astar" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="astar" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-indigo-500 mb-4">A* Search Algorithm</h3>
         <p class="mb-3">A* augments Dijkstra with a heuristic function <code>h(n)</code> estimating remaining cost to
           the goal, dramatically reducing explored nodes while preserving optimality if the heuristic is
@@ -213,7 +213,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Bubble Sort -->
-      <article id="bubble-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="bubble-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-emerald-600 mb-4">Bubble Sort</h3>
         <p class="mb-3">Repeatedly swaps adjacent out-of-order elements, letting the largest “bubble” to the end each
           pass. Simple but slow (quadratic time).</p>
@@ -233,7 +233,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Selection Sort -->
-      <article id="selection-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="selection-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-emerald-600 mb-4">Selection Sort</h3>
         <p class="mb-3">Finds the smallest element in the unsorted region and swaps it to the front. Performs
           <em>n</em> passes regardless of initial order.</p>
@@ -252,7 +252,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Insertion Sort -->
-      <article id="insertion-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="insertion-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-emerald-600 mb-4">Insertion Sort</h3>
         <p class="mb-3">Builds the final sorted list one element at a time by inserting each new element into the correct
           position among already-sorted elements.</p>
@@ -270,7 +270,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Merge Sort -->
-      <article id="merge-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="merge-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-emerald-600 mb-4">Merge Sort</h3>
         <p class="mb-3">Divide-and-conquer: recursively splits the list, sorts each half, then merges sorted halves. It’s
           stable and guarantees O(n log n).</p>
@@ -296,7 +296,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Quick Sort -->
-      <article id="quick-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="quick-sort" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-emerald-600 mb-4">Quick Sort</h3>
         <p class="mb-3">Picks a pivot, partitions elements into &lt; pivot, = pivot, &gt; pivot, then recursively sorts
           partitions. Average O(n log n) time and <em>in-place</em> (O(log n) extra space).</p>
@@ -314,7 +314,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Greedy -->
-      <article id="greedy" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="greedy" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-fuchsia-500 mb-4">Greedy Assignment</h3>
         <p class="mb-3">Iteratively picks the locally best pair (highest score), removes them from the pool, and repeats
           until empty. Fast (typically O(n²)) but may miss the global optimum.</p>
@@ -332,7 +332,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Monte Carlo -->
-      <article id="monte-carlo" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="monte-carlo" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-fuchsia-500 mb-4">Monte Carlo Search</h3>
         <p class="mb-3">Generates many random assignments, scores each, and retains the best. Quality improves with more
           iterations but runtime grows linearly.</p>
@@ -352,7 +352,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Simulated Annealing -->
-      <article id="simulated-annealing" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="simulated-annealing" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-fuchsia-500 mb-4">Simulated Annealing</h3>
         <p class="mb-3">Starts with a random solution, applies random swaps, and occasionally accepts worse moves with
           probability exp(-Δ/T). Temperature <em>T</em> gradually cools, reducing uphill moves over time.</p>
@@ -377,7 +377,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Genetic Algorithm -->
-      <article id="genetic" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="genetic" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-fuchsia-500 mb-4">Genetic Algorithm</h3>
         <p class="mb-3">Maintains a population of candidate solutions, selects parents by fitness, produces offspring via
           crossover and mutation, and iterates across generations.</p>
@@ -395,7 +395,7 @@ <h4 class="text-lg font-semibold mb-2">Pseudocode</h4>
       </article>
 
       <!-- Tabu Search -->
-      <article id="tabu" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-8">
+      <article id="tabu" class="hidden bg-white border-2 border-indigo-600 rounded-2xl shadow-md p-6 md:p-8">
         <h3 class="text-2xl font-bold text-fuchsia-500 mb-4">Tabu Search</h3>
         <p class="mb-3">Explores the neighborhood of the current solution while maintaining a short-term memory
           (<em>tabu list</em>) of recent moves to prevent cycling.</p>