style: updated css to reduce some padding

Author: Olivier Jauze

landing/_includes/header-content.html

@@ -1,5 +1,5 @@
 <div class="links row alitems-center">
-
+  
   {% for link in site.data.header.links %}
     <a class="bold mgl-s" href="{{link.url}}">{{link.text}}</a>
   {% endfor %}

landing/_layouts/home.html

@@ -4,14 +4,6 @@
 
 <div class="home">
 
-  <!-- <div class="catchphrase row justc-center alitems-stretch">
-    <div class="content-wrapper row justc-center alitems-center pd-xl m-column s-pdh-m" style="padding-bottom: 20px">
-      <div class="catchphrase-text mgl-l column m-mgl-0 m-alitems-center">
-        
-      </div>
-    </div>
-  </div> -->
-  
   <div class="hero column justc-center alitems-center">
 
     <div class="content-wrapper row justc-center alitems-center pd-xl m-column s-pdh-m" style="padding-top: 40px">
@@ -37,51 +29,14 @@ <h1 class="hero-title black">{{ page.catchphrase.baseline }}</h1>
 
   </div>
 
-  <div class="timeline row justc-center pdv-l">
-    <div class="timeline-wrapper" >
+  <div class="justc-center">
     {% include google-search.html %}
-    </div>
-
-    <div class="timeline-wrapper">
-      <div class="mx-auto feature-card">
-        <div class="row alitems-center">
-          <div class="timeline-icon -start-3">
-            <img class="fill-current text-blue-500" src="assets/imgs/calendar.svg" alt="icon">
-          </div>
-          <div class="flex-1 ml-4">
-            <h2 class="text-3xl font-bold pb-8" style="color: rgb(11,29,55)">Events of the Community</h2>
-          </div>
-        </div>
-        <div class="mx-auto alitems-center mt-8">
-          <ol class="relative border-s border-gray-200 ">
-        {% for event in page.timeline.events %}
-              <li class="mb-6 ms-4">
-                  <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white">
-                    <svg class="w-2.5 h-2.5 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
-                    </svg>
-                  </span>
-                  
-                  <h3 class="flex items-center mb-1 text-lg font-semibold" style="color: rgb(11,29,55); padding-left: 30px;">{{ event.title }}
-                  {% if event.next == true %}
-                    <span class="bg-blue-100 text-blue-600 text-sm font-medium me-2 px-2.5 py-0.5 rounded ms-3">Next</span>
-                  {% endif %}
-                  </h3>
-                  <time class="block mb-1 text-base font-normal leading-none text-gray-700">{{ event.time }}</time>
-                  <p class="block mb-2 text-base font-normal leading-none text-gray-700">{{ event.location}}</p>
-                  {% if event.details %} <p class="mb-1 text-base font-normal text-gray-500">{{ event.details }}</p> {% endif %}
-                  <a class="block no-underline text-blue-600 text-sm font-normal" href="{{ event.url }}">Details →</a>
-              </li>
-        {% endfor %}
-            </ol>
-        </div>
-      </div>
-    </div>
   </div>
 
-  <div class="features row justc-center pdv-l">
+  <div class="timeline row justc-center pdv-l">
     <div class="content-wrapper column alitems-stretch">  
 
+
       <div class="feature-card column mgb-s alitems-start">
         <div class="row alitems-center mgb-xs">
           <div class="feature-icon mgr-s">
@@ -127,6 +82,42 @@ <h2 class="large-font bold">{{ feature.title }}</h2>
           {% endfor %}
         </div>
       </div>
+    </div>    
+
+    <div class="timeline-wrapper">
+      <div class="mx-auto feature-card">
+        <div class="row alitems-center">
+          <div class="timeline-icon -start-3">
+            <img class="fill-current text-blue-500" src="assets/imgs/calendar.svg" alt="icon">
+          </div>
+          <div class="flex-1 ml-4">
+            <h2 class="text-3xl font-bold pb-8" style="color: rgb(11,29,55)">Continuous Architecture Community Events</h2>
+          </div>
+        </div>
+        <div class="mx-auto alitems-center mt-8">
+          <ol class="relative border-s border-gray-200 ">
+        {% for event in page.timeline.events %}
+              <li class="mb-6 ms-4">
+                  <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white">
+                    <svg class="w-2.5 h-2.5 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
+                    </svg>
+                  </span>
+                  
+                  <h3 class="flex items-center mb-1 text-lg font-semibold" style="color: rgb(11,29,55); padding-left: 30px;">{{ event.title }}
+                  {% if event.next == true %}
+                    <span class="bg-blue-100 text-blue-600 text-sm font-medium me-2 px-2.5 py-0.5 rounded ms-3">Next</span>
+                  {% endif %}
+                  </h3>
+                  <time class="block mb-1 text-base font-normal leading-none text-gray-700">{{ event.time }}</time>
+                  <p class="block mb-2 text-base font-normal leading-none text-gray-700">{{ event.location}}</p>
+                  {% if event.details %} <p class="mb-1 text-base font-normal text-gray-500">{{ event.details }}</p> {% endif %}
+                  <a class="block no-underline text-blue-600 text-sm font-normal" href="{{ event.url }}">Details →</a>
+              </li>
+        {% endfor %}
+            </ol>
+        </div>
+      </div>
     </div>
   </div>
 

landing/_sass/styles/_base.scss

