ISAICP-6787: Optimize Homepage's CSS

config/sync/page_manager.page_variant.homepage-layout_builder-1.yml

@@ -84,7 +84,7 @@ variant_settings:
             label: 'For fresh start on creating content'
             provider: layout_builder_block
             label_display: '0'
-            text: "<p><a href=\"/collection/joinup/help-videos\">How to video</a>&nbsp;<a href=\"\" data-drupal-tour-link=\"\" class=\"js-tour-start-button\">Guided tour</a>&nbsp;<a href=\"/collection/joinup/faq\">FAQ</a></p>\r\n"
+            text: "<p><a class=\"btn btn-secondary\" href=\"/collection/joinup/help-videos\">How to video</a>&nbsp;<a class=\"btn btn-secondary\" href=\"\" data-drupal-tour-link=\"\" class=\"js-tour-start-button\">Guided tour</a>&nbsp;<a class=\"btn btn-secondary\" href=\"/collection/joinup/faq\">FAQ</a></p>\r\n"
             format: full_html
             context_mapping: {  }
           additional:

web/modules/custom/solution/solution.module

@@ -354,7 +354,7 @@ function solution_rdf_entity_view(array &$build, RdfInterface $solution, EntityV
     try {
       $link = $solution->toLink(t('Read more'), 'about-page', [
         'attributes' => [
-          'class' => ['about-page', 'read-more', 'fieldset__read-more'],
+          'class' => ['about-page', 'read-more', 'fieldset__read-more', 'btn', 'btn-secondary'],
         ],
       ]);
       $build['read_more'] = $link->toRenderable();

web/themes/ventuno/src/scss/components/_about-block.scss

@@ -23,9 +23,3 @@
 .about-how {
   color: $gray-700;
 }
-.about-how {
-  a {
-    @extend .btn;
-    @extend .btn-secondary;
-  }
-}

web/themes/ventuno/src/scss/components/_explore-block.scss

@@ -8,7 +8,7 @@ body {
 
 .block-joinup-front-page-explore-block {
   position: relative;
-  @extend .mb-5;
+  margin-bottom: $spacer * 3; // 48px
   @include full-width-color-to-top(
     $gray-200,
     $white,
@@ -20,15 +20,15 @@ body {
   );
   .explore-block-title {
     text-transform: uppercase;
-    @extend .h4;
-    @extend .pb-2;
-    @extend .mb-4;
+    font-size: 1.25rem; // 20px
+    padding-bottom: $spacer * .5; // 8px
+    margin-bottom: $spacer * 1.5; // 24px 
     @include font-icon-before("\E802", 1.42rem, $warning);
     border-bottom: 1px solid rgba($primary, .1);
   }
   .nav-tabs {
     border: none;
-    @extend .mb-3;
+    margin-bottom: $spacer; // 16px
     @include media-breakpoint-up(md) {
       position: absolute;
       top: $spacer * 3;
@@ -38,8 +38,10 @@ body {
       border: none;
       background: none;
       padding: 0 0 $btn-padding-y 0;
-      @extend .m-2;
-      @extend .m-lg-4;
+      margin: $spacer * .5; // 8px 
+      @include media-breakpoint-up(xl) {
+        margin: $spacer * 1.5;
+      }
       color: $gray-500;
       &.active {
         color: $black;
@@ -63,9 +65,8 @@ body {
           flex-flow: column;
           background-color: $white;
           border-radius: $border-radius;
-          @extend .p-4;
-          @extend .me-4;
-          @extend .shadow;
+          padding: $spacer * 1.5; // 24px
+          margin-right: $spacer * 1.5; // 24px
           height: 100%;
           .layout {
             flex-grow: 1;
@@ -77,7 +78,7 @@ body {
           }
           h2 {
             font-size: $h4-font-size;
-            @extend .fw-medium;
+            font-weight: $font-weight-medium;
             line-height: $line-height-base;
             a {
               color: $gray-800;
@@ -86,11 +87,11 @@ body {
           .explore-item__description {
             flex-grow: 1;
             color: $gray-600;
-            @extend .mb-4;
+            margin-bottom: $spacer * 1.5; // 24px
           }
           .date {
             color: $gray-500;
-            @extend .fs-xs;
+            font-size: $font-size-xs;
             .field--name-created, .field--name-published-at {
               padding-top: $btn-padding-y;
             }
@@ -103,10 +104,7 @@ body {
             margin-top: -1.8rem;
           }
           .read-more {
-            display: inline-block;
             float: right;
-            @extend .btn;
-            @extend .btn-secondary;
           }
         }
       }

web/themes/ventuno/src/scss/components/_footer.scss

@@ -22,7 +22,8 @@
   a {
     font-size: $font-size-xs;
     color: $gray-300;
-    @extend .py-1;
+    padding-top: $spacer * .25; // 4px
+    padding-bottom: $spacer * .25; // 4px
     &.linkedin {
       @include icon-only();
       @include font-icon-before("\F0E1", 1.8em);

web/themes/ventuno/src/scss/components/_global-search-block.scss

@@ -1,8 +1,8 @@
 .block-joinup-search-global-search {
-  @extend .pt-5;
-  @extend .pb-2;
-  @extend .me-3;
-  @extend .col-lg;
+  @extend .pt-5 !optional;
+  @extend .pb-2 !optional;
+  @extend .me-3 !optional;
+  @extend .col-lg !optional;
   .search-bar {
     .search-bar__input {
       border-style: none;

web/themes/ventuno/src/scss/components/_highlighted-event-block.scss

@@ -1,7 +1,7 @@
 // Highlighted Event
 .block-entityqueue--highlighted-event {
   position: relative;
-  @extend .mb-5;
+  margin-bottom: $spacer * 3; // 48px
   height: 100%;
   > h2 {
     @include font-icon-before("\F133", 1.2rem, $warning);
@@ -18,42 +18,40 @@
   article {
     background: $gray-300 url(../images/highlighted-event.jpg) no-repeat center center;
     background-size: cover;
-    @extend .rounded-3;
+    border-radius: $border-radius-lg; // 0.3rem
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     text-align: center;
-    @extend .p-4;
-    @extend .p-lg-5;
+    padding: $spacer * 1.5; // 24px
+    @include media-breakpoint-up(lg) {
+      padding: $spacer * 3; // 48px
+    }
     color: $white;
     header {
-      @extend .mb-5;
-      @extend .pb-5;
+      margin-bottom: $spacer * 3; // 48px
+      padding-bottom: $spacer * 3; // 48px
       h3 {
         text-transform: uppercase;
         color: $white;
-        @extend .h4;
+        font-size: 1.25rem;
         font-weight: normal;
         border-bottom: 4px solid $white;
       }
     }
     > h2 {
       line-height: $line-height-sm;
-      @extend .mb-1;
+      margin-bottom: $spacer * .25; // 4px
       color: $white;
     }
     .field--name-field-event-date {
       font-size: $h4-font-size;
       font-weight: normal;
     }
     footer {
-      @extend .mt-5;
-      @extend .pt-5;
-      a {
-        @extend .btn;
-        @extend .btn-secondary;
-      }
+      margin-top: $spacer * 3; // 48px
+      padding-top: $spacer * 3; // 48px
     }
   }
-}
+}

web/themes/ventuno/src/scss/components/_highlighted-solution-block.scss

@@ -1,6 +1,6 @@
 // Highlighted Solution
 .block-entityqueue--highlighted-solution {
-  @extend .pb-5;
+  padding-bottom: $spacer * 3; // 48px
   border-bottom: 1px solid rgba($primary, .1);
   position: relative;
   height: 100%;
@@ -18,15 +18,15 @@
   }
   article {
     .field--name-field-is-logo {
-      @extend .mb-4;
+      margin-bottom: $spacer * 1.5; // 24px
     }
     .field--name-field-is-description {
       color: $gray-700;
     }
     .field--name-field-is-solution-type {
       color: $gray-500;
-      @extend .mt-2;
-      @extend .fs-xs;
+      margin-top: $spacer * .5; // 8px
+      font-size: $font-size-xs;
     }
     .field--name-field-topic {
       a {
@@ -36,4 +36,4 @@
       }
     }
   }
-}
+}