[615] Bug: fix minor styles for widgets

website/modules/asset/ui/src/scss/_table-widget.scss

@@ -1,11 +1,18 @@
+.sf-table-section {
+  display: flex;
+  flex-direction: column;
+}
+
 .sf-table-intro {
   margin-bottom: 40px;
-  max-width: 800px;
-
+  max-width: 900px;
+  align-self: center;
+  width: 100%;
+
   h2 {
     margin-bottom: 20px;
   }
-  
+
   p {
     color: $gray-300;
   }
@@ -15,10 +22,10 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-
+  justify-content: center;
+
   @include breakpoint-medium {
     flex-direction: row;
-    flex-wrap: wrap;
   }
 }
 
@@ -33,32 +40,35 @@
     border-bottom: none;
   }
   @include breakpoint-medium {
-    width: calc(33.3% - 24px);
     padding: 40px;
     margin: 0 -1px 0 0;
     border: 1px solid $gray-200;
 
     &:not(:last-child) {
       border: 1px solid $gray-200;
     }
+
+    // prettier-ignore
     &:nth-child(3n+6) {
       border-top: none;
     }
+
     &:nth-child(4n) {
       border-top: none;
     }
+
+    // prettier-ignore
     &:nth-child(n+4) {
       border-top: none;
     }
-
   }
 }
 
 .sf-table-cell-title {
   font-weight: 700;
   font-size: 14px;
   color: $gray-500;
-  
+
   @include breakpoint-medium {
     font-size: 22px;
   }
@@ -69,7 +79,7 @@
   font-size: 18px;
   color: $gray-500;
   margin: 0;
-  
+
   @include breakpoint-medium {
     font-size: 22px;
   }
@@ -92,21 +102,20 @@
   }
 }
 
-
 .sf-table-link {
-  margin-top:24px;
-  
+  margin-top: 24px;
+
   a {
     color: $gray-300;
     text-decoration: underline;
     font-weight: 300;
     font-size: 11px;
-    
+
     &:hover {
       text-decoration: none;
     }
   }
   @include breakpoint-medium {
     margin-top: 32px;
   }
-} 
+}

website/modules/asset/ui/src/scss/_testimonials.scss

@@ -212,6 +212,16 @@
   }
 }
 
+.cs_testimonials {
+  .sf-testimonials-container {
+    margin-top: 32px;
+
+    @include breakpoint-medium {
+      margin-top: 52px;
+    }
+  }
+}
+
 /* Common swiper styles */
 .sf-person-swiper {
   width: 100%;

website/modules/asset/ui/src/scss/_vacancies.scss

@@ -77,6 +77,16 @@
         min-width: 100px;
       }
     }
+
+    & + .sf-vacancies_footer {
+      h2 {
+        margin-top: 48px;
+
+        @include breakpoint-medium {
+          margin-top: 120px;
+        }
+      }
+    }
   }
 
   .sf-vacancies_footer {
@@ -86,10 +96,10 @@
     h2 {
       @include responsive-font(24px, 52px);
       @include responsive-line-height(110%, 140%);
-      margin: 48px 0 8px;
+      margin: 0 0 8px;
 
       @include breakpoint-medium {
-        margin: 120px 0 32px;
+        margin: 0 0 32px;
       }
     }
 

website/modules/table-widget/views/widget.html

@@ -1,38 +1,45 @@
-<section class="sf-section" data-table-widget>
-  {% if data.widget.intro %}
-    <div class="sf-table-intro">
-      {% area data.widget, 'intro' %}
-    </div>
-  {% endif %}
-
-  <div class="sf-table">
-    {% for row in data.widget.rows %}
-      <div class="sf-table-row">
-        <div class="sf-table-cell sf-table-cell-title">
-          <h3 class="sf-table-title">{{ row.title }}</h3>
-        </div>
-
-        <div class="sf-table-cell sf-table-cell-description">
-          {% area row, 'description' %}
+<section class="sf-section sf-table-section" data-table-widget>
+    {% if data.widget.intro %}
+      <div class="sf-table-intro">
+        {% area data.widget, 'intro' %}
+      </div>
+    {% endif %}
+
+    <div class="sf-table">
+      {% for row in data.widget.rows %}
+        <div class="sf-table-row">
+          <div class="sf-table-cell sf-table-cell-title">
+            <h3 class="sf-table-title">{{ row.title }}</h3>
+          </div>
 
-          {% if row.linkTitle %}
-            <div class="sf-table-link">
-              {% set linkUrl = '' %}
-              {% if row.linkType == 'page' and row._page[0] %}
-                {% set linkUrl = row._page[0]._url %}
-              {% elif row.linkType == 'file' and row._file[0] %}
-                {% set linkUrl = row._file[0]._url %}
-              {% elif row.linkType == 'custom' and row.customUrl %}
-                {% set linkUrl = row.customUrl %}
-              {% endif %}
-
-              {% if linkUrl %}
-                <a href="{{ linkUrl }}" class="sf-link" {% if '_blank' in (row.target or []) %}target="_blank" rel="noopener noreferrer"{% endif %}>{{ row.linkTitle }}</a>
-              {% endif %}
-            </div>
-          {% endif %}
+          <div class="sf-table-cell sf-table-cell-description">
+            {% area row, 'description' %}
+
+            {% if row.linkTitle %}
+              <div class="sf-table-link">
+                {% set linkUrl = '' %}
+                {% if row.linkType == 'page' and row._page[0] %}
+                  {% set linkUrl = row._page[0]._url %}
+                {% elif row.linkType == 'file' and row._file[0] %}
+                  {% set linkUrl = row._file[0]._url %}
+                {% elif row.linkType == 'custom' and row.customUrl %}
+                  {% set linkUrl = row.customUrl %}
+                {% endif %}
+
+                {% if linkUrl %}
+                  <a
+                    href="{{ linkUrl }}"
+                    class="sf-link"
+                    {% if '_blank' in (row.target or []) %}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    {% endif %}
+                  >{{ row.linkTitle }}</a>
+                {% endif %}
+              </div>
+            {% endif %}
+          </div>
         </div>
-      </div>
-    {% endfor %}
-  </div>
+      {% endfor %}
+    </div>
 </section>