refactor(less variables): change publication card height per viewport

eea · Mar 10, 2022 · d7a5256 · d7a5256
1 parent e1a5543
commit d7a5256
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/theme/themes/eea/extras/publicationCard.less b/theme/themes/eea/extras/publicationCard.less
@@ -9,8 +9,8 @@
 
 .eea.publication.card {
     color: @publicationCardtextColor;
-    //position: relative;
-    height: @publicationCardHeight;
+    margin: @publicationCardMargin;
+    height: @publicationCardMobileHeight;
     background-color: @publicationCardBackgroundColor;
     display: flex;
     flex-direction: column;
@@ -34,8 +34,6 @@
         background-color: @publicationCardDescriptionColor;
         height: @cardDescriptionHeight;
         padding: @cardDescriptionPadding;
-        //position: absolute;
-        //bottom: 0;
         width: @cardDescriptionWidth;
         max-height: @cardDescriptionMaxHeight;
 
@@ -51,9 +49,20 @@
     }
 }
 
+@media only screen and (min-width: @tabletBreakpoint) {
+    .eea.publication.card {
+        height: @publicationCardTabletHeight;
+
+        .description {
+            height: @computerCardDescriptionHeight;
+        }
+    }
+  }
+
 @media only screen and (min-width: @computerBreakpoint) {
     .eea.publication.card {
-        margin: @publicationCardMargin;
+
+        height: @publicationCardComputerHeight;
 
         .description {
             height: @computerCardDescriptionHeight;

diff --git a/theme/themes/eea/extras/publicationCard.variables b/theme/themes/eea/extras/publicationCard.variables
@@ -4,7 +4,9 @@
 
 @publicationCardtextColor: @white;
 @publicationCardMargin: 10px 0;
-@publicationCardHeight: 268px;
+@publicationCardMobileHeight: 286px;
+@publicationCardTabletHeight: 352px;
+@publicationCardComputerHeight: 268px;
 
 /* Colors */
 @publicationCardBackgroundColor: #BCBEC0;