@@ -131,7 +131,7 @@ pre {
 .content-wrapper {
   width: 100%;
   max-width: 1500px;
-  padding: 0 $spacing-unit*2;
+  padding: 0 $spacing-unit*1;
 
   @include media-query($mobile) {
     padding: 0 $spacing-unit;
@@ -521,74 +521,3 @@ pre {
     }
   }
 }
-
-.gsc-control-cse {
-  background-color: #387deb !important;
-  border: 0 !important;
-  padding: 6px 8px 6px 10px !important;
-  margin: 0px;
-  border-radius: 2px;
-  overflow: hidden;
-}
-form.gsc-search-box,
-table.gsc-search-box {
-  margin-bottom: 0 !important;
-}
-.gcse-search-box {
-  border: 0 !important;
-  background: #387deb !important;
-}
-.gcse-search-box-tools .gcse-search-box .gcse-input {
-  padding-right: 0 !important;
-}
-#gs_tti50 {
-  padding: 6px 0 !important;
-}
-#gsc-i-id1 {
-  color: #000 !important;
-  text-indent: 0 !important;
-  font-size: 14px !important;
-  line-height: 1 !important;
-  background: none !important;
-}
-#gsc-i-id1::-webkit-input-placeholder {
-  color: #000 !important;
-}
-#gsc-i-id1::-as-input-placeholder {
-  color: #fff;
-}
-#gsc-i-id1::-moz-placeholder {
-  color: #fff;
-  opacity: 1;
-}
-#gsc-i-id1::-moz-placeholder {
-  color: #fff;
-  opacity: 1;
-}
-.gsib_b {
-  display: none !important;
-}
-.gsc-search-button -v2 {
-  padding: 7.5px !important;
-  margin-left: !important;
-  outline: none !important;
-  border: !important;
-  cursor: pointer;
-}
-.gsc-search-button-v2,gsc-search-button-v2: hover {
-  cursor: pointer;
-}
-.gsc-search-button-v2,gsc-search-button-v2: hover {
-  background-color: transparent !important;
-  background-image: none !important;
-}
-.gsc-search-button -v2:focus {
-  outline: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
-  background-image: none !important;
-}
-.gsc-search-button -v2:focus {
-  outline: none !important;
-  box-shadow: none !important;
-}

landing/_sass/styles/_layout.scss

@@ -208,21 +208,21 @@
 .mgr-s { margin-right: $spacing-unit;}
 .mgr-m { margin-right: $spacing-unit*2;}
 .mgr-l { margin-right: $spacing-unit*3;}
-.mgr-xl { margin-right: $spacing-unit*4;}
+.mgr-xl { margin-right: $spacing-unit*3;}
 
 .mgb-0 { margin-bottom: 0;}
 .mgb-xs { margin-bottom: $spacing-unit/2;}
 .mgb-s { margin-bottom: $spacing-unit;}
 .mgb-m { margin-bottom: $spacing-unit*2;}
 .mgb-l { margin-bottom: $spacing-unit*3;}
-.mgb-xl { margin-bottom: $spacing-unit*4;}
+.mgb-xl { margin-bottom: $spacing-unit*3;}
 
 .mgl-0 { margin-left: 0;}
 .mgl-xs { margin-left: $spacing-unit/2;}
 .mgl-s { margin-left: $spacing-unit;}
 .mgl-m { margin-left: $spacing-unit*2;}
 .mgl-l { margin-left: $spacing-unit*3;}
-.mgl-xl { margin-left: $spacing-unit*4;}
+.mgl-xl { margin-left: $spacing-unit*3;}
 
 .mgv-xs {margin-top: $spacing-unit/2; margin-bottom: $spacing-unit/2;}
 .mgv-s {margin-top: $spacing-unit; margin-bottom: $spacing-unit;}

landing/content/pages/home.md

@@ -45,7 +45,7 @@ features:
   left  :
     title: "Framework"
     text: |-
-      The tools and kits we have created can be used in isolation or they can work together to help the enterprise change to be more successful. In a  **V**olatile, **U**ncertain, **C**omplex or **A**mbiguous world, it is important to bring structure while enabling business and operational agility. The Continuous Architecture Framework (CAF) combines intentional architecture and emergent design to help autonomous teams align around a common purpose and a set of shared Objectives and Key Results (OKRs) while preserving agile teams' autonomy. Team autonomy is a pre-requisite to speed because it reduces coordination activities that slow down teams. On the other hand, when autonomous teams are mis-aligned it increases the risk of delivering poor client and employee experience due to ineffective coordination.
+      The tools and kits we have created can be used in isolation or they can work together to help the enterprise change to be more successful. In a  **V**olatile, **U**ncertain, **C**omplex or **A**mbiguous world, it is important to bring structure while enabling business and operational agility. The Continuous Architecture Framework (CAF) combines intentional architecture and emergent design to help autonomous teams align around a common purpose. Team autonomy is a pre-requisite to speed because it reduces coordination activities that slow down teams. On the other hand, when autonomous teams are mis-aligned it increases the risk of delivering poor client and employee experience due to ineffective coordination.
       The CAF helps maintain a healthy balance between autonomy and alignment along the enterprise journey toward an agile @scale operating model. The equation we're proposing is **ALIGNMENT + AUTONOMY > CONTROL**.
     icon: assets/imgs/framework-icon.svg
     url: /docs/framework/framework.html