landing page look improvements and footer improvements (#794)

kedacore · Jun 27, 2022 · 60ddb3d · 60ddb3d
1 parent a2e9daf
commit 60ddb3d
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 46 deletions.
diff --git a/assets/sass/card.sass b/assets/sass/card.sass
@@ -1,6 +1,6 @@
 .card
   height: 100%
-  border: $card-border
+  box-shadow: 5px 10px 15px #e4e4e4;
   border-radius: 5px
 
   display: flex

diff --git a/assets/sass/style.sass b/assets/sass/style.sass
@@ -196,14 +196,15 @@ $hero-body-padding: 4rem 1.5rem
     margin-left: 0.75rem
 
 .has-background-pattern
-	background-color: transparent;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%2324CEFF' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%232fc2f4' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%2337b6e8' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%233daadc' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23419ecf' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%234492c2' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%234587b5' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23467ca8' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%2345719b' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%2344668e' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23425c81' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%233f5274' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%233b4867' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23363f5a' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%2331364e' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%232c2d42' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23252536' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%231F1D2B' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
-	background-attachment: fixed;
-	background-size: cover;
+	background-color: transparent 
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%2324CEFF' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%232fc2f4' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%2337b6e8' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%233daadc' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23419ecf' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%234492c2' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%234587b5' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23467ca8' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%2345719b' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%2344668e' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23425c81' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%233f5274' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%233b4867' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23363f5a' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%2331364e' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%232c2d42' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23252536' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%231F1D2B' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E") 
+	background-attachment: fixed 
+	background-size: cover 
 
 .has-extra-padding
   margin: 1.5rem 0
 
+
 .is-youtube-embed
   width: 100%
   height: 20rem
@@ -221,7 +222,11 @@ $hero-body-padding: 4rem 1.5rem
     color: $secondary
 
     &:hover
-      color: $primary
+      color: #00aeff
+
+#cncf
+	&:hover 
+		color: #00aeff
 
 hr
   &.is-thick
@@ -232,7 +237,7 @@ hr
     color: $secondary !important
 
     &:hover
-      color: $grey-light !important
+      color: $keda-blue !important
 
 .navbar-item
   .icon
@@ -243,3 +248,65 @@ hr
     .button:not(:first-child)
       margin-left: 0.5rem
 
+.has-no-shadow 
+	box-shadow: none !important
+
+.is-info-light
+	background: hsl(206, 70%, 96%)
+
+.section 
+	padding: 4rem 1.5rem
+
+.underline--magical
+  background-image: linear-gradient(to right, rgb(250, 112, 154) 0%, rgb(254, 225, 64) 100%)
+  background-repeat: no-repeat
+  background-size: 100% 0.2em
+  background-position: 0 88%
+  transition: background-size 0.25s ease-in-out
+  &:hover
+    background-size: 100% 88%
+
+.underline--magical-1
+  background-image: linear-gradient(to right, #B2FEFA 0%, #0ED2F7 100%)
+  background-repeat: no-repeat
+  background-size: 100% 0.2em
+  background-position: 0 88%
+  transition: background-size 0.25s ease-in-out
+  &:hover
+    background-size: 100% 88%
+
+.underline--magical-2
+  background-image: linear-gradient(to right, #E29587 0%, #D66D75 100%)
+  background-repeat: no-repeat
+  background-size: 100% 0.2em
+  background-position: 0 88%
+  transition: background-size 0.25s ease-in-out
+  &:hover
+    background-size: 100% 88%
+
+.underline--magical-3
+  background-image: linear-gradient(to right, #A7BFE8 0%, #6190E8 100%)
+  background-repeat: no-repeat
+  background-size: 100% 0.2em
+  background-position: 0 88%
+  transition: background-size 0.25s ease-in-out
+  &:hover
+    background-size: 100% 88%
+
+.underline--magical-4
+  background-image: linear-gradient(to right, #F8FFAE 0%, #43C6AC 100%)
+  background-repeat: no-repeat
+  background-size: 100% 0.2em
+  background-position: 0 88%
+  transition: background-size 0.25s ease-in-out
+  &:hover
+    background-size: 100% 88%
+
+.underline--magical-5
+  background-image: linear-gradient(to right, #FDB99B 0%, #CF8BF3 100%)
+  background-repeat: no-repeat
+  background-size: 100% 0.2em
+  background-position: 0 88%
+  transition: background-size 0.25s ease-in-out
+  &:hover
+    background-size: 100% 88%
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -3,7 +3,7 @@
 {{ $year  := now.Year }}
 {{ $menu  := site.Menus.main }}
 {{ $btns  := dict "btns" site.Params.social "color" "white" "outlined" true }}
-<footer class="footer">
+<footer class="footer has-background-pattern">
 
   <div class="container">
     <div class="columns is-vcentered is-variable is-8">
@@ -14,8 +14,8 @@
       <div class="column">
         {{ range $menu }}
         {{ $isExternal := hasPrefix .URL "http" }}
-        <p class="is-size-5">
-          <a href="{{ .URL }}">
+        <p class="is-size-4">
+          <a href="{{ .URL }}" class="has-text-white has-text-weight-semibold">
             <span>
               {{ .Name }}
             </span>
@@ -30,14 +30,12 @@
       </div>
 
       <div class="column">     
-        <div class="buttons are-small">
+        <div class="buttons are-normal">
           {{ partial "social-buttons.html" $btns }}
         </div>
       </div>
     </div>
 
-    <hr class="has-background-primary is-thick" />
-
     <div class="has-text-weight-medium">
       <p>
         &copy; KEDA Authors 2014-{{ $year }} | Documentation Distributed under <a href="https://creativecommons.org/licenses/by/4.0" target="_blank">CC-BY-4.0</a>

diff --git a/layouts/partials/home/cncf.html b/layouts/partials/home/cncf.html
@@ -1,8 +1,8 @@
 {{ $logo := "img/logos/cncf-color.png" | relURL }}
 <section class="section">
   <div class="container has-text-centered">
-    <p class="title is-size-3 is-size-4-mobile has-text-weight-medium">
-      KEDA is a <a href="https://cncf.io" target="_blank">Cloud Native Computing Foundation</a> incubation project
+    <p class="title is-size-3 is-size-4-mobile has-text-weight-semibold">
+      KEDA is a <a id="cncf" href="https://cncf.io" target="_blank">Cloud Native Computing Foundation</a> incubation project
     </p>
 
     <img class="is-cncf-logo" src="{{ $logo }}" alt="CNCF logo">

diff --git a/layouts/partials/home/features.html b/layouts/partials/home/features.html
@@ -1,20 +1,20 @@
 {{ $features := site.Params.features }}
 <section class="section">
-  <div class="container">
-    <p class="title is-size-2 is-size-3-mobile" id="features">
+  <div class="container has-text-centered">
+    <p style="padding:10px" class="title is-inline-block underline--magical is-size-1 is-size-3-mobile" id="features">
       Features
     </p>
 
     <br />
 
-    <div class="columns is-multiline is-variable is-4">
+    <div style="margin-top: 20px;" class="columns is-multiline is-variable is-4">
       {{ range $features }}
       <div class="column is-one-third">
-        <div class="card is-borderless has-extra-bottom-margin">
+        <div class="card has-no-shadow is-borderless has-extra-bottom-margin">
           <div class="card-content is-paddingless">
             <p class="title has-text-secondary is-spaced">
               <span class="icon">
-                <i class="fa-lg {{ .icon }}"></i>
+                <i class="fa-lg {{ .icon }} fa-2x"></i>
               </span>
             </p>
 

diff --git a/layouts/partials/home/get-involved.html b/layouts/partials/home/get-involved.html
@@ -1,11 +1,13 @@
 {{ with site.GetPage "/community" }}
 <section class="section has-background-light">
   <div class="container">
-    <p class="title is-size-2 is-size-3-mobile" id="get-involved">
-      Get Involved
-    </p>
+	  <div class="has-text-centered">
+		<p class="title is-size-1 is-inline-block underline--magical-5 is-size-3-mobile" id="get-involved">
+      		Get Involved
+    	</p> 
+	  </div>
 
-    <div class="content is-medium">
+    <div style="margin-top:15px;" class="content is-medium">
       {{ partial "include.html" "get-involved.md" }}
     </div>
   </div>

diff --git a/layouts/partials/home/samples.html b/layouts/partials/home/samples.html
@@ -1,17 +1,19 @@
 {{ $samples := site.Params.samples }}
 <section class="section has-background-white-bis">
   <div class="container">
-    <p class="title is-size-2 is-size-3-mobile" id="samples">
-      Highlighted Samples
-    </p>
-    <p class="subtitle is-size-4 is-size-5-mobile">
-      We provide a <a href="https://github.com/kedacore/samples" target="_blank">variety of samples</a>, but here are some of our highlights:
-    </p>
+	  <div class="has-text-centered">
+		<p style="padding:10px;" class="title is-spaced is-size-1 is-size-3-mobile is-inline-block underline--magical-3" id="samples">
+      		Highlighted Samples
+    	</p>
+   		<p class="subtitle is-size-4 is-size-5-mobile">
+      		We provide a <a href="https://github.com/kedacore/samples" target="_blank">variety of samples</a>, but here are some of our highlights:
+    	</p>
+	  </div>
 
-    <div class="columns">
+    <div style="margin-top:20px" class="columns">
       {{ range $samples }}
       <div class="column is-one-third">
-        <div class="card is-dark">
+        <div class="card is-info-light">
           <div class="card-content">
             <p class="title is-size-2 is-size-3-mobile is-spaced">
               <span class="icon has-text-primary">

diff --git a/layouts/partials/home/scalers.html b/layouts/partials/home/scalers.html
@@ -2,17 +2,20 @@
 {{ $scalers := where site.RegularPages ".CurrentSection.Title" "Scalers" }}
 <section class="section">
   <div class="container">
-    <p class="title is-size-2 is-size-3-mobile is-spaced" id="scalers">
+	  <div class="has-text-centered">
+		<p style="padding:10px"  
+		   class="title is-inline-block is-size-1 is-size-3-mobile is-spaced underline--magical-2 " id="scalers">
       Scalers
-    </p>
+    	</p>
 
-    <p class="subtitle has-text-dark is-size-4 is-size-5-mobile">
-      Scalers represent event sources that KEDA can scale based on
-    </p>
+    	<p class="subtitle has-text-dark is-size-4 is-size-5-mobile has-text-centered">
+     		Scalers represent event sources that KEDA can scale based on
+    	</p>	  
+	  </div>
 
     <br />
 
-    <div class="columns is-multiline">
+    <div style="margin-top:20px" class="columns is-multiline">
       {{ range $scalers }}
       {{ $version := index (split .File.Path "/") 1 }}
       {{ if eq $version $latest }}

diff --git a/layouts/partials/home/what-is.html b/layouts/partials/home/what-is.html
@@ -3,7 +3,7 @@
   <div class="container">
     <div class="columns is-vcentered is-flexible is-8">
       <div class="column is-one-third">
-        <p class="title is-size-2 is-size-3-mobile">
+        <p style="padding:10px" class="title is-inline-block is-size-1 is-size-3-mobile underline--magical-1">
           What is KEDA?
         </p>
       </div>

diff --git a/layouts/partials/logo-section.html b/layouts/partials/logo-section.html
@@ -1,16 +1,18 @@
 <section class="section">
   <div class="container">
-    <p class="title is-size-2 is-size-3-mobile is-spaced">
-      {{ .title }}
-    </p>
+	  <div class="has-text-centered">
+		<p style="padding:10px;" class="title is-size-1 is-size-3-mobile is-spaced is-inline-block underline--magical-4">
+      		{{ .title }}
+    	</p>
 
-    <p class="subtitle is-size-4 is-size-5-mobile">
-      {{ .description }}
-    </p>
+    	<p class="subtitle is-size-4 is-size-5-mobile">
+      		{{ .description }}
+    	</p>
+	  </div>
 
     <br />
 
-    <div class="columns is-centered is-multiline is-vcentered is-variable is-8">
+    <div style="margin-top:20px" class="columns is-centered is-multiline is-vcentered is-variable is-8">
       {{ range .logos }}
       {{ $logo := printf "img/logos/%s" .logo | relURL }}
       <div class="column is-one-quarter">