Centralize base styles for docs.bazel.build using bazel-website's css The base style.scss is already identical between the two sites; this PR pulls it from bazel-website instead of having a local copy. Like https://github.com/bazelbuild/bazel-blog/pull/225, but for docs.bazel.build For bazelbuild/bazel#10793 Closes #11376. PiperOrigin-RevId: 311500094
diff --git a/WORKSPACE b/WORKSPACE index 7a65056..0ab394d 100644 --- a/WORKSPACE +++ b/WORKSPACE
@@ -567,6 +567,7 @@ load("//scripts/docs:doc_versions.bzl", "DOC_VERSIONS") +# Load versioned documentation tarballs from GCS [http_file( # Split on "-" to get the version without cherrypick commits. name = "jekyll_tree_%s" % DOC_VERSION["version"].split("-")[0].replace(".", "_"), @@ -574,6 +575,20 @@ urls = ["https://mirror.bazel.build/bazel_versioned_docs/jekyll-tree-%s.tar" % DOC_VERSION["version"]], ) for DOC_VERSION in DOC_VERSIONS] +# Load shared base CSS theme from bazelbuild/bazel-website +http_archive( + name = "bazel_website", + urls = ["https://github.com/bazelbuild/bazel-website/archive/c174fa288aa079b68416d2ce2cc97268fa172f42.tar.gz"], + strip_prefix = "bazel-website-c174fa288aa079b68416d2ce2cc97268fa172f42", + sha256 = "a5f531dd1d62e6947dcfc279656ffc2fdf6f447c163914c5eabf7961b4cb6eb4", + # TODO(https://github.com/bazelbuild/bazel/issues/10793) + # - Export files from bazel-website's BUILD, instead of doing it here. + # - Share more common stylesheets, like footer and navbar. + build_file_content = """ +exports_files(["_sass/style.scss"]) +""" +) + # Skydoc recommends declaring its dependencies via "*_dependencies" functions. # This requires that the repositories these functions come from need to be # fetched unconditionally for everything (including just building bazel!), so @@ -907,4 +922,3 @@ load("//tools/distributions/debian:deps.bzl", "debian_deps") debian_deps() -
diff --git a/site/BUILD b/site/BUILD index 000d617..603de25 100644 --- a/site/BUILD +++ b/site/BUILD
@@ -28,6 +28,15 @@ visibility = ["//:__pkg__"], ) +# Required to move the shared CSS Files from the external repo's execroot location +# to the _sass location expected by the local css/main.scss imports. +genrule( + name = "style-common", + srcs = ["@bazel_website//:_sass/style.scss"], + outs = ["_sass/style.scss"], + cmd = "cp $< $@", +) + filegroup( name = "jekyll-srcs", srcs = glob( @@ -40,7 +49,9 @@ "command-line-reference-suffix.html", "site/README.md", ] + DOT_GRAPH_HTML_FILES, - ), + ) + [ + ":style-common", + ], ) pkg_tar(
diff --git a/site/_sass/style.scss b/site/_sass/style.scss deleted file mode 100644 index 80f1a65..0000000 --- a/site/_sass/style.scss +++ /dev/null
@@ -1,246 +0,0 @@ -// Heading sizes - -$font-size-base: 14px !default; - -$h1-font-size: $font-size-base * 2.25 !default; -$h2-font-size: $font-size-base * 2 !default; -$h3-font-size: $font-size-base * 1.5 !default; -$h4-font-size: $font-size-base * 1.35 !default; -$h5-font-size: $font-size-base * 1.15 !default; -$h6-font-size: $font-size-base !default; - -// Font weights - -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-medium: 500 !default; -$font-weight-bold: 700 !default; - -$font-weight-body-text: $font-weight-normal !default; -$headings-font-weight: $font-weight-medium !default; - -// Bazel logo colors -$bazel-green: #43a047; -$bazel-green-light: #76d275; -$bazel-green-dark-left: #00701a; -$bazel-green-dark-right: #004300; -$color-on-bazel-green: #fff; - -$body-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, - sans-serif; -$code-font-family: 'Monaco', 'Source Code Pro', monospace; - -$link-color: $bazel-green-dark-left; -$link-hover-color: lighten($link-color, 20%); -$well-color: #eee; -$code-color: #000; -$text-color: #000; - -$vpad: 0px; - -$table-bg: #fff; -$table-cell-padding: 5px; -$table-border-color: $bazel-green; -$text-muted: $color-on-bazel-green; -$line-height-base: 1.5; -$line-height-computed: 1.5; - -html { - position: relative; - min-height: 100%; - font-size: 100%; -} - -body { - padding-top: 50px; - color: $text-color; - font-family: $body-font-family; - line-height: $line-height-base; -} - -a { - color: $link-color; - font-weight: $font-weight-medium; - - &:hover, - &:focus { - color: $link-hover-color; - } - - code { - color: $link-color; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - color: $text-color; - margin-top: 2rem; - margin-bottom: 1rem; -} - -h1 code, -h2 code, -h3 code, -h4 code, -h5 code, -h6 code { - color: $text-color; - background: transparent; -} - -h1 { - font-size: $h1-font-size; - font-weight: $font-weight-bold; -} - -h2 { - font-size: $h2-font-size; - - code { - font-size: 24px; - } -} - -h3 { - font-size: $h3-font-size; - - code { - font-size: 20px; - } -} - -h4 { - font-size: $h4-font-size; - - code { - font-size: 18px; - } -} - -h5 { - font-size: $h5-font-size; -} - -h6 { - font-size: $h6-font-size; -} - -p, -li { - font-size: $font-size-base; - line-height: $line-height-base; -} - -pre { - padding: 8px 16px; - margin: 8px 0; - font-family: $code-font-family; - background-color: $well-color; - border: 0; - font-size: 100%; - line-height: 20px; - color: $code-color; - border-radius: 6px; - box-shadow: 1px 1px 5px #aaa; -} - -code { - font-family: $code-font-family; - font-size: 13px; - background-color: $well-color; - color: $code-color; -} - - -// Imitate material design buttons -.btn-lg { - font-size: 14px; - text-transform: uppercase; -} - -$md-shadow-1: rgba(0, 0, 0, .14); -$md-shadow-2: rgba(0, 0, 0, .2); -$md-shadow-3: rgba(0, 0, 0, .12); - - -@media (min-width: 768px) { - .container { - width: 100%; - max-width: 100%; - } -} - -@media (min-width: 992px) { - .content { - max-width: 85%; - } -} - -.content { - padding: 40px 10px; - p { - line-height: 22px; - margin-bottom: 1rem; - } -} - -.btn-success { - border-radius: 2px; - box-shadow: 0 2px 2px 0 $md-shadow-1, 0 3px 1px -2px $md-shadow-2, 0 1px 5px 0 $md-shadow-3; - border: 0; -} - -.well { - background-color: $well-color; - border-color: $well-color; - box-shadow: none; -} - -// Shared -.vpad { - padding-top: $vpad; -} - -.page-title-bar { - background-color: $bazel-green-light; - padding-top: 20px; - padding-bottom: 20px; - - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 8px 0 4px; - color: $color-on-bazel-green; - } -} - -.gsc-control-cse { - *, - *::before, - *::after { - -webkit-box-sizing: content-box !important; - -moz-box-sizing: content-box !important; - box-sizing: content-box !important; - } -} - -// Used for the Command-line Reference flag anchors. Linkifying the flag name -// causes it to turn $link-color (green), but we turn it red here to be consistent -// with the rest of the code block. -dd > code > a, -dl > dt > code > a { - color: $code-color; -} - -dl > dt { - margin-top: 1.5rem; - margin-bottom: .5rem; -}