Merge pull request kubernetes#4 from lucperkins/lperkins/front-page-a…

…esthetic More updates to the front page aesthetic
philips · Jan 7, 2019 · b793fdf · b793fdf
2 parents 1bc2254 + ec44ee3
commit b793fdf
Show file tree

Hide file tree

Showing 14 changed files with 606 additions and 11 deletions.
diff --git a/assets/sass/helpers.sass b/assets/sass/helpers.sass
@@ -0,0 +1,6 @@
+=flex
+  display: flex
+
+=x-center
+  +flex
+  justify-content: center
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
@@ -23,7 +23,7 @@ $etcd-dark-blue: darken($etcd-blue, 10%)
 
 // Bulma variable overrides
 $primary: $etcd-blue
-$link: darken($primary, 5%)
+$link: $etcd-dark-blue
 $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
@@ -36,6 +36,8 @@ $dashboard-panel-footer-top-margin: 3rem
 @import "bulma-dashboard/src/bulma-dashboard"
 @import "bulma-squeezebox/bulma-squeezebox"
 
+@import "helpers"
+
 =logo($touch, $desktop)
   +touch
     width: $touch
@@ -58,6 +60,14 @@ $dashboard-panel-footer-top-margin: 3rem
 .is-panel-logo
   width: 40%
 
+.is-adopter-block
+  & + &
+    margin-top: 4rem
+
+.is-project-logo
+  margin-bottom: 1rem
+  +logo(60%, 70%)
+
 // Ensure sticky footer
 .page
   display: flex
@@ -66,3 +76,12 @@ $dashboard-panel-footer-top-margin: 3rem
 
   .main
     flex: 1
+
+.is-shadowless
+  box-shadow: none
+
+.is-home-svg
+  +x-center
+
+  svg
+    height: 7.5rem
diff --git a/config.toml b/config.toml
@@ -34,22 +34,51 @@ panel  = "https://raw.githubusercontent.com/cncf/artwork/master/etcd/icon/color/
 [params.social]
 github = "https://github.com/etcd-io/etcd"
 
-[[params.features]]
+[[params.features.primary]]
 title = "Simple interface"
+svg = "interface"
 description = "Read and write values using standard HTTP tools, such as curl"
 
-[[params.features]]
+[[params.features.primary]]
 title = "Key-value storage"
+svg = "kv"
 description = "Store data in hierarchically organized directories, as in a standard filesystem"
 
-[[params.features]]
+[[params.features.primary]]
 title = "Watch for changes"
+svg = "watch"
 description = "Watch specific keys or directories for changes and react to changes in values"
 
+[[params.features.secondary]]
+text = "Optional SSL client certificate authentication"
+icon = "lock"
+
+[[params.features.secondary]]
+text = "Benchmarked at 1000s of writes/s per instance"
+icon = "chart-bar"
+
+[[params.features.secondary]]
+text = "Optional TTLs for keys expiration"
+icon = "clock"
+
+[[params.features.secondary]]
+text = "Properly distributed via Raft protocol"
+icon = "arrows-alt"
+
 [[params.fonts]]
 name = "Source Sans Pro"
 sizes = [300,400,600,700]
 
 [[params.fonts]]
 name = "Fira Mono"
 sizes = [300,400,600,700]
+
+[[params.adopters]]
+logo = "https://raw.githubusercontent.com/cncf/artwork/master/kubernetes/horizontal/color/kubernetes-horizontal-color.png"
+link = "https://kubernetes.io"
+description = "etcd is the backend for service discovery and stores cluster state and configuration "
+
+[[params.adopters]]
+logo = "https://www.cloudfoundry.org/wp-content/uploads/2015/11/CloudFoundaryCorp_rgb.png"
+link = "https://www.cloudfoundry.org/"
+description = "etcd stores cluster state and configuration and provides a global lock service "
diff --git a/layouts/_default/baseof.en.html b/layouts/_default/baseof.en.html
@@ -2,6 +2,7 @@
 <!DOCTYPE html>
 <html lang="{{ $langCode }}">
   <head>
