diff options
| -rw-r--r-- | assets/scss/_custom_styles.scss | 43 | ||||
| -rw-r--r-- | assets/scss/_variables_project.scss | 18 | ||||
| -rw-r--r-- | assets/scss/main.scss | 58 | ||||
| -rw-r--r-- | content/_index.html | 6 | ||||
| -rw-r--r-- | layouts/shortcodes/blocks/cover.html | 37 |
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> |