Team gallery: use less general CSS class names (#356)

* Team gallery: use less general CSS class names

Otherwise, `.name`, e.g., gets picked up by Bulma

* Generate team members page compatible with pre-commit linting

Author: stefanv

assets/theme-css/teams.css

@@ -2,12 +2,12 @@
   padding-bottom: 2rem;
 }
 
-.team .members {
+.team-members {
   display: flex;
   flex-wrap: wrap;
 }
 
-.team .member {
+.team-member {
   width: 11rem;
   display: flex;
   flex-direction: column;
@@ -18,12 +18,12 @@
   vertical-align: top;
 }
 
-.team .member .photo img {
+.team-member-photo img {
   width: 60px;
   border-radius: 50%;
   margin-bottom: 0.5rem;
 }
 
-.team .member .name {
+.team-member-name {
   font-weight: bold;
 }

tools/team_query.py

@@ -62,21 +62,20 @@ def api(query):
 team_name = resp["data"]["organization"]["team"]["name"]
 
 team_template = string.Template(
-    """
+    """\
 <div class="team">
-  <h3 id="${team}" class="name title">${team_name}</h3>
-  <div class="members">
-    ${members}
+  <h3 id="${team}" class="team-name">${team_name}</h3>
+  <div class="team-members">
+${members}
   </div>
-</div>
-"""
+</div>"""
 )
 
 member_template = string.Template(
-    """
-    <div class="member">
-      <a href="${url}" class="name">
-        <div class="photo">
+    """\
+    <div class="team-member">
+      <a href="${url}" class="team-member-name">
+        <div class="team-member-photo">
           <img
             src="${avatarUrl}"
             loading="lazy"
@@ -85,8 +84,7 @@ def api(query):
         </div>
         ${name}
       </a>
-    </div>
-"""
+    </div>"""
 )
 
 members_list = []