Fix issue with white bar on loading

alexellis · alexellis · commit b94615314f2c · 2025-03-06T12:12:35.000Z
Signed-off-by: Alex Ellis (OpenFaaS Ltd) &lt;alexellis2@gmail.com&gt;
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -7,6 +7,9 @@
 - name: Pricing
   class: navbar-item
   link: /pricing/
+# - name: Products
+#   class: navbar-item
+#   link: /products/
 - name: Support
   class: navbar-item
   link: /support/
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,4 +1,4 @@
-<nav id="top-nav" class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">
+<nav id="top-nav" style="height: 120px;" class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">
     <div class="container is-fluid">
         <div class="navbar-brand">
             <a class="navbar-item" href="{{ site.baseurl }}/">
diff --git a/_includes/products-page/products-cards.html b/_includes/products-page/products-cards.html
@@ -0,0 +1,38 @@
+<div class="container">
+    <div class="columns is-multiline">
+        <div class="column is-12 is-spaced-bottom">
+            <div class="cards-wrapper">
+
+                <div class="card has-text-centered is-12">
+                    <div class="card-content">
+                        <div class="card-logo">
+                            <figure class="image is-96x96">
+                                <img src="{{ site.baseurl }}/images/openfaas/logo-whale-round.png" alt="logo">
+                            </figure>
+                        </div>
+                        <h3 class="title is-size-12 is-size-8-desktop has-text-grey-darker">
+                            OpenFaaS Standard & Enterprise
+                        </h3>
+                        <subtitle class="is-size-5 mb-3">
+                            Portable serverless framework for Kubernetes
+                        </subtitle>
+                        <h3 class="title has-text-weight-light is-size-5 is-size-4-desktop">
+                            <p style="padding-bottom: 20px">Build functions and deploy them to production with the power of Kubernetes.</p>
+
+                            <ul style="line-height: 2.5rem; text-align: left; padding-left: 20px; list-style-type: square;">
+                                <li>Highly scaleable functions scale up with demand or to zero.</li>
+                                <li>Focus on writing code instead of low-level Kubernetes YAML.</li>
+                                <li>Get expert support and assistance from the OpenFaaS team.</li>
+                                <li>Automate tasks, run scheduled jobs and ETL for your data.</li>
+                                <li>Integrate with the API, Helm, ArgoCD or our CLI/Dashboard.</li>
+                            </ul>
+                        </h3>
+
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/_includes/products-page/products-title.html b/_includes/products-page/products-title.html
@@ -0,0 +1,9 @@
+<div class="container">
+	<h1 class="title is-size-3-mobile is-size-2-tablet is-size-1-desktop  is-capitalized has-text-weight-bold">
+		Our products &amp; services
+	</h1>
+
+	<p class="title is-size-5 is-size-4-desktop has-text-grey-darker has-text-weight-light">
+		OpenFaaS Ltd is the company behind OpenFaaS, but we also offer complimentary solutions.
+	</p>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<html class="has-navbar-fixed-top" lang="en">
+<html class="has-navbar-fixed-top" lang="en" style="padding-top: 120px">
 
 <head>
 	<meta charset="utf-8">
diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<html class="has-navbar-fixed-top" lang="en">
+<html class="has-navbar-fixed-top" lang="en" style="padding-top: 120px;"">
 
 <head>
 	<meta charset="utf-8">
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,9 +1,15 @@
-version: "3"
+# version: "3"
 services:
   openfaas-jekyll:
     command: jekyll serve --force_polling
     image: jekyll/jekyll:3.8
     volumes:
       - .:/srv/jekyll
+      - site:/srv/jekyll/_site
     ports:
       - 4000:4000
+    environment:
+      - JEKYLL_UID=1000
+
+volumes:
+  site:
diff --git a/js/main.js b/js/main.js
@@ -108,3 +108,7 @@ function initVideoModal() {
         showModal(false);
     });
 }
+
+// Run shrinkNav on start-up to cover up the white bar shown between the nav
+// and the blue hero on the landing page
+// shrinkNav()
diff --git a/products/index.html b/products/index.html
@@ -0,0 +1,17 @@
+---
+title: Products by OpenFaaS Ltd
+description: Learn what products and services OpenFaaS Ltd offers
+image: https://www.openfaas.com/images/pexels-fauxels-3183150.jpg
+---
+
+<section class="hero">
+    <div class="hero-body has-text-centered intro">
+        {% include products-page/products-title.html %}
+    </div>
+
+    <div class="hero-body white call-to-action is-spaced-bottom pb-3">
+        {% include products-page/products-cards.html %}
+    </div>
+
+
+</section>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<nav id="top-nav" class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">`
	`1`	`+<nav id="top-nav" style="height: 120px;" class="navbar is-fixed-top is-primary" role="navigation" aria-label="main navigation">`
`2`	`2`	`<div class="container is-fluid">`
`3`	`3`	`<div class="navbar-brand">`
`4`	`4`	`<a class="navbar-item" href="{{ site.baseurl }}/">`
Original file line number	Diff line number	Diff line change
`@@ -108,3 +108,7 @@ function initVideoModal() {`
`108`	`108`	`showModal(false);`
`109`	`109`	`});`
`110`	`110`	`}`
	`111`	`+`
	`112`	`+// Run shrinkNav on start-up to cover up the white bar shown between the nav`
	`113`	`+// and the blue hero on the landing page`
	`114`	`+// shrinkNav()`