Add logos to book

This adds logos to the book (favicon and header).  Canonical sources are
available in a GCS bucket.

This also splits up the css while we're at it to be better organized.

docs/book/book.toml

@@ -7,6 +7,7 @@ title = "The Kubebuilder Book"
 [output.html]
 google-analytics = "UA-119864590-1"
 curly-quotes = true
+additional-css = ["theme/css/markers.css", "theme/css/custom.css"]
 
 [preprocessor.literatego]
 command = "./litgo.sh"

docs/book/install-and-build.sh

@@ -63,4 +63,5 @@ gobin=$(go env GOBIN)
 gobin=${GOBIN:-$(go env GOPATH)/bin}  # GOBIN won't always be set :-/
 
 export PATH=${gobin}:$PATH
-/tmp/mdbook build
+verb=${1:-build}
+/tmp/mdbook ${verb}

docs/book/src/logos/README.md

@@ -0,0 +1,12 @@
+# KubeBuilder Logos
+
+The official location for the logos is in a [public GCS
+bucket][kb-logos-gcs] (or if you like GCS XML listings,
+[here][kb-logos-gcs-direct]).
+
+These logos are copies used in the book, resized to their appropriate
+sizes. 
+
+[kb-logos-gcs]: https://console.cloud.google.com/storage/browser/kubebuilder-logos 
+
+[kb-logos-gcs-direct]: https://storage.googleapis.com/kubebuilder-logos

docs/book/theme/css/custom.css

@@ -0,0 +1,3 @@
+.menu-title img {
+    vertical-align: bottom;
+}

docs/book/theme/css/general.css → docs/book/theme/css/markers.css

@@ -1,147 +1,3 @@
-/* Base styles and content styles */
-
-@import 'variables.css';
-
-html {
-    font-family: "Open Sans", sans-serif;
-    color: var(--fg);
-    background-color: var(--bg);
-    text-size-adjust: none;
-}
-
-body {
-    margin: 0;
-    font-size: 1rem;
-    overflow-x: hidden;
-}
-
-code {
-    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
-    font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
-}
-
-.left { float: left; }
-.right { float: right; }
-.hidden { display: none; }
-.play-button.hidden { display: none; }
-
-h2, h3 { margin-top: 2.5em; }
-h4, h5 { margin-top: 2em; }
-
-.header + .header h3,
-.header + .header h4,
-.header + .header h5 { 
-    margin-top: 1em;
-}
-
-a.header:target h1:before,
-a.header:target h2:before,
-a.header:target h3:before,
-a.header:target h4:before {
-    display: inline-block;
-    content: "»";
-    margin-left: -30px;
-    width: 30px;
-}
-
-.page {
-    outline: 0;
-    padding: 0 var(--page-padding);
-}
-.page-wrapper {
-    box-sizing: border-box;
-}
-.js .page-wrapper {
-    transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
-}
-
-.content {
-    overflow-y: auto;
-    padding: 0 15px;
-    padding-bottom: 50px;
-}
-.content main {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: var(--content-max-width);
-}
-.content a { text-decoration: none; }
-.content a:hover { text-decoration: underline; }
-.content img { max-width: 100%; }
-.content .header:link,
-.content .header:visited {
-    color: var(--fg);
-}
-.content .header:link,
-.content .header:visited:hover {
-    text-decoration: none;
-}
-
-table {
-    margin: 0 auto;
-    border-collapse: collapse;
-}
-table td {
-    padding: 3px 20px;
-    border: 1px var(--table-border-color) solid;
-}
-table thead {
-    background: var(--table-header-bg);
-}
-table thead td {
-    font-weight: 700;
-    border: none;
-}
-table thead tr {
-    border: 1px var(--table-header-bg) solid;
-}
-/* Alternate background colors for rows */
-table tbody tr:nth-child(2n) {
-    background: var(--table-alternate-bg);
-}
-
-
-blockquote {
-    margin: 20px 0;
-    padding: 0 20px;
-    color: var(--fg);
-    background-color: var(--quote-bg);
-    border-top: .1em solid var(--quote-border);
-    border-bottom: .1em solid var(--quote-border);
-}
-
-
-:not(.footnote-definition) + .footnote-definition,
-.footnote-definition + :not(.footnote-definition) {
-    margin-top: 2em;
-}
-.footnote-definition {
-    font-size: 0.9em;
-    margin: 0.5em 0;
-}
-.footnote-definition p {
-    display: inline;
-}
-
-.tooltiptext {
-    position: absolute;
-    visibility: hidden;
-    color: #fff;
-    background-color: #333;
-    transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
-    left: -8px; /* Half of the width of the icon */
-    top: -35px;
-    font-size: 0.8em;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 8px;
-    margin: 5px;
-    z-index: 1000;
-}
-.tooltipped .tooltiptext {
-    visibility: visible;
-}
-
 /* From here on out is custom stuff */
 
 /* marker docs styles */