+    {{ partial "meta.html" . }}
     <title>
       {{ block "title" . }}{{ .Site.Title }}{{ end }}
     </title>

diff --git a/layouts/partials/home/features.html b/layouts/partials/home/features.html
@@ -1,4 +1,6 @@
-{{ $features := .Site.Params.features }}
+{{ $features  := .Site.Params.features }}
+{{ $primary   := $features.primary }}
+{{ $secondary := $features.secondary }}
 <section class="section">
   <div class="container">
     <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-bold">
@@ -8,7 +10,8 @@
     <hr class="has-background-primary" />
 
     <div class="columns is-variable is-8">
-      {{ range $features }}
+      {{ range $primary }}
+      {{ $svg := printf "static/img/%s.svg" .svg }}
       <div class="column">
         <p class="title is-size-3 is-size-4-mobile is-spaced has-text-weight-light">
           {{ .title }}
@@ -17,6 +20,28 @@
         <p class="subtitle">
           {{ .description | markdownify }}
         </p>
+
+        <div class="is-home-svg">
+          {{ $svg | readFile | safeHTML }}
+        </div>
+      </div>
+      {{ end }}
+    </div>
+
+    <hr />
+
+    <div class="columns is-multiline">
+      {{ range $secondary }}
+      <div class="column">
+        <span class="icon has-text-danger">
+          <i class="fas fa-lg fa-{{ .icon }}"></i>
+        </span>
+
+        <br /><br />
+
+        <p class="is-size-5 is-size-6-mobile">
+          {{ .text }}
+        </p>
       </div>
       {{ end }}
     </div>

diff --git a/layouts/partials/home/info.html b/layouts/partials/home/info.html
@@ -1,5 +1,6 @@
 {{ $project  := .Site.Params.project | markdownify }}
 {{ $overview := .Site.Params.overview | markdownify }}
+{{ $adopters := .Site.Params.adopters }}
 <section class="section">
   <div class="container">
     <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-bold">
@@ -14,6 +15,8 @@
           Project
         </p>
 
+        <hr />
+
         <div class="content is-medium">
           {{ $project }}
         </div>
@@ -24,10 +27,38 @@
           Technical overview
         </p>
 
+        <hr />
+
         <div class="content is-medium">
           {{ $overview }}
         </div>
       </div>
+
+      <div class="column">
+        <p class="title has-text-weight-light">
+          Adopters
+        </p>
+
+        <hr />
+
+        {{ range $adopters }}
+        <div class="is-adopter-block">
+          <a href="{{ .link }}">
+            <img class="is-project-logo" src="{{ .logo }}">
+          </a>
+
+          <div class="content is-medium">
+            {{ .description | markdownify }}
+          </div>
+        </div>
+        {{ end }}
+
+        <div class="is-adopter-block"> 
+          <div class="content is-medium">
+            In addition, <a href="https://github.com/search?utf8=%E2%9C%93&q=etcd/">500+ projects on GitHub</a> are affiliated with etcd, including projects built on etcd, client bindings, and more.
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
diff --git a/layouts/partials/home/projects.html b/layouts/partials/home/projects.html
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
@@ -0,0 +1,2 @@
+<meta charset="utf-8">
+<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html
@@ -0,0 +1,2 @@
+{{ $path := .Get 0 }}
+{{ $path | readFile | safeHTML }}
diff --git a/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.content b/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.content
diff --git a/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.json b/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.json
@@ -1 +1 @@
-{"Target":"css/style.b900ac2b6c4c6297dc6c1fe08e134bfb65c3f624403a6406de889fe435c899c9.css","MediaType":"text/css","Data":{"Integrity":"sha256-uQCsK2xMYpfcbB/gjhNL+2XD9iRAOmQG3oif5DXImck="}}
+{"Target":"css/style.9385ab875dca868050050866c32fd531fd56788146891982c41510e42ff3eac6.css","MediaType":"text/css","Data":{"Integrity":"sha256-k4Wrh13KhoBQBQhmwy/VMf1WeIFGiRmCxBUQ5C/z6sY="}}
diff --git a/static/img/interface.svg b/static/img/interface.svg