Просмотр исходного кода

Implement changes for supplementary website redesign pages (#16535)

* Fix space between 'See all plans' and 'or'

* Tweak hero cards on /for/ pages to closer match design

* Fix 'See all plans' text size and link underlines

* Change info card padding after markup feedback

* Underline inline green link

* Reduce LaTeX on Overleaf padding by half (100->50px)

GitOrigin-RevId: b83e43725e8ced55904837a270104fdc414fe639
Thomas 2 лет назад
Родитель
Сommit
74e7e69a3a
1 измененных файлов с 27 добавлено и 6 удалено
  1. 27 6
      services/web/frontend/stylesheets/app/website-redesign.less

+ 27 - 6
services/web/frontend/stylesheets/app/website-redesign.less

@@ -113,6 +113,10 @@
     }
   }
 
+  .plans-bottom-text {
+    font-size: 1.125rem;
+  }
+
   .info-cards {
     @media (min-width: @screen-md-min) {
       display: flex; /* equal heights */
@@ -120,19 +124,14 @@
     }
 
     .info-card-container {
-      min-height: 348px;
       margin-bottom: 16px;
 
-      @media (max-width: @screen-sm-max) {
-        min-height: unset;
-      }
-
       .info-card {
         border-radius: 8px;
         height: 100%;
         box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
         border-top: 8px solid #2f4858;
-        padding: 48px 40px 48px 40px;
+        padding: 32px 40px 32px 40px;
 
         &.info-card-big-text {
           h3 {
@@ -237,6 +236,21 @@
     }
   }
 
+  .features-card-hero {
+    /* borrow from features-card, but rewrite if needed before adding too many overrides */
+    .features-card;
+
+    padding-top: @line-height-computed * 2;
+
+    .features-card-description,
+    .features-card-description-list {
+      p {
+        font-size: 1.25rem;
+        width: 90%;
+      }
+    }
+  }
+
   .top-image-cards {
     .top-image-card {
       > img.img-responsive {
@@ -538,6 +552,13 @@
     }
   }
 
+  .green-link-underline {
+    .green-link;
+
+    /* TODO: implement standard links correctly when design fully rolls out */
+    text-decoration: underline;
+  }
+
   .white-link {
     .link-with-arrow;
     color: white;