Enhance OUDS Web grid system example

Orange-OpenSource · Oct 23, 2024 · c2b0a2a · c2b0a2a
1 parent fa8bf0d
commit c2b0a2a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/site/content/docs/0.0/examples/grid-system/grid-system.css b/site/content/docs/0.0/examples/grid-system/grid-system.css
@@ -8,6 +8,10 @@
   height: 20px;
 }
 
+.row {
+  min-height: 150px;
+}
+
 .bg-example {
   background-color: #ff9f9f;
 }

diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html
@@ -9,19 +9,15 @@
 ---
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="warning-important-accessible">
-    <path
-      d="M499.352 125a93.95 93.95 0 0 1 81.072 46.494L908.91 733.919A93.676 93.676 0 0 1 827.838 874.9H170.867A93.711 93.711 0 0 1 89.8 733.919l.8-1.3v-.1l327.681-561.025A93.83 93.83 0 0 1 499.352 125"/>
-    <path fill="#000"
-          d="M500.352 679.926a47.494 47.494 0 1 0 47.484 47.494 47.53 47.53 0 0 0-47.484-47.494m0-379.949a47.53 47.53 0 0 0-47.483 47.493 28 28 0 0 0 .1 2.9l15.694 258.665v.5c.3 17.1 14.395 23.5 31.689 23.5 17.494 0 31.689-6.6 31.689-24l15.695-258.065.1-.9a23 23 0 0 0 .1-2.6 47.68 47.68 0 0 0-47.583-47.493"/>
+    <path d="M499.352 125a93.95 93.95 0 0 1 81.072 46.494L908.91 733.919A93.676 93.676 0 0 1 827.838 874.9H170.867A93.711 93.711 0 0 1 89.8 733.919l.8-1.3v-.1l327.681-561.025A93.83 93.83 0 0 1 499.352 125"/>
+    <path fill="#000" d="M500.352 679.926a47.494 47.494 0 1 0 47.484 47.494 47.53 47.53 0 0 0-47.484-47.494m0-379.949a47.53 47.53 0 0 0-47.483 47.493 28 28 0 0 0 .1 2.9l15.694 258.665v.5c.3 17.1 14.395 23.5 31.689 23.5 17.494 0 31.689-6.6 31.689-24l15.695-258.065.1-.9a23 23 0 0 0 .1-2.6 47.68 47.68 0 0 0-47.583-47.493"/>
   </symbol>
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="info">
-    <path
-      d="M500 75.5c-234.72 0-425 190.28-425 425s190.28 425 425 425 425-190.28 425-425-190.28-425-425-425m0 100a75 75 0 1 1-75 75 75 75 0 0 1 75-75m125 600H400v-25.737l5.287-.167c15.555-.5 27.115-4.919 34.368-13.136 2.576-2.972 6.956-13.1 6.956-47.153v-227.2c0-32.392-4.523-44.6-8.311-49.141-5.359-6.391-16.516-10.147-33.17-11.156l-5.13-.31v-26h175v313.807c0 32.415 8.457 44.618 12.24 49.142 5.34 6.389 15.68 10.142 32.625 11.152l5.135.3v25.6Z"
-      style="fill-rule:evenodd"/>
+    <path d="M500 75.5c-234.72 0-425 190.28-425 425s190.28 425 425 425 425-190.28 425-425-190.28-425-425-425m0 100a75 75 0 1 1-75 75 75 75 0 0 1 75-75m125 600H400v-25.737l5.287-.167c15.555-.5 27.115-4.919 34.368-13.136 2.576-2.972 6.956-13.1 6.956-47.153v-227.2c0-32.392-4.523-44.6-8.311-49.141-5.359-6.391-16.516-10.147-33.17-11.156l-5.13-.31v-26h175v313.807c0 32.415 8.457 44.618 12.24 49.142 5.34 6.389 15.68 10.142 32.625 11.152l5.135.3v25.6Z" style="fill-rule: evenodd"/>
   </symbol>
 </svg>
 
-<main style="min-height: 100vh">
+<main class="min-vh-100">
   <div class="container-fluid container-max-width pt-4">
     <h1>OUDS Web grid system example</h1>
     <p class="lead">Use this page to see how containers behave while resizing the browser.</p>
@@ -45,7 +41,7 @@ <h2>Default grid</h2>
   </div>
   <div class="bg-example py-3">
     <div class="container-fluid container-max-width bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -70,7 +66,7 @@ <h2>Need more space?</h2>
   </div>
   <div class="bg-example py-3">
     <div class="container-fluid bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -96,7 +92,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -117,7 +113,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-xs bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -138,7 +134,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-sm bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -159,7 +155,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-md bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -180,7 +176,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-lg bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -201,7 +197,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-xl bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -222,7 +218,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-2xl bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
@@ -243,7 +239,7 @@ <h2>Need more space?</h2>
 
   <div class="bg-example py-3">
     <div class="container-3xl bg-light">
-      <div class="row" style="min-height: 150px">
+      <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>