Updated style for top page cover

5 files changed, 141 insertions, 21 deletions

diff --git a/assets/scss/_custom_styles.scss b/assets/scss/_custom_styles.scss
new file mode 100644
index 000000000..874fe0203
--- /dev/null
+++ b/assets/scss/_custom_styles.scss
@@ -0,0 +1,43 @@
+// Custom styles.
+
+// The table anchor for syscall references so that entries referenced
+// directly by an anchor aren't buried underneath the header.
+a.doc-table-anchor {
+    display: block;
+    position: relative;
+    top: -75px;
+    visibility: hidden;
+}
+
+// Adjust the width of the svg logo in the header. For smaller svg
+// files the width is too large.
+.td-navbar .navbar-brand .navbar-logo svg {
+   width: auto;
+}
+
+.td-navbar-cover .navbar-brand {
+    display: none;
+}
+.td-navbar-cover.navbar-bg-onscroll .navbar-brand {
+    display: inherit;
+}
+
+// Cover block.
+.td-default main section.td-cover-block h1 {
+    padding-bottom: 6rem;
+}
+
+.td-default main section.td-cover-block {
+    padding-top: 4rem;
+    padding-bottom: 8rem;
+}
+
+.td-default main section.td-cover-block p.lead {
+    width: 50%;
+    font-size: 2rem;
+}
+
+.td-default main section.td-cover-block p.lead strong {
+    font-weight: bold;
+}
+
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index eec4cfe30..8a48c650d 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -2,24 +2,6 @@
 $primary: #262362;
 $secondary: #ffffff;
 
-// Custom styles.
-a.doc-table-anchor {
-    display: block;
-    position: relative;
-    top: -75px;
-    visibility: hidden;
-}
-
-.td-navbar {
-    .navbar-brand {
-        .navbar-logo {
-             svg {
-                 width: auto;
-             }
-        }
-    }
-}
-
 // Fonts.
 $google_font_name: "Roboto";
 $google_font_family: "Roboto";
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
new file mode 100644
index 000000000..607e2cf23
--- /dev/null
+++ b/assets/scss/main.scss
@@ -0,0 +1,58 @@
+@import "support/functions";
+@import "variables_project";
+@import "variables";
+@import "support/mixins";
+
+@import "../vendor/bootstrap/scss/bootstrap";
+
+@import "../vendor/Font-Awesome//web-fonts-with-css/scss/fontawesome.scss";
+@import "../vendor/Font-Awesome//web-fonts-with-css/scss/fa-solid.scss";
+@import "../vendor/Font-Awesome//web-fonts-with-css/scss/fa-brands.scss";
+
+@import "support/utilities";
+@import "colors";
+@import "boxes";
+@import "blog";
+@import "code";
+@import "nav";
+@import "sidebar-tree";
+@import "sidebar-toc";
+@import "buttons";
+@import "breadcrumb";
+@import "alerts";
+@import "content";
+@import "search";
+@import "main-container";
+@import "blocks/blocks";
+
+@if $td-enable-google-fonts {
+    @import url($web-font-path);
+}
+
+footer {
+    min-height: 150px;
+
+    @include media-breakpoint-down(md) {
+         min-height: 200px;
+    }
+}
+
+// Adjust anchors vs the fixed menu.
+@include media-breakpoint-up(md) {
+    .td-offset-anchor:target {
+        display: block;
+        position: relative;
+        top: -4rem;
+        visibility: hidden;
+    }
+
+    h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before {
+        display: block;
+        content: " ";
+        margin-top: -5rem;
+        height: 5rem;
+        visibility: hidden;
+    }
+}
+
+@import "custom_styles";
diff --git a/content/_index.html b/content/_index.html
index 147e38090..3fb296cdf 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -5,9 +5,9 @@ description = "A container sandbox runtime focused on security, efficiency, and
 +++
 
 {{< blocks/cover image_anchor="top" height="auto" color="primary" title="gVisor" >}}
-<div class="mx-auto" style="margin-bottom: 8rem !important;">
-  <p class="lead" style="font-size: 1.6rem">A container sandbox runtime focused on <strong>security</strong>, <strong>efficiency</strong>, and <strong>ease of use</strong>.</p>
-  <a class="btn btn-lg btn-secondary mr-3 mb-4" href="./docs/user_guide/docker/">Quick Start<i class="fas fa-arrow-alt-circle-right ml-2"></i></a>
+<div class="mx-auto">
+  <p class="lead">A container sandbox runtime focused on <strong>security</strong>, <strong>efficiency</strong>, and <strong>ease of use</strong>.</p>
+  <a class="btn btn-lg btn-primary mr-3 mb-4" href="./docs/user_guide/docker/" >Quick Start<i class="fas fa-arrow-alt-circle-right ml-2"></i></a>
   <a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/google/gvisor" rel="noopener">GitHub <i class="fab fa-github ml-2"></i></a>
 </div>
 {{< /blocks/cover >}}
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html
new file mode 100644
index 000000000..d602b8480
--- /dev/null
+++ b/layouts/shortcodes/blocks/cover.html
@@ -0,0 +1,37 @@
+{{ $blockID := printf "td-cover-block-%d" .Ordinal }}
+{{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" }}
+{{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" }}
+{{ $col_id := .Get "color" | default "dark" }}
+{{ $image_anchor := .Get "image_anchor" | default "smart" }}
+{{ $logo_anchor := .Get "logo_anchor" | default "smart" }}
+{{/* Height can be one of: auto, min, med, max, full. */}}
+{{ $height := .Get "height" | default "max"  }}
+{{ with $promo_image }}
+{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }}
+{{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) }}
+<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
+<link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
+<style>
+#{{ $blockID }} {
+    background-image: url({{ $promo_image_small.RelPermalink }}); 
+}
+@media only screen and (min-width: 1200px) {
+    #{{ $blockID }} {
+        background-image: url({{ $promo_image_big.RelPermalink }}); 
+    }
+}
+</style>
+{{ end }}
+<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }}">
+  <div class="container td-overlay__inner">
+    <div class="row">
+      <div class="col-12">
+        {{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
+        {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
+        <div class="pt-3 lead">
+          {{ .Inner }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>