Changeset 13310 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/client/components/_plugin-card.scss

Timestamp:

03/12/2024 05:27:53 AM (6 months ago)

Author:

dd32

Message:

wporg-plugins-2024: Adopt the new tile layout for the plugin cards, with description below the card header.

See #7469.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/client/components/_plugin-card.scss (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/client/components/_plugin-card.scss

@@ -1 +1 @@
 .plugin-card {
-    background-color: #f9f9f9;
-    margin-bottom: 4%;
-    padding: 15px 15px 8px;
-    vertical-align: top;
-
-    @media screen and ( min-width: $ms-breakpoint ) {
-        display: inline-block;
-        margin-right: 4%;
-        width: 48%;
-
-        &:nth-of-type( even ) {
-            margin-right: 0;
-        }
-    }
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
 
     .entry {
         display: inline-block;
-        margin: auto;
         vertical-align: top;
-
-        @media screen and ( min-width: 21em ) {
-            width: calc(96% - 96px);
-        }
     }
 
     .entry-title {
         line-height: 1.3;
-        margin: 0 0 8px !important;
 
-        a {
-            font-weight: 400;
-            word-wrap: break-word;
-        }
+        display: block;
+        display: -webkit-box;
+        overflow: hidden;
+        max-height: 2.6em; /* 2x line-height, non-webkit fallback */
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
     }
 
     .entry-excerpt {
-        font-size: 0.9em;
+        clear: both;
+        font-size: var( --wp--preset--font-size--small );
 
         p {
@@ -43 +30 @@
     }
 
-    hr {
-        background-color: #fff;
-        border: 0;
-        height: 2px;
-        margin: 15px -15px 8px;
-    }
-
     footer {
-        font-size: var(--wp--preset--font-size--small);
+        font-size: var( --wp--preset--font-size--small );
+        margin-top: var( --wp--style--block-gap );
 
         span {
@@ -75 +56 @@
             min-width: 48%;
         }
-            
+
         .dashicons {
             margin: 0 2px -1rem;