improve css for responsive columns

Author: ocots

docs/make.jl

@@ -128,9 +128,7 @@ Draft = false
 ```
 =#
 makedocs(;
-    draft=false,
-    #draft=true,
-    #warnonly=[:cross_references, :autodocs_block],
+    draft=true,
     sitename="OptimalControl.jl",
     format=Documenter.HTML(;
         repolink="https://" * repo_url,
@@ -141,6 +139,7 @@ makedocs(;
         assets=[
             asset("https://control-toolbox.org/assets/css/documentation.css"),
             asset("https://control-toolbox.org/assets/js/documentation.js"),
+            "assets/custom.css",
         ],
     ),
     pages=[

docs/src/assets/custom.css

@@ -0,0 +1,36 @@
+/* Responsive layout for two-column content */
+.responsive-columns-left-priority {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    margin-bottom: 1em;
+}
+
+.responsive-columns-left-priority > div {
+    flex: 1;
+    min-width: 0;
+    transition: opacity 0.5s ease-in-out, flex 0.5s ease-in-out, max-width 0.5s ease-in-out, max-height 0.5s ease-in-out;
+}
+
+.responsive-columns-left-priority > div:last-child {
+    opacity: 1;
+    max-width: 100%;
+    max-height: none;
+}
+
+/* Media query for screens smaller than 700px */
+@media (max-width: 700px) {
+    .responsive-columns-left-priority > div:last-child {
+        opacity: 0;
+        max-width: 0;
+        max-height: 0;
+        flex: 0 0 0;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+    }
+    
+    .responsive-columns-left-priority > div:first-child {
+        flex: 1 1 100%;
+    }
+}

docs/src/example-double-integrator-energy.md

@@ -34,8 +34,8 @@ using Plots
 Let us define the problem with the [`@def`](@ref) macro:
 
 ```@raw html
-<div style="display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1em;">
-<div style="flex: 1;">
+<div class="responsive-columns-left-priority">
+<div>
 ```
 
 ```@example main
@@ -57,7 +57,7 @@ nothing # hide
 
 ```@raw html
 </div>
-<div style="flex: 1;">
+<div>
 ```
 
 ### Mathematical formulation
@@ -68,7 +68,8 @@ nothing # hide
         & \text{subject to} \\
         & && \dot{x}_1(t) = x_2(t), \\[0.5em]
         & && \dot{x}_2(t) = u(t), \\[1.0em]
-        & && x(0) = (-1,0), \quad x(1) = (0,0).
+        & && x(0) = (-1,0), \\[0.5em] 
+        & && x(1) = (0,0).
     \end{aligned}
 ```
 

docs/src/example-double-integrator-time.md

@@ -33,8 +33,8 @@ using Plots
 Let us define the problem:
 
 ```@raw html
-<div style="display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1em;">
-<div style="flex: 1;">
+<div class="responsive-columns-left-priority">
+<div>
 ```
 
 ```@example main
@@ -62,7 +62,7 @@ nothing # hide
 
 ```@raw html
 </div>
-<div style="flex: 1;">
+<div>
 ```
 
 ### Mathematical formulation