Added missing rules between cells

Author: fredericsimard

overrides/assets/landing/home.css

@@ -417,12 +417,24 @@
 }
 
 .whichstandard__item {
-  /* borders like your original */
-  border-top: 2px solid var(--md-secondary-fg-color-white);
+  border-top: 4px solid var(--md-secondary-fg-color-gray);
 }
 
 .whichstandard__item:last-child {
-  border-bottom: 2px solid var(--md-secondary-fg-color-white);
+  border-bottom: 4px solid var(--md-secondary-fg-color-gray);
+}
+
+.whichstandard__rule,
+.whichstandard__rule-bottom {
+  display: block;
+  grid-column: 1 / -1;
+  height: 4px;
+  background: var(--md-secondary-fg-color-gray);
+  margin: 0;
+}
+
+.whichstandard__item--no-icon .whichstandard__rule {
+  display: none !important;
 }
 
 /* Columns placement */

overrides/home.html

@@ -45,10 +45,11 @@ <h1 style="color:#0A0A0A;">{{text.t("section1Title")}}</h1>
                     <h3>{{text.t("section1Subtitle1")}}</h3>
                 </div>
                 <div class="whichstandard__arrow">
+                    <!-- green arrow -->
                     <img src="/assets/landing/arrow-gofs-green.svg" alt="" />
                 </div>
                 <div class="whichstandard__answer">
-                    <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock1")}}</h3>
+                    <h3 class="light">{{text.t("section1TextBlock1")}}</h3>
                 </div>
             </li>
 
@@ -61,15 +62,15 @@ <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock1")}}</h3>
                         alt="Zone based microtransit icon" />
                 </div>
                 <div class="whichstandard__what">
-                    <h3 style="margin-top:15px;">{{text.t("section1Subtitle2")}}</h3>
+                    <h3>{{text.t("section1Subtitle2")}}</h3>
                     <h3 class="light">{{text.t("section1Subtitle2part2")}}</h3>
                 </div>
                 <div class="whichstandard__arrow">
                     <!-- green arrow -->
                     <img src="/assets/landing/arrow-gofs-green.svg" alt="" />
                 </div>
                 <div class="whichstandard__answer">
-                    <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock2")}}</h3>
+                    <h3 class="light">{{text.t("section1TextBlock2")}}</h3>
                 </div>
             </li>
 
@@ -81,15 +82,15 @@ <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock2")}}</h3>
                     <img src="/assets/landing/gofs-icon-predefined-routes.svg" alt="Zone based microtransit icon" />
                 </div>
                 <div class="whichstandard__what">
-                    <h3 style="margin-top:25px;">{{text.t("section1Subtitle3")}}</h3>
+                    <h3>{{text.t("section1Subtitle3")}}</h3>
                     <h3 class="light">{{text.t("section1Subtitle3part2")}}</h3>
                 </div>
                 <div class="whichstandard__arrow" style="margin-top:5px;">
                     <!-- green arrow -->
                     <img src="/assets/landing/arrow-gofs-green.svg" alt="" />
                 </div>
                 <div class="whichstandard__answer">
-                    <h3 class="light" style="margin-top:25px;">{{text.t("section1TextBlock3")}}</h3>
+                    <h3 class="light">{{text.t("section1TextBlock3")}}</h3>
                 </div>
             </li>
 
@@ -104,7 +105,7 @@ <h3>{{text.t("section1Subtitle4")}}</h3>
                     <img src="/assets/landing/arrow-gofs-green.svg" alt="" />
                 </div>
                 <div class="whichstandard__answer">
-                    <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock3part3")}}</h3>
+                    <h3 class="light">{{text.t("section1TextBlock3part3")}}</h3>
                 </div>
             </li>
 
@@ -122,7 +123,7 @@ <h3>{{text.t("section1Subtitle5")}}</h3>
                     <img src="/assets/landing/arrow-gofs-green.svg" alt="" />
                 </div>
                 <div class="whichstandard__answer">
-                    <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock5")}}</h3>
+                    <h3 class="light">{{text.t("section1TextBlock5")}}</h3>
                 </div>
             </li>
 
@@ -134,16 +135,21 @@ <h3 class="light" style="margin-top:15px;">{{text.t("section1TextBlock5")}}</h3>
                     <img src="/assets/landing/gofs-icon-self-service-vehicles.svg" alt="Self-service vehicles" />
                 </div>
                 <div class="whichstandard__what">
-                    <h3 style="margin-top:17px;">{{text.t("section1Subtitle6")}}</h3>
+                    <h3>{{text.t("section1Subtitle6")}}</h3>
                     <h3 class="light">{{text.t("section1Subtitle6part2")}}</h3>
                 </div>
                 <div class="whichstandard__arrow" style="margin-top:3px;">
                     <img src="/assets/landing/arrow-gofs-green.svg" alt="" />
                 </div>
                 <div class="whichstandard__answer">
-                    <h3 class="light" style="margin-top:17px;">{{text.t("section1TextBlock6")}}</h3>
+                    <h3 class="light">{{text.t("section1TextBlock6")}}</h3>
                 </div>
             </li>
+
+            <!-- Row 7 - fake, only to add last rule -->
+            <li class="whichstandard__item">
+                <div class="whichstandard__rule" aria-hidden="true"></div>
+            </li>
         </ul>
     </div>
 </section>