「大きなサムネイルにタイトルを重ねる」とスニペットが欠けて表示される場合がある不具合修正

xserver-inc · Nov 26, 2023 · 1cf9a20 · 1cf9a20
1 parent 2288b1f
commit 1cf9a20
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 10 deletions.
diff --git a/amp.css b/amp.css
@@ -2551,6 +2551,12 @@ label.screen-reader-text {
 .widget-entry-cards.large-thumb-on .e-card {
   position: relative;
 }
+.widget-entry-cards.large-thumb-on .card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
 .widget-entry-cards.large-thumb-on .card-content {
   margin: 0;
   position: absolute;
@@ -2559,12 +2565,14 @@ label.screen-reader-text {
   padding: 0.6em;
   background: linear-gradient(180deg, transparent, #555);
   color: var(--cocoon-white-color);
-  max-height: 40%;
-  overflow: hidden;
   transition: all 0.5s;
 }
 .widget-entry-cards.large-thumb-on .card-snippet {
   margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 /************************************

diff --git a/css/admin.css b/css/admin.css
@@ -2802,6 +2802,12 @@ body.wp-admin {
 .admin-settings .demo .widget-entry-cards.large-thumb-on .e-card {
   position: relative;
 }
+.admin-settings .demo .widget-entry-cards.large-thumb-on .card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
 .admin-settings .demo .widget-entry-cards.large-thumb-on .card-content {
   margin: 0;
   position: absolute;
@@ -2810,12 +2816,14 @@ body.wp-admin {
   padding: 0.6em;
   background: linear-gradient(180deg, transparent, #555);
   color: var(--cocoon-white-color);
-  max-height: 40%;
-  overflow: hidden;
   transition: all 0.5s;
 }
 .admin-settings .demo .widget-entry-cards.large-thumb-on .card-snippet {
   margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 .admin-settings .demo .widget-entry-cards.ranking-visible {
   counter-reset: p-rank;
@@ -10891,6 +10899,12 @@ body.wp-admin {
 .admin-settings .demo .widget-entry-cards.large-thumb-on .e-card {
   position: relative;
 }
+.admin-settings .demo .widget-entry-cards.large-thumb-on .card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
 .admin-settings .demo .widget-entry-cards.large-thumb-on .card-content {
   margin: 0;
   position: absolute;
@@ -10899,12 +10913,14 @@ body.wp-admin {
   padding: 0.6em;
   background: linear-gradient(180deg, transparent, #555);
   color: var(--cocoon-white-color);
-  max-height: 40%;
-  overflow: hidden;
   transition: all 0.5s;
 }
 .admin-settings .demo .widget-entry-cards.large-thumb-on .card-snippet {
   margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 .admin-settings .demo .widget-entry-cards.ranking-visible {
   counter-reset: p-rank;

diff --git a/scss/_widget.scss b/scss/_widget.scss
@@ -267,6 +267,13 @@ label.screen-reader-text{
     position: relative;
   }
 
+  .card-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
   .card-content{
     margin: 0;
     position: absolute;
@@ -275,14 +282,17 @@ label.screen-reader-text{
     padding: .6em;
     background: linear-gradient(180deg, transparent, #555);
     color: var(--cocoon-white-color);
-    max-height: 40%;
-    overflow: hidden;
+    // max-height: 40%;
     transition: all 0.5s;
   }
 
 
   .card-snippet{
     margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
   }
 }
 

diff --git a/style.css b/style.css
@@ -2576,6 +2576,12 @@ label.screen-reader-text {
 .widget-entry-cards.large-thumb-on .e-card {
   position: relative;
 }
+.widget-entry-cards.large-thumb-on .card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
 .widget-entry-cards.large-thumb-on .card-content {
   margin: 0;
   position: absolute;
@@ -2584,12 +2590,14 @@ label.screen-reader-text {
   padding: 0.6em;
   background: linear-gradient(180deg, transparent, #555);
   color: var(--cocoon-white-color);
-  max-height: 40%;
-  overflow: hidden;
   transition: all 0.5s;
 }
 .widget-entry-cards.large-thumb-on .card-snippet {
   margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 /************************************