Simplify the community page.

_includes/community-resource.html

@@ -1,13 +1,11 @@
-  <div class="resource col-sm-6 col-md-12">
+  <div class="resource">
     <div class="resource-content">
-      <div class="col-md-2">
-        <a href="{{ include.url }}"><img src="{{ include.src }}" class="resource-logo" alt="{{ include.alt }}"></a>
-      </div>
-      <div class="col-md-8 resource-text">
+      <a href="{{ include.url }}"><img src="{{ include.src }}" class="resource-logo" alt="{{ include.alt }}"></a>
+      <div class="resource-text">
         <h3 class="resource-name"><a href="{{ include.url }}">{{ include.title }}</a></h3>
         <p class="resource-desc">{{ include.description }}</p>
       </div>
-      <div class="col-md-2 resource-button">
+      <div class="resource-button">
         <a href="{{ include.url }}">View</a>
       </div>
     </div>

_sass/components/_community-resource.scss

@@ -1,37 +1,40 @@
 @import "settings/colors";
-@import "settings/breakpoints";
 
+// A one-column list of resource cards. The container background shows
+// through the 1px gaps between the white cards, drawing divider lines
+// between the cards but not around them.
 .resourcelist {
-  display: table;
-  clear: both;
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1px;
+  background-color: #e8e8e8;
 }
 
 .resource {
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #fff;
   padding: 16px;
-  vertical-align: middle;
-  &:last-child {
-    border-bottom: none;
-  }
-  .resource-text {
-    text-align: left;
-    vertical-align: middle;
+  // Each resource is a horizontal row: logo | text | button.
+  .resource-content {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 24px;
   }
   .resource-logo {
     display: block;
-    height: 80px !important;
+    height: 80px;
     margin: 0 auto;
   }
   .resource-name {
     margin-top: 6px;
   }
   .resource-button {
-    margin-top: 32px;
-    text-align: center;
     a {
       background-color: $button-orange;
       border-radius: 2px;
       color: white;
+      display: inline-block;
       letter-spacing: 1px;
       padding: 13px;
       text-decoration: none;
@@ -46,23 +49,18 @@
   }
 }
 
-@media (max-width: $breakpoint-l) {
+// Once the list is too narrow to give the text a comfortable share of
+// the row, stack each card vertically instead. The threshold is measured
+// against the list's own width in characters, so it follows the text
+// size rather than any particular device width.
+@container (max-width: 70ch) {
   .resource {
-    height: 400px;
-    padding: 10px 0 30px;
-    &:nth-child(even) {
-      border-left: 1px solid #e8e8e8;
-    }
-    img {
-      margin-top: 15px;
-      padding-bottom: 0;
-    }
     .resource-content {
-      padding-top: 48px;
-    }
-    .resource-text {
-      padding-top: 0;
+      display: flex;
+      flex-direction: column;
       text-align: center;
+      // The row layout's 24px gap is too roomy when stacked vertically.
+      gap: 4px;
     }
   }
 }

_sass/components/_copy.scss

@@ -1,12 +1,19 @@
 @import "settings/fonts";
 
 p,
-summary {
+summary,
+li {
   font-family: $font-family-sans-serif;
   // Increase font size for easier reading + a11y
   font-size: 18px;
   font-weight: 400;
   line-height: 1.5;
+}
+
+// Margin is kept off list items so navigation and other tight lists
+// keep their own spacing.
+p,
+summary {
   margin: 0 0 10px;
 }
 

_sass/components/_headlines.scss

@@ -1,6 +1,6 @@
 @import "settings/fonts";
 
-h1, h2, h3 {
+h1, h2, h3, h4, h5, h6 {
   font-family: $font-family-sans-serif;
   font-weight: 500;
   line-height: 1.3;
@@ -20,3 +20,9 @@ h3 {
   font-size: 2rem;
 }
 
+// Body copy is 18px (1.8rem); lower-level headings match it and rely on
+// weight and spacing to stand out, rather than dropping below it.
+h4, h5, h6 {
+  font-size: 1.8rem;
+}
+

community.md

@@ -6,22 +6,22 @@ permalink: /community
 
 channels:
   - title: Jupyter Chatroom
-    description: For real-time discussion project-wide. Also used by several sub-projects for their team conversation.
+    description: A chat for real-time discussion.
     src: assets/community/zulip-icon.svg
     alt: Zulip logo
     url: https://jupyter.zulipchat.com
   - title: Jupyter Forum
-    description: A forum for asynchronous communication across the Jupyter community and many of its subprojects.
+    description: A forum for asynchronous communication.
     src: assets/community/discourse.svg
     alt: Discourse logo
     url: https://discourse.jupyter.org/
   - title: Jupyter GitHub
-    description: A place where the community collaborates on the development of Jupyter software.
+    description: Where the community collaborates to develop Jupyter software.
     src: assets/widgets/GitHub_Invertocat_Black.svg
     alt: GitHub logo
     url: https://github.com/jupyter/
   - title: Jupyter General Mailing List
-    description: A Google Group for general discussions of Jupyter's use.
+    description: A Google Group for email discussion.
     src: assets/community/mail-list.svg
     alt: Mailing list
     url: https://groups.google.com/forum/#!forum/jupyter
@@ -30,22 +30,19 @@ channels:
 Jupyter is an open community including educators, developers, scientists, and data enthusiasts who believe in the power of open
 tools and standards for education, research, and data analytics.
 
-In our community, we have [online spaces](#where-to-talk) and [virtual and in-person meetings](#live-events).
+* [Online spaces](#where-to-talk)
+* [Calendar of virtual and in-person events](#calendar)
 
-## Where to learn
-
-We welcome contributions and contributors of all kinds - whether they come as contributions to code, participation in the community, opening issues and pointing out bugs, or simply sharing your work with your colleagues and friends.
-
-To learn more about contributing, see the [Jupyter Contributing guide](https://docs.jupyter.org/en/latest/contributing/content-contributor.html).
+We welcome contributors of all kinds, including contributions to code, participation in the community, opening issues and pointing out bugs, or simply sharing your work with others. See the [Jupyter Contributing guide](https://docs.jupyter.org/en/latest/contributing/content-contributor.html) for more information.
 
 Jupyter is organized into sub-projects, each of which has their own goals, practices, and spaces for communication. 
 To get started, see [this list of Jupyter Subprojects](https://jupyter.org/governance/list_of_subprojects.html).
 
-## Where to talk
+## Online spaces
 
-Jupyter has a number of online communication channels as well as regular virtual and in-person events. To learn more about the Jupyter community, see the [Jupyter Community Guide](https://docs.jupyter.org/en/latest/community/content-community.html).
+Jupyter has a number of online communication channels as well as [regular virtual and in-person events](#calendar). See the [Jupyter Community Guide](https://docs.jupyter.org/en/latest/community/content-community.html) for more information.
 
-Remember that we have a strong commitment to being an **open, inclusive, and positive community**. Please read the [Jupyter Code of Conduct](https://github.com/jupyter/governance/blob/main/conduct/code_of_conduct.md)
+We have a strong commitment to being an **open, inclusive, and positive community**. Please read the [Jupyter Code of Conduct](https://github.com/jupyter/governance/blob/main/conduct/code_of_conduct.md)
 for guidance on how to interact with others.
 
 <section class="resourcelist">
@@ -60,33 +57,35 @@ for guidance on how to interact with others.
   {% endfor %}
 </section>
 
-## Live events
+## Calendar of events {#calendar}
 
-Project Jupyter events provide a forum for community members to come together in person
-or virtually to share and learn from each other.
-
-### Calendar
-
-This is a calendar of regular online and in-person events.
+Visitors are welcome to join our virtual and in-person events. Click on an event to see the connection or registration information.
 
 <div class="iframe-container">
   <iframe title="Calendar of Project Jupyter events" class="responsive-iframe" id="calendariframe" src="https://calendar.google.com/calendar/embed?height=600&wkst=1&title=Project%20Jupyter&src=bTNoZWs2OWRhZzczODF1bXQ4a2NqZDc1dTRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=Y184YWIxNzY1YjY1ODY3NDVkOGI3NWU5MmJkYzdjYTZlNDZjYWExMmE1ZjhkOTUwZDVmNzNmMzI2Zjk3NjE0NGQ3QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&src=YXFwa3VpNXE3b2kzMnBrOXRjcDUzaG5zc2NAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%23AD1457&color=%239E69AF&color=%23616161" style="border:0;overflow:hidden" width="800" height="600"></iframe>
 </div>
 <script>document.getElementById("calendariframe").src = document.getElementById("calendariframe").src.replace("ctz=local", "ctz=" + Intl.DateTimeFormat().resolvedOptions().timeZone)</script>
 
-See [this page](https://jupyter.readthedocs.io/en/latest/community/content-community.html#jupyter-wide-meetings) for
-more information.
+## Past Events
+
+Project Jupyter events provide a forum for community members to come together in person
+or virtually to share and learn from each other.
 
 ### JupyterCon
 
 Global JupyterCon conferences provide opportunities for the Jupyter community to come together to learn and share.
 
+<details markdown="1">
+<summary>See past JupyterCon conferences.</summary>
+
 * [JupyterCon 2017 (New York)](https://conferences.oreilly.com/jupyter/jup-ny-2017.html) ([videos](https://www.youtube.com/playlist?list=PL055Epbe6d5aP6Ru42r7hk68GTSaclYgi))
 * [JupyterCon 2018 (New York)](https://conferences.oreilly.com/jupyter/jup-ny.html) ([videos](https://www.youtube.com/playlist?list=PL055Epbe6d5b572IRmYAHkUgcq3y6K3Ae))
 * [JupyterCon 2020 (virtual)](https://jupytercon.com/) ([videos](https://www.youtube.com/c/JupyterCon/videos))
 * [JupyterCon 2023 (Paris)](https://web.archive.org/web/20230715062821/https://www.jupytercon.com) ([videos](https://youtube.com/playlist?list=PL_1BH3ug7n1Ih_Yy2TmM7MZ2zogSLZvzE&si=drGUpsbcpZihlo-t))
 * [JupyterCon 2025 (San Diego)](https://events.linuxfoundation.org/jupytercon/) ([videos](https://youtube.com/playlist?list=PL_1BH3ug7n1LbTQg67bUAK5qEBB3LVgbT&si=no6qhQNXMesAnMDt))
 
+</details>
+
 ### Jupyter Community Workshops
 
 [Jupyter Community Workshops](https://blog.jupyter.org/jupyter-community-workshops-cbd34ac82549)