Merge pull request kubernetes#2 from lucperkins/lperkins/main-page-up…

…date

Update front page aesthetic

assets/sass/style.sass

@@ -6,12 +6,12 @@
 {{- $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }}
 {{- $sansSerifFont := .Site.Params.sansSerifFont }}
 {{- $monospaceFont := .Site.Params.monospaceFont }}
-//{{- $fontAwesomeVersion := .Site.Params.fontAwesomeVersion }}
-//{{- $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}
+{{- $fontAwesomeVersion := .Site.Params.fontAwesomeVersion }}
+{{- $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}
 
 @charset "utf-8"
 @import url({{ $fontsUrl }})
-//@import url({{ $fontAwesomeUrl }})
+@import url({{ $fontAwesomeUrl }})
 
 // Project-specific colors and variables
 $etcd-blue: #419eda
@@ -23,7 +23,7 @@ $etcd-dark-blue: darken($etcd-blue, 10%)
 
 // Bulma variable overrides
 $primary: $etcd-blue
-$link: $primary
+$link: darken($primary, 5%)
 $family-sans-serif: "{{ $sansSerifFont }}", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
 $family-code: "{{ $monospaceFont }}", monospace
 $toc-item-font-size: 1.5rem

config.toml

@@ -8,12 +8,21 @@ fontAwesomeVersion = "5.6.1"
 sansSerifFont      = "Source Sans Pro"
 monospaceFont      = "Fira Mono"
 favicon            = "https://raw.githubusercontent.com/cncf/artwork/master/etcd/icon/color/etcd-icon-color.png"
+
 project            = """
-**etcd** is a distributed key-value store that provides a reliable way to store data across a cluster of machines. It’s open source and available [on GitHub](https://github.com/etcd-io/etcd). etcd gracefully handles leader elections during network partitions and will tolerate machine failure, including the leader.
+**etcd** is a strongly consistent, distributed key-value store that provides a reliable way to store data that needs to be accessed by a distributed system or cluster of machines. It gracefully handles leader elections during network partitions and can tolerate machine failure, even in the leader node.
+
+Applications of any complexity, from a simple web app to [Kubernetes](https://kubernetes.io), can read data from and write data into etcd.
+
+Your applications can read from and write data into etcd. A simple use case is storing database connection details or feature flags in etcd as key-value pairs. These values can be watched, allowing your app to reconfigure itself when they change. Advanced uses take advantage of etcd's consistency guarantees to implement database leader elections or perform distributed locking across a cluster of workers.
 
-Your applications can read and write data into etcd. A simple use case is storing database connection details or feature flags in etcd as key-value pairs. These values can be watched, allowing your app to reconfigure itself when they change. Advanced uses take advantage of etcd's consistency guarantees to implement database leader elections or perform distributed locking across a cluster of workers.
+etcd is open source, available [on GitHub](https://github.com/etcd-io/etcd), and backed by the [Cloud Native Computing Foundation](https://cncf.io).
+"""
 
+overview           = """
 etcd is written in [Go](https://golang.org), which has excellent cross-platform support, small binaries and a great community behind it. Communication between etcd machines is handled via the Raft consensus algorithm.
+
+Latency from the etcd leader is the most important metric to track and the built-in dashboard has a view dedicated to this. In our testing, severe latency will introduce instability within the cluster because Raft is only as fast as the slowest machine in the majority. You can mitigate this issue by properly tuning the cluster. etcd has been pre-tuned on cloud providers with highly variable networks.
 """
 
 [params.logos]
@@ -22,17 +31,20 @@ cncf   = "https://raw.githubusercontent.com/cncf/artwork/master/cncf/horizontal/
 footer = "https://raw.githubusercontent.com/cncf/artwork/master/etcd/icon/color/etcd-icon-color.png"
 panel  = "https://raw.githubusercontent.com/cncf/artwork/master/etcd/icon/color/etcd-icon-color.png"
 
+[params.social]
+github = "https://github.com/etcd-io/etcd"
+
 [[params.features]]
 title = "Simple interface"
-description = "Read and write values with curl and other HTTP libraries"
+description = "Read and write values using standard HTTP tools, such as curl"
 
 [[params.features]]
 title = "Key-value storage"
-description = "Store data in directories, similar to a filesystem"
+description = "Store data in hierarchically organized directories, as in a standard filesystem"
 
 [[params.features]]
 title = "Watch for changes"
-description = "Watch a key or directory for changes and react to the new values"
+description = "Watch specific keys or directories for changes and react to changes in values"
 
 [[params.fonts]]
 name = "Source Sans Pro"

layouts/index.en.html

@@ -5,7 +5,10 @@
 {{ define "main" }}
 <div class="main">
   {{ partial "home/hero.html" . }}
+  {{ partial "home/features.html" . }}
+  <hr />
   {{ partial "home/info.html" . }}
+  <hr />
   {{ partial "home/cncf.html" . }}
   {{ partial "home/coming-soon.html" . }}
 </div>

layouts/partials/home/features.html

@@ -0,0 +1,24 @@
+{{ $features := .Site.Params.features }}
+<section class="section">
+  <div class="container">
+    <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-bold">
+      Features
+    </p>
+
+    <hr class="has-background-primary" />
+
+    <div class="columns is-variable is-8">
+      {{ range $features }}
+      <div class="column">
+        <p class="title is-size-3 is-size-4-mobile is-spaced has-text-weight-light">
+          {{ .title }}
+        </p>
+
+        <p class="subtitle">
+          {{ .description | markdownify }}
+        </p>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>

layouts/partials/home/hero.html

@@ -1,13 +1,29 @@
-{{ $logo        := .Site.Params.logos.hero }}
-{{ $description := .Site.Params.description | markdownify }}
+{{ $params      := .Site.Params }}
+{{ $logo        := $params.logos.hero }}
+{{ $description := $params.description | markdownify }}
+{{ $social      := $params.social }}
+{{ $github      := $social.github }}
 <section class="hero is-medium is-primary">
   <div class="container has-text-centered">
     <div class="hero-body">
       <img class="is-hero-logo" src="{{ $logo }}" alt="etcd main hero logo">
 
-      <p class="subtitle is-size-2 is-size-3-mobile has-text-white-bis has-text-weight-light">
+      <p class="subtitle is-size-2 is-size-4-mobile has-text-white-bis has-text-weight-light">
         {{ $description }}
       </p>
+
+      <br />
+
+      <div class="buttons is-centered">
+        <a class="button is-black is-medium" href="{{ $github }}">
+          <span class="icon">
+            <i class="fab fa-github"></i>
+          </span>
+          <span class="has-text-weight-bold">
+            GitHub
+          </span>
+        </a>
+      </div>
     </div>
   </div>
 </section>

layouts/partials/home/info.html

@@ -1,33 +1,31 @@
 {{ $project  := .Site.Params.project | markdownify }}
-{{ $features := .Site.Params.features }}
+{{ $overview := .Site.Params.overview | markdownify }}
 <section class="section">
   <div class="container">
+    <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-bold">
+      What is etcd?
+    </p>
+
+    <hr class="has-background-primary" />
+
     <div class="columns is-variable is-8">
       <div class="column">
-        <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-medium">
-          What is etcd?
+        <p class="title has-text-weight-light">
+          Project
         </p>
 
-        <div class="content">
+        <div class="content is-medium">
           {{ $project }}
         </div>
       </div>
+
       <div class="column">
-        <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-medium">
-          Features
+        <p class="title has-text-weight-light">
+          Technical overview
         </p>
 
-        <div class="content">
-          {{ range $features }}
-          <div class="card">
-            <div class="card-content content">
-              <h4 class="has-text-primary">
-                {{ .title }}
-              </h4>
-              {{ .description }}
-            </div>
-          </div>
-          {{ end }}
+        <div class="content is-medium">
+          {{ $overview }}
         </div>
       </div>
     </div>

resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.json

@@ -1 +1 @@
-{"Target":"css/style.5c4dd94bdf7287522a557ddeabcccdc79a4ff78c5d8204963fc18886d9362d58.css","MediaType":"text/css","Data":{"Integrity":"sha256-XE3ZS99yh1IqVX3eq8zNx5pP94xdggSWP8GIhtk2LVg="}}
+{"Target":"css/style.b900ac2b6c4c6297dc6c1fe08e134bfb65c3f624403a6406de889fe435c899c9.css","MediaType":"text/css","Data":{"Integrity":"sha256-uQCsK2xMYpfcbB/gjhNL+2XD9iRAOmQG3oif5DXImck="}}