reorganize the community page

- make layout take up move space on wide screens
- expand descriptions
move new sections ahead of coc

Author: reardonj

src/community/README.md

@@ -26,9 +26,9 @@ The Typelevel community is dedicated to providing a positive experience for ever
 @:@
 
 @:fragment(contributing)
-Learn how to get involved in Typelevel projects. Find good first issues, understand the workflow, and collaborate with maintainers.
+The projects in the Typelevel ecosystem are all open-source. Learn how to contribute to Typelevel and help maintain your favorite projects. Find good first issues, understand the workflow, and collaborate with maintainers.
 @:@
 
 @:fragment(resources)
-Explore recommended books, courses, and documentation for learning functional programming in Scala and the Typelevel ecosystem.
-@:@
+Learn functional programming fundamentals and the theory behind the design of Typelevel libraries. Explore recommended books, courses, and documentation for learning functional programming in Scala and the Typelevel ecosystem.
+@:@

src/community/about.template.html

@@ -1,12 +1,12 @@
 @:embed(/templates/main.template.html)
-<div class="bulma-section bulma-content bulma-container bulma-is-max-desktop">
+<div class="bulma-section bulma-content bulma-container bulma-is-max-fullhd">
 
   ${cursor.currentDocument.content}
 
   <div class="bulma-columns bulma-is-multiline">
-    <div class="bulma-column bulma-is-6-tablet bulma-is-12-mobile">
+    <div class="bulma-column bulma-is-6 bulma-is-12-mobile bulma-is-4-fullhd">
       <div class="bulma-card bulma-has-background-primary-light">
-        <div class="bulma-card-content bulma-has-text-centered">
+        <div class="bulma-card-content bulma-has-text-centered ">
           <span class="bulma-icon bulma-large bulma-has-text-primary bulma-is-large bulma-is-size-3">
             @:svg(fa-discord)
           </span>
@@ -20,7 +20,7 @@ <h4 class="bulma-is-4 bulma-has-text-primary-25">Discord Server</h4>
         </div>
       </div>
     </div>
-    <div class="bulma-column bulma-is-6-tablet bulma-is-12-mobile">
+    <div class="bulma-column bulma-is-6 bulma-is-12-mobile bulma-is-4-fullhd">
       <div class="bulma-card bulma-has-background-warning-95">
         <div class="bulma-card-content bulma-has-text-centered">
           <span class="bulma-icon bulma-large bulma-has-text-warning bulma-is-large bulma-is-size-3">
@@ -36,13 +36,13 @@ <h4 class="bulma-is-4 bulma-has-text-warning-20">Virtual Meetups</h4>
         </div>
       </div>
     </div>
-    <div class="bulma-column bulma-is-6-tablet bulma-is-12-mobile">
+    <div class="bulma-column bulma-is-6 bulma-is-12-mobile bulma-is-4-fullhd">
       <div class="bulma-card bulma-has-background-success-95">
         <div class="bulma-card-content bulma-has-text-centered">
           <span class="bulma-icon bulma-large bulma-has-text-success bulma-is-large bulma-is-size-3">
             @:svg(fa-puzzle-piece)
           </span>
-          <h4 class="bulma-is-4 bulma-has-text-success-20">Affiliate Projects</h4>
+          <h4 class="bulma-is-4 bulma-has-text-success-20">Explore Projects</h4>
           <div class="bulma-content bulma-has-text-left hyphenate">
             ${cursor.currentDocument.fragments.projects}
           </div>
@@ -52,23 +52,7 @@ <h4 class="bulma-is-4 bulma-has-text-success-20">Affiliate Projects</h4>
         </div>
       </div>
     </div>
-    <div class="bulma-column bulma-is-6-tablet bulma-is-12-mobile">
-      <div class="bulma-card bulma-has-background-danger-95">
-        <div class="bulma-card-content bulma-has-text-centered">
-          <span class="bulma-icon bulma-large bulma-has-text-danger bulma-is-large bulma-is-size-3">
-            @:svg(fa-hand-holding-heart)
-          </span>
-          <h4 class="bulma-is-4 bulma-has-text-danger-20">Code of Conduct</h4>
-          <div class="bulma-content bulma-has-text-left hyphenate">
-            ${cursor.currentDocument.fragments.coc}
-          </div>
-          <a class="bulma-button bulma-is-danger bulma-has-text-light" href="@:target(/code-of-conduct/README.md)">
-            Read the Code of Conduct
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="bulma-column bulma-is-6-tablet bulma-is-12-mobile">
+    <div class="bulma-column bulma-is-6 bulma-is-12-mobile bulma-is-4-fullhd">
       <div class="bulma-card bulma-has-background-info-95">
         <div class="bulma-card-content bulma-has-text-centered">
           <span class="bulma-icon bulma-large bulma-has-text-info bulma-is-large bulma-is-size-3">
@@ -84,7 +68,7 @@ <h4 class="bulma-is-4 bulma-has-text-info-20">Start Contributing</h4>
         </div>
       </div>
     </div>
-    <div class="bulma-column bulma-is-6-tablet bulma-is-12-mobile">
+    <div class="bulma-column bulma-is-6 bulma-is-12-mobile bulma-is-4-fullhd">
       <div class="bulma-card bulma-has-background-link-95">
         <div class="bulma-card-content bulma-has-text-centered">
           <span class="bulma-icon bulma-large bulma-has-text-link bulma-is-large bulma-is-size-3">
@@ -100,6 +84,22 @@ <h4 class="bulma-is-4 bulma-has-text-link-20">Learning Resources</h4>
         </div>
       </div>
     </div>
+    <div class="bulma-column bulma-is-6 bulma-is-12-mobile bulma-is-4-fullhd">
+      <div class="bulma-card bulma-has-background-danger-95">
+        <div class="bulma-card-content bulma-has-text-centered">
+          <span class="bulma-icon bulma-large bulma-has-text-danger bulma-is-large bulma-is-size-3">
+            @:svg(fa-hand-holding-heart)
+          </span>
+          <h4 class="bulma-is-4 bulma-has-text-danger-20">Code of Conduct</h4>
+          <div class="bulma-content bulma-has-text-left hyphenate">
+            ${cursor.currentDocument.fragments.coc}
+          </div>
+          <a class="bulma-button bulma-is-danger bulma-has-text-light" href="@:target(/code-of-conduct/README.md)">
+            Read the Code of Conduct
+          </a>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 @:@