Updates to layout for mobile. (#760)

Author: kattni

docs/en/stylesheets/beeware.css

@@ -55,8 +55,13 @@ md-path__list > .md-path__item > .md-path__link {
 }
 
 .md-sidebar--primary:is([hidden]) ~ .md-content {
-    margin-left: 6.75rem;
-    margin-right: 6.75rem;
+    margin-left: 6.7%;
+    margin-right: 6.7%;
+}
+
+/* This forces all main content EXCEPT the index page to be 45rem wide */
+.md-sidebar--primary:is([hidden]) ~ .md-content:not(:has(.md-content__inner .index-page)) {
+    max-width: 45rem;
 }
 
 .md-content__inner {
@@ -81,8 +86,8 @@ md-path__list > .md-path__item > .md-path__link {
 
 /* Website index */
 .md-content:has(.md-content__inner .index-page) {
-    margin-left: 3.3rem;
-    margin-right: 3.3rem;
+    margin-left: 3.3%;
+    margin-right: 3.3%;
 }
 
 .index-intro-full {
@@ -177,7 +182,13 @@ a.index-main-keep:hover {
     border-color: #1e7e34;;
 }
 
-@media screen and (min-width: 760px)
+@media screen and (max-width: 43rem) {
+    .index-intro-block {
+        padding: 0 1rem 0 1rem;
+    }
+}
+
+@media screen and (min-width: 800px)
 and (max-width: 1220px) {
     .index-intro-content h1 {
         font-size: 6rem;
@@ -348,13 +359,11 @@ h2#sidebar {
 
 /* Team page */
 .team-member {
-    height: 30rem;
+    margin-top: 1rem;
+    clear: both;
 }
 
 .team-image-details {
-    float: right;
-    padding-top: 2.5rem;
-    max-width: 38%;
     font-size: 0.85rem;
     line-height: 0.5rem;
 }
@@ -363,9 +372,16 @@ h2#sidebar {
     width: 230px;
 }
 
-.team-bio {
-    float: left;
-    max-width: 60%;
+@media screen and (min-width: 60rem) {
+    .team-image-details {
+        float: right;
+        max-width: 38%;
+    }
+
+    .team-bio {
+        float: left;
+        max-width: 60%;
+    }
 }
 
 .team-join,

docs/macros.py

@@ -203,15 +203,10 @@ def generate_team_members(team, page, current):
                 if member_details["join_date"]:
                     member_title = dedent(f"""\
                         <div class="team-member" markdown="1">
-                        <div class="team-bio" markdown="1">
 
                         ### {member_details["name"]} {{ #{github_id} }}
                     """)
 
-                    member_bio = (
-                        Path(page.file.src_dir) / f"about/team/{github_id}.md"
-                    ).read_text()
-
                     try:
                         mastodon = member_details["mastodon"].split("@")
                         member_image_details_mastodon = f"""<div class="team-mastodon-handle" markdown="1">{fa("mastodon", "lg", "brands")} [{member_details["mastodon"]}](https://{mastodon[2]}/@{mastodon[1]})</div>"""
@@ -222,7 +217,6 @@ def generate_team_members(team, page, current):
 
                     member_image_details = dedent(
                         f"""\
-                        </div>
                         <div class="team-image-details" markdown="1">
 
                         ![{member_details["name"]}](/{member_details["avatar"]})
@@ -234,11 +228,16 @@ def generate_team_members(team, page, current):
                         <div class="team-email" markdown="1">{fa("envelope", "lg", "solid")} <{member_details["email"]}></div>
                         </div>
                         </div>
-                        </div>
+
+                        <div class="team-bio" markdown="1">
                         """
                     )
 
-                    team_member = member_title + member_bio + member_image_details
+                    member_bio = (
+                        Path(page.file.src_dir) / f"about/team/{github_id}.md"
+                    ).read_text()
+
+                    team_member = member_title + member_image_details + member_bio + "</div></div>"
 
                     if not current and "emeritus_date" in member_details:
                         team_member_content.append(