Merge pull request #515 from bnijenhuis/style/proud-members

Fixed layout for members on homepage

Author: anneke

src/_components/shortcodes/tag/tag.css

@@ -5,7 +5,7 @@
     padding: 0.5em 1em;
     margin: 0 1em;
     background: var(--lilac-light);
-    font-size: var(--font-size-12);
+    /* font-size: var(--font-size-12); */
 }
 
 /* Angled tags, like with < and > */
@@ -26,6 +26,6 @@
     clip-path: url(#button-curly-braces);
 }
 
-.tag:not(.token) + .tag:not(.token) {
+.tag:not(.token)+.tag:not(.token) {
     margin-inline-start: 2em;
-}
+}

src/_includes/partials/homepage/proud-members.css

@@ -6,12 +6,12 @@
 @media all and (min-width: 31.25rem) {
   .proud-members .desktop-columns {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     grid-gap: var(--spacing);
     margin-block-end: 0;
   }
 }
 
 .proud-members:focus-within {
   z-index: 3;
-}
+}

src/_includes/partials/member.css

@@ -47,17 +47,25 @@
 }
 
 .member-content .tag {
-    margin-block-end: var(--spacing-half);
     text-align: center;
     width: max-content;
+    margin: 0;
+}
+
+.member-content .tag:not(.token) {
+    margin: 0;
+}
+
+.member-content .tag:not(.token)+.tag:not(.token) {
+    margin-inline-start: 0;
 }
 
 .backlinks {
     margin-block-start: var(--spacing-half);
     text-align: center;
 }
 
-.has-profile:has(a) ~ .has-no-profile {
+.has-profile:has(a)~.has-no-profile {
     display: none;
 }
 
@@ -68,10 +76,8 @@
 }
 
 .member-specialties {
-    display: grid;
-    grid-auto-flow: dense;
-    grid-template-columns: max-content min-content;
-    place-content: space-around;
+    display: flex;
+    flex-wrap: wrap;
     gap: 1em;
 }
 
@@ -98,4 +104,4 @@
     .member:focus-within .member-content {
         z-index: 1;
     }
-}
+}