fix(style): fix mobile style bugs

index.html

@@ -85,6 +85,7 @@
       siteMenus({
         items: siteItems,
         target: document.getElementById("site-menus"),
+        siteName: "Resources",
       });
 
       resourceCatalog({

src/components.css

@@ -1,9 +1,28 @@
-.flex-header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
 .highlight {
   background-color: var(--yellow-200);
   padding: 2px 0;
 }
+.header-components {
+  margin-bottom: 2rem;
+}
+.button-group .btn {
+  display: block;
+  margin: 0 0 10px;
+}
+@media (min-width: 768px) {
+  .flex-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .header-components {
+    margin-bottom: 0;
+  }
+  .button-group {
+    display: flex;
+  }
+  .button-group .btn {
+    display: flex;
+    margin: 0 10px 0 0;
+  }
+}

src/resource-group-affinity-group.jsx

@@ -15,17 +15,19 @@ export default function ResourceGroupAffinityGroup({ baseUri, infoGroupId }) {
         Join the community by participating in an affinity group! Members get
         update about announcements, events, and outages.
       </p>
-      <a href="https://support.access-ci.org/user" class="btn secondary">
-        <Icon name="person-plus-fill" /> Join Affinity Group
-      </a>
-      {slackUri ? (
-        <a href={slackUri} class="btn">
-          <Icon name="slack" /> Connect on Slack
+      <div class="button-group">
+        <a href="https://support.access-ci.org/user" class="btn secondary">
+          <Icon name="person-plus-fill" /> Join Affinity Group
         </a>
-      ) : null}
-      <a href="#questions-and-answers" class="btn">
-        <Icon name="chat-fill" /> Ask and Answer Questions
-      </a>
+        {slackUri ? (
+          <a href={slackUri} class="btn">
+            <Icon name="slack" /> Connect on Slack
+          </a>
+        ) : null}
+        <a href="#questions-and-answers" class="btn">
+          <Icon name="chat-fill" /> Ask and Answer Questions
+        </a>
+      </div>
     </Section>
   );
 }

src/resource-group.css

@@ -1,12 +1,13 @@
 /* Resource home page */
 .resource-group {
   align-items: flex-start;
+  clear: both;
   display: flex;
-  flex-direction: row;
-  margin-bottom: 40px;
+  flex-direction: column;
+  margin-bottom: 20px;
 }
 .resource-group-image {
-  --image-width: calc((var(--width) - 140px) / 4 + 20px);
+  --image-width: 100%;
   align-items: center;
   background-color: var(--contrast-9);
   border: 1px solid var(--contrast);
@@ -16,7 +17,7 @@
   flex-direction: column;
   font-size: 5rem;
   justify-content: center;
-  margin-right: 20px;
+  margin: 20px 0;
   min-height: calc(var(--image-width) / 3 * 2);
   position: relative;
   width: var(--image-width);
@@ -26,7 +27,6 @@
 .resource-group-image:hover {
   color: var(--contrast-8);
 }
-
 .resource-group-image > img {
   display: block;
   width: 100%;
@@ -51,13 +51,24 @@
 }
 .resource-group-feature-image {
   margin-top: 60px;
+  width: 100%;
 }
 .resource-group-description::after {
   clear: both;
   content: "";
   display: block;
 }
 
+@media (min-width: 768px) {
+  .resource-group {
+    flex-direction: row;
+    margin-bottom: 40px;
+  }
+  .resource-group-image {
+    --image-width: calc((var(--width) - 140px) / 4 + 20px);
+    margin: 0 20px 0 0;
+  }
+}
 @media (min-width: 900px) {
   .resource-group-feature-image {
     float: right;

src/section.jsx

@@ -26,7 +26,9 @@ export default function Section({
           {icon ? <Icon name={icon} /> : null}
           {title}
         </h2>
-        <div>{headerComponents}</div>
+        {headerComponents ? (
+          <div class="header-components">{headerComponents}</div>
+        ) : null}
       </div>
       {children}
     </section>