feat(ui): Use a better grid system for the big layout.

Because I know use `content-grid`, I can easily re-use it in expandable
things and so on. It makes things much much cleaner and predictable.

Author: Hywan

hub/ui/index.html

@@ -190,7 +190,7 @@ <h3 class="thing--frame-name"><slot name="name">(unnamed)</slot></h3>
           </svg>
         </div>
       </div>
-      <div slot="long-thing">
+      <div slot="long-thing" class="content-grid">
         <div class="things">
           <div class="things--list">
             <div class="thing--frame thing--text">
@@ -278,7 +278,7 @@ <h3 class="thing--frame-name"><slot name="name">(unnamed)</slot></h3>
           </div>
         </div>
       </div>
-      <div slot="long-thing">
+      <div slot="long-thing" class="content-grid">
         <h4>Données actuelles</h4>
 
         <my-unlocated-things>
@@ -379,26 +379,26 @@ <h4>Prévisions météorologiques</h4>
           <div class="thing--weather-one-forecast" data-bind-loop="forecast in forecasts" data-bind-attributes data-bind:data-temperature-category="forecast.temperature_category">
             <h5 class="thing--weather-one-forecast--datetime"><span data-bind="forecast.date_hour">(?)</span>h<span data-bind="forecast.date_extra">(?)</span></h5>
 
-            <h6 class="thing--weather-one-forecast--title"><span>Ciel</span></h6>
+            <h6 class="thing--weather-one-forecast--title"><span><span>Ciel</span></span></h6>
 
             <div class="thing--weather-one-forecast--condition-icon"><svg><use data-bind-attributes data-bind:href="forecast.condition_icon" /></svg></div>
             <div class="thing--weather-one-forecast--condition" data-bind="forecast.condition">(?)</div>
             <div class="thing--weather-one-forecast--cloudiness" data-bind="forecast.octas">(?)</div>
             <div class="thing--weather-one-forecast--precipitations"><span data-bind="forecast.precipitations">(?)</span>mm</div>
             <div class="thing--weather-one-forecast--uv-index"><span data-bind="forecast.uv_index">(?)</span>UV<sub>ix</sub></div>
 
-            <h6 class="thing--weather-one-forecast--title"><span>Températures</span></h6>
+            <h6 class="thing--weather-one-forecast--title"><span><span>Températures</span></span></h6>
 
             <div class="thing--weather-one-forecast--temperature"><span data-bind="forecast.temperature">(?)</span>°C</div>
             <div class="thing--weather-one-forecast--apparent-temperature">(<span data-bind="forecast.apparent_temperature">(?)</span>°C)</div>
 
-            <h6 class="thing--weather-one-forecast--title"><span>Air</span></h6>
+            <h6 class="thing--weather-one-forecast--title"><span><span>Air</span></span></h6>
 
             <div class="thing--weather-one-forecast--humidity"><span data-bind="forecast.humidity">(?)</span>%H</div>
             <div class="thing--weather-one-forecast--pressure"><span data-bind="forecast.pressure">(?)</span>hPa</div>
             <div class="thing--weather-one-forecast--dew-point"><span data-bind="forecast.dew_point">(?)></span>°C</div>
 
-            <h6 class="thing--weather-one-forecast--title"><span>Vent</span></h6>
+            <h6 class="thing--weather-one-forecast--title"><span><span>Vent</span></span></h6>
 
             <div class="thing--weather-one-forecast--wind-speed"><span data-bind="forecast.wind">(?)</span>m/s</div>
             <div class="thing--weather-one-forecast--wind-gust">(<span data-bind="forecast.wind_gust">(?)</span>m/s)</div>
@@ -431,7 +431,7 @@ <h6 class="thing--weather-one-forecast--title"><span>Vent</span></h6>
           <div slot="meter-gradient" class="gradient gradient--conic__yellow_to_green"></div>
         </my-meter-thing>
       </my-thing>
-      <div slot="long-thing">
+      <div slot="long-thing" class="content-grid">
         <h4><span data-bind="vehicle_nickname">?</span> <small class="label" data-bind="vehicle_vin">?</small></h4>
 
         <svg viewBox="0 0 340 150.4" class="thing--car--car">
@@ -710,8 +710,8 @@ <h3 class="thing--frame-name">
   <script src="static/javascript/sunrise.js" defer></script>
   <script src="static/javascript/main.js" defer></script>
 </head>
-<body>
-  <header class="header--container">
+<body class="content-grid">
+  <header class="full-width content-grid header--container">
     <div class="header">
       <my-nav id="nav" role="nav">
         <span slot="root">La Maison Vivante</span>

hub/ui/static/style/main.css

