Reduce spacing between first library and heading

In the front page, using the same spacing for each block makes the first
one have too much. Use an if statement in the template to adjust in the
case of the first one.

Author: leouieda

css/style.css

@@ -438,10 +438,48 @@ a.button-link-light {
   padding-bottom: var(--space-4xl);
 }
 
+.padding-bottom-l {
+  padding-bottom: var(--space-l);
+}
+
+.padding-bottom-xl {
+  padding-bottom: var(--space-xl);
+}
+
+
+.padding-bottom-2xl {
+  padding-bottom: var(--space-2xl);
+}
+
+.padding-bottom-3xl {
+  padding-bottom: var(--space-3xl);
+}
+
+.padding-bottom-4xl {
+  padding-bottom: var(--space-4xl);
+}
+
+.padding-top-l {
+  padding-top: var(--space-l);
+}
+
+.padding-top-xl {
+  padding-top: var(--space-xl);
+}
+
+
+.padding-top-2xl {
+  padding-top: var(--space-2xl);
+}
+
 .padding-top-3xl {
   padding-top: var(--space-3xl);
 }
 
+.padding-top-4xl {
+  padding-top: var(--space-4xl);
+}
+
 .margin-top-l {
   margin-top: var(--space-l);
 }

index.md

@@ -76,7 +76,7 @@ can get outdated over time.
 </div>
 
 {%- for lib in page.libraries %}
-<div id="{{ lib. id }}" class="padding-vertical-3xl {{ loop.cycle('', 'background-semilight box-shadow') }}">
+<div id="{{ lib. id }}" class="{% if loop.first %}padding-top-xl padding-bottom-3xl{% else %}padding-vertical-3xl{% endif %} {{ loop.cycle('', 'background-semilight box-shadow') }}">
 <div class="{{ loop.cycle('row', 'row-reverse') }} content-wide">
 <div class="col-large flow">
 <h3>{{ lib.title }}</h3>