styling tweaks

Author: 4lb

src/components/FlexibleSection.astro

@@ -10,6 +10,7 @@ interface Props {
   maxWidth?: number;
   variant?: 'white' | 'gray';
   theme?: 'light' | 'dark';
+  bottomBorder?: boolean;
 }
 
 const {
@@ -20,6 +21,7 @@ const {
   maxWidth = 1100,
   variant = 'white',
   theme = 'light',
+  bottomBorder = true,
 } = Astro.props;
 ---
 
@@ -35,7 +37,7 @@ const {
 >
   <ContentLimiter maxWidth={maxWidth}>
     <div class="flexible-content">
-      <div class="header">
+      <div class={clsx("header", { "with-bottom-border": bottomBorder })}>
         <TitleTag class="section-title" id={id ? `${id}-title` : undefined} set:html={title}></TitleTag>
       </div>
 
@@ -91,10 +93,16 @@ const {
       flex-direction: column;
       width: 100%;
 
-      .header {
+        .header {
         width: 100%;
         box-sizing: border-box;
         padding-bottom: 2rem;
+
+        &.with-bottom-border .section-title {
+          border-bottom: 1px solid var(--text-body-primary);
+          margin-bottom: 2rem;
+          padding-bottom: 1rem;
+        }
 
         .section-title {
           @include typography(section);

src/pages/blog/index.astro

@@ -87,22 +87,12 @@ const url = "https://defguard.net/blog";
   @use "../../styles/mixins/breakpoints" as *;
 
   #blog-page {
-    padding-top: var(--nav-height);
     background-color: var(--surface-frame-bg);
   }
 
-  #blog-header {
-    .section-title {
-      @include typography(section);
-    }
-    p {
-      @include typography(paragraph);
-      margin-bottom: 1.5rem;
-    }
-  }
-
   .blog-posts-listing {
     padding: 2rem 0 4rem;
+    background-color: #f5f5f5;
 
     .container {
       max-width: 1200px;
@@ -131,6 +121,7 @@ const url = "https://defguard.net/blog";
       text-decoration: none;
       color: inherit;
       padding: 20px;
+      background-color: #f9f9f9;
       border-width: 0 0 2px 0;
       border-style: solid;
       border-color: #f5f5f5;

src/pages/compare.astro

@@ -58,9 +58,10 @@ const tags = [
   />
   <Navigation activeSlug="/compare/" />
   <main id="compare-page">
-    <ProductSection>
+    <ProductSection padding="none">
       <header id="compare-header">
-        <h1>Compare of WireGuard® Solutions<br />(on date: 2024.08)</h1>
+        <h1>Compare of WireGuard® Solutions<br /></h1>
+        <p class="compare-date">(on date: 2025.05)</p>
       </header>
       <div id="features-table">
         <FeaturesTable data={featuresTableData} client:load />
@@ -76,6 +77,11 @@ const tags = [
 
 <style lang="scss" is:global>
   #compare-page {
+    .product-section {
+      padding-top: 4rem !important; /* Match the 4rem padding from FlexibleSection */
+      padding-bottom: 4rem !important;
+    }
+
     .contact {
       width: 100%;
       border-top: 1px solid var(--border-separator);
@@ -101,7 +107,15 @@ const tags = [
     h1 {
       @include typography(section);
       text-align: left;
-      padding-bottom: 50px;
+      padding-bottom: 0.5rem; // reduced padding to accommodate date text
+    }
+
+    .compare-date {
+      font-size: 0.875rem;
+      color: var(--text-secondary, #666);
+      text-align: left;
+      margin-top: 0.25rem;
+      margin-bottom: 2rem;
     }
   }
 </style>

src/pages/index.astro

@@ -385,7 +385,6 @@ const tags = [
 
       .section-title {
         @include typography(section);  // Change back to section typography for main sections
-        border-bottom: 1px solid var(--text-body-primary);
         padding-bottom: 1rem;
         margin-bottom: 2rem;
       }

src/pages/press.astro

@@ -363,6 +363,7 @@ const tags = [
         text-decoration: none;  // Remove default link styling
         color: inherit;  // Keep text color
         padding: 20px;
+        background-color: #f9f9f9;
         border-width: 0 0 2px 0;
         border-style: solid;
         border-color: #f5f5f5;

src/pages/pricing.astro

@@ -7,6 +7,7 @@ import BookDemoForm from "../components/form/BookDemoForm/BookDemoForm";
 import PricingHeaderContent from "../data/pricing/page-header.mdx";
 import { PricingCards } from "../components/pricing/Pricing";
 import ContentLimiter from "../components/ContentLimiter.astro";
+import FlexibleSection from "../components/FlexibleSection.astro";
 
 const pricingCollection = await getCollection("pricing");
 // sort and map to prop type
@@ -64,7 +65,13 @@ const tags = [
   <main id="pricing-page">
     <ContentLimiter contentId="pricing-tiers" maxWidth={1100}>
       <header>
-        <h1>Pricing</h1>
+        <FlexibleSection
+        title="Pricing"
+        titleTag="h1"
+        id="blog-header"
+        variant="white"
+        theme="light"
+      >
         <PricingHeaderContent />
       </header>
       <PricingCards client:load data={pricingData} />
@@ -141,11 +148,11 @@ const tags = [
     }
 
     #pricing-tiers {
-      padding-top: calc(100px - var(--nav-height));
+      // padding-top: calc(100px - var(--nav-height));
       padding-bottom: calc(100px - var(--nav-height));
 
       @include break-up(md) {
-        padding-top: calc(200px - var(--nav-height));
+        // padding-top: calc(200px - var(--nav-height));
         padding-bottom: calc(200px - var(--nav-height));
       }