@@ -93,37 +93,59 @@ html {
 }
 
 body {
-    --body--gutter: var(--space);
+    font: 1.1em/1.4em text;
+    font-weight: 400;
+}
+
+.content-grid {
+    --padding-inline: var(--space);
+    --content-max-width: 45rem;
+    --breakout-max-width: 50rem;
+
+    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
 
     display: grid;
-    grid-template: "header"
-                   "main";
-    grid-template-rows: auto 1fr;
-    margin: 0 auto;
-    padding: 0 var(--body--gutter);
-    min-height: 100%;
-    max-width: 50rem;
+    grid-template-columns:
+        [full-width-start]
+            minmax(var(--padding-inline), 1fr)
+            [breakout-start]
+                minmax(0, var(--breakout-size))
+                [content-start]
+                    min(
+                        100% - (var(--padding-inline) * 2),
+                        var(--content-max-width)
+                    )
+                [content-end]
+                minmax(0, var(--breakout-size))
+            [breakout-end]
+            minmax(var(--padding-inline), 1fr)
+        [full-width-end];
+}
 
-    font: 1.1em/1.4em text;
-    font-weight: 400;
+.content-grid > * {
+    grid-column: content;
+}
+
+.content-grid > .breakout {
+    grid-column: breakout;
+}
+
+.content-grid > .full-width {
+    grid-column: full-width;
 }
 
 .header--container {
     position: sticky;
-    z-index: 20;
+    z-index: calc(infinity);
     top: 0;
-    isolate: isolation;
     margin-bottom: var(--space-large);
 }
 
 .header--container::before {
     content: '';
     position: absolute;
     z-index: -1;
-    top: 0;
-    right: calc(-1 * var(--body--gutter));
-    bottom: 0;
-    left: calc(-1 * var(--body--gutter));
+    inset: 0;
     background: var(--color-light-000-transparent);
 }
 
@@ -136,12 +158,9 @@ body {
     }
 
 .header {
-    grid-area: header;
-
     display: grid;
-    grid-template: "header-title header-details";
+    grid-template: "title details";
 
-    max-width: 50rem;
     font-weight: 600;
     line-height: var(--space-very-large);
 }
@@ -151,7 +170,7 @@ body {
     }
 
     .header--title {
-        grid-area: header-title;
+        grid-area: title;
         font-size: 120%;
     }
 
@@ -171,7 +190,7 @@ body {
         }
 
     .header--details {
-        grid-area: header-details;
+        grid-area: details;
         text-align: end;
         list-style: none;
     }
@@ -200,10 +219,6 @@ body {
     display: none;
 }
 
-main {
-    grid-area: main;
-}
-
 .things--location {
     display: block;
     margin-block-end: var(--space-large);
@@ -341,22 +356,15 @@ main {
     }
 
     .thing--expandable[aria-expanded = "true"] > .thing--expandable-long {
-        --thing--expandable-long--gutter: var(--space-large);
-
         position: fixed;
         z-index: 9;
-        top: var(--space-very-large);
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset: var(--space-very-large) 0 0;
 
         visibility: visible;
         opacity: 1;
         transform: translateY(0);
         overflow: auto;
 
-        padding: var(--space) var(--thing--expandable-long--gutter);
-
         transition:
             transform var(--transition-duration) var(--transition-bezier),
             opacity var(--transition-duration) var(--transition-bezier);
@@ -611,13 +619,17 @@ main {
 
 .thing--weather-forecast {
     --thing--weather-forecast--gutter: var(--space-large);
+    --thing--weather-forecast--column-width: 6rem;
+
+    position: relative;
 
     display: grid;
     grid-auto-flow: column;
-    grid-auto-columns: 6rem;
+    grid-auto-columns: var(--thing--weather-forecast--column-width);
     overflow-x: auto;
     overscroll-behavior-inline: contain;
     scroll-snap-type: x mandatory;
+    isolation: isolate;
 
     margin: var(--space-very-large) 0;
     border-radius: var(--space-small);
@@ -680,23 +692,26 @@ main {
     .thing--weather-forecast > .thing--weather-one-forecast > .thing--weather-one-forecast--title {
         flex: 2;
         font-size: var(--font-size-secondary);
+        text-align: start;
         margin: var(--space) 0 var(--space-very-small);
-        position: relative;
+        transform: translateX(-.5rem) translateY(-.5rem);
+    }
+
+    .thing--weather-forecast > .thing--weather-one-forecast:not(:first-child) > .thing--weather-one-forecast--title {
         visibility: hidden;
     }
 
     .thing--weather-forecast > .thing--weather-one-forecast:first-child > .thing--weather-one-forecast--title > span {
-        visibility: visible;
-        position: fixed;
-        transform: translateY(-.5rem);
-        left: var(--thing--expandable-long--gutter);
-        right: var(--thing--expandable-long--gutter);
-
+        position: absolute;
+        left: 0;
+        width: calc(48 * var(--thing--weather-forecast--column-width));
         padding: .2rem 0 .2rem .5rem;
-        text-align: start;
         background: var(--color-light-000-transparent);
+    }
 
-        pointer-events: none;
+    .thing--weather-forecast > .thing--weather-one-forecast:first-child > .thing--weather-one-forecast--title > span > span {
+        position: sticky;
+        left: .5rem;
     }
 
     .thing--weather-forecast .thing--weather-one-forecast--datetime {