site: Alternative layout

Instead of a shadowed box in the middle of the screen, sticking navbar to the top and floating content in the middle. This is a bit more consistent with current design patterns and more mobile-friendly. If we like the preview, we can consider incorporating. Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
kubernetes-sigs · Mar 8, 2020 · af6141c · af6141c
1 parent 31e0f49
commit af6141c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 31 deletions.
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
@@ -5,7 +5,7 @@
             Krew is a Kubernetes
                 <a href="https://github.com/kubernetes/community/blob/master/sig-cli/README.md#cli-special-interest-group" target="_blank" class="text-info">
                     SIG CLI</a> project.
-                <p>
+                <p class="d-none d-md-block">
                     {{- with .File -}}
                         <a href="http://sigs.k8s.io/krew/site/content/{{- .File.Path -}}" target="_blank" class="text-info">
                         Edit Page</a>

diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
@@ -3,8 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>
         {{ if .IsHome }}
             {{ .Site.Title }}
@@ -21,10 +20,11 @@
 
 <body>
 
-    <div class="container top-level-container shadow-lg rounded
+    {{ partial "navbar.html" . }}
+
+    <div class="container top-level-container
         col-12 col-lg-8 col-xl-6
-        my-0 my-md-5
+        my-1 my-md-3
         p-0">
-        {{ partial "navbar.html" . }}
 
-        <div class="py-md-4 pl-2 px-md-5">
+        <div class="py-1 pl-2 px-md-5">
diff --git a/site/layouts/partials/navbar.html b/site/layouts/partials/navbar.html
@@ -1,29 +1,31 @@
 <nav class="navbar navbar-expand-md navbar-light bg-light">
-    <a class="navbar-brand" href="{{"/" | relURL }}">
-        <img src="{{ "/img/krew-logo.svg" }}" height="40vw"/>
-    </a>
-
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-        <div class="navbar-nav">
-          <a class="nav-item nav-link {{if .IsHome}}active{{end}}" href="{{"/"|relURL}}">
-            Home
-            {{if .IsHome}}<span class="sr-only">(current)</span>{{end}}
+    <div class="container top-level-container col-12">
+        <a class="navbar-brand" href="{{"/" | relURL }}">
+            <img src="{{ "/img/krew-logo.svg" }}" height="40vw"/>
         </a>
 
-        {{ $isQuickstart := (eq .Slug "quickstart") }}
-        {{ $isDocs := (and (eq .Section "docs") (ne .Slug "quickstart")) }}
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+            <a class="nav-item nav-link {{if .IsHome}}active{{end}}" href="{{"/"|relURL}}">
+                Home
+                {{if .IsHome}}<span class="sr-only">(current)</span>{{end}}
+            </a>
 
-        <a class="nav-item nav-link {{if $isQuickstart}}active{{end}}" href="{{ "/docs/user-guide/quickstart/" | relURL}}">
-            Quickstart
-            {{if $isQuickstart}}<span class="sr-only">(current)</span>{{end}}
-        </a>
-        <a class="nav-item nav-link {{if $isDocs}}active{{end}}" href="{{ "/docs/" | relURL}}">
-            Documentation
-            {{if $isDocs}}<span class="sr-only">(current)</span>{{end}}
-        </a>
-        <a class="nav-item nav-link" href="https://sigs.k8s.io/krew">GitHub</a>
+            {{ $isQuickstart := (eq .Slug "quickstart") }}
+            {{ $isDocs := (and (eq .Section "docs") (ne .Slug "quickstart")) }}
+
+            <a class="nav-item nav-link {{if $isQuickstart}}active{{end}}" href="{{ "/docs/user-guide/quickstart/" | relURL}}">
+                Quickstart
+                {{if $isQuickstart}}<span class="sr-only">(current)</span>{{end}}
+            </a>
+            <a class="nav-item nav-link {{if $isDocs}}active{{end}}" href="{{ "/docs/" | relURL}}">
+                Documentation
+                {{if $isDocs}}<span class="sr-only">(current)</span>{{end}}
+            </a>
+            <a class="nav-item nav-link" href="https://sigs.k8s.io/krew">GitHub</a>
+        </div>
     </div>
 </nav>
diff --git a/site/static/css/style.css b/site/static/css/style.css
@@ -16,7 +16,7 @@ article h1, article h2, article h3, article h4 {
 
 pre {
     padding: 12px;
-    overflow-y: scroll;
+    overflow: auto
 }
 
 .noselect {