[FIX] for tesla browser - svgs are not supported. (#334)

* [FIX] for tesla browser - svgs are not supported. * changed grid to make the site better looking on my fav mobile computing platform.
nats-io · Apr 10, 2018 · 71e8bc6 · 71e8bc6
1 parent d5fcdbe
commit 71e8bc6
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 31 deletions.
diff --git a/Makefile b/Makefile
@@ -19,4 +19,10 @@ clean:
 	gulp clean
 
 deploy:
-	cd public; s3cmd sync . s3://test.nats.io/
+	cd public; s3cmd sync . s3://test.nats.io/
+#	s3cmd --recursive modify --add-header="Cache-Control:public, max-age=31536000, stale-while-revalidate=86400, stale-if-error=86400" s3://test.nats.io/img
+#	s3cmd --recursive modify --add-header="Cache-Control:public, max-age=31536000, stale-while-revalidate=86400, stale-if-error=86400" s3://test.nats.io/font
+
+prod:
+	s3cmd --recursive modify --add-header="Cache-Control:public, max-age=31536000, stale-while-revalidate=86400, stale-if-error=86400" s3://www.nats.io/img
+	s3cmd --recursive modify --add-header="Cache-Control:public, max-age=31536000, stale-while-revalidate=86400, stale-if-error=86400" s3://www.nats.io/font
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -18,12 +18,12 @@
                   </p>
               </div>
               <div class="col-xs-6 copyright">
-                  <p class="social svg">
+                  <p class="social">
                       <a target="_blank" href="http://www.cncf.io/" class="pull-right">
                           {{ if .IsHome }}
-                            {{ readFile "static/img/cncf-white.svg" | safeHTML }}
+                          <img src="/img/cncf-white.png" alt="cncf" class="cncf pull-right img-responsive"/>
                           {{ else }}
-                            {{ readFile "static/img/cncf-blue.svg" | safeHTML }}
+                          <img src="/img/cncf-blue.png" alt="cncf" class="cncf pull-right img-responsive"/>
                           {{ end }}
                       </a>
                   </p>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 {{ $baseUrl := .Site.BaseURL }}
-<html lang="en"  id="{{ if isset .Params "cssid" }}{{ .Params.cssid }}{{ else if .IsHome }}home{{else}}{{ urlize .Title }}{{ end }}-html">
+<html lang="en"  id='{{ if isset .Params "cssid" }}{{ .Params.cssid }}{{ else if .IsHome }}home{{else}}{{ urlize .Title }}{{ end }}-html'>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <meta name="description" content="{{if eq .Description ""}}{{ .Site.Params.description }}{{else}}{{ .Description }}{{end}}">
+    <meta name="description" content='{{if eq .Description ""}}{{ .Site.Params.description }}{{else}}{{ .Description }}{{end}}'>
     <meta name="author" content="{{ .Site.Params.author }}">
-    <meta name="generator" content="Hugo 0.13">
+    <meta name="generator" content="Hugo 0.37">
     <link rel="shortcut icon" href="/img/favicon.ico">
 
     <title>{{if eq .Title ""}}{{.Site.Title}}{{else}}{{ .Title }}{{end}}</title>
@@ -29,8 +29,8 @@
   <link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
 {{ end }}
   </head>
-  <body id="{{ if isset .Params "cssid" }}{{ .Params.cssid }}{{ else if eq .Section "blog" }}blog-post{{ else if eq .Section "documentation" }}nats-documentation-detail{{ else if eq .Section "download" }}download{{ else if .IsHome }}home{{else}}{{ urlize .Title }}{{ end }}-page">
-    <nav class="navbar navbar-default navbar-fixed-top{{if eq (relURL .URL) ("/" | safeHTML)}} home-page{{end}}">
+  <body id='{{ if isset .Params "cssid" }}{{ .Params.cssid }}{{ else if eq .Section "blog" }}blog-post{{ else if eq .Section "documentation" }}nats-documentation-detail{{ else if eq .Section "download" }}download{{ else if .IsHome }}home{{else}}{{ urlize .Title }}{{ end }}-page'>
+    <nav class='navbar navbar-default navbar-fixed-top{{if eq (relURL .URL) ("/" | safeHTML)}} home-page{{end}}'>
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -73,11 +73,11 @@
               {{ end }}
               </ul>
             <li> -->
-            <li class="dropdown{{if $currentNode.HasMenuCurrent " main " . }} active{{end}}">
+            <li class='dropdown{{if $currentNode.HasMenuCurrent " main " . }} active{{end}}'>
               <a class="main-item" href="{{.URL}}">{{ .Pre }}<span>{{ .Name }}</span></a>
             </li>
             {{else}}
-            <li class="dropdown{{if $currentNode.HasMenuCurrent " main " . }} active{{end}}">
+            <li class='dropdown{{if $currentNode.HasMenuCurrent " main " . }} active{{end}}'>
               <a class="main-item" href="{{.URL}}">{{ .Pre }}<span>{{ .Name }}</span></a>
             </li>
             {{end}}

diff --git a/layouts/partials/logos/baidu.html b/layouts/partials/logos/baidu.html
@@ -1,5 +1,6 @@
-<div class="col-xs-6 col-md-2 baidu">
+<div class="col-xs-3 baidu">
     <a target="_blank" href="http://www.baidu.com/">
-        {{ readFile "static/img/baidu.svg" | safeHTML }}
+        <img src="/img/baidu.png" alt="baidu" class="baidu"/>
     </a>
-</div>
+</div>
+<div class="col-xs-1"></div>
diff --git a/layouts/partials/logos/ericsson.html b/layouts/partials/logos/ericsson.html
@@ -1,5 +1,5 @@
-<div class="col-xs-6 col-md-2 ericsson">
+<div class="col-xs-3 ericsson">
     <a target="_blank" href="http://www.ericsson.com/">
-        {{ readFile "static/img/ericsson.svg" | safeHTML }}
+        <img src="/img/ericsson.png" alt="ericsson" class="ericsson"/>
     </a>
 </div>
diff --git a/layouts/partials/logos/ge.html b/layouts/partials/logos/ge.html
@@ -1,5 +1,5 @@
-<div class="col-xs-6 col-md-2 ge">
+<div class="col-xs-2 ge">
     <a target="_blank" href="http://www.ge.com/">
-        {{ readFile "static/img/ge.svg" | safeHTML }}
+        <img src="/img/ge.png" alt="ge" class="ge"/>
     </a>
 </div>
diff --git a/layouts/partials/logos/htc.html b/layouts/partials/logos/htc.html
@@ -1,5 +1,5 @@
-<div class="col-xs-6 col-md-2 htc">
+<div class="col-xs-3 htc">
     <a target="_blank" href="http://www.htc.com/us/">
-        {{ readFile "static/img/htc.svg" | safeHTML }}
+        <img src="/img/htc.png" alt="htc" class="htc"/>
     </a>
 </div>
diff --git a/layouts/partials/logos/pivotal.html b/layouts/partials/logos/pivotal.html
@@ -1,5 +1,5 @@
-<div class="col-xs-6 col-md-2 pivotal">
+<div class="col-xs-3 col-xs-offset-1 pivotal">
     <a target="_blank" href="http://pivotal.io/">
-        {{ readFile "static/img/pivotal.svg" | safeHTML }}
+        <img src="/img/pivotal.png" alt="pivotal" class="pivotal"/>
     </a>
 </div>
diff --git a/layouts/partials/logos/siemens.html b/layouts/partials/logos/siemens.html
@@ -1,5 +1,5 @@
-<div class="col-xs-6 col-md-2 siemens">
+<div class="col-xs-3 siemens">
     <a target="_blank" href="http://www.siemens.com/entry/cc/en/">
-        {{ readFile "static/img/siemens.svg" | safeHTML }}
+        <img src="/img/siemens.png" alt="siemens" class="siemens"/>
     </a>
 </div>
diff --git a/layouts/partials/logos/vmware.html b/layouts/partials/logos/vmware.html
@@ -1,5 +1,5 @@
-<div class="col-xs-6 col-md-2 vmware">
+<div class="col-xs-3 vmware">
     <a target="_blank" href="http://www.vmware.com/">
-        {{ readFile "static/img/vmware.svg" | safeHTML }}
+        <img src="/img/vmware.png" alt="vmware" class="vmware"/>
     </a>
 </div>
diff --git a/src/img/baidu.png b/src/img/baidu.png
diff --git a/src/img/cncf-blue.png b/src/img/cncf-blue.png
diff --git a/src/img/cncf-white.png b/src/img/cncf-white.png
diff --git a/src/img/ericsson.png b/src/img/ericsson.png
diff --git a/src/img/ge.png b/src/img/ge.png
diff --git a/src/img/htc.png b/src/img/htc.png
diff --git a/src/img/pivotal.png b/src/img/pivotal.png
diff --git a/src/img/siemens.png b/src/img/siemens.png
diff --git a/src/img/vmware.png b/src/img/vmware.png
diff --git a/src/less/styles.less b/src/less/styles.less
@@ -420,22 +420,26 @@ html#home-html {
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
       .ge {
-        svg {
+        svg,img {
           width: 40%;
         }
       }
-      .htc {
-        svg {
+      .htc{
+        svg,img {
           width: 70%;
         }
       }
       .pivotal {
-        svg {
+        svg,img {
           width: 90%;
         }
       }
-      .col-xs-6 {
+      .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1  {
         align-self: flex-end;
         margin-bottom: 30px;
       }
@@ -563,6 +567,18 @@ html#home-html {
       .icon-reddit{
         color: @nats-brand-reddit-dark;
       }
+
+      @media (max-width: @screen-xs-max) {
+        .icon-twitter,
+        .icon-google-plus,
+        .icon-slack,
+        .icon-reddit,
+        .icon-github{
+          vertical-align: middle;
+          font-size: 20px;
+        }
+      }
+
     }
   }
   .community-notice-panel {
@@ -901,13 +917,29 @@ footer {
       img {
         width: 32px;
       }
+      .cncf {
+        padding-top: 10px;
+        width: 50%;
+        vertical-align: sub;
+      }
       .svg {
         padding-top: 2px;
       }
       svg {
         height: 32px;
         vertical-align: sub;
       }
+
+      @media (max-width: @screen-xs-max) {
+        .icon-twitter,
+        .icon-google-plus,
+        .icon-slack,
+        .icon-reddit,
+        .icon-github{
+          vertical-align: sub;
+          font-size: 20px;
+        }
+      }
     }
   }
   .supported {
@@ -927,6 +959,10 @@ footer {
       .svg {
         padding-top: 2px;
       }
+      .cncf {
+        padding-top: 10px;
+        width: 50%;
+      }
       svg {
         height: 32px;
         vertical-align: sub;