case studies styling and dividers

themes/coopcloud.tech/assets/scss/main.scss

@@ -280,15 +280,15 @@ footer .separator {
 #case_studies-slide-body{
     max-height: 1000px;
     overflow: hidden;
-    transition:         max-height 500ms ease;
-    -moz-transition:    max-height 500ms ease;
-    -ms-transition:     max-height 500ms ease;
-    -o-transition:      max-height 500ms ease;
-    -webkit-transition: max-height 500ms ease;
+    transition:         max-height 1s ease;
+    -moz-transition:    max-height 1s ease;
+    -ms-transition:     max-height 1s ease;
+    -o-transition:      max-height 1s ease;
+    -webkit-transition: max-height 1s ease;
 }
 .expanded {
     height: auto !important;
-    max-height: 3000px !important;
+    max-height: 4000px !important;
 }
 .contracted {
     background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important;
@@ -299,4 +299,13 @@ footer .separator {
     position: absolute;
     margin: 10px;
     left: 50%;
+}
+
+// Styling for divider
+
+hr.divider {
+    border-top: 1px solid #1C1C1C;
+    border-radius: 3px;
+    height: 1px;
+    padding: 0;
 }

themes/coopcloud.tech/layouts/partials/index/case_studies.html

@@ -4,9 +4,16 @@
 
     <div id="case_studies-slide-body">
     {{ range $index, $item := .data | shuffle }}
-    <div class="columns is-centered my-6 is-vcentered">
+    {{ if ne $index 0 }}
+    <div class="columns is-centered is-gapless">
+      <div class="column is-8">
+        <hr class="divider">
+      </div>
+    </div>
+    {{ end }}
+    <div class="columns my-6 is-vcentered">
       {{ if eq (mod $index 2) 0 }}
-      <div class="column is-one-quarter">
+      <div class="column is-one-quarter is-offset-1">
         <div class="image mx-4">
           {{ with $item.thumbnail }}
           <img src="{{ $item.thumbnail }}" class="is-rounded">
@@ -15,16 +22,16 @@
           {{ end }}
         </div>
       </div>
-      <div class="column is-size-5 is-widescreen is-full-tablet is-half">
+      <div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
         <h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
         <p>{{ $item.content | markdownify }}</p>
       </div>
       {{ else }}
-      <div class="column is-size-5 is-widescreen is-full-tablet is-half">
+      <div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
         <h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
         <p>{{ $item.content | markdownify }}</p>
       </div>
-      <div class="column is-one-quarter">
+      <div class="column is-one-quarter is-offset-1">
         <div class="image mx-4">
           {{ with $item.thumbnail }}
           <img src="{{ $item.thumbnail }}" class="is-rounded">