Styling changes to working-groups

Author: insectengine

_data/wg.yaml

@@ -8,7 +8,7 @@ working-groups:
         <p>Recently, we delivered a new approach to dealing with WebSocket (both for the server and client). This was the first step. There are still a few areas to improve, such as documentation, security, observability, and testability. The goal of this focus group is to track these efforts.</p>
         <p>Point of contact: @mkouba (@<strong>Martin Kouba</strong>  on Zulip)</p>
       status: on track
-      last-activity: 12/07/2024
+      last-activity: "July 12, 2024"
     - title: "Quarkus 3.15 LTS"
       board-url: "https://github.com/orgs/quarkusio/projects/28"
       short-description: This WG focuses on defining the issues we would like to have in the next-to-be LTS (Quarkus 3.14/3.15)
@@ -21,7 +21,7 @@ working-groups:
         <li>The <code>done</code> column means that the issues have been completed</li>
         </ul>
       status: at risk
-      last-activity: 11/07/2024
+      last-activity: "July 11, 2024"
     - title: "Enhanced TLS support"
       board-url: "https://github.com/orgs/quarkusio/projects/24"
       short-description: Track the progress around the new TLS configuration centralization and new features (like Let's Encrypt, Cert-Manager, and local experience...)
@@ -31,7 +31,7 @@ working-groups:
         <p>The goal of this focus group is to continue integrating the TLS registry and improve Quarkus integration with certificate providers (Let's Encrypt, Cert-Manager). In addition, we would like to provide a frictionless local experience around TLS (i.e., without the infamous untrusted certificate screen).</p>
         <p><em>Point of contact:</em> @cescoffier (@<strong>Clement Escoffier</strong> on Zulip)</p>
       status: on track
-      last-activity: 09/07/2024
+      last-activity: "July 9, 2024"
     - title: "Docker file generation"
       board-url: "https://github.com/orgs/quarkusio/projects/27"
       short-description: A working group focusing on the generation of Dockerfile / ContainerFile
@@ -48,7 +48,7 @@ working-groups:
         Once completed, this working group will be followed by other initiatives focusing on generating the Github Action and Tekton pipelines.</p>
         <p><em>Point of contact</em>: @iocanel (<code>Ioannis Canellos</code>on Zulip)</p>
       status: on track
-      last-activity: 09/07/2024
+      last-activity: "July 9, 2024"
     - title: "Roq :: Quarkus SSG"
       board-url: "https://github.com/orgs/quarkiverse/projects/6"
       short-description: Allow Static Site Generation with Quarkus.
@@ -69,5 +69,5 @@ working-groups:
         <p>This effort is now tracked using a &quot;Working Group&quot; project: https://github.com/orgs/quarkiverse/projects/6</p>
         <p>This is a great opportunity to participate in fun effort and be involved with the Quarkus community, if anyone is interested in being a part of this, please reach out to me 🚀</p>
       status: on track
-      last-activity: 08/07/2024
+      last-activity: "July 8, 2024"
       last-update: Good progress so far.

_includes/header-navigation.html

@@ -46,6 +46,7 @@
           <li><a href="{{site.baseurl}}/support/" class="{% if page.url contains '/support/' %}active{% endif %}">SUPPORT</a></li>
           <li><a href="{{site.baseurl}}/blog" class="{% if page.url contains '/blog/' %}active{% endif %}">BLOG</a></li>
           <li><a href="{{site.baseurl}}/discussion" class="{% if page.url contains '/discussion/' %}active{% endif %}">DISCUSSION</a></li>
+          <li><a href="{{site.baseurl}}/working-groups" class="{% if page.url contains '/working-groups/' %}active{% endif %}">WORKING GROUPS</a></li>
           <li><a href="{{site.baseurl}}/insights" class="{% if page.url contains '/insights/' %}active{% endif %}">PODCAST</a></li>
           <li><a href="{{site.baseurl}}/events" class="{% if page.url contains '/events/' %}active{% endif %}">EVENTS</a></li>
           <li><a href="{{site.baseurl}}/newsletter" class="{% if page.url contains '/newsletter/' %}active{% endif %}">NEWSLETTER</a></li>

_includes/working-group-band.html

@@ -2,27 +2,25 @@
   <div class="grid-wrapper working-groups-cards">
     <div class="width-12-12 width-12-12-m">
       <p class="mt-0 lead">
-        <span class="emph">Working Groups</span> are a way to organize the community around a specific topic or goal. 
-        They are a great way to get involved and help shape the future of Quarkus. 
+        Joining a working group is a great way to get involved and help shape the future of Quarkus. 
         If you are interested in joining a working group, please reach out to the point of contact on GitHub or Zulip.
-      </h3>
+      </p>
     </div>
 
 
     {% for item in site.data.wg.working-groups %}
     <div class="card">
       <div class="card-header">
-        <span class="card-title">{{ item.title }}</span>
+        <p class="card-title">{{ item.title }}</p>
       </div>
       <div class="card-body">
         <p class="card-text"><span class="key">Status:</span>&nbsp;<span class="status {{ item.status | | replace: ' ', '-'}}">{{ item.status }}</span></p>
         <p class="card-text"><span class="key">Description:</span>&nbsp;<span class="short-description">{{ item.short-description }}</span></p>
         <p class="card-text"><span class="key">Last Activity:</span>&nbsp;<span class="last-activity">{{ item.last-activity }}</span></p>
         {% if item.last-update %}<p class="card-text"><span class="key">Last status update:</span>&nbsp;<span class="last-update">{{ item.last-update }}</span></p>{% endif %}      
       </div>
-      <div class="card-footer">
-        <!-- <a href="#" class="btn btn-sm btn-secondary me-1 mb-1 float-start" data-bs-toggle="modal" data-bs-target="#modal-{board.id}">More info</a> -->        
-        <a href="{{ item.board-url }}" class="button-cta float-end">Board</a>
+      <div class="card-footer">       
+        <a href="{{ item.board-url }}" class="float-end"> View the {{ item.title }} Board <i class="fa-solid fa-chevron-right"></i></a>
       </div>
     </div>
     {% endfor %}      

_sass/layouts/working-groups.scss

@@ -1,21 +1,10 @@
 
 .working-groups-cards {
 
-  .emph {
-    font-weight: 600;
-    color: var(--link-color);
-  }
-
-  .card-header:first-child {
+ /* .card-header:first-child {
     border-radius: 5px 5px 0 0;
   }
-
-  .button-cta {
-    font-size: 1rem;
-    line-height: 1.2;
-    font-weight: normal;
-    padding: .5rem 1.2rem;
-  }
+ */
 
   .lead {
     font-size: 20px;
@@ -36,27 +25,19 @@
   }
 
   .card-header {
-    padding-left: 10px;
-    padding-top: 10px;
     padding-bottom: 5px;
-    color: rgb(33, 37, 41);
-    background-color: rgba(33, 37, 41, 0.03);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.176);
+    border-bottom: 1px solid var(--card-outline);
+    height: 2rem
   }
 
   .card-body {
-    padding: 1rem 1rem;
-    color: rgb(255, 255, 255);
+    padding: 1rem 0rem;
+    height: 11rem;
   }
 
   .card-footer {
     padding-top: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 10px;
-    color: rgb(33, 37, 41);
-    background-color: rgba(33, 37, 41, 0.03);
-    border-top: 1px solid rgba(0, 0, 0, 0.176);
+    border-top: 1px solid var(--card-outline);
   }
 
   .card-title {
@@ -74,17 +55,15 @@
 
   .card {
     display: inline-grid;
-    font-family: "Open Sans", sans-serif;
-    font-size: 16px;
     position: relative;
-    color: rgb(33, 37, 41);
     word-wrap: break-word;
-    background-color: rgb(255, 255, 255);
     background-clip: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.176);
+    padding: 1rem;
+    border-radius: 10px;
+    border: 1px solid var(--card-outline);
     width: calc(100% - 2rem);
 
-    grid-column: span 6;
+    grid-column: span 4;
 
         @media screen and (max-width: 1300px) {
          grid-column: span 6;
@@ -100,7 +79,6 @@
   }
 
   .status {
-    font-family: "Open Sans", sans-serif;
     font-weight: lighter;
     display: inline-block;
     padding: 0.35rem 0.65rem;

wg.md

@@ -1,6 +1,6 @@
 ---
 layout: working-groups
 title: Working Groups
-subtitle: This page lists the currently running working groups.
-permalink: /wg/
+subtitle: Organizing the community around a specific topics or goals.
+permalink: /working-groups/
 ---