From 508e25b6d6e9a81edb6ddf8738450b79898b446a Mon Sep 17 00:00:00 2001 From: Adin Scannell Date: Mon, 27 Apr 2020 22:24:58 -0700 Subject: Adapt website to use g3doc sources and bazel. This adapts the merged website repository to use the image and bazel build framework. It explicitly avoids the container_image rules provided by bazel, opting instead to build with direct docker commands when necessary. The relevant build commands are incorporated into the top-level Makefile. --- website/_sass/footer.scss | 15 +++++ website/_sass/front.scss | 22 ++++++++ website/_sass/navbar.scss | 26 +++++++++ website/_sass/sidebar.scss | 60 ++++++++++++++++++++ website/_sass/style.scss | 137 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 260 insertions(+) create mode 100644 website/_sass/footer.scss create mode 100644 website/_sass/front.scss create mode 100644 website/_sass/navbar.scss create mode 100644 website/_sass/sidebar.scss create mode 100644 website/_sass/style.scss (limited to 'website/_sass') diff --git a/website/_sass/footer.scss b/website/_sass/footer.scss new file mode 100644 index 000000000..32b265a44 --- /dev/null +++ b/website/_sass/footer.scss @@ -0,0 +1,15 @@ +.footer { + margin-top: 40px; + background-color: #222222; + color: #ffffff; + padding: 20px; + + a { + color: $inverse-link-color; + + &:hover, + &:focus { + color: $inverse-link-hover-color; + } + } +} diff --git a/website/_sass/front.scss b/website/_sass/front.scss new file mode 100644 index 000000000..cb0d6f147 --- /dev/null +++ b/website/_sass/front.scss @@ -0,0 +1,22 @@ +.jumbotron { + background-color: transparent; + background-image: url("/assets/images/background.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + p { + color: #eeeeee; + margin-top: 0; + margin-bottom: 0; + font-weight: 300; + } + .btn { + color: $text-color; + background-color: $inverse-link-color; + } + .btn-inverse { + color: $text-color; + background-color: #ffffff; + } +} diff --git a/website/_sass/navbar.scss b/website/_sass/navbar.scss new file mode 100644 index 000000000..33dbc7c4b --- /dev/null +++ b/website/_sass/navbar.scss @@ -0,0 +1,26 @@ +.navbar-inverse { + background-color: $primary; + border-bottom: 1px solid $primary; + + .navbar-brand > a { + color: #ffffff; + + &:focus, + &:hover { + color: #ffffff; + } + } + + .navbar-nav > li > a { + color: $inverse-link-color; + + &:focus, + &:hover { + color: $inverse-link-hover-color; + } + } + + .navbar-nav .nav-icon { + font-size: 18px; + } +} diff --git a/website/_sass/sidebar.scss b/website/_sass/sidebar.scss new file mode 100644 index 000000000..f6745f087 --- /dev/null +++ b/website/_sass/sidebar.scss @@ -0,0 +1,60 @@ +$sidebar-border-color: #fff; +$sidebar-hover-border-color: #66bb6a; + +.sidebar { + margin-top: 40px; + + ul.sidebar-nav { + list-style-type: none; + padding: 0; + + li { + &.sidebar-nav-heading { + padding: 10px 0; + margin: 0; + display: block; + font-size: 16px; + font-weight: 300; + } + + a { + padding: 4px 0; + display: block; + border-right: 2px solid $sidebar-border-color; + + &:focus { + text-decoration: none; + } + + .caret { + float: right; + margin-top: 8px; + margin-right: 10px; + } + } + + &.active { + a { + border-left: 2px solid $sidebar-hover-border-color; + padding-left: 6px; + } + } + } + + ul.sidebar-nav { + padding-left: 10px; + } + } +} + +@media (min-width: 992px) { + .sidebar-toggle { + display: none; + } + + .sidebar { + &.collapse { + display: block; + } + } +} diff --git a/website/_sass/style.scss b/website/_sass/style.scss new file mode 100644 index 000000000..e9cc54d24 --- /dev/null +++ b/website/_sass/style.scss @@ -0,0 +1,137 @@ +$primary: #262362; +$secondary: #ffffff; +$link-color: #286FD7; +$inverse-link-color: #FFFFFF; + +$link-hover-color: darken($link-color, 10%); +$inverse-link-hover-color: darken($inverse-link-color, 10%); + +$text-color: #444; + +$body-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$code-font-family: 'Source Code Pro', monospace; + +html { + position: relative; + min-height: 100%; +} + +body { + color: $text-color; + font-family: $body-font-family; + padding-top: 40px; +} + +a { + color: $link-color; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: none; + } + + code { + color: $link-color; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $text-color; + font-weight: 400; +} + +h1 code, +h2 code, +h3 code, +h4 code, +h5 code, +h6 code { + color: $text-color; + background: transparent; +} + +h1 { + font-size: 30px; + margin-top: 40px; + margin-bottom: 40px; +} + +h2 { + font-size: 24px; + margin-top: 30px; + margin-bottom: 30px; + + code { + font-size: 24px; + } +} + +h3 { + font-size: 20px; + margin-top: 24px; + margin-bottom: 24px; + + code { + font-size: 20px; + } +} + +h4 { + font-size: 18px; + margin-top: 20px; + margin-bottom: 20px; + + code { + font-size: 18px; + } +} + +p, +li { + font-size: 14px; + line-height: 22px; +} + +code { + font-family: $code-font-family; + font-size: 13px; +} + +.btn { + background-color: $primary; +} + +.well { + box-shadow: none; +} + +table { + width: 100%; +} + +table td, table th { + border: 1px solid #ddd; + padding: 8px; +} + +table tr:nth-child(even) { + background-color: #eee; +} + +table th { + padding-top: 12px; + padding-bottom: 12px; + background-color: $primary; + color: $secondary; +} + +.blog-meta { + margin-top: 10px; + margin-bottom: 20px; +} -- cgit v1.2.3 From b6ba247fa665099fabdf845947a4e1eedb8cce13 Mon Sep 17 00:00:00 2001 From: Adin Scannell Date: Tue, 28 Apr 2020 00:39:29 -0700 Subject: Update main landing page. --- website/_sass/front.scss | 4 +++- website/index.md | 41 +++++++++++++++-------------------------- 2 files changed, 18 insertions(+), 27 deletions(-) (limited to 'website/_sass') diff --git a/website/_sass/front.scss b/website/_sass/front.scss index cb0d6f147..1c7f58ecb 100644 --- a/website/_sass/front.scss +++ b/website/_sass/front.scss @@ -4,9 +4,11 @@ background-position: center; background-repeat: no-repeat; background-size: cover; + background-blend-mode: darken; + background-color: rgba(0,0,0,0.1); p { - color: #eeeeee; + color: #fff; margin-top: 0; margin-bottom: 0; font-weight: 300; diff --git a/website/index.md b/website/index.md index f09a7e89e..31587fc2f 100644 --- a/website/index.md +++ b/website/index.md @@ -1,38 +1,27 @@ --- -title: gVisor layout: base --- -
-
-

Efficient defense-in-depth for container infrastructure anywhere.

-

- Get Started  - GitHub  -

+
+
+
+
+

gVisor is an application kernel and container runtime providing defense-in-depth for containers anywhere.

+

+ Get Started  + GitHub  +

+
+
+
- - -
-
-

Container-native Security

+

Container-native Security

By providing each container with its own application kernel instance, gVisor limits the attack surface of the host while still integrating seamlessly with popular container orchestration systems, such as Docker and @@ -44,7 +33,7 @@ layout: base

-

Resource Efficiency

+

Resource Efficiency

Containers are efficient because workloads of different shapes and sizes can be packed together by sharing host resources. By using host native abstractions such as threads and memory mappings, gVisor closely co-operates @@ -56,7 +45,7 @@ layout: base

-

Platform Portability

+

Platform Portability ☁☁

Modern infrastructure spans multiple clouds and data centers, often using a mix of virtualized instances and traditional servers. The pluggable platform architecture of gVisor allows it to run anywhere, enabling security -- cgit v1.2.3 From 73d7024510181449fd744daed40b247eb6dfe64f Mon Sep 17 00:00:00 2001 From: Adin Scannell Date: Tue, 28 Apr 2020 13:01:56 -0700 Subject: Fixup transitions for navbar. --- website/_sass/sidebar.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'website/_sass') diff --git a/website/_sass/sidebar.scss b/website/_sass/sidebar.scss index f6745f087..ce69bc504 100644 --- a/website/_sass/sidebar.scss +++ b/website/_sass/sidebar.scss @@ -7,6 +7,7 @@ $sidebar-hover-border-color: #66bb6a; ul.sidebar-nav { list-style-type: none; padding: 0; + transition: height 0.01s; li { &.sidebar-nav-heading { -- cgit v1.2.3 From a10d5ed9691d341c60dc8590d19302332120d365 Mon Sep 17 00:00:00 2001 From: Adin Scannell Date: Wed, 29 Apr 2020 18:00:21 -0700 Subject: Add atom feed (at previous URL). --- images/jekyll/Dockerfile | 3 ++- website/_config.yml | 3 +++ website/_layouts/blog.html | 5 ++++- website/_sass/front.scss | 8 -------- website/_sass/style.scss | 8 +++++++- website/blog/index.html | 1 + 6 files changed, 17 insertions(+), 11 deletions(-) (limited to 'website/_sass') diff --git a/images/jekyll/Dockerfile b/images/jekyll/Dockerfile index d0ec7f933..db8fec95c 100644 --- a/images/jekyll/Dockerfile +++ b/images/jekyll/Dockerfile @@ -7,5 +7,6 @@ RUN gem install \ jekyll-inline-svg:1.1.4 \ jekyll-paginate:1.1.0 \ kramdown-parser-gfm:1.1.0 \ - jekyll-relative-links:0.6.1 + jekyll-relative-links:0.6.1 \ + jekyll-feed:0.13.0 CMD ["/usr/gem/gems/jekyll-4.0.0/exe/jekyll", "build", "-t", "-s", "/input", "-d", "/output"] diff --git a/website/_config.yml b/website/_config.yml index bcbc94eda..3241e458c 100644 --- a/website/_config.yml +++ b/website/_config.yml @@ -11,7 +11,10 @@ plugins: - jekyll-autoprefixer - jekyll-inline-svg - jekyll-relative-links + - jekyll-feed site_url: https://gvisor.dev +feed: + path: blog/index.xml svg: optimize: true defaults: diff --git a/website/_layouts/blog.html b/website/_layouts/blog.html index e6b880225..6c371ab50 100644 --- a/website/_layouts/blog.html +++ b/website/_layouts/blog.html @@ -6,7 +6,10 @@ layout: base

