Add extra vertical padding option to front page blocks (#74)

Author: conradolandia

src/lib/blocks/ContentBlock.svelte

@@ -35,6 +35,7 @@
   export let extraImageAlt = "";
   export let extraImageLink = "";
   export let innerColumns = false;
+  export let extraVerticalPadding = false;
 
   let style = "";
   let mobile = false;
@@ -171,6 +172,7 @@
         {caption}
         {tabs}
         {innerColumns}
+        {extraVerticalPadding}
       />
     {/if}
   </div>

src/lib/components/Card.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="text-red-berry-900 dark:text-neutral-300 flex flex-col items-center justify-center text-center {aspect}"
+  class="text-red-berry-900 dark:text-neutral-300 flex flex-col items-center justify-center text-center p-8 {aspect}"
 >
   {#if innerColumn.icon}
     <DynamicIcon icon={innerColumn.icon} {size} />

src/lib/components/MediaSection.svelte

@@ -19,11 +19,13 @@
   export let tabs = undefined;
   export let innerColumns = false;
   export let aspectRatio = "4:3";
+  export let extraVerticalPadding = false;
   
   // Reactive variables for translations
   let reactiveTabs = tabs;
   let reactiveCaption = caption;
   let reactiveImgAlt = imgAlt;
+  let innerColumnClasses = `max-w-screen-md mx-auto flex flex-col gap-8 md:gap-16 mt-2 md:mt-0 md:grid md:grid-cols-2 ${extraVerticalPadding ? "py-16" : ""}`;
   
   // Helper function to check if an object or array is empty
   function isEmpty(value) {
@@ -91,9 +93,7 @@
   {:else if reactiveTabs}
     <Tabs tabs={reactiveTabs} />
   {:else if innerColumns}
-    <div
-      class="max-w-2xl mx-auto flex flex-col gap-8 md:gap-16 mt-2 md:mt-0 md:grid md:grid-cols-2"
-    >
+    <div class={innerColumnClasses}>
       {#each innerColumns as innerColumn}
         {#if innerColumn.link}
           <a

src/lib/config/data/frontpage.yaml

@@ -74,6 +74,7 @@
   boxed: true
   background: /assets/media/bg_more.svg
   backgroundDark: /assets/media/bg_more_dark.svg
+  extraVerticalPadding: true
   innerColumns:
     - icon: BsYoutube
       link: https://www.youtube.com/c/spyderide