Fix linting errors, hide logos on smaller screens and refactor med sc…

…reen resources layout
canonical · Nov 26, 2024 · 5410fe3 · 5410fe3
1 parent 6af4cc0
commit 5410fe3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 35 deletions.
diff --git a/templates/ceph/components/benefits-table.html b/templates/ceph/components/benefits-table.html
@@ -30,23 +30,24 @@
       <td>Ceph Reef 18.2.x</td>
       <td class="u-darker-background">
         Ceph Squid 19.2.x *<span class="u-off-screen">Release supported under full LTS commitment</span>
-      </tr>
-      <tr>
-        <td>Ceph Pacific 16.2.x</td>
-        <td class="u-darker-background">
-          Ceph Quincy 17.2.x *<span class="u-off-screen">Release supported under full LTS commitment</span>
-        </td>
-        <td aria-hidden="true">&ndash;</td>
-      </tr>
-      <tr>
-        <td class="u-darker-background">
-          Ceph Octopus 15.2.x *<span class="u-off-screen">Release supported under full LTS commitment</span>
-        </td>
-        <td aria-hidden="true">&ndash;</td>
-        <td aria-hidden="true">&ndash;</td>
-      </tr>
-    </tbody>
-  </table>
-  <hr class="p-rule--muted" />
-  <p class="u-text--muted">The Ubuntu and Ceph support cadence</p>
-  <i class="u-text--muted" aria-hidden="true">* Releases denoted with an asterisk are supported under the full LTS commitment.</i>
+      </td>
+    </tr>
+    <tr>
+      <td>Ceph Pacific 16.2.x</td>
+      <td class="u-darker-background">
+        Ceph Quincy 17.2.x *<span class="u-off-screen">Release supported under full LTS commitment</span>
+      </td>
+      <td aria-hidden="true">&ndash;</td>
+    </tr>
+    <tr>
+      <td class="u-darker-background">
+        Ceph Octopus 15.2.x *<span class="u-off-screen">Release supported under full LTS commitment</span>
+      </td>
+      <td aria-hidden="true">&ndash;</td>
+      <td aria-hidden="true">&ndash;</td>
+    </tr>
+  </tbody>
+</table>
+<hr class="p-rule--muted" />
+<p class="u-text--muted">The Ubuntu and Ceph support cadence</p>
+<i class="u-text--muted" aria-hidden="true">* Releases denoted with an asterisk are supported under the full LTS commitment.</i>
diff --git a/templates/ceph/index.html b/templates/ceph/index.html
@@ -90,7 +90,7 @@ <h2>
       <div class="col">
         <div class="row">
           <div class="col-3">
-            <div class="p-image-container is-highlighted">
+            <div class="p-image-container is-highlighted u-hide--medium u-hide--small">
               {{ image(url="https://assets.ubuntu.com/v1/9eff1bee-yahoo.png",
                             alt="",
                             width="852",
@@ -111,7 +111,7 @@ <h2>
             </div>
           </div>
           <div class="col-3">
-            <div class="p-image-container is-highlighted">
+            <div class="p-image-container is-highlighted u-hide--medium u-hide--small">
               {{ image(url="https://assets.ubuntu.com/v1/0f81a8ab-wellcome%20sanger%20institute.png",
                             alt="",
                             width="852",
@@ -521,24 +521,29 @@ <h3 class="p-heading--5">Webinar</h3>
                 <a href="https://www.brighttalk.com/webcast/6793/520582">Ceph for Enterprise</a>
               </li>
             </ul>
-          </p>
+          </div>
         </div>
       </div>
-      <hr class="p-rule--muted" />
       <div class="row">
-        <div class="col-2 col-medium-3">
-          <h3 class="p-heading--5">Whitepapers</h3>
-        </div>
-        <div class="col-4 col-medium-3">
-          <ul class="p-list--divided">
-            <li class="p-list__item">
-              <a href="/engage/introduction-to-cloud-native-storage">Introduction to cloud-native storage</a>
-            </li>
-            <li class="p-list__item">
-              <a href="/engage/optimize-cloud-storage-costs">Cloud storage cost optimization</a>
-            </ul>
+        <div class="col-start-large-7 col-6 col-start-medium-4 col-medium-3">
+          <hr class="p-rule--muted" />
+          <div class="row">
+            <div class="col-2 col-medium-3 ">
+              <h3 class="p-heading--5">Whitepapers</h3>
+            </div>
+            <div class="col-4 col-medium-3">
+              <ul class="p-list--divided">
+                <li class="p-list__item">
+                  <a href="/engage/introduction-to-cloud-native-storage">Introduction to cloud-native storage</a>
+                </li>
+                <li class="p-list__item">
+                  <a href="/engage/optimize-cloud-storage-costs">Cloud storage cost optimization</a>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
+
       </div>
     </div>
   </section>