-

{{ page.title }}

+

{{ page.title }}

+ {% if page.feed %} + Feed  + {% endif %} {{ content }}
diff --git a/website/_sass/front.scss b/website/_sass/front.scss index 1c7f58ecb..3cd87ce40 100644 --- a/website/_sass/front.scss +++ b/website/_sass/front.scss @@ -13,12 +13,4 @@ margin-bottom: 0; font-weight: 300; } - .btn { - color: $text-color; - background-color: $inverse-link-color; - } - .btn-inverse { - color: $text-color; - background-color: #ffffff; - } } diff --git a/website/_sass/style.scss b/website/_sass/style.scss index e9cc54d24..e34e21448 100644 --- a/website/_sass/style.scss +++ b/website/_sass/style.scss @@ -104,7 +104,13 @@ code { } .btn { - background-color: $primary; + color: $text-color; + background-color: $inverse-link-color; +} + +.btn-inverse { + color: $text-color; + background-color: #ffffff; } .well { diff --git a/website/blog/index.html b/website/blog/index.html index 57051c6fe..5c67c95fc 100644 --- a/website/blog/index.html +++ b/website/blog/index.html @@ -1,6 +1,7 @@ --- title: Blog layout: blog +feed: true pagination: enabled: true --- -- cgit v1.2.3